Skip to content

Commit 380838d

Browse files
0kt10kt1
committed
Added Random Quote Generator
1 parent d1fd952 commit 380838d

File tree

8 files changed

+278
-0
lines changed

8 files changed

+278
-0
lines changed

Diff for: ‎RandomQuote/0kt1/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# JavaScript Quote Generator
2+
3+
This is a simple web app built with HTML, CSS, and JavaScript that generates random quotes on different themes. The app allows you to fetch and display quotes from various themes, change the background color, and apply animations to the quote container.
4+
5+
## Features
6+
7+
- Randomly fetch and display quotes from different themes.
8+
- Change the background color with each new quote.
9+
10+
11+
## Screenshots and GIFs
12+
13+
![Screenshot 1](screenshots/screenshot1.png)
14+
![Screenshot 2](screenshots/screenshot2.png)
15+
![Gif 1](screenshots/gif1.gif)
16+
![Gif 2](screenshots/gif2.gif)
17+
18+

Diff for: ‎RandomQuote/0kt1/index.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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+
<title>Quote Generator</title>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<div class="container" id="quote-container">
13+
<h1 class="text-center">Quote Generator</h1>
14+
<blockquote id="quote-text" class="blockquote text-center"></blockquote>
15+
<p id="author" class="text-right"></p>
16+
<div class="text-center">
17+
<button id="new-quote-btn" class="btn btn-primary">New Quote</button>
18+
</div>
19+
<select id="theme-select" class="form-control">
20+
<option value="all">All Themes</option>
21+
<option value="inspiration">Inspiration</option>
22+
<option value="motivation">Motivation</option>
23+
<option value="life">Life</option>
24+
<option value="success">Success</option>
25+
<option value="love">Love</option>
26+
<option value="happiness">Happiness</option>
27+
<option value="leadership">Leadership</option>
28+
<option value="wisdom">Wisdom</option>
29+
<option value="creativity">Creativity</option>
30+
<option value="perseverance">Perseverance</option>
31+
<option value="hope">Hope</option>
32+
<option value="courage">Courage</option>
33+
<option value="friendship">Friendship</option>
34+
<option value="positive">Positive</option>
35+
<option value="change">Change</option>
36+
<option value="dreams">Dreams</option>
37+
<option value="freedom">Freedom</option>
38+
<option value="knowledge">Knowledge</option>
39+
<option value="achievement">Achievement</option>
40+
<option value="art">Art</option>
41+
<option value="family">Family</option>
42+
<option value="nature">Nature</option>
43+
<option value="peace">Peace</option>
44+
<option value="equality">Equality</option>
45+
<option value="imagination">Imagination</option>
46+
<option value="simplicity">Simplicity</option>
47+
<option value="optimism">Optimism</option>
48+
<option value="education">Education</option>
49+
<option value="patience">Patience</option>
50+
<option value="perseverance">Perseverance</option>
51+
<option value="truth">Truth</option>
52+
<option value="compassion">Compassion</option>
53+
<option value="balance">Balance</option>
54+
<option value="gratitude">Gratitude</option>
55+
<option value="health">Health</option>
56+
<option value="success">Success</option>
57+
<option value="kindness">Kindness</option>
58+
<option value="motivation">Motivation</option>
59+
<option value="adventure">Adventure</option>
60+
<option value="ambition">Ambition</option>
61+
<option value="perseverance">Perseverance</option>
62+
<option value="faith">Faith</option>
63+
<option value="positivity">Positivity</option>
64+
<option value="innovation">Innovation</option>
65+
<option value="confidence">Confidence</option>
66+
<option value="improvement">Improvement</option>
67+
<option value="curiosity">Curiosity</option>
68+
</select>
69+
</div>
70+
71+
72+
<script src="script.js"></script>
73+
74+
</body>
75+
</html>

Diff for: ‎RandomQuote/0kt1/screenshots/gif1.gif

358 KB
Loading

Diff for: ‎RandomQuote/0kt1/screenshots/gif2.gif

453 KB
Loading

Diff for: ‎RandomQuote/0kt1/screenshots/screenshot1.png

57.5 KB
Loading

Diff for: ‎RandomQuote/0kt1/screenshots/screenshot2.png

47.9 KB
Loading

