All files are commited

satyam-software-developer · Sep 24, 2024 · a1bc129 · a1bc129
commit a1bc129
Show file tree

Hide file tree

Showing 14 changed files with 2,292 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,124 @@
+# Superhero Hunter
+
+Superhero Hunter using vanilla JavaScript project for frontend web development.
+
+1. Git repository link: https://github.com/satyam-software-developer/stopwatch-vanilla-javascript.git
+2. Hosted link: https://satyam-software-developer.github.io/stopwatch-vanilla-javascript/
+
+## Overview
+
+The Superhero Hunter App is a web application that allows users to search for superheroes using the Marvel API. It displays a list of superheroes based on user input and provides additional information on each superhero. The app also includes a feature to mark superheroes as favorites and view them on a separate page. This app is built using vanilla JavaScript and Marvel’s API, styled using CSS frameworks such as Bootstrap.
+
+## Description
+
+This is a web application built using JavaScript, HTML, and CSS that allows users to search for their favorite Marvel superheroes and view their detailed information. The app also allows users to add characters to their favorites list for easy access.
+
+## Features
+
+- Search functionality for Marvel superheroes
+- Add characters to favorites list
+- View detailed information for characters
+
+# Home Page
+
+- Displays a list of superheroes.
+- Includes a search bar to filter superheroes based on the search query.
+- Each superhero result has a "Favorite" button.
+- Clicking on a superhero name opens a new page with detailed information.
+
+# Superhero Page
+
+- Displays detailed information about the superhero (name, photo, bio, comics, events, series, stories).
+
+# Favorite Superheroes Page
+
+- Displays a list of favorite superheroes.
+- This list persists between browser sessions using localStorage.
+- Each superhero has a "Remove from favorites" button.
+
+## Marvel API Integration
+
+The app utilizes the Marvel API to fetch superhero data. This includes:
+
+- Listing superheroes.
+- Detailed superhero information.
+- Search functionality based on user input.
+
+## API Authentication
+
+To use the Marvel API, we need to generate a hash using a combination of:
+
+- Timestamp (ts).
+- Private Key.
+- Public Key.
+
+## Functionality
+
+# Home Page
+
+- Search: Enter the superhero name to filter results using the Marvel API.
+- Favorite: Each superhero has a "Favorite" button that adds the superhero to the "My Favorite Superheroes" list, stored in localStorage.
+- View Superhero: Clicking on the superhero’s name leads to a detailed page with more information.
+
+# Superhero Page
+
+- Displays a lot of information, including name, photo, bio, comics, events, series, and stories, fetched from the Marvel API.
+
+# Favorite Superheroes Page
+
+- Lists all superheroes marked as favorite.
+- Includes a "Remove from favorites" button for each superhero, which updates the list in real-time and in localStorage.
+
+## LocalStorage for Favorites
+
+The "My Favorite Superheroes" list is stored in the browser’s localStorage, ensuring that the list persists between browser sessions. You can add and remove superheroes from this list.
+
+## Technologies Used
+
+- HTML5
+- CSS3 (Bootstrap)
+- JavaScript (Vanilla) for API calls, DOM manipulation, and event handling.
+- Marvel API for superhero data.
+- localStorage for persisting favorite superheroes.
+
+## Dependencies
+
+- Javascript
+- HTML
+- CSS
+- Marvel API('https://developer.marvel.com/')
+
+## Deployment
+
+- Clone the repository to your local machine
+
+```bash
+  git clone https://github.com/satyam-software-developer/stopwatch-vanilla-javascript.git
+```
+
+- Obtain an API key from Marvel Developer Portal (https://developer.marvel.com/) and add it to the appropriate location in the code
+
+- Run the application by opening the index.html file in your browser.
+
+## Usage
+
+1. Search for a Marvel superhero by typing their name in the search bar and clicking the "Search" button.
+2. Click on a character to view their detailed information.
+3. Click the "Add to Favorites" button to add a character to your favorites list.
+4. View your favorite characters by clicking on the "Favorites" tab.
+
+## Note
+
+The app is using a free developer API key from Marvel, thus the usage of the app is limited by the terms of service of Marvel's API.
+
+## License
+
+This project is licensed under the MIT License.
+
+## DEMO
+
+- https://satyam-software-developer.github.io/stopwatch-vanilla-javascript/
+
+## Author
+
+SATYAM KUMAR
diff --git a/css/favorites.css b/css/favorites.css
@@ -0,0 +1,85 @@
+/* This ensures that there is no horizontal scroll bar and prevents horizontal overflow */
+body {
+  overflow-x: hidden;
+}
+
+/* 
+This container is used to hold multiple card elements (superheroes).
+It ensures that:
+- The cards are spaced evenly (justify-content: space-evenly).
+- The cards will wrap to the next row when they overflow (flex-wrap: wrap).
+- The container doesn’t have scroll overflow (overflow: hidden).
+*/
+.cards-container {
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+/*
+This class styles buttons inside elements with the 'character-info' class.
+It ensures that the button takes the full width of its parent container.
+*/
+.character-info .btn {
+  width: 100%;
+}
+
+/*
+Styles the individual superhero card:
+- Gives it a translucent background color (hsla value provides semi-transparent color).
+- Sets a fixed height (484px) and width (250px) for consistency.
+- Adds margin to create spacing between the cards.
+- Centers text within the card (text-align: center).
+- Adds a border with semi-transparent blue color.
+- Rounds the corners of the card using border-radius.
+- Ensures there's some space between items in the card using 'gap'.
+- Adds a backdrop blur filter to give a glassy appearance to the card background.
+- Sets the z-index to ensure that the card layers correctly above any potential overlapping elements.
+*/
+.card {
+  background-color: hsla(195, 55%, 59%, 0.648);
+  height: 484px;
+  width: 250px;
+  margin: 40px 25px;
+  text-align: center;
+  border: 1px solid rgba(67, 93, 196, 0.749);
+  border-radius: 10px;
+  gap: 5px;
+  z-index: 2;
+  backdrop-filter: blur(3px);
+}
+
+/*
+This targets images within the '.card' class.
+It rounds the top corners of the images to match the rounded corners of the card container.
+*/
+.card img {
+  border-radius: 10px 10px 0 0;
+}
+
+/*
+This styles the name text of the superhero inside the card.
+It increases the font size for emphasis and visibility.
+*/
+.name {
+  font-size: 20px;
+}
+
+/*
+Styles the 'remove from favorites' button at the bottom of the card.
+- Rounds the bottom corners to match the card's rounded corners.
+- Changes the text color of the button to black.
+*/
+.remove-btn {
+  border-radius: 0 0 10px 10px;
+  color: black;
+}
+
+/*
+This class is used when no characters are displayed.
+It increases the font size and sets the text color to a CSS variable (--text-color).
+*/
+.no-characters {
+  font-size: 40px;
+  color: var(--text-color);
+}
diff --git a/css/more-info.css b/css/more-info.css
@@ -0,0 +1,159 @@
+/* Sets the width and height of the body to take up the full viewport width and height (100vw for width and 100vh for height). */
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
+/* 
+Styles the container with the class 'info'. 
+- Centers its content horizontally and vertically using 'justify-content' and 'align-items'.
+- Takes up 88% of the viewport height (remaining 12% is likely for other elements like headers or footers).
+*/
+.info {
+  justify-content: center;
+  align-items: center;
+  height: 88%;
+}
+
+/* 
+Styles the element with the ID 'info-container', which likely contains the main information about the hero.
+- Gives it a translucent background color with rgba.
+- Sets the width to 60% of the viewport, allowing for a centered appearance.
+- The height is set to 'auto', allowing it to adjust based on its content.
+- Adds a gap of 15px between child elements and 15px padding on top/bottom and 50px on the sides.
+- Adds a blur effect to the background using 'backdrop-filter'.
+- The border-radius of 10px makes the corners rounded for a smooth appearance.
+*/
+#info-container {
+  background-color: rgba(134, 192, 211, 0.95);
+  width: 60%;
+  height: auto;
+  gap: 15px;
+  padding: 15px 50px;
+  backdrop-filter: blur(2px);
+  border-radius: 10px;
+}
+
+/* 
+Centers the hero's name inside the container by using 'justify-content: center'. 
+This likely affects a flexbox container.
+*/
+.hero-name {
+  justify-content: center;
+}
+
+/* 
+Adds a gap of 30px between the hero image and the additional information about the hero.
+This helps to space out the layout horizontally.
+*/
+.hero-img-and-more-info {
+  gap: 30px;
+}
+
+/* 
+Styles the hero image inside the hero information section.
+- Sets the width to 20% of its container (responsive to container size).
+- Sets the height to 'auto', allowing the image to scale proportionally.
+- Ensures the minimum width of the image is 120px so it doesn't get too small.
+*/
+.hero-img {
+  width: 20%;
+  height: auto;
+  min-width: 120px;
+}
+
+/* 
+Styles the additional information about the hero.
+- Adds a gap of 15px between the individual pieces of information.
+- Sets the font size to 1.3rem, making the text slightly larger than default.
+*/
+.more-info {
+  gap: 15px;
+  font-size: 1.3rem;
+}
+
+/* 
+These classes ('id', 'comics', 'series', 'stories') are used for different pieces of hero information.
+- Adds a small gap of 5px between child elements within these sections.
+*/
+.id,
+.comics,
+.series,
+.stories {
+  gap: 5px;
+}
+
+/* 
+Styles the hero description text.
+- Sets the font size to 1.1rem for better readability.
+*/
+.hero-discription {
+  font-size: 1.1rem;
+}
+
+/* 
+Specifically targets the 'b' (bold) elements inside the hero description.
+- Increases the font size to 1.3rem to emphasize bold text, making it stand out.
+*/
+.hero-discription b {
+  font-size: 1.3rem;
+}
+
+/* 
+Styles the background image.
+- Sets the z-index to -1 to push the image behind other elements on the page.
+*/
+.bg-img {
+  z-index: -1;
+}
+
+/* 
+Media query to handle responsiveness for screens smaller than or equal to 678px width (typically mobile devices).
+This section makes the layout adapt to smaller screens.
+*/
+@media screen and (max-width: 678px) {
+  /* 
+  Changes the layout of the hero image and more info container.
+  - Flex direction becomes 'column' so the image and info are stacked vertically.
+  - Centers the elements horizontally using 'align-items: center'.
+  */
+  .hero-img-and-more-info {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* 
+  Centers the hero description text for smaller screens.
+  */
+  .hero-discription {
+    text-align: center;
+  }
+
+  /* 
+  In smaller screens, the info container takes up 85% of the viewport width to maintain a good layout on mobile.
+  */
+  #info-container {
+    width: 85%;
+  }
+
+  /* 
+  Sets the landscape image to take the full width of its container on smaller screens.
+  */
+  #landscapeImage {
+    width: 100%;
+  }
+
+  /* 
+  Ensures the height of the 'info' container takes up the entire viewport on smaller screens.
+  */
+  .info {
+    height: 100vh;
+  }
+
+  /* 
+  Reduces the gap between elements in the 'more-info' section to 0px for compact display on small screens.
+  */
+  .more-info {
+    gap: 0px;
+  }
+}