Theme Clock Using HTML CSS JavaScript

Theme Clock Using HTML CSS JavaScript

Introduction:

Hello Friends, you all are welcome to today’s new blog post. Today we have created a beautiful project for you which is going to be very amazing. It is a Theme Clock Using HTML CSS JavaScript. If you make it, you will get the knowledge of Javascript. To create this you need basic HTML but it is important for you to have knowledge of CSS and Javascript because in this you also need matching. The clock has to be set with the correct formula, only then our clock works correctly and correct animation also has to be added to it.

Explanation :

First of all we are going to make a structure of our clock with the help of HTML which we then have to use cursor to design it.

  • Head Section:
    • <meta charset=”UTF-8″>: The head section contains the most important meta links. If you do not set them correctly, then your project may face problems like saving problems.
    • <title>: We also need to add the title of the project in the head section which you can keep as anything.
    • <link>: Links are of different types, if we want to add a font of a different website then we have to add it in the head section.
  • Body Section:
    • <button>: First of all, we have created a dark light mode button in the clock, with which you can change the mode.
    • <div class=”clock-container”>: We have created a clock container in which we are going to add clock details which will form the clock structure.
    • <div class=”clock”>: First of all I have made a frame of a clock in which the parts of the clock will come.
    • <div class=”time”>: We have also added time and date which will be automatically updated using JavaScript

CSS Styling:

  • toggle: We have used white color in toggle button and added border radius 4ps and also added cursor pointer.
  • clock-container: In clock container we have set display to flex flex direction to column and align items to center.
  • clock: Position relative has been used in the clock and width has been kept 200px and height has also been kept the same.
  • center-point: In the center point, we have used orange color, the width is 10px and we have used transform property in it.
  • time: In this time we have kept the font size at 60px, apart from this we have not made any changes in it.
  • date: In date we have used black color and added letter spacing and also added upper case.

JavaScript:

Now we have designed our theme clock with the help of html css but now to activate it we will have to take help of javascript so that this clock will work properly. If you do not take help of javascript code then your clock will not work properly.

  • const hourElement = document.querySelector(“.hour”); We have created different query selectors using const which will be connected to the HTML code.
  • Then we have added the list of day and month so that our clock will work with date and time.
  • Then we have created an event listener with the help of which dark and light mode will work.

Index.html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Theme Clock</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<button class="toggle">Dark mode</button>
    <div class="clock-container">
      <div class="clock">
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="center-point"></div>
      </div>
      <div class="time"></div>
      <div class="date"></div>
    </div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

Style.css:

@import url("https://fonts.googleapis.com/css?family=Heebo:300&display=swap");

* {
  box-sizing: border-box;
}

:root {
  --primary-color: #000;
  --secondary-color: #fff;
}

html {
  transition: all 0.5s ease-in;
}

html.dark {
  --primary-color: #fff;
  --secondary-color: #333;
}

html.dark {
  background-color: #111;
  color: var(--primary-color);
}

body {
  font-family: "Heebo", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.toggle {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 0;
  border-radius: 4px;
  padding: 8px 12px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.toggle:focus {
  outline: none;
}

.clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
}

.needle {
  background-color: var(--primary-color);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 65px;
  width: 3px;
  transform-origin: bottom center;
  transition: all 0.5s ease-in;
}

.needle.hour {
  transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}

.needle.second {
  background-color: #e74c3c;
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}

.center-point {
  background-color: #e74c3c;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.center-point::after {
  content: "";
  background-color: var(--primary-color);
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.time {
  font-size: 60px;
}

.date {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.date .circle {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 18px;
  transition: all 0.5s ease-in;
}

Script.js:

const hourElement = document.querySelector(".hour");
const minuteElement = document.querySelector(".minute");
const secondElement = document.querySelector(".second");
const timeElement = document.querySelector(".time");
const dateElement = document.querySelector(".date");
const toggle = document.querySelector(".toggle");

const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

toggle.addEventListener("click", (e) => {
  const html = document.querySelector("html");
  if (html.classList.contains("dark")) {
    html.classList.remove("dark");
    e.target.innerHTML = "Dark mode";
  } else {
    html.classList.add("dark");
    e.target.innerHTML = "Light mode";
  }
});

// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};

const setTime = () => {
  const time = new Date();
  const date = time.getDate();
  const month = time.getMonth();
  const day = time.getDay();
  const hours = time.getHours();
  const hoursForClock = hours >= 13 ? hours % 12 : hours;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  const ampm = hours >= 12 ? "PM" : "AM";

  hourElement.style.transform = `translate(-50%, -100%) rotate(${scale(
    hoursForClock,
    0,
    11,
    0,
    360
  )}deg)`;
  minuteElement.style.transform = `translate(-50%, -100%) rotate(${scale(
    minutes,
    0,
    59,
    0,
    360
  )}deg)`;
  secondElement.style.transform = `translate(-50%, -100%) rotate(${scale(
    seconds,
    0,
    59,
    0,
    360
  )}deg)`;

  timeElement.innerHTML = `${hoursForClock}:${
    minutes < 10 ? `0${minutes}` : minutes
  } ${ampm}`;
  dateElement.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
};

setTime();

setInterval(setTime, 1000);