html codes
<html>
<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>Timer</title>
<link rel="stylesheet" href="timer.css" />
</head>
<body>
<h1>countdown timer</h1>
<div class="container">
<div class="days">
<p class="bigText" id="days">0</p>
<span>days</span>
</div>
<div class="hours">
<p class="bigText" id="hours">0</p>
<span>hours</span>
</div>
<div class="minutes">
<p class="bigText" id="minutes">0</p>
<span>mins</span>
</div>
<div class="seconds">
<p class="bigText" id="seconds">0</p>
<span>seconds</span>
</div>
<div class="newContent hidden"></div>
<div class="images hidden">
<img src="https://wallpaperaccess.com/thumb/7673258.jpg" />
</div>
</div>
<script src="timer.js"></script>
</body>
</html>
css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url(https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
background-attachment: initial;
background-position: center;
font-family: "Poppins", sans-serif;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 4rem;
margin-top: -7%;
color: rgb(109, 221, 221);
text-transform: capitalize;
box-shadow: 2px 2px 7px rgb(123, 209, 190),
-2px -2px 7px rgba(39, 80, 194, 0.938);
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
}
.container {
display: flex;
margin-top: -20px;
text-align: center;
text-transform: capitalize;
}
.bigText {
font-weight: bold;
font-size: 3.5rem;
margin: 3rem 2rem 0.5rem 2rem;
color: rgb(28, 1, 78);
text-shadow: 2px 2px 5px rgb(106, 194, 187);
box-shadow: 2px 2px 7px rgb(123, 209, 190), -2px -2px 7px rgba(39, 80, 194, 1);
padding: 10px 20px;
border-radius: 2px;
}
.container span {
font-size: 1.5rem;
color: rgb(145, 203, 226);
/* box-shadow: 2px 2px 5px rgb(255, 255, 255), -2px -2px 5px rgb(80, 138, 224);
border-radius: 5px;
*/
}
.images {
position: absolute;
min-width: 30%;
height: 70%;
background-color: antiquewhite;
top: 15%;
left: 25%;
z-index: 10;
}
img {
position: relative;
z-index: 10;
opacity: 1;
}
.newContent {
position: absolute;
background-color: thistle;
opacity: 0.3;
filter: blur(100px);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 7;
/* transform: translate(-29.6%, -33%); */
}
.hidden {
display: none;
}
/* media queries */
@media screen and (max-width: 1000px) {
.images {
left: 15%;
}
}
@media screen and (max-width: 867px) {
.images {
width:15%;
height:30%;
left:10%;
}
}
@media screen and (max-width: 750px) {
.bigText {
font-size: 2rem;
margin: 3rem 1rem 0.5rem 1rem;
}
.container span {
font-size: 1rem;
font-weight: bolder;
}
h1 {
font-size: 2.8rem;
}
.images {
width:60% ;
height: 60%;
top: 25%;
left: 20%;
}
img{
width:100%;
height:100%;
}
}
@media screen and (max-width: 425px) {
.bigText {
font-size: 1.3rem;
margin: 3rem 0.6rem 0.5rem 0.2rem;
}
.container span {
font-size: 0.8rem;
font-weight: bolder;
letter-spacing: 2px;
}
h1 {
font-size: 1.9rem;
}
.images {
width: 275px;
height: 175px;
left: 10%;
}
img {
width: 275px;
height: 175px;
}
}
@media screen and (max-width: 300px) {
.images {
left: 2%;
}
}
js
const days1 = document.getElementById("days");
const hours1 = document.getElementById("hours");
const minutes1 = document.getElementById("minutes");
const seconds1 = document.getElementById("seconds");
const showMessage = document.querySelector(".newContent");
const overlay = document.querySelector(".images");
const timer = () => {
// In future you can set date you want.
future = new Date("jan 1, 2022");
now = new Date();
diff = future - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor(diff / (1000 * 60 * 60));
const mins = Math.floor(diff / (1000 * 60));
const seconds = Math.floor(diff / 1000);
const d = days;
const h = hours - days * 24;
const m = mins - hours * 60;
const s = seconds - mins * 60;
days1.textContent = d;
hours1.textContent = h;
minutes1.textContent = m;
seconds1.textContent = s;
// show ,is for after timer stops it shows a picture
// you can set manual stop time here
const show = d == 0 && h == 0 && m == 0 && s == 0;
if (show) {
showMessage.classList.remove("hidden");
overlay.classList.remove("hidden");
clearInterval(run);
}
};
const run = setInterval("timer()", 1000);
closefunction = () => {
showMessage.classList.add("hidden");
overlay.classList.add("hidden");
};
overlay.addEventListener("click", closefunction);
showMessage.addEventListener("click", closefunction);
Top comments (0)