Javascript Quote generator | beginner Javascript project

Introduction

Welcome to today's tutorial on creating a simple JavaScript Random Quote Generator. In this project, we'll develop a web application that fetches random quotes from an API and displays them dynamically when a button is clicked. By the end of this tutorial, you’ll have a functioning quote generator that you can build upon.

Overview

This project involves fetching random quotes from the API endpoint https://api.quotable.io/random, which returns a quote and the author's name in JSON format. We will utilize HTML, JavaScript, and CSS to create a functional and appealing user interface.

Step 1: Set Up Your HTML Structure

We'll begin by creating our HTML template. This will include a main container for displaying the quote, the author's name, and a button to fetch new quotes.

<div class="board">
  <div class="text">
    <p class="quote">This is an example quote.</p>
    <h6 class="author">Author: Vahid</h6>
  </div>
  <button class="btn">New Quote</button>
</div>

Here, we have a div with the class "board" that contains another div for text, which includes a paragraph for the quote and a heading for the author. The button at the bottom will facilitate fetching new quotes.

Step 2: Access Elements and Handle Events with JavaScript

Next, we’ll write our JavaScript code to make things interactive. We'll access our quote, author, and button elements and set up an event listener on the button.

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

btn.addEventListener('click', getQuote);

function getQuote() (
  fetch('https://api.quotable.io/random')
    .then(response => response.json())
    .then(data => {
      quoteElement.textContent = data.content;
      authorElement.textContent = `Author: ${data.author)`;
    });
}

// Load an initial quote on window load
window.addEventListener('load', getQuote);

Here, upon clicking the "New Quote" button, we fetch a random quote from the API. After we receive the response, we convert it to JSON and then update the quote and author text contents accordingly.

Additionally, we ensure that a quote is displayed when the page first loads by calling the getQuote function in the window load event.

Step 3: Style Your Application with CSS

Lastly, we'll add some CSS styles to make our quote generator visually appealing. Below is a sample CSS:

body (
  font-size: 16px;
  background-color: #f0f0f0;
)

.board (
  margin: 3rem auto;
  width: 20rem;
  min-height: 20rem;
  background-color: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
)

.btn (
  color: gray;
  background-color: #007BFF;
  border: none;
  font-size: 1.5rem;
  padding: 10px;
  cursor: pointer;
)

This CSS sets a clean layout centered on the screen, maintaining a consistent style for your button and text. The border-radius on the .board class gives corners a smooth finish.

Conclusion

With that, we’ve created a simple yet effective Random Quote Generator using JavaScript and the Fetch API. You can now further enhance this application by adding more features, such as saving favorite quotes or sharing them across social platforms.

Thank you for following along with this tutorial. Don't forget to subscribe, leave a comment, or ask questions!

---

Keywords

JavaScript, Quote Generator, Beginner Project, API, JSON, HTML, CSS, Fetch API, Event Listener

---

FAQ

Q1: What is the purpose of the Fetch API in this project?
A1: The Fetch API is used to retrieve data from the quotes endpoint. It allows us to perform asynchronous HTTP requests to get random quotes in JSON format.

Q2: How do I run this code?
A2: You can run this code in any HTML environment, including code editors like CodePen, JSFiddle, or in your local development environment by creating an HTML file.

Q3: Can I customize the quotes displayed?
A3: Yes! You can modify the API endpoint or even create your own JSON file containing preferable quotes.

Q4: How can I improve the styling of the app?
A4: You can enhance the styling by modifying the CSS rules applied to the classes used in the HTML structure, including colors, fonts, and layout formations.