so let's get started with index.html file:
INDEX.HTML:
Here is the explaination:
1. The code starts with the '!DOCTYPE html' declaration, which specifies that this is an HTML document.
2. The 'html' element represents the root of an HTML document.
3. The 'head' element contains meta-information about the HTML document, such as the character set, viewport settings, and the document title.
4. Inside the 'head' element, there are several 'meta' tags. These tags provide information to the browser and search engines about the document. The charset attribute specifies the character encoding (UTF-8), and the http-equiv attribute sets the compatibility mode for Internet Explorer.
5. The title element sets the title of the HTML document, which appears in the browser's title bar or tab.
6. The link element is used to include an external CSS file called "style.css" to style the HTML document. It establishes a connection between the HTML document and the CSS file.
7. The body element represents the content of the HTML document that will be displayed in the browser.
8. Inside the body element, there is a div element with a class of "container". This div acts as a container for the entire content.
9. Inside the "container" div, there is an h2 element with a class of "heading". It displays the text "Random Anime Pics Generator" and "front.end24" (you can rmove it and add anything of your choice) on two separate lines.
10. Following the heading, there is a button element with a class of "btn" and an id of "btn". This button will be used to generate random anime pictures.
11. Inside the "container" div, there is another div element with a class of "anime-container". This
acts as a container for the anime picture and its name.
12. Inside the "anime-container" div, there is an img element with a class of "anime-img". It displays an initial anime picture with a placeholder URL.
13. After the 'img' element, there is an h3 element with a class of "anime-name". It displays the placeholder text "Anime Name".
14. The closing '/div' tags end the "container" and "anime-container" div elements.
15. The closing '/HTML' tag ends the content of the HTML document's body.
16. The closing '/html' tag ends the HTML document.
17. Finally, there is a 'script' tag with a "src" attribute pointing to an external JavaScript file called "index.js". This script file contains the logic and functionality for generating random anime pictures.
STYLE.CSS
Here is the explaination for style.css file:
1. The body selector targets the body element of the HTML document. It sets various properties for the body element, including:
margin: 0 removes any default margin from the body.
background: linear-gradient(to right, lightblue, purple) applies a linear gradient background from light blue to purple from left to right.
display: flex enables flexbox layout for the body element.
height: 100vh sets the height of the body to 100% of the viewport height.
justify-content: center centers the content horizontally along the main axis.
align-items: center centers the content vertically along the cross axis.
font-family: "Courier New", Courier, monospace sets the font family for the text inside the body to Courier New, Courier, or any generic monospace font.
2. The .heading selector targets elements with the class "heading". It sets various properties for the heading element, including:
color: purple sets the text color to purple.
text-shadow: 2px 1px 4px plum adds a shadow effect to the text with an offset of 2 pixels horizontally, 1 pixel vertically, and a blur radius of 4 pixels. The shadow color is plum.
3.The .container selector targets elements with the class "container". It sets various properties for the container element, including:
background: aliceblue sets the background color to alice blue.
border-radius: 10px adds rounded corners to the container with a radius of 10 pixels.
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) applies a box shadow to the container with an offset of 0 horizontally, 10 pixels vertically, a blur radius of 20 pixels, and a color defined by rgba(0, 0, 0, 0.3).
text-align: center centers the text inside the container.
padding: 10px adds 10 pixels of padding around the content inside the container.
width: 450px sets the width of the container to 450 pixels.
margin: 5px adds 5 pixels of margin around the container.
4. The .btn selector targets elements with the class "btn" (the generate button). It sets various properties for the button, including:
background-color: purple sets the background color to purple.
color: aliceblue sets the text color to alice blue.
padding: 10px 30px adds 10 pixels of padding at the top and bottom, and 30 pixels of padding on the left and right.
font-size: 16px sets the font size to 16 pixels.
margin-bottom: 30px adds 30 pixels of margin at the bottom.
border-radius: 6px adds rounded corners to the button with a radius of 6 pixels.
cursor: pointer changes the mouse cursor to a pointer when hovering over the button.
5. The .btn:hover selector targets the button when it's being hovered over. It sets the background color to a different shade of purple, creating a hover effect.
6. The .btn:disabled selector targets the button when it's disabled. It sets the background color to gray and changes the cursor to "not-allowed".
7. The .anime-img selector targets elements with the class "anime-img" (the anime image). It sets various properties for the image, including:
height: 300px sets the height of the image to 300 pixels.
width: 300px sets the width of the image to 300 pixels. border-radius: 20% adds rounded corners to the image with a radius of 20% of its size.
border: 3px solid purple adds a solid purple border with a thickness of 3 pixels around the image.
8. The .anime-name selector targets elements with the class "anime-name" (the anime name). It sets various properties for the anime name element, including:
margin: 20px adds 20 pixels of margin around the anime name element.
background-color: purple sets the background color to purple.
color: aliceblue sets the text color to alice blue.
padding: 10px adds 10 pixels of padding around the text.
border-radius: 6px adds rounded corners to the anime name element with a radius of 6 pixels.
font-size: 17px sets the font size to 17 pixels.
font-weight: 600 sets the font weight to bold.
9. The .anime-container selector targets elements with the class "anime-container". It sets the display property to none, which initially hides the anime container.
INDEX.JS
Here is the explaiantion:
1. The code begins by selecting the btn element from the HTML document using document.getElementById("btn"). It assigns the element to the btn constant variable.
2. Similarly, the code selects the elements with the classes "anime-container", "anime-img", and "anime-name" using document.querySelector(). They are assigned to the variables animeContainer, animeImg, and amineName, respectively.
3. The code adds an event listener to the btn element for the "click" event using btn.addEventListener("click", function () { ... }). This means that when the button is clicked, the provided function will be executed.
4. Inside the click event function, the code sets the initial state of the button and anime elements to show a loading state. It disables the button, changes its text to "Loading...", updates the anime name to "Updating...", and sets the source of the anime image to a spinner SVG.
5. The code then makes an asynchronous request to fetch data from the "https://api.catboys.com/img" URL using fetch(). The await keyword is used to wait for the response to be received.
6. Once the response is received, it is converted to JSON format using response.json(), and the resulting data is assigned to the data constant variable.
7. After receiving the data, the code updates the button and anime elements with the retrieved information. It enables the button, changes its text back to "Get Anime", displays the anime container by setting its style display property to "block", sets the source of the anime image to the URL from the data, and updates the anime name with the artist information from the data.
8. If there is an error during the fetch request or any other part of the try block, the code will catch the error using the catch statement. It logs the error to the console, enables the button, changes its text back to "Get Anime", and updates the anime name with an error message.
Final Words:
By understanding the step-by-step breakdown of the code, we've explored how to create an Anime Pics Generator. This interactive tool allows users to generate random anime pictures and view their corresponding artist's name. JavaScript handles the functionality, including the button click event, asynchronous data retrieval, and dynamic updating of HTML elements. CSS styling enhances the visual appeal of the generator, providing an engaging user experience.
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas
12. Inside the "anime-container" div, there is an img element with a class of "anime-img". It displays an initial anime picture with a placeholder URL.
13. After the 'img' element, there is an h3 element with a class of "anime-name". It displays the placeholder text "Anime Name".
14. The closing '/div' tags end the "container" and "anime-container" div elements.
15. The closing '/HTML' tag ends the content of the HTML document's body.
16. The closing '/html' tag ends the HTML document.
17. Finally, there is a 'script' tag with a "src" attribute pointing to an external JavaScript file called "index.js". This script file contains the logic and functionality for generating random anime pictures.
STYLE.CSS
Here is the explaination for style.css file:
1. The body selector targets the body element of the HTML document. It sets various properties for the body element, including:
margin: 0 removes any default margin from the body.
background: linear-gradient(to right, lightblue, purple) applies a linear gradient background from light blue to purple from left to right.
display: flex enables flexbox layout for the body element.
height: 100vh sets the height of the body to 100% of the viewport height.
justify-content: center centers the content horizontally along the main axis.
align-items: center centers the content vertically along the cross axis.
font-family: "Courier New", Courier, monospace sets the font family for the text inside the body to Courier New, Courier, or any generic monospace font.
2. The .heading selector targets elements with the class "heading". It sets various properties for the heading element, including:
color: purple sets the text color to purple.
text-shadow: 2px 1px 4px plum adds a shadow effect to the text with an offset of 2 pixels horizontally, 1 pixel vertically, and a blur radius of 4 pixels. The shadow color is plum.
3.The .container selector targets elements with the class "container". It sets various properties for the container element, including:
background: aliceblue sets the background color to alice blue.
border-radius: 10px adds rounded corners to the container with a radius of 10 pixels.
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) applies a box shadow to the container with an offset of 0 horizontally, 10 pixels vertically, a blur radius of 20 pixels, and a color defined by rgba(0, 0, 0, 0.3).
text-align: center centers the text inside the container.
padding: 10px adds 10 pixels of padding around the content inside the container.
width: 450px sets the width of the container to 450 pixels.
margin: 5px adds 5 pixels of margin around the container.
4. The .btn selector targets elements with the class "btn" (the generate button). It sets various properties for the button, including:
background-color: purple sets the background color to purple.
color: aliceblue sets the text color to alice blue.
padding: 10px 30px adds 10 pixels of padding at the top and bottom, and 30 pixels of padding on the left and right.
font-size: 16px sets the font size to 16 pixels.
margin-bottom: 30px adds 30 pixels of margin at the bottom.
border-radius: 6px adds rounded corners to the button with a radius of 6 pixels.
cursor: pointer changes the mouse cursor to a pointer when hovering over the button.
5. The .btn:hover selector targets the button when it's being hovered over. It sets the background color to a different shade of purple, creating a hover effect.
6. The .btn:disabled selector targets the button when it's disabled. It sets the background color to gray and changes the cursor to "not-allowed".
7. The .anime-img selector targets elements with the class "anime-img" (the anime image). It sets various properties for the image, including:
height: 300px sets the height of the image to 300 pixels.
width: 300px sets the width of the image to 300 pixels. border-radius: 20% adds rounded corners to the image with a radius of 20% of its size.
border: 3px solid purple adds a solid purple border with a thickness of 3 pixels around the image.
8. The .anime-name selector targets elements with the class "anime-name" (the anime name). It sets various properties for the anime name element, including:
margin: 20px adds 20 pixels of margin around the anime name element.
background-color: purple sets the background color to purple.
color: aliceblue sets the text color to alice blue.
padding: 10px adds 10 pixels of padding around the text.
border-radius: 6px adds rounded corners to the anime name element with a radius of 6 pixels.
font-size: 17px sets the font size to 17 pixels.
font-weight: 600 sets the font weight to bold.
9. The .anime-container selector targets elements with the class "anime-container". It sets the display property to none, which initially hides the anime container.
INDEX.JS
Here is the explaiantion:
1. The code begins by selecting the btn element from the HTML document using document.getElementById("btn"). It assigns the element to the btn constant variable.
2. Similarly, the code selects the elements with the classes "anime-container", "anime-img", and "anime-name" using document.querySelector(). They are assigned to the variables animeContainer, animeImg, and amineName, respectively.
3. The code adds an event listener to the btn element for the "click" event using btn.addEventListener("click", function () { ... }). This means that when the button is clicked, the provided function will be executed.
4. Inside the click event function, the code sets the initial state of the button and anime elements to show a loading state. It disables the button, changes its text to "Loading...", updates the anime name to "Updating...", and sets the source of the anime image to a spinner SVG.
5. The code then makes an asynchronous request to fetch data from the "https://api.catboys.com/img" URL using fetch(). The await keyword is used to wait for the response to be received.
6. Once the response is received, it is converted to JSON format using response.json(), and the resulting data is assigned to the data constant variable.
7. After receiving the data, the code updates the button and anime elements with the retrieved information. It enables the button, changes its text back to "Get Anime", displays the anime container by setting its style display property to "block", sets the source of the anime image to the URL from the data, and updates the anime name with the artist information from the data.
8. If there is an error during the fetch request or any other part of the try block, the code will catch the error using the catch statement. It logs the error to the console, enables the button, changes its text back to "Get Anime", and updates the anime name with an error message.
Final Words:
By understanding the step-by-step breakdown of the code, we've explored how to create an Anime Pics Generator. This interactive tool allows users to generate random anime pictures and view their corresponding artist's name. JavaScript handles the functionality, including the button click event, asynchronous data retrieval, and dynamic updating of HTML elements. CSS styling enhances the visual appeal of the generator, providing an engaging user experience.
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas
Please create more blogs like this ,it's so informative
ReplyDelete