Create an Inspiring Random Quote Generator

Create an Inspiring Random Quote Generator

Table of Contents

  1. Introduction
  2. Building a Random Quote Generator
    • Technologies Used
    • Setting Up the Project
    • Design and CSS
    • Fetching Quotes
  3. HTML Structure
  4. Styling with Tailwind CSS
  5. Creating the Quote Section
  6. Adding the Tweet Button
  7. Implementing the New Quote Button
  8. JavaScript Functionality
  9. Adding a Loading Spinner
  10. Conclusion

Building a Random Quote Generator

Do You want to challenge yourself with a coding project? In this tutorial, we will guide you through the process of building a random quote generator using HTML, CSS, and vanilla JavaScript. We won't be using any fancy frameworks, just the basics. By the end of this tutorial, you'll have a fully functional app that fetches quotes from an external API and allows users to tweet them. Let's get started!

Technologies Used

To build the random quote generator, we will be using the following technologies:

  • HTML: for creating the structure of the app
  • CSS: for styling the app using Tailwind CSS
  • JavaScript: for fetching quotes and adding interactivity to the app
  • Vanilla JavaScript: we won't be using any frameworks or libraries

Setting Up the Project

Before we dive into coding, let's set up our project. We'll be using a simple web app bundler called Wheat. Open your desired folder and Create a new Wheat project by running the command npm init wheat in the terminal. This will create a new project with the name "random-quotes". Once the project is created, navigate into the project folder by running cd random-quotes in the terminal. Now let's install the dependencies by running npm install in the terminal. We'll also need to open the project in your preferred code editor. Let's open it in Visual Studio Code.

Design and CSS

To start, we need to create the design and CSS for our random quote generator. We have a simple design mockup provided for you, which includes a background image, a quote section, and buttons to generate a new quote and tweet the Current quote. We'll use the Figma design tool to inspect the design elements and extract the necessary assets.

First, let's download the design assets from the challenge page. You'll find a zip file containing the images and a .Fig file for Figma. Extract the zip file and open the .fig file using Figma. In Figma, you'll see the design prototype with all the elements we need. We'll need to download the images separately, so make sure to install the Figma "Download PNG" plugin from the Figma Plugin Marketplace.

Navigate to the design in Figma and select the elements you need, such as the background image, quote text, and tweet button. Right-click on the selected elements and choose "Plugins > Download PNG". This will download the selected elements as PNG files.

Once you have downloaded the PNG files, create a new folder called "img" in your project directory. Copy the extracted PNG files into this folder. Now we have all the necessary images for our project.

Fetching Quotes

Before we start working on the HTML and CSS, let's set up the JavaScript part of our random quote generator. We'll need to fetch quotes from an external API and display them in our app.

To fetch quotes, we'll be using the fetch() function, which is built into modern browsers. We'll make a HTTP GET request to an external API that returns a random quote in JSON format. After receiving the response, we'll extract the quote and author information to display on our app.

In the next part of this tutorial, we'll start creating the HTML structure of our random quote generator. Stay tuned!

(Continued in Part 2...)

HTML Structure

Now that we have our project set up and the design in place, let's start building the HTML structure for our random quote generator. We'll be using semantic HTML elements to create a well-structured and accessible app.

First, let's create a main tag to contain all the main content of our app. Inside the main tag, let's add a div with a class of container to create a centered container for our app. We'll use the Tailwind CSS utility classes mx-auto to horizontally center the container.

Next, let's add a GRID class to the container div to create a CSS grid layout. This will help us position the elements of our app in a responsive and flexible way. We'll also add the place-items-center class to center the grid items both vertically and horizontally.

Inside the grid, we can start adding the different sections of our app. We'll have a section for the quote, a section for the author's name, and a section for the buttons. We'll use flexbox to Align the elements within each section.

(Continued in Part 3...)

Styling with Tailwind CSS

Now that we have the HTML structure in place, let's style our random quote generator using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes for common styles.

To use Tailwind CSS, we'll need to include its CSS file in our project. Fortunately, we already set up Wheat to use Tailwind CSS. Open the main.js file and remove the import statement for the default styles. We'll be using Tailwind CSS for styling instead.

Inside the style.css file, remove all the default styles as we won't be needing them. Instead, let's add the following classes to the main tag: bg-Blue-500, text-white, font-sans, min-h-screen, flex, flex-col, items-center, and justify-center. These classes will set the background color, text color, font family, and flexbox properties for our app.

Next, let's style the container div. Add the classes shadow-xl, backdrop-filter, backdrop-blur-sm, rounded-md, p-5, and w-2/3 to create a card-like container for our app. These classes will add a shadow effect, a blurred background, rounded corners, padding, and a width of 2/3 of the container.

(Continued in Part 4...)

Creating the Quote Section

Now let's focus on creating the quote section of our random quote generator. This section will display the random quote fetched from the API.

Inside the container div, add an img tag with the src attribute set to the path of the quote image. We'll use the img/background.png image as the background of the quote section. Make sure to include the appropriate classes from the Tailwind CSS framework to position and style the image.

