Skip to content

Commit 4f601d7

Browse files
WebdevShefaliWebdevShefali
committed
Advice generator app by Shefali
1 parent dfefd77 commit 4f601d7

4 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎Projects/Advice Generator/images/bg.jpg‎

351 KB
Loading

‎Projects/Advice Generator/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<!-- fonts -->
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<!-- css stylesheet -->
14+
<link rel="stylesheet" href="styles.css" />
15+
<!-- title -->
16+
<title>Advice generator app</title>
17+
</head>
18+
<body>
19+
<div id="heading"></div>
20+
21+
<div id="date"></div>
22+
23+
<div id="time"></div>
24+
25+
<div class="container">
26+
<div class="row">
27+
<div class="col">
28+
<div class="advice">
29+
<h1 id="advice"></h1>
30+
</div>
31+
<button id="random" class="btn" type="button" name="button">
32+
More
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<footer>
39+
<div class="attribution">
40+
Made with ❤️ by
41+
<a href="https://github.com/WebdevShefali" target="_blank">Shefali</a>.
42+
</div>
43+
</footer>
44+
<script src="index.js" charset="utf-8"></script>
45+
</body>
46+
</html>

‎Projects/Advice Generator/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const API = "https://api.adviceslip.com/advice";
2+
random = document.getElementById("random");
3+
4+
function getAdvice(API) {
5+
fetch(API)
6+
.then((response) => {
7+
return response.json();
8+
})
9+
.then((data) => {
10+
let advice = data.slip["advice"];
11+
document.getElementById("advice").innerText = "“" + advice + "”";
12+
});
13+
}
14+
15+
//To initialize the Advice
16+
window.addEventListener("load", () => {
17+
getAdvice(API);
18+
getTime();
19+
});
20+
21+
random.addEventListener("click", () => {
22+
getAdvice(API);
23+
});
24+
const getTime = () => {
25+
var today = new Date();
26+
var date =
27+
today.getFullYear() + "." + today.getMonth() + "." + today.getDate();
28+
29+
var hr = today.getHours();
30+
var m = today.getMinutes();
31+
var s = today.getSeconds();
32+
m = checkTime(m);
33+
s = checkTime(s);
34+
var time = hr + ":" + m + ":" + s;
35+
36+
if (hr >= 0 && hr < 12) {
37+
document.getElementById("heading").textContent = "Good Morning!";
38+
} else if (hr == 12) {
39+
document.getElementById("heading").textContent = "Good Noon!";
40+
} else if (hr >= 12 && hr <= 17) {
41+
document.getElementById("heading").textContent = "Good Afternoon!";
42+
} else {
43+
document.getElementById("heading").textContent = "Good Evening!";
44+
}
45+
document.getElementById("date").innerText = date;
46+
document.getElementById("time").innerText = time;
47+
setTimeout(getTime, 1000);
48+
};
49+
function checkTime(i) {
50+
if (i < 10) {
51+
i = "0" + i;
52+
} // add zero in front of numbers < 10
53+
return i;
54+
}

‎Projects/Advice Generator/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-weight: 800;
8+
background-image: url(images/bg.jpg);
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
overflow: hidden;
12+
}
13+
button:focus {
14+
outline: none !important;
15+
}
16+
17+
body,
18+
.attribution a {
19+
color: #446a46;
20+
}
21+
22+
body,
23+
.btn {
24+
font-family: "Dancing Script", cursive;
25+
}
26+
27+
h1 {
28+
font-size: 2rem;
29+
}
30+
31+
.advice {
32+
height: 100px;
33+
}
34+
35+
#heading {
36+
font-size: 3rem;
37+
margin-top: 1%;
38+
margin-left: 2%;
39+
}
40+
41+
#time,
42+
#date {
43+
margin-top: 0.5%;
44+
font-size: 1.5rem;
45+
margin-left: 5%;
46+
}
47+
48+
.container {
49+
margin-top: 1%;
50+
height: 70vh;
51+
}
52+
53+
.btn {
54+
border-radius: 20px;
55+
border: none;
56+
padding-top: 3px;
57+
margin-top: 35px;
58+
height: 40px;
59+
width: 100px;
60+
color: #fff;
61+
background-color: #446a46;
62+
cursor: pointer;
63+
}
64+
65+
.btn,
66+
footer {
67+
font-size: 20px;
68+
}
69+
70+
footer {
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
footer,
77+
.container {
78+
text-align: center;
79+
}

0 commit comments

Comments
 (0)