Random Quote Generator | Javascript Beginner Project Tutorial

Introduction

Welcome to the 52 JavaScript Projects in 52 Weeks Challenge! In this article, we'll walk through the process of creating a Random Quote Generator as our fifth project. By the end of this tutorial, you’ll have a functional web application that can generate random quotes at the click of a button.

Step 1: Setting Up the Basic HTML Structure

Start with creating the basic HTML structure. Here's what we'll do:

Open your HTML file, and create a div with an ID of container.
Inside this div, create a button with the ID of button (or BTN) and label it "Press for a new quote".
Create another div below the button with an ID of output. You can initialize it with the text "Press the button to generate a quote".

Here’s how the structure looks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Random Quote Generator</title>
</head>
<body>
    <div id="container">
        <button id="button">Press for a new quote</button>
        <div id="output">Press the button to generate a quote</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Adding CSS for Styling

Next, we’ll style our application so that it looks good. Here’s a simple CSS to make it visually appealing:

Choose a dark background color for your body.
Style the container with a light border, center alignment, and set a specific height and width.
Style the button for better interaction by adjusting its size, color, and margins.
Style the output text to ensure it’s readable against the background.

Here’s some example CSS:

body (
    background-color: #1b1b1b;
)

#container (
    background-color: #0e2431;
    border: 5px solid #f5f5dc;
    height: 275px;
    width: 750px;
    margin: 0 auto;
    text-align: center;
)

#button (
    margin: 50px;
    height: 50px;
    width: 200px;
    font-size: 22px;
    background-color: rgb(129, 121, 121);
    color: white;
)

#output (
    margin: 25px auto;
    font-size: 26px;
    color: white;
)

Step 3: Implementing Functionality with JavaScript

Now, we’ll add the functionality that enables our button to generate random quotes. Follow these steps:

Create variables for the button and the output div.
Define an array of quotes. You can find quotes online or come up with some of your own.
Add an event listener to the button that triggers a function when clicked. This function will randomly select a quote from the array and display it in the output div.

Here’s the JavaScript code:

const button = document.getElementById('button');
const output = document.getElementById('output');

const quotes = [
    "The best way to predict the future is to create it.",
    "You miss 100% of the shots you don’t take.",
    "Life is 10% what happens to us and 90% how we react to it.",
    "The only limit to our realization of tomorrow will be our doubts of today.",
    "Success is not the key to happiness. Happiness is the key to success."
];

button.addEventListener('click', function() (
    const randomIndex = Math.floor(Math.random() * quotes.length);
    output.innerHTML = quotes[randomIndex];
));

Testing the Application

Now that we’ve set everything up, open your HTML file in a browser, and click the button to see a new quote generated each time. If anything goes wrong, open the developer console to inspect and debug any issues.

Conclusion

Congratulations! You’ve successfully created a Random Quote Generator with HTML, CSS, and JavaScript. This project not only helps you solidify your understanding of basic web development concepts but also gives you a fun way to display quotes.

Keyword

JavaScript, HTML, CSS, Random Quote Generator, Beginner Project, Web Development

FAQ

Q1: What is the purpose of this project?
A1: This project serves as a fun introduction to JavaScript, focusing on DOM manipulation, event handling, and basic styling with CSS.

Q2: Can I customize the quotes?
A2: Yes! You can add your own quotes in the JavaScript array by modifying the quotes variable.

Q3: How can I improve this project?
A3: You can enhance the project by adding features like a new quote button, saving favorite quotes, or even changing the UI with animations or different themes.

Q4: What tools do I need to create this project?
A4: All you need is a text editor to write your code (like Visual Studio Code or Sublime) and a web browser to test your application.