HTML CSS JavaScript Project - Random Quote Generator

Introduction

In this article, we will create a Random Quote Generator using HTML, CSS, and JavaScript. The final project features a glassy design with a title, a randomly generated quote from an author, and a button to fetch a new quote. Additionally, we will implement loading effects while the data is being fetched from an external API, ensuring a seamless user experience.

Project Structure

To start, we will create the necessary files for our project. Open your code editor (e.g., Visual Studio Code) and create a new folder called "random-quote-generator". Inside this folder, create three files:

index.html - The HTML structure of the project.
style.css - The CSS for styling the project.
index.js - The JavaScript functionality for the quote generator.

1. HTML Structure

We will begin with building the HTML structure. Use a standard HTML boilerplate. Here is a snippet to illustrate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quote Generator</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js" defer></script>
</head>
<body>
    <div class="container">
        <h1 class="heading">Random Quote Generator</h1>
        <h2 class="quote">
            <i class="fa-solid fa-quote-left"></i>
            <span id="quote">Quote will appear here</span>
            <i class="fa-solid fa-quote-right"></i>
        </h2>
        <p class="author" id="author">- Author</p>
        <button class="btn" id="btn">Get a Quote</button>
    </div>
</body>
</html>

After setting up the HTML, we will move to the CSS for styling, ensuring a glass morphism design and smooth transitions.

2. CSS Styling

Create a style.css file and include styles for the body, container, heading, quote, author, and button elements:

body (
    margin: 0;
    display: flex; /* Use Flexbox for alignment */
    height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace; /* Using a custom font */
    background: linear-gradient(to left bottom, lightgreen, lightblue);
)

.container (
    background: rgba(255, 255, 255, 0.1); /* Glassmorphism design */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 600px;
)

.heading (
    font-size: 30px;
    font-weight: 700;
)

.quote (
    font-size: 30px;
    font-weight: 600;
)

.author (
    font-size: 25px;
    margin: 10px 0;
    font-style: italic;
)

.btn (
    font-size: 18px;
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    cursor: pointer;
    width: 300px;
)

.btn:hover (
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
)

3. JavaScript Functionality

Create the index.js file to handle fetching quotes from an API and updating the interface.

const btnElement = document.getElementById('btn');
const quoteElement = document.getElementById('quote');
const authorElement = document.getElementById('author');

const API_URL = "https://api.quotable.io/random";

async function getQuote() (
    try {
        btnElement.innerText = 'Loading...';
        btnElement.disabled = true;

        const response = await fetch(API_URL);
        const data = await response.json();

        quoteElement.innerText = data.content;
        authorElement.innerText = `- ${data.author)`;
    } catch (error) (
        quoteElement.innerText = 'An error occurred, try again later.';
        authorElement.innerText = '';
        console.error(error);
    ) finally (
        btnElement.innerText = 'Get a Quote';
        btnElement.disabled = false;
    )
}

btnElement.addEventListener('click', getQuote);
window.onload = getQuote; // Fetch a quote on initial load

Conclusion

Now, we have a fully functional Random Quote Generator application. Users can click the button to fetch a new random quote each time, and during API requests, they will see loading text for better user experience.

Keywords

HTML
CSS
JavaScript
API
Random Quote Generator
Fetch
Loading Effects
Glassmorphism Design

FAQ

Q: What technologies are used in this project?
A: The project uses HTML, CSS, and JavaScript to create a Random Quote Generator.

Q: How do I fetch random quotes?
A: Quotes are fetched from the Quotable API using the fetch function in JavaScript.

Q: How is the loading effect implemented?
A: The loading effect is achieved by changing the button text to "Loading..." when the API call is made and disabling the button until the response is received.

Q: Can I customize the design?
A: Yes, you can modify the CSS styles in the style.css file to suit your preferences for colors, fonts, and layouts.

Q: What happens if there is an error in fetching data?
A: An error message is displayed in place of the quote and author, letting users know to try again later.