Simple Quote Generator with HTML, CSS, and JavaScript

Introduction

In this tutorial, we’ll walk you through the process of creating a Random Quote Generator using HTML, CSS, and JavaScript. This project aims to dynamically fetch and display random quotes from an external API, providing an engaging and interactive user experience.

Prerequisites

Before we dive into the code, make sure you have the following:

Basic understanding of HTML, CSS, and JavaScript.
A code editor (e.g., Visual Studio Code, Sublime Text) installed on your computer.

Step 1: Set up the HTML Structure

The HTML structure is the foundation of our Random Quote Generator. Open your HTML file (e.g., index.html) and set up the basic structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Quote Generator</title>
    <!-- Include your custom styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="quote-container">
      <div id="quote-text"></div>
      <div id="quote-author"></div>
      <button id="new-quote-btn" onclick="getRandomQuote()">New Quote</button>
    </div>
    <!-- Include your custom JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

HTML

Explanation:

The HTML file includes a <div> with the ID quote-container to hold the quote and author information.
Inside this container, there are two more <div> elements for displaying the quote text (quote-text) and author (quote-author).
A button (new-quote-btn) triggers the function to fetch and display a new quote.

Step 2: Style Your Application

Let’s add some style to make our Random Quote Generator visually appealing. Create a separate CSS file (styles.css) and define the styles.

body {
  font-family: "Arial", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #1e1c27;
  color: white;
}

#quote-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

#quote-text {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px;
}

#quote-author {
  font-style: italic;
  color: #666;
}

#new-quote-btn {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

#new-quote-btn:hover {
  background-color: #2980b9;
}

CSS

Explanation:

The styles define the overall appearance of the application.
The body is centered, and a background color is set for a pleasing look.
The quote-container has a white background, border radius, and box shadow to create a card-like appearance.
The button has a transition effect on hover for a more interactive feel.

Step 3: Implement JavaScript Functionality

Now, let’s add the functionality using JavaScript. Create a separate JavaScript file (script.js) to handle the fetching of random quotes.

async function getRandomQuote() {
  try {
    const response = await fetch("https://api.quotable.io/random");
    const data = await response.json();
    document.getElementById("quote-text").innerText = data.content;
    document.getElementById("quote-author").innerText = `- ${data.author}`;
    // Reset container height to handle variable content
    document.getElementById("quote-container").style.height = "auto";
  } catch (error) {
    console.error("Error fetching quote:", error);
  }
}
// Initial quote on page load
getRandomQuote();

JavaScript

Explanation:

The getRandomQuote function is asynchronous, using the await keyword to fetch data from the Quotable API.
The fetched data is then dynamically inserted into the HTML elements for the quote text and author.
In case of an error, a helpful message is logged to the console.
The initial quote is fetched and displayed when the page loads.

Conclusion

Congratulations! You’ve successfully built a Random Quote Generator using HTML, CSS, and JavaScript. This interactive project provides users with a new quote at the click of a button, creating a dynamic and engaging user experience.

Feel free to customize the styles, explore different APIs for quotes, or add additional features to enhance the functionality further. This project serves as a solid foundation for expanding your web development skills.

Happy coding! 🚀