Skip to content

Commit ecb433d

Browse files
Chayandas07Chayandas07
authored
Merge pull request #66 from VanshBhardwaj24/main
added quote -generator website
2 parents 05f9a8f + f7f4238 commit ecb433d

File tree

3 files changed

+231
-0
lines changed

3 files changed

+231
-0
lines changed

‎Quote/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Quote Generator</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://fonts.googleapis.com/css?family=Roboto"
15+
/>
16+
-
17+
18+
</style>
19+
</head>
20+
<body>
21+
<div class="container">
22+
<div class="quote-container" id="quote-container">
23+
<!-- quote -->
24+
<div class="quote-text">
25+
<i class="fas fa-quote-left"></i>
26+
<span id="quote">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
27+
voluptatum.</span
28+
>
29+
</div>
30+
<!-- author -->
31+
<div class="quote-author">
32+
<span id="author">Buddha</span>
33+
</div>
34+
</div>
35+
<!-- Buttons -->
36+
<div class="button-container">
37+
<button class="twitter-button" id="twitter-button">
38+
<i class="fab fa-twitter"></i> Tweet
39+
</button>
40+
<button id="new-quote">New quote</button>
41+
</div>
42+
</div>
43+
<!-- loader -->
44+
<div class="loader"></div>
45+
<!-- Script -->
46+
<script src="script.js"></script>
47+
</body>
48+
</html>

‎Quote/script.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
//get quote from api
2+
3+
const quotecontainer = document.getElementById("quote-container");
4+
const quotetext = document.getElementById("quote");
5+
const authortext = document.getElementById("author");
6+
const twitterBtn = document.getElementById("twitter-button");
7+
const newQuoteBtn = document.getElementById("new-quote");
8+
const loader = document.getElementById("loader");
9+
10+
// show loading
11+
function loading() {
12+
loader.hidden = false;
13+
quotecontainer.hidden = true;
14+
}
15+
16+
async function getQuote() {
17+
const proxyUrl = "https://cors-anywhere.herokuapp.com/";
18+
const apiUrl =
19+
"http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json";
20+
try {
21+
const response = await fetch(proxyUrl + apiUrl);
22+
const data = await response.json();
23+
if (data.quoteAuthor === "") {
24+
authortext.innerText = "Unknown";
25+
} else {
26+
authortext.innerText = data.quoteAuthor;
27+
}
28+
authortext.innerText = data.quoteAuthor;
29+
quotetext.innerText = data.quoteText;
30+
} catch (error) {
31+
console.log("whoops, no quote", error);
32+
}
33+
}
34+
35+
// tweet quote
36+
function tweetQuote() {
37+
const quote = quotetext.innerText;
38+
const author = authortext.innerText;
39+
const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
40+
window.open(twitterUrl, "_blank");
41+
}
42+
43+
// event listeners
44+
newQuoteBtn.addEventListener("click", getQuote);
45+
twitterBtn.addEventListener("click", tweetQuote);
46+
47+
getQuote();

‎Quote/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
background-color: #f5f5f5;
10+
background-color: #dfdbe5;
11+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23000000' fill-opacity='0.08'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
12+
}
13+
14+
.container {
15+
width: 100%;
16+
height: 100vh;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.quote-container {
24+
width: 80%;
25+
max-width: 600px;
26+
padding: 20px 30px;
27+
border-radius: 10px;
28+
background-color: rgba(248, 241, 241, 0.8);
29+
box-shadow: 0 10px 10px 10px rgba(255, 255, 255, 0.4);
30+
margin-bottom: 20px;
31+
text-align: center;
32+
box-shadow: 0 0.3rem rgba(255, 255, 255, 0.4);
33+
}
34+
35+
.quote-text {
36+
font-size: 1.5rem;
37+
font-weight: 700;
38+
line-height: 1.5;
39+
margin-bottom: 20px;
40+
justify-content: center;
41+
}
42+
43+
.quote-text i {
44+
margin-right: 10px;
45+
justify-content: center;
46+
}
47+
48+
.quote-author {
49+
margin: 15 px 20px;
50+
font-size: 1rem;
51+
font-weight: 400;
52+
text-align: right;
53+
}
54+
55+
.quote-author,
56+
.author {
57+
margin: 15px auto;
58+
text-align: center;
59+
font-weight: 500;
60+
}
61+
62+
.button-container {
63+
display: flex;
64+
justify-content: space-between;
65+
width: 80%;
66+
max-width: 600px;
67+
}
68+
69+
.twitter-button {
70+
background-color: #38a1f3;
71+
cursor: pointer;
72+
height: 2.5 rem;
73+
color: #fff;
74+
border: none;
75+
border-radius: 5px;
76+
padding: 10px 15px;
77+
font-size: 1rem;
78+
transition: background-color 0.3s ease;
79+
box-shadow: 0 0.3rem rgba(255, 255, 255, 0.4);
80+
}
81+
82+
.twitter-button:hover {
83+
background-color: #2c9ff7;
84+
box-shadow: #0d0e0f;
85+
}
86+
87+
#new-quote {
88+
background-color: #b2a9a9;
89+
color: #0d0e0f;
90+
border: 2px solid #a8b9c6;
91+
border-radius: 5px;
92+
padding: 10px 15px;
93+
font-size: 1rem;
94+
cursor: pointer;
95+
transition: background-color 0.3s ease, color 0.3s ease;
96+
}
97+
98+
#new-quote:hover {
99+
background-color: #38a1f3;
100+
color: #fff;
101+
}
102+
103+
#new-quote:active {
104+
transform: translate(0, 0.3rem);
105+
box-shadow: 0 0.1rem rgba(255, 255, 255, 0.4);
106+
}
107+
108+
/* gfg loader */
109+
.loader {
110+
border: 16px solid #f3f3f3;
111+
border-radius: 50%;
112+
border-top: 16px solid blue;
113+
border-bottom: 16px solid blue;
114+
width: 120px;
115+
height: 120px;
116+
-webkit-animation: spin 2s linear infinite;
117+
animation: spin 2s linear infinite;
118+
}
119+
120+
@-webkit-keyframes spin {
121+
0% {
122+
-webkit-transform: rotate(0deg);
123+
}
124+
100% {
125+
-webkit-transform: rotate(360deg);
126+
}
127+
}
128+
129+
@keyframes spin {
130+
0% {
131+
transform: rotate(0deg);
132+
}
133+
100% {
134+
transform: rotate(360deg);
135+
}
136+
}

0 commit comments

Comments
 (0)