New year countdown
Tags: javascript, html, webdev, beginners
Published: 2021-12-31 14:41:01

## 
## 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);


```