Web Development - Random Quote Generator

This is a project that generates random quotes from wise people plus a game on checking the knowledge regardings these quotes. The technologies used were HTML, CSS and JS. So, without further ado let's dive right in.

First, let's see the main HTML source code.

<!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">
    <link rel="shortcut icon" href="./logo/favicon.ico" type="image/x-icon">  
</head>
<body>
    <div class="main-container">
        <div class="title">
            <img id="logo" style="width:100px;height:100px;" src="./logo/logo.png">
            <h2>Random Quote Generator</h2>
        </div>
        <!-- Display data -->
        <div class="quote-container">
            <p id="quote"></p>
        </div>
        <div class="person-container">
            <p id="person"></p>
        </div> 
        <div class="birthdate-container">
            <p id="birthdate"></p>
        </div> 
        <div class="dieddate-container">
            <p id="dieddate"></p>
        </div> 
        <div class="image-container">
            <img id="img" src="" />
        </div>
    </div>
    <!-- Buttons -->
    <div class="outer-container">
        <button title="🕵️ Press me to see what happens." id="mystery-button">Mystery Quote</button>
        <button title="🍀 Generate a random Quote!" id="generate-button">Generate</button>
        <button onclick="document.location='./game.html'" title="🎲 Game ON!" class="game-button">Game</button>
        <button title="🔄 Refreshes the page." id="reset-button">Reset</button>
        <p id="show-clicked"><b>This Button Clicked <span id="display">0</span> Times</b><b><span id="record"></span></b></p>
    </div>
    <div class="about-item">
        Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank"><span>@mariosdaskalas</span></a>
    </div>
</body>
<script src="main.js"></script>
</html>

At first, we create a bunch of divs to hold the generated information, that is the quote itself, who said the quote, the birth and death date. After that, we have several buttons, each with a different functionality.

The 'Mystery Quote' generates a random quote without revealing who said that quote. The 'Generate' button generates a quote with all the above information. The 'Game' button initiates a game that will see in the next section. Finally, the 'Reset' button just refreshes the page in order to start from the beginning.

Let's include the CSS as well. No need to explain it, pretty basic stuff.

body {
    background: rgb(74, 68, 190);
    font-family: Roboto;
    font-size: 98%;
}
.title {
    color: white;
    text-align: center;  
    height: 8.65em;
}
#logo {
    text-align: center;
}
.quote-container {
    background-color: #C4C4C4;
    text-align: center;
    font-size: 110%;
}
.person-container, .birthdate-container, .dieddate-container {
    background-color: #C4C4C4;
    text-align: center;
    font-size: 110%;
    margin-top: 0%;
}
#mystery-button, #generate-button, .game-button, #reset-button, #back-button, #start-game-button, #possible-answer, #submit-button, #results-button{
    margin-top: 1%;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}
.outer-container {
    text-align: center;
}
#img {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 460px;
    height: auto;
}
#show-clicked {
    color: white;
}
#person10, #person20 {
    color: white;
    font-size: 120%;
}
#correct, #false, #question {
    color: white;
    font-size: 110%;
}
#totalQuotes {
    color: white;
}
#show-results {
    color: white;
    font-size: 110%;
    visibility: hidden;
}
.about-item {
    text-align: center;
    background-color: #C4C4C4;
    width: 50%;
    margin: 0 auto;
}
a, a:visited {
    color: black;
}
a:hover {
    font-weight: bold;
}

Now let's see the game itself which is a HTML and a JS file.

<!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">
    <link rel="shortcut icon" href="./logo/favicon.ico" type="image/x-icon">  
</head>
<body>
    <div class="main-container">
        <div class="title">
            <img id="logo" style="width:100px;height:100px;" src="./logo/logo.png">
            <h2>Random Quote Generator</h2>
        </div>
        <div class="quote-container">
            <p id="quote"></p>
        </div>
        <div class="person-container">
            <p id="person"></p>
        </div>
    </div>
    <div class="outer-container">
        <!-- Select choice -->
        <div class="person-container-answer">
            <form>
                <input type="radio" name="choice" id="person1" checked>
                <label id="person10" for="person1"></label>
                <input type="radio" name="choice" id="person2">
                <label id="person20" for="person2"></label>
            </form> 
        </div>
        <!-- Buttons -->
        <button title="🏠 Go to Homepage." onclick="document.location='./index.html'" id="back-button">Back</button>
        <button title="🔄 Refreshes the page." id="reset-button">Reset</button>
        <button title="🏃‍♂️ Starts the game." id="start-game-button">Start</button>
        <button title="📝 Submit your answer." id="submit-button">Submit</button>
        <button title="📈 See Results." id="results-button">Results</button>
        <p id="correct"></p>
        <p id="false"></p>
        <p id="question"></p>
        <p id="totalQuotes"><b>You have answered <span id="display">0</span> Quotes so far.</b></p>
        <p id=show-results>Results: Correct: <span id="correctResults"></span> - Wrong: <span id="wrongResults"></span></p>
    </div>
    <div class="about-item">
        Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank"><span>@mariosdaskalas</span></a>
    </div>
</body>
<script src="game.js"></script>
</html>

At first, we create a container that holds the quote and which person said that quote. You get to choose between two options. You select an option and if you are correct, you get 1 point, otherwise nothing. There is an option to display the final results if you want to.

Finally, the JS of the game.

// Store quotes and other data
let quotes = {
    "0": [
        {"name": "Oscar Wilde", "quote": "Be yourself; everyone else is already taken.", "birth_date": "1854-10-16", "died_date": "1900-11-30", "image": "./images/oscar-wilde.jpg"}
    ],
    "1": [
        {"name": "Albert Einstein", "quote": "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.", "birth_date": "1879-03-14", "died_date": "1955-04-18", "image": "./images/albert_einstein.jpg"}
    ],
    "2": [
        {"name": "Frank Zappa", "quote": "So many books, so little time.", "birth_date": "1940-12-21", "died_date": "1993-12-04", "image": "../../../portfolio/rquote/images/frank-zappa.jpg"}
    ],
    "3": [
        {"name": "Marcus Tullius Cicero", "quote": "A room without books is like a body without a soul.", "birth_date": "106BC-01-03", "died_date": "43BC-12-07", "image": "./images/Marcus-Tullius-Cicero.jpg"}
    ],
    "4": [
        {"name": "Dr. Seuss", "quote": "You know you're in love when you can't fall asleep because reality is finally better than your dreams.", "birth_date": "1904-03-02", "died_date": "1991-09-24", "image": "./images/Dr.-Seuss.jpg"}
    ],
    "5": [
        {"name": "Mae West", "quote": "You only live once, but if you do it right, once is enough.", "birth_date": "1893-08-17", "died_date": "1980-11-22", "image": "./images/mae-west.jpg"}
    ],
    "6": [
        {"name": "Mahatma Gandhi", "quote": "Be the change that you wish to see in the world.", "birth_date": "1869-10-02", "died_date": "1948-01-30", "image": "./images/mahatma-gandhi.jpg"}
    ],
    "7": [
        {"name": "Robert Frost", "quote": "In three words I can sum up everything I've learned about life: it goes on.", "birth_date": "1874-03-26", "died_date": "1963-01-29", "image": "./images/robert-frost.jpg"}
    ],
    "8": [
        {"name": "Mark Twain", "quote": "If you tell the truth, you don't have to remember anything.", "birth_date": "1835-11-30", "died_date": "1910-04-21", "image": "./images/mark-twain.jpg"}
    ],
    "9": [
        {"name": "Elbert Hubbard", "quote": "A friend is someone who knows all about you and still loves you.", "birth_date": "1856-06-19", "died_date": "1915-07-07", "image": "./images/elbert-hubbard.jpg"}
    ]
};

// Create array with values from 0 till quotes length
let arr = [];
for (let i = 0; i <= Object.keys(quotes).length - 1; i++) {
    arr.push(i);
}

document.getElementById("reset-button").addEventListener("click", reset);

// Reload page
function reset() {
    location.reload();
}

document.getElementById("start-game-button").addEventListener("click", generateQuotesGame);
let startGameButton = document.getElementById("start-game-button");

// Show how many quotes you saw
let count = 0;
var display = document.getElementById("display");

startGameButton.onclick = function () {
    startGameButton.innerHTML = "Next";
    startGameButton.title = "🍀 Generate Next Quote."
    this.disabled = true;
    document.getElementById("submit-button").disabled = false;
}

document.getElementById("submit-button").addEventListener("click", submitAnswer);
let submitButton = document.getElementById("submit-button");

// Generate random values
let random;
let randomQuote;
let randomName;
let countCorrect = 0;
let countFalse = 0;

