Starter Code | Notion

index.html

<!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" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
    <title>Countdown Timer</title>
  </head>
  <body>
    <nav><a href="#">Web Dev Creative</a></nav>
    <div class="container">
      <h1 id="headline">our website is almsot ready </h1>
      <div id="countdown" class="countdown">
        <ul>
          <li><span id="days">00</span>days</li>
          <li><span id="hours">00</span>hours</li>
          <li class="separator">:</li>
          <li><span id="minutes">00</span>minutes</li>
          <li class="separator">:</li>
          <li><span id="seconds">00</span>seconds</li>
        </ul>
      </div>
    </div>

    <div class="social_links">
      <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
      <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
      <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
    </div>

    <script type="module" src="<https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js>"></script>
    <script nomodule src="<https://unpkg.com/[email protected]/dist/ionicons/ionicons.js>"></script>
  </body>
</html>

style.css

@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap>');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Nav */
nav {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
}

nav a{
  text-decoration: none;
  font-size: 1.5rem;
  color: #909090;
}

h1 {
  margin-bottom: 5rem;
  font-size: 2.5rem;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}

ul {
  display: flex;
  justify-content: center;
}

ul li {
  list-style-type: none;
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
}

li span{
  display: block;
  font-size: 6rem;
  color: #f41b4b;
}

li.separator {
  margin: 0 10px;
  font-size: 6rem;
  line-height: 1;
  color: #fb1b4b;
}

li:first-of-type {
  margin-right: 5rem;
}

/* Social Links */
.social_links {
  position: fixed;
  bottom: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.social_links a{
  color: inherit;
  font-size: 2rem;
}

main.js

var daysEl = document.getElementById('days')
var hoursEl = document.getElementById('hours')
var minutesEl = document.getElementById('minutes')
var secondsEl = document.getElementById('seconds')

function countdownTimer() {
  const countDownDate = new Date('02/04/2024').getTime()

  // Convert to milliseconds
  const second = 1000
  const minute = second * 60
  const hour = minute * 60
  const day = hour * 24

  // Calculate every second
  const interval = setInterval(() => {
    // Get Current Date
    const now = new Date().getTime()
    const distance = countDownDate - now

    daysEl.innerText = formatNumber(Math.floor(distance / day))
    hoursEl.innerText = formatNumber(Math.floor((distance % day) / hour))
    minutesEl.innerText = formatNumber(Math.floor((distance % hour) / minute))
    secondsEl.innerText = formatNumber(Math.floor((distance % minute) / second))
    if (distance < 0) {
      document.getElementById('headline').innerText = "our website is ready"
      document.getElementById('countdown').style.display = 'none'

      // Stop interval
      clearInterval(interval)
    }
  }, 1000)
}

// Add 0 if number is small then 10 ..... 8 ---> 08
function formatNumber(number) {
  if (number < 10) {
    return '0' + number
  }

  return number
}

// Run function
countdownTimer();