The Gallery app where you can easily add and delete images, switch between them, and jump to any image in the gallery using the navigation bar. The project was inspired by this assignment from The Odin Project. Although it's not one of the regular TOP curriculum projects, I treated it as a standard project. The Odin Project provides a high quality web development education maintained by an open source community.
- Add and Delete: Easily add and delete images in the gallery.
- Navigation Bar: Jump to any image in the gallery without the need to manually switch using the previous and next buttons.
- Responsive Design: The app provides a consistent user experience and a user-friendly interface across various screen sizes.
To Do:
- Multiple Albums
- Drag and Reorder
- Take Image With Camera
The project is built with:
- HTML
- Vanilla JavaScript
- Vanilla CSS
Tools
- Visual Studio Code
- Git
- Webpack
This section mentions the main topics covered during project work and prior lessons
- Linting / ESLint
- Formatting / Prettier
- Animations
- Modules
- Webpack
There is an interesting issue when running the app in Chrome. I can't add the same image more than once, however, in Firefox, everything works as it should. You are able to add the same image as many times as you want. At the moment I am not aware of the reason for this behavior.
I experimented a bit with the PubSub pattern. Images are updated after adding or deleting, the modules where the change is happening publish this change, and the main module subscribes to it, updating the images across all modules.
Currently, the app isn't actually a gallery, but rather an image carousel or just an album. However, in the future, I may revisit the project and upgrade it to a fully working gallery app with all basic functionalities.
- Sticker used for the favicon image is one of the Gallery icons created by Freepik - Flaticon.
Images
- Photo by Marek Piwnicki on Unsplash.
- Photo by Aleksandr Popov on Unsplash.
- Photo by Marek Piwnicki on Unsplash.
- Photo by Abhi Verma on Unsplash.
- Photo by Matteo Piscioneri on Unsplash.