HomeworkLib
Question

Using html/javascript/css create a countdown timer from 6 minutes with a progress bar

Using html/javascript/css create a countdown timer from 6 minutes with a progress bar

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Here is code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

#progressbar {

background-color: lightgray;

border-radius: 13px;

/* (height of inner div) / 2 + padding */

padding: 3px;

}

#progressbar>div {

background-color: green;

width: 0%;

/* Adjust with JavaScript */

height: 20px;

border-radius: 10px;

}

</style>

<script>

window.onload = () => {

min = 5;

sec = 59;

total = 6 * 60;

var timer = setInterval(() => {

sec--;

index = Math.floor(Math.random() * 7);

if (sec === 0 && min == 0) {

clearInterval(timer);

} else if (sec === 0) {

sec = 59;

min--;

}

document.getElementById("time").innerText = ("0" + (min || 0)).slice(-2) + ":" + ("0" + (

sec || 0)).slice(-2);

var count = 100 - (((min * 60) + sec) / total * 100);

document.getElementById("bar").style.width = count + "%";

}, 1000);

}

</script>

</head>

<body>

<span id="time"></span>

<div id="progressbar">

<div id="bar"></div>

</div>

</body>

</html>

Output:

0 0
Add a comment
Know the answer?
Add Answer to:
Using html/javascript/css create a countdown timer from 6 minutes with a progress bar
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT