This project is a simple web application that displays a list of your favorite superheroes. It allows you to view detailed information about each superhero and remove them from your favorites list. The application uses local storage to manage the list of favorite superheroes.
This web application showcases a list of favorite superheroes. You can view details of each superhero and manage your favorites list by removing superheroes. The application is built using HTML, CSS, and JavaScript.
- Display a list of favorite superheroes.
- Fetch and display superhero details dynamically.
- Remove superheroes from the favorites list.
- Persist favorite superheroes using local storage.
css/style.css: Contains the styling for the application.js/fav.js: Handles fetching and displaying favorite superheroes.js/script.js: Contains additional scripts and utilities.index.html: The main HTML file for the application.
-
Clone the repository:
git clone https://github.com/riships/superhero-hunter.git
-
Navigate to the project directory:
cd superhero-hunter -
Open
index.htmlin your preferred web browser.
-
Display Favorite Superheroes: The list of favorite superheroes is displayed on page load based on the IDs stored in the local storage.
-
Remove from Favorites: Click the "Remove from Favourite" button to remove a superhero from the favorites list. The list will automatically update.
let favList = document.getElementById('superhero-list');
function favHeroDataFunc(characterArr) {
let favSuperheroIds = JSON.parse(localStorage.getItem('favHeroId')) || []
let favSuperheroes;
if (characterArr != undefined && characterArr != null && characterArr != '') {
favSuperheroes = characterArr.filter(characterItem => favSuperheroIds.includes(characterItem.id))
}
let characterHTML = '';
let superheroList = document.getElementById('superhero-list');
favSuperheroes.forEach(character => {
characterHTML += `
<div class="character-card">
<div onclick="heroData(${character.id})">
<h2>${character.name}</h2>
<img src="${character.thumbnail.path}.${character.thumbnail.extension}" alt="${character.name}">
<p>${character.description || 'No description available.'}</p>
</div>
<button onclick="removeFromFav(${character.id})">Remove from Favourite</button>
</div>`;
});
if (superheroList != null && superheroList != '') {
superheroList.innerHTML = characterHTML;
}
}
function removeFromFav(characterId) {
let favSuperheroIds = JSON.parse(localStorage.getItem('favHeroId')) || []
let removedFavSuperheroes = favSuperheroIds.filter(favSuperheroId => favSuperheroId !== characterId);
window.localStorage.setItem('favHeroId', JSON.stringify(removedFavSuperheroes));
favHeroDataFunc(characterArr)
}This project is licensed under the MIT License. See the LICENSE file for details.