Skip to content

abderrahim1210/random-quotes

Repository files navigation

📝 Random Quotes – rand-quotes.html

A simple project that displays random quotes using HTML, CSS, and JavaScript. It shows a new quote every time the user clicks a button. Great for beginners to understand DOM interaction and event handling in JavaScript.

====================
📁 File Structure
====================
rand-quotes.html         ← Main HTML page  
rand-qutoes.css          ← Styling and layout  
rand-qutoes.js           ← JavaScript logic for random quote display  
bootstrap.min.css        ← Bootstrap CSS framework  
bootstrap.bundle.min.js  ← Bootstrap JS  
icons8-citation-96.png   ← Icon used in the UI  

====================
🚀 How It Works
====================
1. The user clicks the "Show Quote" button.
2. A random quote is selected from a predefined list in JavaScript.
3. The quote and the author's name are displayed on the screen.

====================
🔧 Technologies Used
====================
- HTML5  
- CSS3  
- JavaScript (ES6)  
- Bootstrap 5

====================
📦 How to Use
====================
1. Open `rand-quotes.html` in your browser.
2. Click the button to generate and view a new random quote.
3. You can easily add more quotes in the JavaScript file.

====================
📌 Notes
====================
- Can be enhanced by fetching quotes from an external API.
- You can save the last shown quote in LocalStorage or display one on page load.

====================
👤 Author
====================
Abderrahim Khali Ali