Skip to content

Commit 3103b3a

Browse files
Misterr-HMisterr-H
authored
structured files (codemaniac-sahil#8)
1 parent b0ff54f commit 3103b3a

File tree

4 files changed

+90
-90
lines changed

4 files changed

+90
-90
lines changed

‎js_logo.svg renamed to ‎assets/images/js_logo.svg

File renamed without changes.

‎index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Javascript clock </title>
8-
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="styles/style.css">
99
</head>
1010
<body>
1111
<div class="navbar">
12-
<img src="js_logo.svg" alt="logo">
12+
<img src="assets/images/js_logo.svg" alt="logo">
1313
<ul class="navlinks">
1414

1515
<li><a href="https://angry-hodgkin-eb3dce.netlify.app/
@@ -27,6 +27,6 @@ <h1>Javascript clock</h1>
2727
<p id="timep">Time : <span id="clock"></span></p>
2828
<p id="timep">Date : <span id="day"></span></p>
2929
</div>
30-
<script src="script.js"></script>
30+
<script src="js/script.js"></script>
3131
</body>
3232
</html>

‎script.js renamed to ‎js/script.js

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
1-
let time;
2-
let date;
3-
let a;
4-
const option = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
5-
setInterval(() => {
6-
a = new Date();
7-
s = a.getHours()
8-
f = a.getSeconds()
9-
if (f < 10) {
10-
f = '0' + f;
11-
}
12-
if (s < 10) {
13-
s = '0' + s;
14-
}
15-
m = a.getMinutes()
16-
if (m < 10) {
17-
m = '0' + m;
18-
}
19-
20-
time = s + ':' + '' + m + ':' + '' + f;
21-
date = a.toLocaleDateString(undefined, option);
22-
document.getElementById('clock').innerHTML = time;
23-
document.getElementById('day').innerHTML = date;
24-
}, 1000
25-
26-
)
27-
a = new Date();
28-
s = a.getHours()
29-
if (s<12){
30-
document.getElementById('time').innerHTML = " Morning";
31-
document.body.style = "background-image:linear-gradient(yellow,orange);";
32-
}else if (s<16) {
33-
document.getElementById('time').innerHTML = " Afternoon";
34-
document.body.style = "background-image:linear-gradient(red,yellow);";
35-
}else{
36-
document.getElementById('time').innerHTML = " Evening";
37-
document.body.style = "background-image:linear-gradient(black,gray);";
38-
}
39-
1+
let time;
2+
let date;
3+
let a;
4+
const option = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
5+
setInterval(() => {
6+
a = new Date();
7+
s = a.getHours()
8+
f = a.getSeconds()
9+
if (f < 10) {
10+
f = '0' + f;
11+
}
12+
if (s < 10) {
13+
s = '0' + s;
14+
}
15+
m = a.getMinutes()
16+
if (m < 10) {
17+
m = '0' + m;
18+
}
19+
20+
time = s + ':' + '' + m + ':' + '' + f;
21+
date = a.toLocaleDateString(undefined, option);
22+
document.getElementById('clock').innerHTML = time;
23+
document.getElementById('day').innerHTML = date;
24+
}, 1000
25+
26+
)
27+
a = new Date();
28+
s = a.getHours()
29+
if (s<12){
30+
document.getElementById('time').innerHTML = " Morning";
31+
document.body.style = "background-image:linear-gradient(yellow,orange);";
32+
}else if (s<16) {
33+
document.getElementById('time').innerHTML = " Afternoon";
34+
document.body.style = "background-image:linear-gradient(red,yellow);";
35+
}else{
36+
document.getElementById('time').innerHTML = " Evening";
37+
document.body.style = "background-image:linear-gradient(black,gray);";
38+
}
39+

‎style.css renamed to ‎styles/style.css

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
body{
2-
margin: 0;
3-
padding: 0;
4-
background-color: black;
5-
font-family: Verdana, Geneva, Tahoma, sans-serif;
6-
color: white;
7-
}
8-
.navbar{
9-
background-color: #242424;
10-
display: flex;
11-
position: sticky;
12-
top:0;
13-
14-
15-
}
16-
.navbar img{
17-
width: 5%;
18-
}
19-
.navlinks{
20-
list-style: none;
21-
display: flex;
22-
align-items: center;
23-
justify-content: center;
24-
25-
26-
}
27-
.navlinks a{
28-
text-decoration: none;
29-
color: white;
30-
padding-left: 10px;
31-
32-
}
33-
.container{
34-
display: flex;
35-
flex-direction: column;
36-
align-items: center;
37-
justify-content: center;
38-
height: 100vh;
39-
}
40-
.container h1{
41-
font-size: 80px;
42-
}
43-
#clock,#timep{
44-
font-size: 40px;
45-
}
46-
.container p{
47-
font-size: 30px;
48-
}
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: black;
5+
font-family: Verdana, Geneva, Tahoma, sans-serif;
6+
color: white;
7+
}
8+
.navbar{
9+
background-color: #242424;
10+
display: flex;
11+
position: sticky;
12+
top:0;
13+
14+
15+
}
16+
.navbar img{
17+
width: 5%;
18+
}
19+
.navlinks{
20+
list-style: none;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
25+
26+
}
27+
.navlinks a{
28+
text-decoration: none;
29+
color: white;
30+
padding-left: 10px;
31+
32+
}
33+
.container{
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
height: 100vh;
39+
}
40+
.container h1{
41+
font-size: 80px;
42+
}
43+
#clock,#timep{
44+
font-size: 40px;
45+
}
46+
.container p{
47+
font-size: 30px;
48+
}

0 commit comments

Comments
 (0)