Skip to content

Commit 123623a

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #965 from yashwanthvarma18/RandomQuoteGenerator-yashwanthvarma18
Random Quote Generator- yashwanthvarma18
2 parents 919706d + 562d94e commit 123623a

File tree

5 files changed

+135
-0
lines changed

5 files changed

+135
-0
lines changed

‎RandomQuote/yashwanthvarma18/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Random Quote Generator
2+
3+
A simple web application that generates random quotes using the [Type Fit API](https://type.fit/api/quotes).
4+
5+
![Random Quote Generator](ss.png)
6+
7+
## Features
8+
9+
- Click the "Generate Quote" button to fetch and display a random quote.
10+
- The quotes are fetched from the [Type Fit API](https://type.fit/api/quotes).
11+
- Each quote is displayed with double quotation marks for proper formatting.
12+
13+
14+
## Installation
15+
16+
1. Clone this repository or download the ZIP file.
17+
2. Open the `index.html` file in your web browser.
18+
19+
## Usage
20+
21+
- Click the "Generate Quote" button to fetch and display a new random quote.
22+
- Enjoy insightful and inspirational quotes.
23+
24+
25+
## Acknowledgments
26+
27+
- [Type Fit API](https://type.fit/api/quotes) for providing the quotes.
28+
29+
<!-- Created By YASHWANTH VARMA -->
30+

‎RandomQuote/yashwanthvarma18/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Poppins:wght@300&family=Signika:wght@300&family=Teko:wght@500&family=Titillium+Web:wght@600&display=swap" rel="stylesheet">
10+
<title>Quote GENERATOR</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>QUOTE Generator</h1>
15+
<button id="generateQuote">Generate Quote</button>
16+
<p id="quoteText"></p>
17+
</div>
18+
</div>
19+
<script src="script.js"></script>
20+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
21+
22+
</body>
23+
</html>

‎RandomQuote/yashwanthvarma18/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const quoteText = document.getElementById('quoteText');
2+
const generateQuoteButton = document.getElementById('generateQuote');
3+
4+
generateQuoteButton.addEventListener('click', getQuote);
5+
6+
function getQuote() {
7+
const settings = {
8+
"async": true,
9+
"crossDomain": true,
10+
"url": "https://type.fit/api/quotes",
11+
"method": "GET"
12+
};
13+
14+
$.ajax(settings).done(function (response) {
15+
const data = JSON.parse(response);
16+
const randomIndex = Math.floor(Math.random() * data.length);
17+
const randomQuote = data[randomIndex].text;
18+
quoteText.innerText = `"${randomQuote}"`; // Add double quotation marks around the quote
19+
});
20+
}

‎RandomQuote/yashwanthvarma18/ss.png‎

1.35 MB
Loading

‎RandomQuote/yashwanthvarma18/style.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background-image: url('https://images4.alphacoders.com/133/1330757.png');
5+
background-size: cover;
6+
margin: 0;
7+
padding: 0;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
color: #fff;
13+
}
14+
15+
.container {
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
align-items: center;
20+
background-color: rgba(0, 0, 0, 0.3); /* Grayish background with 30% opacity */
21+
border-radius: 10px;
22+
box-shadow: 0 0 10px rgba(206, 192, 192, 0.2);
23+
backdrop-filter: blur(5px); /* Apply a blur effect */
24+
padding: 20px;
25+
max-width: 400px;
26+
margin: 0 auto;
27+
height: 300px; /* Fixed height for the box */
28+
overflow-y: auto; /* Allow vertical scrolling if needed */
29+
text-align: center; /* Center-align text */
30+
}
31+
32+
h1 {
33+
margin-top: 60px;
34+
color: #fff;
35+
font-family: 'Bebas Neue', sans-serif;
36+
font-size: 36px;
37+
}
38+
39+
button {
40+
background-color: #007BFF;
41+
color: #fff;
42+
border: none;
43+
padding: 8px 16px;
44+
font-size: 18px;
45+
border-radius: 5px;
46+
cursor: pointer;
47+
margin-top: 10px;
48+
transition: transform 0.2s ease; /* Add transition for smooth scaling */
49+
font-family: 'Fjalla One', sans-serif;
50+
}
51+
52+
button:hover {
53+
background-color: #0056b3;
54+
transform: scale(1.05); /* Scale up by 5% on hover */
55+
}
56+
57+
#quoteText {
58+
font-size: 18px;
59+
color: #fff;
60+
line-height: 1.5; /* You can adjust this value as needed for spacing */
61+
font-family: 'Merriweather', serif;
62+
}

0 commit comments

Comments
 (0)