Skip to content

Commit 63aef36

Browse files
riya-rjhariya-rjha
committed
Added Quote Generator
1 parent f5f8747 commit 63aef36

File tree

5 files changed

+181
-0
lines changed

5 files changed

+181
-0
lines changed

‎Dynamic Quote Generator/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Quote Generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<div id="container">
14+
<h2 id="heading">Quote of the Day</h2>
15+
<p id="quote">I am of the opinion that my life belongs to the community, and as long as I live it is my
16+
privilege to do for it whatever I can.</p>
17+
<span id="author"></span>
18+
<div id="buttons">
19+
<button id="btn1">New Quote</button>
20+
<button id="btn2"><img src="logo.png" alt="Twitter Icon" id="twitterIcon"><a href='https://twitter.com/home' target="_blank">Tweet</a></button>
21+
</div>
22+
</div>
23+
24+
<script src="script.js"></script>
25+
</body>
26+
27+
</html>

‎Dynamic Quote Generator/logo.png

96 KB
Loading

‎Dynamic Quote Generator/oldLogo.png

25.1 KB
Loading

‎Dynamic Quote Generator/script.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const api_url = "https://api.quotable.io/random";
2+
const quoteRandom = document.getElementById('quote');
3+
const quoteAuthor = document.getElementById('author');
4+
const getQuote = async (url) => {
5+
const response = await fetch(url);
6+
var quote = await response.json();
7+
quoteRandom.innerHTML = quote.content;
8+
quoteAuthor.innerHTML = quote.author;
9+
10+
}
11+
12+
getQuote(api_url);
13+
14+
const newQ = document.getElementById('btn1');
15+
newQ.addEventListener('click', () => {
16+
location.reload();
17+
})

‎Dynamic Quote Generator/style.css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
font-family: 'Roboto Slab', serif;
8+
}
9+
10+
body {
11+
background-color: #00ffff69;
12+
}
13+
14+
#container {
15+
position: absolute;
16+
top: 25%;
17+
left: 30%;
18+
background-color: white;
19+
border: 2px solid white;
20+
border-radius: 8px;
21+
box-shadow: grey 3px 3px 2px;
22+
width: 40%;
23+
height: 65%;
24+
color: #1f8800;
25+
text-align: center;
26+
display: flex;
27+
flex-wrap: wrap;
28+
align-items: center;
29+
justify-content: center;
30+
}
31+
32+
#heading {
33+
font-size: 2rem;
34+
color: black;
35+
margin: 20px;
36+
}
37+
38+
#twitterIcon {
39+
height: 14px;
40+
width: 17px;
41+
}
42+
43+
#quote {
44+
font-size: 22px;
45+
margin-top: -25px;
46+
padding: 15px;
47+
font-weight: 900;
48+
}
49+
50+
span {
51+
float: right;
52+
font-size: 25px;
53+
font-weight: bold;
54+
margin-left: 335px;
55+
margin-top: -20px;
56+
}
57+
58+
span::before {
59+
content: '~';
60+
color: brown;
61+
}
62+
63+
#buttons {
64+
display: flex;
65+
align-items: center;
66+
justify-content: space-around;
67+
margin: 10px;
68+
margin-bottom: 15px;
69+
gap: 35px;
70+
}
71+
72+
#buttons button {
73+
outline: none;
74+
border: 0;
75+
padding: 8px;
76+
cursor: pointer;
77+
font-size: 18px;
78+
font-weight: 900;
79+
background-color: #93ff8d;
80+
}
81+
82+
#buttons button:hover {
83+
background-color: aqua;
84+
color: rgb(0, 0, 54);
85+
}
86+
87+
#btn2 img {
88+
padding-right: 4px;
89+
}
90+
91+
a{
92+
text-decoration: none;
93+
color: black;
94+
}
95+
96+
/* Media Queries for Responsive Design */
97+
@media only screen and (max-width: 768px) {
98+
#container {
99+
width: 80%;
100+
left: 10%;
101+
}
102+
103+
#author {
104+
font-size: 20px;
105+
margin-right: 25px;
106+
}
107+
}
108+
109+
@media only screen and (max-width: 480px) {
110+
#container {
111+
width: 90%;
112+
left: 5%;
113+
}
114+
115+
#author {
116+
font-size: 16px;
117+
}
118+
119+
#heading {
120+
font-size: 1.5rem;
121+
}
122+
123+
#quote {
124+
font-size: 18px;
125+
}
126+
127+
span {
128+
margin-left: 200px;
129+
}
130+
}
131+
132+
@media screen and (min-width: 770px) and (max-width : 1270px) {
133+
#author {
134+
font-size: 18px;
135+
margin-right: 150px;
136+
}
137+
}

0 commit comments

Comments
 (0)