Started with a simple HTML structure: added a title, a button (What's in my Bag), and an empty list (ul) to display the images later.
Navigation Menu:
Threw in a basic navigation bar with links to "Home" and "Week 5" for easy navigation between pages.
JavaScript for Button Click:
Wrote a click event for the button that reveals images from an array, one at a time, with each button press.
Initially hit a roadblock because of a small typo (item[index] instead of items[index]), but once I fixed that, the images started showing up.
Showing Descriptions:
After all the images were displayed, I wanted to show descriptions on continued button presses. I added a simple condition to handle that.
Styling the Button:
Made the button big and nice by adding some CSS—rounded corners, a soft green background, and a hover effect for a polished look.
Resizing Images:
Realized the images were too large, so I added a quick fix in CSS to resize them.
Adding a Gradient Background:
To make the page look better, I used a baby pink gradient for the background, and it added to the girly feel of the bag.
Testing:
After testing and tweaking, the button worked as expected—first showing images, then descriptions—and everything looked good.