Diff for: ‎RandomQuote/0kt1/script.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const quoteText = document.getElementById('quote-text');
2+
const author = document.getElementById('author');
3+
const newQuoteBtn = document.getElementById('new-quote-btn');
4+
const themeSelect = document.getElementById('theme-select');
5+
6+
let quoteChangeInterval;
7+
8+
9+
async function getRandomQuote(theme) {
10+
try {
11+
const response = await fetch(`https://api.quotable.io/random?theme=${theme}`);
12+
const data = await response.json();
13+
return data;
14+
} catch (error) {
15+
console.error('Error fetching quote:', error);
16+
return null;
17+
}
18+
}
19+
20+
21+
function getRandomColor() {
22+
const letters = '0123456789ABCDEF';
23+
let color = '#';
24+
for (let i = 0; i < 6; i++) {
25+
color += letters[Math.floor(Math.random() * 16)];
26+
}
27+
return color;
28+
}
29+
30+
31+
async function displayNewQuote() {
32+
const selectedTheme = themeSelect.value;
33+
const newQuote = await getRandomQuote(selectedTheme);
34+
if (newQuote) {
35+
quoteText.textContent = newQuote.content;
36+
author.textContent = `- ${newQuote.author}`;
37+
document.body.style.backgroundColor = getRandomColor();
38+
}
39+
}
40+
41+
42+
43+
function startAutoChangeInterval() {
44+
quoteChangeInterval = setInterval(displayNewQuote, 300000);
45+
}
46+
47+
48+
function resetAutoChangeInterval() {
49+
clearInterval(quoteChangeInterval);
50+
startAutoChangeInterval();
51+
}
52+
53+
54+
newQuoteBtn.addEventListener('click', () => {
55+
displayNewQuote();
56+
resetAutoChangeInterval();
57+
});
58+
59+
60+
displayNewQuote();
61+
startAutoChangeInterval();
62+
63+
64+
themeSelect.addEventListener('change', () => {
65+
displayNewQuote();
66+
resetAutoChangeInterval();
67+
});
68+
69+
70+
document.addEventListener('keydown', resetAutoChangeInterval);
71+
72+
73+
startAutoChangeInterval();

Diff for: ‎RandomQuote/0kt1/styles.css

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
body {
2+
font-family: 'Poppins', sans-serif;
3+
background-color: #f0f0f0;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
margin: 0;
9+
transition: background-color 0.5s ease;
10+
}
11+
12+
.container {
13+
max-width: 600px;
14+
padding: 20px;
15+
background-color: #272222;
16+
border-radius: 10px;
17+
border-width: 2px;
18+
border-right: #19bd3a;
19+
border-bottom: #19bd3a;
20+
border-style: solid;
21+
/* border-color: rgb(18, 149, 158); */
22+
/* border-color: #19b2bd; */
23+
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); */
24+
position: fixed;
25+
top: 50%;
26+
left: 50%;
27+
transform: translate(-50%, -50%);
28+
}
29+
30+
h1 {
31+
font-size: 28px;
32+
margin-bottom: 20px;
33+
color: #7ea2c8;
34+
animation: fadeInUp 1s ease;
35+
}
36+
37+
blockquote {
38+
font-size: 24px;
39+
margin: 20px 0;
40+
border-left: 4px solid #ff004c;
41+
padding-left: 20px;
42+
color: #e1d6d6;
43+
animation: fadeIn 1s ease;
44+
}
45+
46+
#author {
47+
font-style: italic;
48+
font-size: 18px;
49+
margin-top: 10px;
50+
color: #777;
51+
animation: fadeIn 1s ease;
52+
}
53+
54+
55+
.text-center #new-quote-btn {
56+
background-color: #19b2bd;
57+
color: #3a0505;
58+
border: none;
59+
border-radius: 5px;
60+
padding: 12px 24px;
61+
font-size: 18px;
62+
cursor: pointer;
63+
transition: background-color 0.3s;
64+
}
65+
66+
67+
.text-center #new-quote-btn:hover {
68+
background-color: #E54627;
69+
}
70+
71+
72+
select {
73+
font-size: 18px;
74+
padding: 8px;
75+
margin-top: 20px;
76+
border: 2px solid #007bff;
77+
border-radius: 5px;
78+
background-color: #fff;
79+
color: #007bff;
80+
transition: border-color 0.3s;
81+
animation: fadeIn 1s ease;
82+
}
83+
84+
select:hover {
85+
border-color: #0056b3;
86+
}
87+
88+
select:focus {
89+
outline: none;
90+
border-color: #0056b3;
91+
}
92+
93+
94+
@keyframes fadeIn {
95+
0% {
96+
opacity: 0;
97+
}
98+
100% {
99+
opacity: 1;
100+
}
101+
}
102+
103+
@keyframes fadeInUp {
104+
0% {
105+
opacity: 0;
106+
transform: translateY(20px);
107+
}
108+
100% {
109+
opacity: 1;
110+
transform: translateY(0);
111+
}
112+
}

0 commit comments

Comments
 (0)