Greeting Card Added - 61 · codersmiti/30DaysOfJavaScript@6c519bc · GitHub
Skip to content

Commit 6c519bc

Browse files
Simran2337Simran2337
committed
Greeting Card Added - 61
1 parent 0512d10 commit 6c519bc

5 files changed

Lines changed: 183 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/61.png‎

834 KB
Loading

‎61 - Greeting Card/index.html‎

Lines changed: 74 additions & 0 deletions

‎61 - Greeting Card/script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
let curHr = new Date().getHours();
2+
const dayFormat = new Intl.DateTimeFormat('en', { weekday: 'long' });
3+
const dateFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'long', day: '2-digit' });
4+
const timeFormat = new Intl.DateTimeFormat('en', { hour: 'numeric', minute: 'numeric', second: 'numeric' });
5+
6+
setInterval(() => {
7+
const date = new Date();
8+
document.getElementById("day").innerHTML = dayFormat.format(date)
9+
document.getElementById("date").innerHTML = dateFormat.format(date)
10+
document.getElementById("time").innerHTML = timeFormat.format(date)
11+
if (curHr != date.getHours()) {
12+
window.location.reload();
13+
}
14+
}, 500);
15+
16+
if (curHr < 12) {
17+
document.getElementById("greet").innerHTML = "Good Morning!!";
18+
document.getElementById("greet-img").src = "https://img.icons8.com/color/48/000000/sun--v3.png"
19+
document.getElementById("message").innerHTML = "Have a good day!";
20+
document.getElementById("lottie").src = "https://assets7.lottiefiles.com/packages/lf20_b8z1hjre.json";
21+
}
22+
else if (curHr < 16) {
23+
document.getElementById("greet").innerHTML = "Good Afternoon!!";
24+
document.getElementById("greet-img").src = "https://img.icons8.com/office/48/000000/fog-day--v2.png";
25+
document.getElementById("message").innerHTML = "Have a good rest!";
26+
document.getElementById("lottie").src = "https://assets6.lottiefiles.com/private_files/lf30_1xg5wkc5.json";
27+
}
28+
else {
29+
document.getElementById("greet").innerHTML = "Good Evening!!";
30+
document.getElementById("greet-img").src = "https://img.icons8.com/office/50/000000/partly-cloudy-night--v2.png";
31+
document.getElementById("message").innerHTML = "Have good snacks!";
32+
document.getElementById("lottie").src = "https://assets5.lottiefiles.com/packages/lf20_rlmeimrj.json";
33+
}

‎61 - Greeting Card/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Prata&family=Vollkorn:ital,wght@1,500&display=swap');
2+
3+
* {
4+
overflow: hidden;
5+
}
6+
7+
.navbar-brand {
8+
color: whitesmoke !important;
9+
}
10+
11+
body {
12+
margin: 0px;
13+
padding: 0px;
14+
background: linear-gradient(90deg, rgba(33,11,157,1) 0%, rgba(83,28,168,1) 18%, rgba(82,126,233,1) 50%, rgba(28,133,164,1) 78%, rgba(3,18,121,1) 100%); color: whitesmoke !important;
15+
font-weight: bold;
16+
overflow-x: hidden;
17+
overflow-y: hidden;
18+
min-height: 100vh;
19+
}
20+
21+
.footer {
22+
background: rgb(37, 37, 37);
23+
width: 100%;
24+
text-align: center;
25+
height: 50px !important;
26+
font-family: 'Vollkorn';
27+
padding: 10px;
28+
position: fixed !important;
29+
left: 0;
30+
bottom: 0;
31+
color: whitesmoke;
32+
}
33+
34+
.greeting {
35+
text-align: center;
36+
margin-left: auto;
37+
margin-right: auto;
38+
padding: 30px;
39+
background-color: transparent;
40+
border-radius: 5px;
41+
box-shadow: 5px 3px 10px rgb(241, 238, 238);
42+
align-items: center;
43+
margin-top: 20%;
44+
transition: transform 0.3s;
45+
max-width: 400px;
46+
font-size: 1.5rem;
47+
}
48+
49+
h2 {
50+
font-family: 'Lobster', cursive;
51+
}
52+
53+
p {
54+
font-family: 'Prata', serif;
55+
}
56+
57+
a {
58+
color: whitesmoke;
59+
font-family: 'Vollkorn';
60+
}
61+
62+
.details {
63+
font-family: 'Vollkorn';
64+
}
65+
66+
#lottie {
67+
background: transparent;
68+
width: 35vw;
69+
height: 90vh;
70+
}

‎index.html‎

Lines changed: 6 additions & 0 deletions

0 commit comments

Comments
 (0)