website is live at: https://somya-pradhan.github.io/MarvelPedia/
The MarvelPedia is a solo project, a web-based application designed for Marvel enthusiasts to explore detailed information about various Marvel characters and create a personalized list of their favourites. This project aims to provide an engaging and interactive platform for users to dive into the Marvel universe, learn about their favourite characters, and keep track of their top picks.
1. Dark Mode Toggle:
- A dark mode button allows users to switch between light and dark themes for a comfortable viewing experience.
2. Responsive Dropdown Menu:
- A dropdown menu containing all page links appears on smaller screens, ensuring easy navigation on all devices.
3. Home Page:
-
Fetch and display detailed information about Marvel characters using the Marvel API.
-
Display character profiles with images, background details, and more.
-
Showcase a wide list of superheroes with individual cards.
-
Each superhero/character card includes:
- Add to Favourite button: Adds the superhero/character to the user's favourite list.
- While attempting to add a superhero/character already in the favourites list, it alerts the user with a popup message stating that the superhero/character is already added to their favourites.
- Details button: Opens a new page with extensive details about the character.
4. Search Functionality:
- A search bar enables users to find specific superheroes/characters by typing their names.
- If no superhero/character is found, a message "No superhero found" is displayed.
5. Favourite Superheros/Characters Page:
-
Displays a list of superheroes/character added to the favourites.
-
Each favourite superhero/character card includes:
- Remove from List button: Removes the superhero/character from the favourite list.
- Details button: Functions similarly to the home page, opening a detailed character page.
- Frontend:
HTML, CSS, Bootstap & JavaScript
- API:
Marvel API
for fetching character details. - Icons:
FontAwesome
to bring a stylish and intuitive visual experience.
03. Home Page: search functionality displays a No superhero found
message in light mode
04. Home Page: search functionality displays a No superhero found
message in dark mode
07. Dropdown Menu in Light Mode
08. Dropdown Menu in Dark Mode
09. Superhero/Character Details Page
10. Favourite Superhero Page: When favourite superhero list is empty
in light mode
11. Favourite Superhero Page: When favourite superhero list is empty
in dark mode
12. Favourite Superhero Page in Light Mode
13. Favourite Superhero Page in Dark Mode
14. Home Page: Attempting to add a superhero already in the favorites list triggers a popup alerting Superhero is already added
in light mode
15. Home Page: Attempting to add a superhero already in the favorites list triggers a popup alerting Superhero is already added
in dark mode