html-css-javascript-projects/019-theme clock/script.js at main · hicoder88/html-css-javascript-projects · GitHub

History

89 lines (81 loc) · 2.07 KB

Raw

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,

11,

360

)}deg)`;

minuteElement.style.transform = `translate(-50%, -100%) rotate(${scale(

minutes,

59,

360

)}deg)`;

secondElement.style.transform = `translate(-50%, -100%) rotate(${scale(

seconds,

59,

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

html-css-javascript-projects/019-theme clock/script.js at main · hicoder88/html-css-javascript-projects · GitHub

Expand file tree

Breadcrumbs

script.js

Latest commit

History

Breadcrumbs

script.js

File metadata and controls