x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-26 01:08:23 +03:00 committed by GitHub
parent 60026212ca
commit 1c7431b6c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
100_projects/33-create-countdown-timer/css.css Normal file
View File

@ -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);
}
}

22
100_projects/33-create-countdown-timer/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="countdown">00:00</div>
<p>Countdown</p>
<div>
<span>🥳</span>
<span>🎉</span>
<span>🎂</span>
</div>
<script src="main.js"></script>
</body>
</html>

27
100_projects/33-create-countdown-timer/main.js Normal file
View File

@ -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!!";
}};