html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<!-- Credits to Kode Krasher for suggesting ternaries, in place of the if/else statements. For educational purposes(in case someone wants to learn the code step by step), I'll keep both! -->
<html>
<head>
<title>Date and Time Toggle</title>
</head>
<body>
<h2></h2>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
h2{
text-align: center;
color: purple;
cursor: pointer;
}
.change{
animation: 1.5s change linear 1;
}
@keyframes change{
from{opacity: 0;}
to{opacity: 1;}
}
Enter to Rename, Shift+Enter to Preview
js
js
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
/* Credits to Kode Krasher for suggesting ternaries, in place of the if/else statements. For educational purposes(in case someone wants to learn the code step by step), I'll keep both! */
window.onload = ()=>{
const text = document.querySelector("h2");
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let toggle = true;
/* if(hours <= 9){
hours = `0${hours}`;
}
else{
hours = hours;
} */
hours = hours <= 9 ? `0${hours}` : hours;
/* if(minutes <= 9){
minutes = `0${minutes}`;
}
else{
minutes = minutes;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run