https://github.com/khairul25556/quote-generator

A simple web app that fetches random quotes from an API and displays them. Users can share quotes on Twitter with a click of a button. It includes a clean, responsive design with a loading spinner and smooth interactions.
https://github.com/khairul25556/quote-generator

css html javascript quotes-api web-development

Last synced: 3 months ago
JSON representation

A simple web app that fetches random quotes from an API and displays them. Users can share quotes on Twitter with a click of a button. It includes a clean, responsive design with a loading spinner and smooth interactions.

• Host: GitHub
• URL: https://github.com/khairul25556/quote-generator
• Owner: Khairul25556
• Created: 2025-03-23T13:39:50.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-03-30T18:35:20.000Z (7 months ago)
• Last Synced: 2025-06-09T13:57:06.507Z (4 months ago)
• Topics: css, html, javascript, quotes-api, web-development
• Language: CSS
• Homepage: https://khairul25556.github.io/quote-generator/
• Size: 6.84 KB
• Stars: 4
• 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** that fetches random quotes from an API and allows users to tweet them. You can use this app to get inspiring, motivational, or philosophical quotes and share them instantly on Twitter!

## Features

- Fetches random quotes from the [API Ninjas Quotes API](https://www.api-ninjas.com/api).

- Allows you to tweet the displayed quote directly to Twitter using a pre-filled tweet.

- Beautiful design with a loading animation while the quote is being fetched.

## Links

- **API URL**: [API Ninjas Quotes API](https://www.api-ninjas.com/api)  

  Fetches random quotes for display on the app.

  

- **Twitter URL**: [Tweet Quote](https://twitter.com/intent/tweet?)  

  Directly posts the current quote to Twitter.

- **Loader Design**: [CSS Loader from W3Schools](https://www.w3schools.com/howto/howto_css_loader.asp)  

  CSS spinner used while waiting for the quote to load.

- **Background Image Patterns**: [Hero Patterns](https://heropatterns.com/)  

  Beautiful background patterns used to enhance the design.

- **Page Title Icon**: ![CSS-Tricks Icon](https://www.google.com/s2/u/0/favicons?domain=css-tricks.com)  

  Custom favicon used for the page.

## Usage

1. **Get a Quote**  

   Click the **"New Quote"** button to generate a random quote.

2. **Tweet the Quote**  

   Click the **"Tweet"** button to open a new Twitter window with the quote pre-filled.

## Technologies Used

- **HTML**: For the structure and layout of the page.

- **CSS**: For styling and UI design.

- **JavaScript**: To fetch quotes from the API and handle interactions.

- **API Ninjas Quotes API**: Provides the random quotes.

## How to Run the Project Locally

To run this project on your local machine:

1. Clone the repository:

   ```bash

   git clone https://github.com/Khairul25556/quote-generator.git