#3 of 25 Beginner Projects - HTML, CSS, & JavaScript - Random Quote Generator ( Responsive Design )

Introduction

Welcome to Project Number Three of our series on building 25 beginner-friendly JavaScript projects. In this project, we will create a Random Quote Generator. This application will display a random quote every time the user clicks a button. Along the way, I’ll guide you through the setup, design, and implementation of the project using HTML, CSS, and JavaScript.

Setting Up the Project

Create a New Folder: Start by creating a new folder named random-quotes.
Open Your Code Editor: Open the newly created folder using Visual Studio Code (or your preferred code editor).
Create Essential Files: Inside this folder, create three files:
- index.html
- style.css
- script.js

Building the HTML Structure

Next, let’s build the HTML structure in the index.html file:

<!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>
    (* Bootstrap CDN *)
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="quotes">
            <p id="quote">Your quote will appear here.</p>
            <h3 id="author">Author Name</h3>
        </div>
        <div style="text-align: center;">
            <button onclick="generate()" class="btn btn-info">Generate Quote</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML code includes references to Bootstrap for styling and links to the CSS and JavaScript files.

Styling the App with CSS

In style.css, you can add your styles to enhance the appearance of the application:

body (
    background-color: #06bcc1;
)

.container (
    border: 2px solid #f4d1a;
    width: 95%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
)

.quotes (
    border: 10px solid #f4d1a;
    width: 900px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    background-color: #f4edea;
    color: gray;
)

#quote (
    font-size: 1.5rem;
)

#author (
    font-size: 1.5rem;
)

/* Responsive Design */
@media (max-width: 480px) (
    #quote, #author {
        font-size: 1rem;
    )
}

This CSS ensures that your app has a good layout, colors, and responsive behavior on smaller screens.

JavaScript Functionality

Finally, let’s add the functionality in script.js to generate random quotes:

function generate() (
    const quotes = {
        "Deepak Chopra": "The present moment is filled with joy and happiness. If you are attentive, you will see it.",
        "C.S. Lewis": "You can make anything by writing.",
        "Jenny Valentine": "Sometimes you need to step outside, get some air, and remind yourself of who you are and who you want to be."
    );

    const authors = Object.keys(quotes);
    const randomIndex = Math.floor(Math.random() * authors.length);
    const author = authors[randomIndex];
    const quote = quotes[author];

    document.getElementById("quote").innerHTML = quote;
    document.getElementById("author").innerHTML = author;
}

In this JavaScript code, a dictionary of quotes is created. The function generate randomly selects an author and displays their associated quote in the designated HTML elements.

Conclusion

Congratulations! You've successfully created a Random Quote Generator using HTML, CSS, and JavaScript that is responsive and interactive. You can view this application in your browser and click the button to see new quotes displayed.

Keyword

random quote generator, HTML, CSS, JavaScript, responsive design, Bootstrap, quotes, web development

FAQ

Q: How do I view my project?
A: You can view your project by opening the index.html file in a web browser. Use Live Server in Visual Studio Code for real-time updates.

Q: Can I customize the quotes?
A: Yes! You can modify the quotes dictionary in the script.js file to include your favorite quotes and authors.

Q: Is Bootstrap necessary for this project?
A: Bootstrap is not mandatory, but it helps with styling and responsiveness. You can create a similar design using pure CSS if you prefer.

Q: How can I host this project online?
A: You can host your project for free using platforms like GitHub Pages. Follow tutorials on hosting with GitHub for detailed steps.