function generateQuotesGame() {
    
    random = Math.floor(Math.random() * Object.keys(quotes).length);
	randomQuote = quotes[random][0].quote;
	randomName = quotes[random][0].name;

    // Generate an array containing all possible numbers
    // excluding the correct-quote person index
    let checkDiffNumber = arr.filter((n) => 
    {
        return n != random;
    }
    );
    console.log(`checkDiffNumber: ${checkDiffNumber}`);

    // Pick a number different than the correct-quote person index
    let pickNum = checkDiffNumber[Math.floor(Math.random() * checkDiffNumber.length)];
    console.log(`pickNum: ${pickNum}`);

    // Display values into HTML
    console.log(`General Random Number: ${random}`);
    document.getElementById("quote").innerHTML = "“" + randomQuote + "”";
    // 0 or 1
    let randomButton = Math.floor(Math.random() * 2);
    console.log(`Random Button: ${randomButton}`);
    /*
    Display either on first radio button
    or on second radio button
    the choices
    You do not want the correct answer
    only on first radio or only or second radio
    You need to mix it
    */
    if (randomButton == 0) {
        document.getElementById("person1").value = randomName;
        document.getElementById("person10").innerHTML = randomName;
        console.log(`The name ${randomName} index is ${random}.`);
        document.getElementById("person2").value = quotes[pickNum][0].name;
        document.getElementById("person20").innerHTML = quotes[pickNum][0].name;
    }
    else if (randomButton == 1) {
        document.getElementById("person2").value = randomName;
        document.getElementById("person20").innerHTML = randomName;
        console.log(`The name ${randomName} index is ${random}.`);
        document.getElementById("person1").value = quotes[pickNum][0].name;
        document.getElementById("person10").innerHTML = quotes[pickNum][0].name;
    } 
}

function submitAnswer() {
    this.disabled = true;
    document.getElementById("start-game-button").disabled = false;
    count++;
    display.innerHTML = count;
    // Check correct answer
    // True or False
    let p1 = document.getElementById("person1").checked;
    let cp1 = document.getElementById("person1").value;
    console.log(`Check Radio Person 1: ${p1}`); 
    console.log(`Person 1: ${cp1}`);
    // True or False
    let p2 = document.getElementById("person2").checked;
    let cp2 = document.getElementById("person2").value;
    console.log(`Check Radio Person 2: ${p2}`);
    console.log(`Person 2: ${cp2}`);
    if (p1 == true && cp1 == randomName) {
        console.log("Correct Answer.");
        document.getElementById("correct").innerHTML = "✔️ Correct Answer";
        document.getElementById("false").style.visibility = "hidden";
        document.getElementById("correct").style.visibility = "visible";
        countCorrect++;
    }
    else if (p2 == true && cp2 == randomName) {
        console.log("Correct Answer.");
        document.getElementById("correct").innerHTML = "✔️ Correct Answer"
        document.getElementById("false").style.visibility = "hidden";
        document.getElementById("correct").style.visibility = "visible";
        countCorrect++;
    }   
    else {
        console.log("False Answer.");
        document.getElementById("false").innerHTML = "❌ False Answer.";
        document.getElementById("false").style.visibility = "visible";
        document.getElementById("correct").style.visibility = "hidden";
        countFalse++;
    } 
}
    document.getElementById("results-button").addEventListener("click", showResults);
    let resultsButton = document.getElementById("results-button");

    // Display how many correct/false answers you had
    function showResults() {
        document.getElementById("show-results").style.visibility = "visible";
        console.log(`Correct: ${countCorrect}`);
        console.log(`False: ${countFalse}`);
        correctResults.innerHTML = countCorrect;
        wrongResults.innerHTML = countFalse;
    }

In the beginning, we have an object that holds a series of arrays. Inside a for loop, we push to an empty array the integer values from 0 till the length of the object.

Afterward, we generate a random quote using Math.random() and display that on the screen. We store the value of the button and check it against the supplied answer. If the answer is correct, we increase the count++ by one, which is used later as a variable for storing the scores.

💡

Github

💡

Live Demo

Tagged in:

Web Development

Web Development - Random Quote Generator

About the Author

Marios Daskalas

Check latest articles from this author:

Psychology Space

Web Development - MovieFinz

Web Development - GuessMe

Comments

Previous Article

PicoCTF - Special

Next Article

Web Development - Colorfun

Psychology Space

Web Development - MovieFinz

Web Development - GuessMe

Press ESC to close

Or check our Popular Categories...

Like what you read?

Subscribe to our Newsletter

About the Author

Check latest articles from this author:

Comments

Related Articles

Previous Article

Next Article