https://github.com/immortalwebdev/quote-generator
A simple web-based quote generator using HTML, Tailwind CSS, and JavaScript. Displays random quotes with authors at the click of a button.
https://github.com/immortalwebdev/quote-generator
cdnjs dotenv express html js nodejs quote-generator render-deployment tailwindcss
Last synced: 2 months ago
JSON representation
A simple web-based quote generator using HTML, Tailwind CSS, and JavaScript. Displays random quotes with authors at the click of a button.
- Host: GitHub
- URL: https://github.com/immortalwebdev/quote-generator
- Owner: immortalWebDev
- Created: 2024-11-17T05:06:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T19:27:50.000Z (about 1 year ago)
- Last Synced: 2025-03-12T19:11:17.660Z (about 1 year ago)
- Topics: cdnjs, dotenv, express, html, js, nodejs, quote-generator, render-deployment, tailwindcss
- Language: JavaScript
- Homepage: https://quote-generator-itu4.onrender.com/
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🔤 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](https://wa.me/917774835449)
- **Email**: [pgbadgujar007@gmail.com](mailto:pgbadgujar007@gmail.com)
- **Portfolio**: [My Portfolio](https://www.snapit.tech/pgbadgujar007/5w3jtzcp1e)
#### Give a ⭐ of you like this simple project
#### Created with 💘 by Piyush