Skip to content

Commit 0fc3299

Browse files
aloukikjoshialoukikjoshi
authored
Merge pull request #27 from eshaan5/random-quote-generator
Add Random Quote Generator Mini-Project
2 parents b4170db + daeed8a commit 0fc3299

File tree

4 files changed

+154
-0
lines changed

4 files changed

+154
-0
lines changed

‎random-quote-generator/README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Random Quote Generator
2+
3+
## 📚 Technologies Used 📚
4+
5+
- **JavaScript**: The primary language used for creating this project.
6+
- **HTML**: Used to structure the content on the webpage.
7+
- **CSS**: Used for styling the webpage.
8+
9+
## 🌟 Features
10+
11+
- Fetch API Integration: Retrieves random quotes dynamically from a public API.
12+
13+
- Modern UI Design: Clean and polished user interface with responsive styling.
14+
15+
- Error Handling: Gracefully manages API errors to ensure a smooth user experience.
16+
17+
- Interactive User Experience: Click the button to generate a new quote instantly.
18+
19+
## 📂 Project Structure 📂
20+
21+
This project is contained in its own directory. Here is a brief overview of the project structure:
22+
23+
- `index.html`: This file contains the HTML structure of the project.
24+
- `script.js`: This file contains the JavaScript code for the project.
25+
- `style.css`: This file contains the CSS styles for the project.
26+
27+
## 🚀 How to Run this Project 🚀
28+
29+
1. Clone the repository and navigate to the random-quote-generator directory.
30+
2. Open `index.html` in your browser.

‎random-quote-generator/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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>Random Quote Generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Random Quote Generator</h1>
14+
<div class="quote-box">
15+
<p id="quote" class="quote">"Click the button to load a quote!"</p>
16+
<p id="author" class="author">- Unknown</p>
17+
</div>
18+
<button id="new-quote" class="btn">Get New Quote</button>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
23+
</html>

‎random-quote-generator/script.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const quoteText = document.getElementById("quote");
2+
const authorText = document.getElementById("author");
3+
const newQuoteButton = document.getElementById("new-quote");
4+
5+
// Function to fetch a random quote
6+
async function fetchQuote() {
7+
try {
8+
// Display loading message
9+
quoteText.textContent = "Loading...";
10+
authorText.textContent = "";
11+
12+
const response = await fetch("https://api.quotable.io/random");
13+
if (!response.ok) throw new Error("Failed to fetch the quote");
14+
15+
const data = await response.json();
16+
quoteText.textContent = `"${data.content}"`;
17+
authorText.textContent = `- ${data.author || "Unknown"}`;
18+
} catch (error) {
19+
quoteText.textContent = "Oops! Unable to fetch a quote.";
20+
authorText.textContent = "";
21+
console.error(error);
22+
}
23+
}
24+
25+
// Attach event listener to the button
26+
newQuoteButton.addEventListener("click", fetchQuote);
27+
28+
// Fetch an initial quote on page load
29+
fetchQuote();

‎random-quote-generator/style.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* General Reset */
2+
body,
3+
h1,
4+
p,
5+
button {
6+
margin: 0;
7+
padding: 0;
8+
font-family: "Arial", sans-serif;
9+
}
10+
11+
body {
12+
background: linear-gradient(135deg, #4c6ef5, #b197fc);
13+
color: #ffffff;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
height: 100vh;
18+
text-align: center;
19+
margin: 0;
20+
}
21+
22+
/* Container */
23+
.container {
24+
background: #ffffff;
25+
border-radius: 12px;
26+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
27+
width: 90%;
28+
max-width: 500px;
29+
padding: 20px;
30+
text-align: center;
31+
}
32+
33+
/* Heading */
34+
h1 {
35+
font-size: 1.8rem;
36+
color: #4c6ef5;
37+
margin-bottom: 1rem;
38+
}
39+
40+
/* Quote Box */
41+
.quote-box {
42+
margin: 20px 0;
43+
}
44+
45+
.quote {
46+
font-size: 1.5rem;
47+
font-weight: 500;
48+
margin-bottom: 10px;
49+
color: #333;
50+
}
51+
52+
.author {
53+
font-size: 1.2rem;
54+
color: #666;
55+
}
56+
57+
/* Button */
58+
.btn {
59+
padding: 10px 20px;
60+
font-size: 1rem;
61+
font-weight: bold;
62+
color: #ffffff;
63+
background: #4c6ef5;
64+
border: none;
65+
border-radius: 8px;
66+
cursor: pointer;
67+
transition: all 0.3s ease;
68+
}
69+
70+
.btn:hover {
71+
background: #364fc7;
72+
}

0 commit comments

Comments
 (0)