Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions Domains/Frontend/MiniProjects/QuoteGenerator/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Random Quote Generator
**Contributor:** Aaditya-2407

## Description
A simple web app that displays a new random quote from a predefined list every time the user clicks the "New Quote" button.

## Tech Stack
- HTML
- CSS
- JavaScript (Vanilla)

## How to Run
1. Open the `index.html` file in your web browser.
23 changes: 23 additions & 0 deletions Domains/Frontend/MiniProjects/QuoteGenerator/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quote Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<div class="quote-text">
<span id="quote">"The best way to predict the future is to create it."</span>
</div>
<div class="quote-author">
- <span id="author">Peter Drucker</span>
</div>
<div class="button-container">
<button class="new-quote-btn" id="new-quote">New Quote</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions Domains/Frontend/MiniProjects/QuoteGenerator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
const quoteText = document.getElementById('quote');
const authorText = document.getElementById('author');
const newQuoteBtn = document.getElementById('new-quote');

const quotes = [
{
text: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
author: "Nelson Mandela"
},
{
text: "The way to get started is to quit talking and begin doing.",
author: "Walt Disney"
},
{
text: "Your time is limited, so don't waste it living someone else's life.",
author: "Steve Jobs"
},
{
text: "If life were predictable it would cease to be life, and be without flavor.",
author: "Eleanor Roosevelt"
},
{
text: "It is during our darkest moments that we must focus to see the light.",
author: "Aristotle"
},
{
text: "Whoever is happy will make others happy too.",
author: "Anne Frank"
}
];

function getNewQuote() {
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
quoteText.textContent = `"${randomQuote.text}"`;
authorText.textContent = randomQuote.author;
}

newQuoteBtn.addEventListener('click', getNewQuote);
54 changes: 54 additions & 0 deletions Domains/Frontend/MiniProjects/QuoteGenerator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
margin: 0;
}

.quote-container {
width: 90%;
max-width: 600px;
padding: 3rem;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.quote-text {
font-size: 1.75rem;
font-weight: 500;
line-height: 1.6;
margin-bottom: 1.5rem;
color: #333;
}

.quote-author {
font-size: 1.25rem;
font-style: italic;
color: #555;
text-align: right;
margin-bottom: 2rem;
}

.button-container {
text-align: center;
}

.new-quote-btn {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
background-color: #007aff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}

.new-quote-btn:hover {
background-color: #0056b3;
}
Loading