HTML/CSS Standardization

[jonathan-ty]

This task involves...

• Removing redundancies in CSS selectors (Multiple CSS selectors that share the same properties in different webpages can be shared in one CSS file, etc.)
• Removing selectors that serve no purpose (IDs or classes for HTML elements that don't necessarily need IDs or classes associated with them)
• Standardizing the look of all webpages (i.e. same background-image, similar button animation, etc.)
• Making our website look cool! 😎

Task List of Webpages to Standardize:

• [x] compare-stores.html
• [x] index.html
• [ ] item-price.html (this web page needs to be worked on, nothing to standardize)
• [x] make-list.html
• [x] receipt.html (this web page needs to be worked on, nothing to standardize)
• [ ] user-authentication.html
• [x] user-page.html

[jonathan-ty]

Currently working on make-list.css, make-list.html, and make-list.js file. Any notes that I've made in this comment are changes I made that I believe require discussion:

make-list.css

• Removing hover animation for next-page-buttons, the decrease in opacity seems unnecessary
• Removed CSS selectors that were commented on and made no impact on the design of the webpage
• Resized next-page-buttons to match the sizes from other web pages
• Changed background color of the columns + added borders to the images of food items
• Fixed border-radius issues concerning the columns for the dashboard
• Changed padding/margins for the grocery list items

make-list.html

• No changes were made to this file

make-list.js

• Tweaked the JS animation for list name editing to return the original background-color

[jonathan-ty]

Currently working on receipt.html file. Any notes that I've made in this comment are changes I made that I believe require discussion:

• Removed the edit list name for the receipt.html webpage, decided it didn't seem necessary to have on the receipt page.
• Matched display background color with that from make-list.html.

[jonathan-ty]

Currently working on compare-stores.html, compare-stores.js, and compare-stores.css file. Any notes that I've made in this comment are changes I made that I believe require discussion:

• Removed the JS feature where the background color of the storeTitle was set to some random hex color. Alternatively, I made a list of 30 or so colors complementary to our website's color pallette that would be randomly assigned to the storeTitleBar
• Resizing of the list name, pencil, and the add-store + add-item buttons
• Consistent animation from previous webpages applied unto this webpage (add-store/add-item buttons)
• border-radius adjustments