Skip to content

Dynamic Quote Generator web page built with Svelte, featuring real-time quote updates, and a dynamic background.

License

Notifications You must be signed in to change notification settings

ForLoopCodes/quotepage

Repository files navigation

Project Readme - Dynamic Quote Generator with Svelte

Overview

This project is a dynamic quote generator web page built using Svelte, HTML, CSS, and JavaScript. It fetches random quotes from the Quotable API, featuring a visually appealing background with a dynamically changing color, an animated noise effect, and custom font styling. Svelte is employed for a reactive and efficient front-end development experience.

Screenshots

Features

  1. Dynamic Quote Display:

    • The page fetches a random quote from the Quotable API and updates the displayed quote in real-time.
  2. Colorful Background:

    • The background color of the page changes dynamically on each visit, creating a visually appealing atmosphere.
  3. Noise Effect:

    • An SVG element with a fractal noise filter produces a noise effect, enhancing the overall aesthetic of the page.
  4. Svelte Framework:

    • Svelte is used for building reactive components and managing the dynamic behavior of the web page.

Technologies Used

  • Svelte: A reactive front-end framework for building efficient and dynamic web applications.
  • HTML: The backbone of the web page structure.
  • CSS: Inline styles are used for styling, and a custom font (Playfair Display) is imported.
  • JavaScript (Svelte): The logic for fetching quotes, updating the background color, and managing dynamic content is implemented using Svelte components.
  • Quotable API: A third-party API used to retrieve random quotes.

Getting Started

To run this project locally, follow these steps:

  1. Clone the repository:

    git clone <repository-url>
  2. Install dependencies:

    cd <project-directory>
    npm install
  3. Start the development server:

    npm run dev
  4. Open your web browser and navigate to the provided local server URL.

Customize

Feel free to customize the project:

  • Change the Svelte components in the src directory to add or modify features.
  • Adjust styles and behavior within the Svelte components and stylesheets.

Credits

  • Quotable API: Quotable - Providing a diverse collection of quotes.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Feel free to contribute, suggest improvements, or use this project as a foundation for your creative web experiments with Svelte!