Skip to content

Commit 2040a19

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #67 from khushi-purwar/dev-khushi
Quote Generator
2 parents ff4396e + 1d0fcfc commit 2040a19

File tree

5 files changed

+188
-0
lines changed

5 files changed

+188
-0
lines changed

‎Quote Generator/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Random Quote Generator
2+
3+
## Description
4+
The Random Quote Generator randomly displays a quote when a button is clicked by user.
5+
6+
## Stacks Used
7+
* JavaScript Async & Await
8+
* API
9+
10+
## API Used
11+
https://type.fit/api/quotes
12+
13+
## ScreenShot
14+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/Quote%20Generator/ss.png" />

‎Quote Generator/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Quote Generator</title>
8+
9+
<!-- google fonts -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap"
14+
rel="stylesheet"
15+
/>
16+
17+
<!-- font awesome cdn -->
18+
<link
19+
rel="stylesheet"
20+
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
21+
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
22+
crossorigin="anonymous"
23+
/>
24+
25+
<link rel="stylesheet" href="style.css" />
26+
</head>
27+
<body>
28+
<div>
29+
<h1>Quote Generator</h1>
30+
<div class="container">
31+
<i class="fas fa-quote-left"></i>
32+
<div id="quotes">Everything in life is luck.</div>
33+
<hr />
34+
<div id="author">By Donald Trump</div>
35+
<button onclick="getQuotes()">New Quotes</button>
36+
</div>
37+
</div>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>
42+

‎Quote Generator/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
const quotes = document.getElementById('quotes');
3+
const author = document.getElementById('author');
4+
let jsonData = " ";
5+
let quoteData = " ";
6+
7+
const randomNo = () => {
8+
let randNum = Math.floor(Math.random() * 1680);
9+
// console.log(randNum);
10+
quoteData = jsonData[randNum];
11+
quotes.innerText = `${quoteData.text}`;
12+
// author.innerText = `${quoteData.author}`;
13+
14+
quoteData.author == null ?
15+
(author.innerText = "By unKnown") :
16+
(author.innerText = `By ${quoteData.author}`);
17+
18+
}
19+
const getQuotes = async () => {
20+
const api = "https://type.fit/api/quotes";
21+
try {
22+
let data = await fetch(api);
23+
jsonData = await data.json();
24+
// console.log(jsonData[0]);
25+
randomNo();
26+
} catch (error) {
27+
console.log(error.message);
28+
}
29+
30+
}
31+
32+

‎Quote Generator/ss.png

577 KB
Loading

‎Quote Generator/style.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background: url("https://images.unsplash.com/photo-1490237251747-4557595144b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxMDcxMTcwfHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
9+
background-size: cover;
10+
background-repeat: no-repeat;
11+
color: white;
12+
}
13+
14+
15+
h1 {
16+
text-align: center;
17+
font-size: 60px;
18+
color: #ffea00;
19+
text-shadow: 0 1px 0 #ccc,
20+
0 2px 0 #c9c9c9,
21+
0 3px 0 #bbb,
22+
0 4px 0 #b9b9b9,
23+
0 5px 0 #aaa,
24+
0 6px 1px rgba(0,0,0,.1),
25+
0 0 5px rgba(0,0,0,.1),
26+
0 1px 3px rgba(0,0,0,.3),
27+
0 3px 5px rgba(0,0,0,.2),
28+
0 5px 10px rgba(0,0,0,.25),
29+
0 10px 10px rgba(0,0,0,.2),
30+
0 20px 20px rgba(0,0,0,.15);
31+
}
32+
33+
.container{
34+
width: 65%;
35+
height: 450px;
36+
border: 1px solid red;
37+
/* background-color: #30373b; */
38+
border-radius: 10px;
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: center;
42+
align-items: center;
43+
padding: 0 80px;
44+
margin: 30px auto;
45+
box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
46+
}
47+
i{
48+
font-size: 50px;
49+
margin-bottom: 10px;
50+
color: #2d00f7;
51+
}
52+
53+
#quotes{
54+
text-align: center;
55+
font-size: 40px;
56+
font-family: 'Lobster Two', cursive;
57+
color: #f20089;
58+
}
59+
60+
hr{
61+
width: 60%;
62+
/* border: 1px solid purple; */
63+
margin: 10px 0;
64+
}
65+
66+
#author{
67+
font-family: 'Cormorant Garamond', serif;
68+
font-size: 20px;
69+
margin-bottom: 10px;
70+
color: rgb(7, 255, 7);
71+
}
72+
73+
button {
74+
cursor: pointer;
75+
border: none;
76+
color: #ffe6a7;
77+
background: rgb(0, 179, 179);
78+
font-size: 20px;
79+
padding: 10px;
80+
border-radius: 4px;
81+
box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
82+
bottom: 5px;
83+
font-weight: bold;
84+
}
85+
86+
87+
@media screen and (max-width:1180px) {
88+
.container{
89+
height: 600px;
90+
width: 80%;
91+
}
92+
}
93+
94+
@media screen and (max-width:800px) {
95+
.container{
96+
height: 700px;
97+
width: 90%;
98+
}
99+
}
100+

0 commit comments

Comments
 (0)