Below the image, add an h1 tag with the text "Default Code". Update the classes of the h1 tag to include mt-4, text-5xl, italic, font-semibold, and text-blue-500.

Now our quote section is almost complete, but we need to add a separator below the quote. To do this, create a div with the class w-full, my-5, bg-blue-500, and h-0.5.

Next, let's move on to adding the author's name section.

(Continued in Part 5...)

Adding the Tweet Button

In this part of the tutorial, we'll add the "Tweet" button to our random quote generator. This button will allow users to tweet the current quote on Twitter.

To add the tweet button, we'll use an <a> tag with the href attribute set to a Twitter intent URL. This URL will open a new tab in the user's browser with a pre-filled tweet containing the current quote. We'll also use an <img> tag for the tweet button icon.

Inside the container div, create a new div to contain the tweet button and the new quote button. Apply the Relevant classes from Tailwind CSS to style this div.

Inside the tweet button div, create an <a> tag with the classes select-none and mr-3. Set the href attribute to the Twitter intent URL: "https://twitter.com/intent/tweet?text=${quote}". Replace ${quote} with the JavaScript variable that stores the current quote text.

Within the <a> tag, add an <img> tag with the src attribute set to the path of the tweet button image: "img/tweet-btn.png". Again, apply the necessary classes to style the tweet button.

The tweet button is now complete! In the next part, we'll implement the functionality for the new quote button.

(Continued in Part 7...)

Implementing the New Quote Button

Now let’s implement the functionality for the "New Quote" button. This button will generate a new random quote when clicked.

Inside the tweet button div, create a <button> tag with the classes focus:Outline-none, bg-blue-500, text-white, text-xl, p-4, rounded-md, and font-bold. Add the text "New Quote" as the content of the button.

With this, our random quote generator is almost complete. Let's move on to the JavaScript functionality.

JavaScript Functionality

In this part, we'll add the necessary JavaScript code to fetch quotes from the external API and display them in our app.

To fetch quotes, we'll use the fetch() function, which is built into modern browsers. We'll make an HTTP GET request to an external API that returns a random quote in JSON format. After receiving the response, we'll extract the quote and author information to display on our app.

Create a new JavaScript file called main.js. Inside the file, create an async function called fetchQuote. Inside this function, use the await keyword to fetch the quote from the external API. Parse the response as JSON and extract the quote and author information.

Next, create a separate function called displayQuote to display the quote and author information in the HTML. In this function, use document.querySelector() to select the relevant HTML elements and update their textContent property with the quote and author information.

Create an event listener for the "New Quote" button that triggers the fetchQuote function and updates the displayed quote.

With this, our random quote generator is complete! You can now test it by opening the index.html file in your browser.

Adding a Loading Spinner

Lastly, let's add a loading spinner to indicate that the quote is being fetched from the API.

To add a loading spinner, create a new <span> tag inside the div that contains the quote and author information. Apply the required classes to style the spinner.

In the JavaScript code, update the displayQuote function to toggle the visibility of the loading spinner Based on the API response.

Congratulations! You've successfully built a random quote generator using HTML, CSS, and vanilla JavaScript. Feel free to further enhance the app by adding additional features or customizing the design.

Conclusion

In this tutorial, we learned how to build a random quote generator using HTML, CSS, and vanilla JavaScript. We covered the steps necessary to set up the project, design the app, fetch quotes from an API, and display them in a visually pleasing way. By completing this project, you've gained valuable experience in front-end development and can further explore other coding challenges to enhance your skills. Keep coding and stay curious!

Highlights

  • Build a random quote generator using HTML, CSS, and vanilla JavaScript
  • Fetch quotes from an external API and display them in the app
  • Allow users to tweet the current quote
  • Use Tailwind CSS for easy styling

FAQ

Q: Can I use a framework like React instead of vanilla JavaScript? A: Yes, you can use any JavaScript framework or library to build a random quote generator. However, this tutorial focuses on using vanilla JavaScript for a simpler implementation.

Q: Is Tailwind CSS necessary for styling the app? A: No, Tailwind CSS is not necessary, but it provides a convenient way to apply pre-defined styles to your app. You can use your preferred CSS framework or write custom CSS if you prefer.

Q: Can I customize the design of the random quote generator? A: Absolutely! Feel free to modify the design to your liking. You can change colors, fonts, or add additional elements to make it unique.

Q: Can I add additional features to the random quote generator? A: Yes, you can enhance the app by adding features like a copy to clipboard button, a favorite quotes section, or even a search functionality to find quotes from specific authors. Let your creativity guide you!

Q: Can I use a different API to fetch quotes? A: Yes, you can use any public API that provides random quotes. Just make sure to update the JavaScript code accordingly to fetch and format the quotes correctly.

Most people like

Find AI tools in Toolify

Join TOOLIFY to find the ai tools

Get started

Sign Up
App rating
4.9
AI Tools
20k+
Trusted Users
5000+
No complicated
No difficulty
Free forever
Browse More Content