index.html
Here is the explaination:
div class="download ": This is a div element with two class attributes: "download" . It is used as a container for the download section.
p Welcome to freeimages span Download image from here span p: This is a paragraph p element containing two lines of text. The first line says "Welcome to freeimages" and the second line says "Download image from here". The second line is wrapped in a span element.
button class="btn": This is a button element with a class attribute "btn".
a href="download.jpeg" download>click to download a: This is an anchor a element inside the button. It has two attributes: "href" and "download". The "href" attribute specifies the URL of the file to be downloaded, which in this case is "download.jpeg". The "download" attribute indicates that when the link is clicked, the target file should be downloaded rather than opening in the browser.
div class="container": This is another div element with a class attribute "container". It serves as a container for the downloading progress section.
h1 Downloading h1: This is a heading element that displays the text "Downloading".
div class="counter" 0% div: This is a div element with a class attribute "counter". It initially displays the text "0%" and is likely intended to show the progress of the download.
hr class="loading-bar-back" : This is a horizontal rule hr element with a class attribute "loading-bar-back". It represents the background of a loading bar.
hr class="loading-bar-front" : This is another hr element with a class attribute "loading-bar-front". It represents the front part of a loading bar, which is likely intended to move or change width to indicate the progress of the download.
style.css:
Here is the explaination:
1. body: This selector targets the element of the HTML document.
margin: 0; sets the margin of the body to 0, removing any default spacing around the body element.
display: flex; makes the body a flex container. justify-content: center; centers the flex items horizontally within the body.
height: 100vh; sets the height of the body to 100 viewport height units, making it occupy the full height of the viewport.
align-items: center; centers the flex items vertically within the body.
background-color: black; sets the background color of the body to black.
color: lightgray; sets the text color within the body to light gray.
font-family: cursive; sets the font family for the text within the body to cursive.
2. .download: This class selector targets elements with the class "download".
border: 2px solid rgb(7, 152, 51); sets a 2-pixel solid border with a specific green color (RGB value).
width: 80%; sets the width of the element to 80% of its parent container.
height: 30vh; sets the height of the element to 30 viewport height units.
text-align: center; centers the text content horizontally within the element.
3. p: This selector targets p elements.
font-size: 33px; sets the font size of the paragraph text to 33 pixels.
span: This selector targets span elements.
font-size: 15px; sets the font size of the span text to 15 pixels.
4. .btn: This class selector targets elements with the class "btn".
padding: 20px; adds 20 pixels of padding on all sides of the element.
width: 200px; sets the width of the element to 200 pixels.
cursor: pointer; changes the cursor to a pointer when hovering over the element.
border-radius: 10px; adds a 10-pixel border radius to the element, giving it rounded corners.
background-color: rgb(9, 152, 42); sets the background color of the element to a specific green color (RGB value).
5..btn:hover: This class selector targets elements with the class "btn" when they are being hovered over.
background-color: rgb(158, 156, 156); changes the background color of the element to a light gray when hovering.
6. .btn a: This selector targets a elements that are descendants of an element with the class "btn".
text-decoration: none; removes the underline decoration from the anchor text.
font-size: 20px; sets the font size of the anchor text to 20 pixels.
color: white; sets the color of the anchor text to white.
7..container: This class selector targets elements with the class "container".
text-align: center; centers the text content horizontally within the element.
width: 400px; sets the width of the element to 400 pixels.
position: relative; positions the element relative to its normal position.
display: none; initially hides the element from view.
8. .counter: This class selector targets elements with the class "counter".
font-size: 40px; sets the font size of the counter text to 40 pixels.
9. .loading-bar-back: This class selector targets elements with the class "loading-bar-back".
position: absolute; positions the element absolutely within its nearest positioned ancestor.
height: 8px; sets the height of the element to 8 pixels.
background-color: lightgray; sets the background color of the element to light gray.
width: 100%; sets the width of the element to 100% of its parent container.
border-radius: 5px; adds a 5-pixel border radius to the element, giving it rounded corners.
border: none; removes the border from the element.
10. .loading-bar-front: This class selector targets elements with the class "loading-bar-front".
position: absolute; positions the element absolutely within its nearest positioned ancestor.
height: 8px; sets the height of the element to 8 pixels.
background-color: orangered; sets the background color of the element to orange-red.
width: 0%; initially sets the width of the element to 0%.
border-radius: 5px; adds a 5-pixel border radius to the element, giving it rounded corners.
border: none; removes the border from the element.
index.js:
Here is the explaination:
const counter = document.querySelector(".counter");: This line selects the element with the class "counter" and assigns it to the variable counter. This element represents the counter for the download progress.
const container = document.querySelector(".container");: This line selects the element with the class "container" and assigns it to the variable container. This element represents the container for the downloading progress section.
const btn = document.querySelector(".btn");: This line selects the element with the class "btn" and assigns it to the variable btn. This element represents the download button.
const download = document.querySelector(".download");: This line selects the element with the class "download" and assigns it to the variable download. This element represents the download section.
const bar = document.querySelector(".loading-bar-front");: This line selects the element with the class "loading-bar-front" and assigns it to the variable bar. This element represents the front part of the loading bar.
btn.addEventListener("click", () => { ... });: This line adds an event listener to the download button. It listens for a "click" event and executes the provided callback function when the button is clicked.
download.style.display = "none";: This line sets the CSS display property of the download section (download) to "none", effectively hiding it from view.
container.style.display = "block";: This line sets the CSS display property of the container element (container) to "block", making it visible.
let idx = 0;: This line declares a variable idx and initializes it to 0. This variable represents the progress of the download.
updateNum();: This line calls the updateNum() function. This function updates the counter and the loading bar to simulate the progress of the download.
function updateNum() { ... }: This line declares a function named updateNum(). This function is responsible for updating the counter and the loading bar.
counter.innerText = idx + "%";: This line updates the text content of the counter element (counter) with the current value of idx followed by the percentage symbol.
bar.style.width = idx + "%";: This line updates the width of the loading bar element (bar) with the current value of idx followed by the percentage symbol. This visually represents the progress of the download.
idx++;: This line increments the value of idx by 1 in preparation for the next update.
if (idx < 101) { ... };
This line checks if idx is less than 101. If true, the code inside the if block is executed.
setTimeout(updateNum, 40);: This line schedules the updateNum() function to be called again after 40 milliseconds using the setTimeout() function. This creates an animation effect by repeatedly updating the counter and the loading bar until idx reaches 101.
FINAL WORDS:
To sum up, the provided code demonstrates a simple download progress simulation using HTML, CSS, and JavaScript. It features a download section with a button and a progress bar. When the button is clicked, the progress bar starts to increment until it reaches 100%. The code showcases how to manipulate HTML elements, apply CSS styles, and use JavaScript to handle events and update visual elements dynamically.
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas
Comments
Post a Comment