Random Quote Generator HTML CSS JavaScript Code

Hey, developers welcome to Day 77 of our 90Days 90Projects challenge. And today in this challenge we are going to Create a Random Quote Generator HTML CSS Javascript Code

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

random quote generator HTML Code, random quote generator with names, how to make a random quote generator javascript

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Random Quote Generator </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   
    <div class="quote-container">
        <h2> Today's Quote </h2>
        <div class="quote-content">
            <p class="quote" id="quote"></p>
            <p class="author" id="author"></p>
            <button id="nextQuote"> New Quote </button>
        </div>
    </div>

</body>
<script src="quoteScript.js"></script>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.quote-container {
    width: 400px;
    background-color: #e65b00;
    position: absolute;
    top: 50%;
    padding: 0px 10px 10px 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.quote-container h2 {
    position: relative;
    color: #ffffff;
    text-align: center;
    margin: 10px 0;
}

.quote-container h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 2px;
    width: 30%;
    border-radius: 10px;
    background: rgb(236, 227, 227);
}

.quote-content {
    margin-top: 15px;
    text-align: center;
    padding: 10px;
}

.quote {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 500;
}

#nextQuote {
    border: none;
    background-color: #fff;
    color: #000;
    padding: 6px 10px;
    margin-top: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.1s;
}

button:hover {
    transform: translateY(-4px);
    box-shadow: 5px 5px 10px rgba(68, 64, 64, 0.525);
}

JavaScript

quoteScript.js

const nextBtn = document.getElementById('nextQuote');
let quote = document.getElementById('quote');
let author = document.getElementById('author');

const quotes = [
    {
        quote: 'You can get everything in life you want if you will just help enough other people get what they want',
        author: 'Zig Ziglar'
    },
    {
        quote: 'Inspiration does exist, but it must find you working.',
        author: 'Pablo Picasso'
    },
    {
        quote: 'Don\'t settle for average. Bring your best to the moment. Then, whether it fails or succeeds, at least you know you gave all you had.',
        author: 'Angela Bassett'
    },
    {
        quote: 'Show up, show up, show up, and after a while the muse shows up, too.',
        author: 'Isabel Allende'
    },
    {
        quote: 'Don\'t bunt. Aim out of the ballpark. Aim for the company of immortals',
        author: 'David Ogilvy'
    },
    {
        quote: 'I have stood on a mountain of no’s for one yes.',
        author: 'Barbara Elaine Smith'
    },
    {
        quote: 'If you believe something needs to exist, if it\'s something you want to use yourself, don\'t let anyone ever stop you from doing it',
        author: 'Tobias Lütke'
    }
];

let quoteLength = quotes.length;
quote.innerHTML = quotes[0].quote;
author.innerHTML = quotes[0].author;

nextBtn.addEventListener('click', function () {
    let randomQuote = Math.round(Math.random() * quoteLength);
    if (randomQuote == 7) {
        randomQuote = 1;
    }
   
    let todayQuote = quotes[randomQuote].quote;
    let quoteAuthor = quotes[randomQuote].author;

    let quoteHTML = todayQuote;
    quote.innerHTML = quoteHTML;
    author.innerHTML = quoteAuthor;
});

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

3 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. hello! I am Mahir you website user
    your JavaScript is not working in any pc or laptop please check it
    thankyou

    ReplyDelete
    Replies
    1. Thank you for you comment brother 😊
      I just again checked the code and it is working fine so please check again your code or file names!

      Delete

Top Post Ad

Below Post Ad