The original premise of this project was to build a simple photo gallery using basic JavaScript. Wanting to learn more about the React.js library and wanting to apply what I was learning to an actual project I rebuilt this photo gallery assignment using what I learned of React.js. The overall functionality is exactly the same as the previous version of the project but in this variation I utilize the tools and functionality of React.js such as the use of JSX, component, props and hooks.
There are 3 primary features of this photo gallery application
- An active border class appears around the selected thumbnail image
- When clicked, the selected thumbnail image replaces the larger image displayed
- The caption describing the selected image changes to correspond with each individual image
The photo gallery application is very simple to use. Users are displayed a webpage with five small images (serving as thumbnails) above a large imager image with an image caption underneath. The larger image and caption are automatically defaulted to the first of the five thumbnail images. The user simply clicks on one of the five thumbnail images to change the larger image displayed and it's caption. An active border class is added to the selected thumbnail image to show the user which thumbnail is currently selected.
- HTML
- CSS
- JavaScript (React.js)
- create-react-app
I was the sole collaborator on this project.