https://github.com/frontendhighroller/random-quote-generator

Junior Javascript Project - Random Quote Generator with Modern UI
https://github.com/frontendhighroller/random-quote-generator

arrays css html5 javasctipt objects

Last synced: about 2 months ago
JSON representation

Junior Javascript Project - Random Quote Generator with Modern UI

• Host: GitHub
• URL: https://github.com/frontendhighroller/random-quote-generator
• Owner: FrontEndHighRoller
• Created: 2024-01-15T22:02:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-12-27T10:30:17.000Z (6 months ago)
• Last Synced: 2025-12-28T19:46:15.463Z (6 months ago)
• Topics: arrays, css, html5, javasctipt, objects
• Language: JavaScript
• Homepage: https://frontendhighroller.github.io/random-quote-generator/
• Size: 72.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💬 Random Quotes Generator

> A dynamic JavaScript application that displays random inspirational quotes with automatic background colour changes for an engaging user experience.

📸 Preview

![ALT](screen1.png)

---

## 👀 Why This Project Stands Out

- Random quote generation without repetition  

- Automatically changes background colour on every quote  

- Quotes refresh automatically every 10 seconds  

- Responsive typography for mobile and desktop  

- Demonstrates strong JavaScript fundamentals and DOM manipulation  

---

## 🛠️ Tech Stack

- **HTML5** – Semantic structure  

- **CSS3** – Custom styling, animations, and responsive design  

- **JavaScript (Vanilla)** – Logic, events, timers, and data handling  

- **Google Fonts** – Playfair Display for elegant typography  

---

## ✨ Features

- Displays inspirational and motivational quotes  

- Ensures quotes are not repeated until all have been shown  

- Random background color generated using hex values  

- Auto-refresh quotes every 10 seconds  

- Button click to manually load a new quote  

- Responsive layout using media queries  

---

## 🧠 What I Learned

- Managing **arrays and objects** in JavaScript  

- Preventing repetition using **state tracking**

- Using **event listeners** and **setInterval**

- Dynamically updating the DOM

- Generating **random values** (quotes & colors)

- Writing cleaner, modular JavaScript code

> 📌 This project was built as one of the challenges by the TeamTreehouse course for Front End Development, helping reinforce JavaScript fundamentals and best practices through hands-on implementation.

---

## ⚙️ How to Run Locally

1. Clone the repository  

   ```bash

   git clone https://github.com/FrontEndHighRoller/random-quote-generator.git

2. Open index.html in your browser

3. Resize the screen to see responsive layouts and image switching in action 🎯

---

🙋‍♂️ Author

Dennis Rumanek

GitHub: https://github.com/FrontEndHighRoller

LinkedIn: https://www.linkedin.com/in/dennis-rumanek/

⭐ If you like this solution, feel free to star the repository!