Skip to content

Commit 99fcd09

Browse files
sandip-77sandip-77
authored
Add files via upload
First commit
1 parent d0bbae1 commit 99fcd09

File tree

1 file changed

+229
-0
lines changed

1 file changed

+229
-0
lines changed

Diff for: ‎index.html

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Quote Generator</title>
6+
<link rel="icon" href="https://www.google.com/s2/u/0/favicons?domain=srbooks.in">
7+
<!-- <link rel="stylesheet" href="styles.css"> -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9+
<style>
10+
11+
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
12+
13+
html{
14+
box-sizing: border-box;
15+
}
16+
17+
body{
18+
margin: 0;
19+
min-height: 100vh;
20+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1015%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(229%2c 229%2c 229%2c 1)'%3e%3c/rect%3e%3cpath d='M1166 231L1165 502' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M813 425L812 41' stroke-width='8' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1231 545L1230 341' stroke-width='8' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1186 45L1185 -198' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1111 193L1110 -89' stroke-width='8' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M483 488L482 850' stroke-width='10' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1309 529L1308 221' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1007 532L1006 170' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M150 95L149 466' stroke-width='10' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1165 9L1164 180' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1324 333L1323 129' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M842 290L841 -7' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1061 483L1060 633' stroke-width='6' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1019 449L1018 269' stroke-width='6' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M305 289L304 655' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1305 413L1304 699' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1398 199L1397 18' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M237 420L236 133' stroke-width='8' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1367 319L1366 -13' stroke-width='10' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M725 71L724 -170' stroke-width='10' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M275 218L274 538' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M20 95L19 298' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M806 93L805 -244' stroke-width='6' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1227 118L1226 -113' stroke-width='8' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M380 200L379 -26' stroke-width='8' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1426 178L1425 434' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1010 326L1009 570' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1166 460L1165 682' stroke-width='8' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M751 75L750 -108' stroke-width='8' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M780 260L779 485' stroke-width='6' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M144 20L143 -347' stroke-width='6' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1429 196L1428 -150' stroke-width='10' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M480 449L479 862' stroke-width='8' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M734 360L733 153' stroke-width='6' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M228 107L227 -41' stroke-width='8' stroke='url(%23SvgjsLinearGradient1016)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1366 288L1365 454' stroke-width='10' stroke='url(%23SvgjsLinearGradient1017)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1015'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1016'%3e%3cstop stop-color='rgba(207%2c 207%2c 207%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(207%2c 207%2c 207%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1017'%3e%3cstop stop-color='rgba(207%2c 207%2c 207%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(207%2c 207%2c 207%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
21+
color: black;
22+
font-family: 'Montserrat', sans-serif;
23+
font-weight: 700;
24+
text-align: center;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
}
29+
30+
31+
32+
@keyframes spin {
33+
0% { transform: rotate(0deg); }
34+
100% { transform: rotate(360deg); }
35+
}
36+
37+
.quote-container{
38+
width: auto;
39+
max-width: 900px;
40+
padding: 20px 30px;
41+
border-radius: 10px;
42+
background-color: rgba(255, 255,255, 0.4);
43+
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
44+
}
45+
46+
.quote-text{
47+
font-size: 2.75rem;
48+
}
49+
50+
.long-quote{
51+
font-size: 2rem;
52+
}
53+
54+
.fa-quote-left.fa-quote-right{
55+
font-size: 4rem;
56+
}
57+
58+
.quote-author{
59+
margin-top: 15px;
60+
font-size: 2rem;
61+
font-weight: 400;
62+
font-style: italic;
63+
}
64+
65+
button{
66+
cursor: pointer;
67+
font-size: 1.2rem;
68+
height: 2.5rem;
69+
border: none;
70+
border-radius: 10px;
71+
color: white;
72+
background-color: #333;
73+
outline: none;
74+
padding: 0.5rem 1.8rem;
75+
box-shadow: 0 0.3rem rgba(121,121,121, 0.65);
76+
}
77+
78+
.button-container{
79+
margin-top: 15px;
80+
display: flex;
81+
justify-content: space-between;
82+
}
83+
84+
button:hover{
85+
filter: brightness(110%);
86+
}
87+
button:active{
88+
transform: translate(0, 0.3rem); /* Andar ghusa dalega */
89+
box-shadow: 0 0.1rem rgba(255, 255,255, 0.65);
90+
91+
}
92+
93+
.twitter-button:hover{
94+
color: #38a1f3;
95+
}
96+
97+
.fa-twitter{
98+
font-size: 1.5rem;
99+
}
100+
101+
/* Loader */
102+
103+
.loader {
104+
border: 16px solid #f3f3f3; /* Light grey */
105+
border-top: 16px solid #333; /* Blue */
106+
border-radius: 50%;
107+
width: 120px;
108+
height: 120px;
109+
animation: spin 2s linear infinite;
110+
}
111+
112+
/* Media Query */
113+
@media screen and (max-width:1000px) {
114+
.quote-container{
115+
margin: auto 10px;
116+
}
117+
.quote-text{
118+
font-size: 2.5rem;
119+
}
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
125+
<div class="quote-container" id="quote-container">
126+
<!-- Quote -->
127+
<div class="quote-text">
128+
<i class="fas fa-quote-left"></i>
129+
<span id="quote"></span>
130+
<i class="fas fa-quote-right"></i>
131+
</div>
132+
<!-- Author -->
133+
<div class="quote-author">
134+
<span class="" id="author"></span>
135+
</div>
136+
137+
<!-- buttons -->
138+
<div class="button-container">
139+
<button class="twitter-button" id="twitter" title="Tweet this">
140+
<i class="fab fa-twitter"></i>
141+
</button>
142+
<button id="new-quote">New Quote</button>
143+
</div>
144+
</div>
145+
146+
<div class="loader" id="loader"></div>
147+
148+
149+
<script>
150+
const quoteContainer = document.getElementById("quote-container");
151+
const quoteText = document.getElementById("quote");
152+
const twitterBtn = document.getElementById("twitter");
153+
const newQuoteBtn = document.getElementById("new-quote");
154+
const authorText = document.getElementById("author");
155+
const loader = document.getElementById('loader');
156+
157+
158+
let apiQuotes = [];
159+
//show loading
160+
161+
function loading() {
162+
loader.hidden = false;
163+
quoteContainer.hidden = true;
164+
}
165+
166+
//hide loading when function is complete
167+
function complete() {
168+
quoteContainer.hidden = false;
169+
loader.hidden = true;
170+
}
171+
172+
// Show new Qoute
173+
function newQuote(){
174+
loading();
175+
176+
const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
177+
authorText.textContent = quote.author;
178+
179+
if (!quote.author){
180+
authorText.textContent = 'Anonymous';
181+
}else{
182+
authorText.textContent = quote.author;
183+
}
184+
185+
if(quote.text.length > 100){
186+
quoteText.classList.add('long-quote');
187+
}else{
188+
quoteText.classList.remove('long-quote');
189+
}
190+
complete();
191+
192+
quoteText.textContent = quote.text;
193+
194+
}
195+
196+
// API call
197+
// ansync function can run at any time independently and it wont stop the broweser for loading up a page.
198+
async function getQuotes(){
199+
loading();
200+
201+
const apiUrl = "https://type.fit/api/quotes";
202+
try{
203+
const response = await fetch(apiUrl); //this means response will not be populated until it fetched some data from the url.
204+
apiQuotes = await response.json();
205+
newQuote();
206+
} catch(error){
207+
// catch eror here
208+
}
209+
}
210+
211+
212+
// Tweet a quote
213+
function tweetQuote(){
214+
const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
215+
window.open(twitterUrl, '_blank');//helps to open twitter window in a new tab.
216+
}
217+
218+
// Event Listerner
219+
newQuoteBtn.addEventListener('click',newQuote);
220+
twitterBtn.addEventListener('click', tweetQuote);
221+
222+
223+
// onload
224+
getQuotes();
225+
226+
227+
</script>
228+
</body>
229+
</html>

0 commit comments

Comments
 (0)