Skip to content

Commit 987214b

Browse files
Nityasaha13Nityasaha13
committed
AI quote generator added
1 parent 236c1dd commit 987214b

File tree

3 files changed

+105
-0
lines changed

3 files changed

+105
-0
lines changed

‎AI Quote Generator/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>AI Quotes Generator</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>AI Quotes Generator</h1>
12+
</header>
13+
<div class="container">
14+
<div id="quoteContainer">
15+
<p id="quoteText"></p>
16+
</div>
17+
<button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎AI Quote Generator/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const getQuoteBtn = document.getElementById("getQuoteBtn");
2+
const quoteText = document.getElementById("quoteText");
3+
4+
getQuoteBtn.addEventListener("click", () => {
5+
getQuoteBtn.classList.add("loading");
6+
getQuoteBtn.textContent = "Loading...";
7+
getQuote();
8+
});
9+
10+
// Initially, remove loading state
11+
getQuoteBtn.classList.remove("loading");
12+
getQuoteBtn.textContent = "Get Quote";
13+
14+
function getQuote() {
15+
fetch("https://api.quotable.io/random")
16+
.then((response) => response.json())
17+
.then((data) => {
18+
quoteText.innerHTML = `"${data.content}" - ${data.author}`;
19+
getQuoteBtn.classList.remove("loading");
20+
getQuoteBtn.textContent = "Get Quote";
21+
})
22+
.catch((error) => {
23+
console.error("Error fetching quote:", error);
24+
quoteText.innerHTML = "Failed to fetch a quote. Please try again later.";
25+
getQuoteBtn.classList.remove("loading");
26+
getQuoteBtn.textContent = "Get Quote";
27+
});
28+
}

‎AI Quote Generator/styles.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #3498db;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: flex-start; /* Adjusted to align header at the top */
10+
height: 100vh;
11+
}
12+
13+
header {
14+
background-color: #2c3e50;
15+
color: #ecf0f1;
16+
text-align: center;
17+
padding: 10px;
18+
width: 100%;
19+
}
20+
21+
.container {
22+
text-align: center;
23+
background-color: #fff;
24+
padding: 20px;
25+
margin-left: 2%;
26+
margin-right: 2%;
27+
border-radius: 5px;
28+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
29+
}
30+
31+
button {
32+
padding: 10px 20px;
33+
font-size: 18px;
34+
cursor: pointer; /* Set default cursor to pointer */
35+
background-color: #3498db; /* Default background color */
36+
color: #fff;
37+
border: none;
38+
border-radius: 5px;
39+
transition: background-color 0.3s, transform 0.3s, filter 0.3s;
40+
}
41+
42+
button.loading {
43+
background-color: #ddd;
44+
cursor: not-allowed;
45+
}
46+
47+
button:hover {
48+
background-color: #2980b9;
49+
transform: scale(1.05); /* Zoom in effect on hover */
50+
filter: brightness(0.9); /* Darken the button on hover */
51+
}
52+
53+
#quoteContainer {
54+
margin-top: 20px;
55+
font-size: 20px;
56+
}

0 commit comments

Comments
 (0)