# pui-hw5-and-hw6

Website prototype for Muddy Paws Adventure Gear, by Martina Tan
HW 5 and 6A/6B for Programming Usable Interfaces at CMU, Fall 2021

Images are taken from Unsplash and Pixabay, so thanks to all the amazing contributors there!

See HW 5 website here: https://martinatan.github.io/pui-hw5-and-hw6/homework_5/
See HW 6A website here: https://martinatan.github.io/pui-hw5-and-hw6/homework_6a/index.html
See HW 6B website here: https://martinatan.github.io/pui-hw5-and-hw6/homework_6b/index.html

# NOTES for HW 5
I have coded the Articles and About Us pages in addition to the required Home, Shop, 
and Product Details pages. You can view them by clicking on "Articles" and "About Us"
on the header and footer nav menus.

I have also coded more than one product detail page. The two pages you can view are for
the Dog Harness (https://martinatan.github.io/pui-hw5-and-hw6/homework_5/dog-harness.html) and the
Cat GPS Tracker Collar (https://martinatan.github.io/pui-hw5-and-hw6/homework_5/cat-gps-tracker-collar.html).

# NOTES for HW 6A
The Shopping Bag page, to view all items in the Bag, can be reached by clicking on the Bag icon
in the top right of aany page on the website. Or you can reach the page directly at the following URL:
https://martinatan.github.io/pui-hw5-and-hw6/homework_6a/bag.html

You can test the editable Product Detail page with feedback by going to the Product Detail page
for the Cat GPS Tracker Collar OR the Dog Harness. The color, size, and quantity can all be changed with
feedback on the page, and these product settings can then be added to the Bag by clicking the "Add to Bag"
button. See how the quantity in the shopping bag icon increases as you Add to Bag!

# NOTES for HW 6B
On this version of the prototype, the user is now able to visit the Dog Harnesss page and add the product
in separate quantities of different color and size combinations. This is reflect as 1 item per combination
in the Bag icon at the top right.

The user can then visit the Shopping Bag, view the details of their Bag,
and view the subtotal, additional fee, and total price of the items in the Bag.

The user can also remove individual items or clear the Bag, and see these changes reflected immediately.

Thanks for viewing! I hope you enjoy exploring the prototype.