clock/script.js at main · annamelya2021/clock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const refs = {
  dateDay: document.querySelector(".date-day"),
  date: document.querySelector(".date"),
  dateMonth: document.querySelector(".date-month"),
  dateYear: document.querySelector(".date-year"),
  clock: document.querySelector(".digital-clock"),
  seconds: document.querySelector(".clock-seconds__arrow"),
  minutes: document.querySelector(".clock-minutes__arrow"),
  hours: document.querySelector(".clock-hours__arrow"),
};

const namesOfDay = [
  "Неділя",
  "Понеділок",
  "Вівторок",
  "Середа",
  "Четвер",
  "Пятниця",
  "Субота",
];
const namesOfMonth = [
  "Січень",
  "Лютий",
  "Березень",
  "Квітень",
  "Травень",
  "Червень",
  "Липень",
  "Серпень",
  "Вересень",
  "Жовтень",
  "Листопад",
  "Грудень",
];

setInterval(() => {
  const currentTime = new Date();
  const day = namesOfDay[currentTime.getDay()];
  const dayOfMonth = currentTime.getDate().toString().padStart(2, "0");
  const year = currentTime.getFullYear();
  const month = namesOfMonth[currentTime.getMonth()];

  refs.dateDay.textContent = day;
  refs.date.textContent = dayOfMonth;
  refs.dateMonth.textContent = month;
  refs.dateYear.textContent = year;

  const hours = currentTime.getHours().toString().padStart(2, "0");
  const minutes = currentTime.getMinutes().toString().padStart(2, "0");
  const seconds = currentTime.getSeconds().toString().padStart(2, "0");

  refs.clock.textContent = `Поточний час: ${hours} : ${minutes} : ${seconds}`;

  console.log(refs.seconds);

  // seconds 360/60=6
  // minutes 360/60=6
  // hours   360/12=30
  const forSeconds = seconds * 6;
  const forMinutes = minutes * 6;
  const forHours = hours * 30 + minutes * 0.5; //(30/60) = 0.5

  refs.seconds.style.transform = `rotate(${forSeconds}deg)`;
  refs.minutes.style.transform = `rotate(${forMinutes}deg)`;
  refs.hours.style.transform = `rotate(${forHours}deg)`;
}, 1000);