https://github.com/haminimi/gallery
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.
https://github.com/haminimi/gallery
album animations eslint gallery image-carousel javascript prettier prettier-eslint theodinproject webpack
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/haminimi/gallery
- Owner: Haminimi
- Created: 2023-12-02T09:13:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T12:58:10.000Z (about 2 years ago)
- Last Synced: 2025-07-07T13:43:41.511Z (12 months ago)
- Topics: album, animations, eslint, gallery, image-carousel, javascript, prettier, prettier-eslint, theodinproject, webpack
- Language: JavaScript
- Homepage: https://haminimi.github.io/gallery/
- Size: 1.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gallery 🌄
## Description
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](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions#image-slider) from [The Odin Project](https://www.theodinproject.com/dashboard). 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.
## [Live Preview](https://haminimi.github.io/gallery/)
## Main Features
- **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**
## Tech
**The project is built with:**
- HTML
- Vanilla JavaScript
- Vanilla CSS
**Tools**
- Visual Studio Code
- Git
- Webpack
## Covered Topics
**This section mentions the main topics covered during project work and prior lessons**
- Linting / ESLint
- Formatting / Prettier
- Animations
- Modules
- Webpack
## Reflection
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.
## Credits
- Sticker used for the favicon image is one of the [Gallery icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/gallery).
**Images**
- Photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-large-mountain-with-a-snow-covered-peak-3a6r6TEhU4A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
- Photo by [Aleksandr Popov](https://unsplash.com/@5tep5?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-view-of-the-ocean-from-a-cliff-V3snakBbbfY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
- Photo by [Marek Piwnicki](https://unsplash.com/@marekpiwnicki?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-mountain-range-with-a-star-trail-in-the-sky-WXx-J0J4Lzo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
- Photo by [Abhi Verma](https://unsplash.com/@abhiver?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-large-rock-sticking-out-of-the-ocean-next-to-a-beach-L9GRWQqN3oA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
- Photo by [Matteo Piscioneri](https://unsplash.com/@matteo_skyrider?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/cLyo0L_EItY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
## Happy Coding!