mydigitalclock/script.js at main · codezaura/mydigitalclock · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var myDate;
var currentDate;
var currentMonth;
const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
var currentYear;
var currentTime;
const days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']
var dayNumber;
var date = document.getElementById("date");
var time = document.getElementById("time");

setInterval(() => {
  myDate = new Date();
  currentDate = myDate.getDate();
  currentMonth = myDate.getMonth();
  currentYear = myDate.getFullYear();
  currentTime = myDate.toLocaleTimeString();
  dayNumber = myDate.getDay();
  date.innerHTML =
    `${currentDate}  ${months[currentMonth]} ${currentYear}  ${days[dayNumber]}`;
  time.innerHTML = currentTime;
}, 1000);


// -------------------------------------- Theme Changer -------------------------------------------

let homeBg = document.getElementById('backgroundImg');
let homeIcon = document.getElementById('home');
let fog = document.getElementById('fog')
let moon = document.getElementById('moon')
let squirrel = document.getElementById('squirrel')
let forest = document.getElementById('forest')
let raccon = document.getElementById('raccon')

homeIcon.addEventListener('click',()=>{
    homeBg.style.backgroundImage = 'url(assets/moon.avif)';
    homeIcon.style.transform = 'translateX(0px)';
    fog.style.transform = 'translateX(50px)'
    moon.style.transform = 'translateX(50px)';
    forest.style.transform = 'translateX(50px)';
    raccon.style.transform = 'translateX(50px)';
    squirrel.style.transform = 'translateX(50px)';
})

fog.addEventListener('click',()=>{
  homeBg.style.backgroundImage = 'url(assets/fog.avif)';
  homeIcon.style.transform = 'translateX(50px)';
  fog.style.transform = 'translateX(0px)'
  moon.style.transform = 'translateX(50px)';
  forest.style.transform = 'translateX(50px)';
  raccon.style.transform = 'translateX(50px)';
  squirrel.style.transform = 'translateX(50px)';
})

moon.addEventListener('click',()=>{
  homeBg.style.backgroundImage = 'url(assets/bg-img.avif)';
  homeIcon.style.transform = 'translateX(50px)';
  fog.style.transform = 'translateX(50px)'
  moon.style.transform = 'translateX(0px)';
  forest.style.transform = 'translateX(50px)';
  raccon.style.transform = 'translateX(50px)';
  squirrel.style.transform = 'translateX(50px)';
})

forest.addEventListener('click',()=>{
  homeBg.style.backgroundImage = 'url(assets/forest.avif)';
  homeIcon.style.transform = 'translateX(50px)';
  fog.style.transform = 'translateX(50px)'
  moon.style.transform = 'translateX(50px)';
  forest.style.transform = 'translateX(0px)';
  raccon.style.transform = 'translateX(50px)';
  squirrel.style.transform = 'translateX(50px)';
})

raccon.addEventListener('click',()=>{
  homeBg.style.backgroundImage = 'url(assets/raccon.avif)';
  homeIcon.style.transform = 'translateX(50px)';
  fog.style.transform = 'translateX(50px)'
  moon.style.transform = 'translateX(50px)';
  forest.style.transform = 'translateX(50px)';
  raccon.style.transform = 'translateX(0px)';
  squirrel.style.transform = 'translateX(50px)';
})

squirrel.addEventListener('click',()=>{
  homeBg.style.backgroundImage = 'url(assets/squirrel.avif)';
  homeIcon.style.transform = 'translateX(50px)';
  fog.style.transform = 'translateX(50px)'
  moon.style.transform = 'translateX(50px)';
  forest.style.transform = 'translateX(50px)';
  raccon.style.transform = 'translateX(50px)';
  squirrel.style.transform = 'translateX(0px)';
})