Create an Inspiring Random Quote Generator
Table of Contents
- Introduction
- Building a Random Quote Generator
- Technologies Used
- Setting Up the Project
- Design and CSS
- Fetching Quotes
- HTML Structure
- Styling with Tailwind CSS
- Creating the Quote Section
- Adding the Tweet Button
- Implementing the New Quote Button
- JavaScript Functionality
- Adding a Loading Spinner
- 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.