From 386ba378ff086b2d7af17cb393eecd3d4ce252bd Mon Sep 17 00:00:00 2001 From: Aaditya Kharat Date: Mon, 20 Oct 2025 12:02:47 +0530 Subject: [PATCH] Add: Frontend - Random Quote Generator --- .../MiniProjects/QuoteGenerator/README.md | 13 +++++ .../MiniProjects/QuoteGenerator/index.html | 23 ++++++++ .../MiniProjects/QuoteGenerator/script.js | 38 +++++++++++++ .../MiniProjects/QuoteGenerator/style.css | 54 +++++++++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/QuoteGenerator/README.md create mode 100644 Domains/Frontend/MiniProjects/QuoteGenerator/index.html create mode 100644 Domains/Frontend/MiniProjects/QuoteGenerator/script.js create mode 100644 Domains/Frontend/MiniProjects/QuoteGenerator/style.css diff --git a/Domains/Frontend/MiniProjects/QuoteGenerator/README.md b/Domains/Frontend/MiniProjects/QuoteGenerator/README.md new file mode 100644 index 00000000..b7d269fc --- /dev/null +++ b/Domains/Frontend/MiniProjects/QuoteGenerator/README.md @@ -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. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/QuoteGenerator/index.html b/Domains/Frontend/MiniProjects/QuoteGenerator/index.html new file mode 100644 index 00000000..26b8803a --- /dev/null +++ b/Domains/Frontend/MiniProjects/QuoteGenerator/index.html @@ -0,0 +1,23 @@ + + + + + + Random Quote Generator + + + +
+
+ "The best way to predict the future is to create it." +
+
+ - Peter Drucker +
+
+ +
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/QuoteGenerator/script.js b/Domains/Frontend/MiniProjects/QuoteGenerator/script.js new file mode 100644 index 00000000..edbedac9 --- /dev/null +++ b/Domains/Frontend/MiniProjects/QuoteGenerator/script.js @@ -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); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/QuoteGenerator/style.css b/Domains/Frontend/MiniProjects/QuoteGenerator/style.css new file mode 100644 index 00000000..8ce4f796 --- /dev/null +++ b/Domains/Frontend/MiniProjects/QuoteGenerator/style.css @@ -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; +} \ No newline at end of file