Quote Generator

🔤 Quote Generator

A simple web-based quote generator built using HTML, Tailwind CSS, and JavaScript. This project displays random quotes from a predefined list when a button is clicked. It uses fetch API with custom cdn links to reduce the loading time. It also showcases how we can secure sensitive URLs by utilizing backend server in the flow.

⭐ Features

• Displays a random quote with the author’s name.
• Uses Tailwind CSS for styling and a clean user interface.
• Organized JavaScript files for better code maintainability.
• Protected key url by creating backend server

🏗 Project Structure

project/
│
├── backend/
│   ├── server.js
│   ├── .env
│   ├── package.json
│
├── frontend/
│   ├── index.html
│   ├── script.js

📂Files

• index.html: Contains the HTML structure of the project.
• styles.css: Custom CSS (optional) to supplement Tailwind CSS.
• script.js: Contains the logic to display a random quote.

🖐 How to Use

1. Clone or download this repository.
2. Open index.html in your web browser.
3. Click the "Generate Quote" button to see a new random quote.

🛠 Technologies Used

• HTML: Basic structure of the web page.
• Tailwind CSS: For modern and responsive UI design.
• JavaScript: Logic for selecting and displaying random quotes.
• Fetch API with CDN: Used instead of local files to reduce loading time.
• NodeJS: JS runtime environment to run JS on the server.
• ExpressJS: A backend framework for creating and managing servers and APIs.
• dotenv: A library for securely managing environment variables.

🤝 Contributions

• Contributions are welcome! If you have ideas, suggestions, or improvements, feel free to create a pull request or open an issue.
• Star and Fork the repo to stay updated!

📜 License

• This project is licensed under the MIT License.

📧 Contact

For any inquiries, feedback, or support:

• Phone: WhatsApp
• Email: [email protected]
• Portfolio: My Portfolio

Give a ⭐ of you like this simple project

Created with 💘 by Piyush