diff --git a/100_projects/33-create-countdown-timer/css.css b/100_projects/33-create-countdown-timer/css.css new file mode 100644 index 0000000..a404ee1 --- /dev/null +++ b/100_projects/33-create-countdown-timer/css.css @@ -0,0 +1,35 @@ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + background: #FFD54F; +} +#countdown{ + color: #000; + font-size:7em; + background: #fff; + padding: 10px 15px; + border-radius: 10px; + animation: up-down 5s linear infinite; +} +p{ + font-size: 24px; +} +div span{ + font-size: 3em; +} +@keyframes up-down{ + 0%{ + transform: translateY(0) ; + } + 50%{ + transform: translateY(-100px); + } +} \ No newline at end of file diff --git a/100_projects/33-create-countdown-timer/index.html b/100_projects/33-create-countdown-timer/index.html new file mode 100644 index 0000000..33c93c9 --- /dev/null +++ b/100_projects/33-create-countdown-timer/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
00:00
+

Countdown

+
+ 🥳 + 🎉 + 🎂 +
+ + + + + diff --git a/100_projects/33-create-countdown-timer/main.js b/100_projects/33-create-countdown-timer/main.js new file mode 100644 index 0000000..1e39a8e --- /dev/null +++ b/100_projects/33-create-countdown-timer/main.js @@ -0,0 +1,27 @@ +var seconds = 119, + countDiv = document.getElementById('countdown'), + secondPass, + + countDown = setInterval(function(){ + "use strict"; + + secondPass(); + },1000);s +function secondPass(){ + "use strict"; + + var minutes = Math.floor(seconds / 60), + remSeconds = seconds % 60; + + if (seconds < 10){ + remSeconds = "0" + remSeconds; + } + countDiv.innerHTML = minutes + ":" + remSeconds; + + if (seconds > 0){ + seconds = seconds - 1; + + } else { + clearInterval(countDown); + countDiv.innerHTML = "Done!!"; + }}; \ No newline at end of file