Random Choice Picker using HTML CSS and JavaScript

Last Updated : 19 Feb, 2024

The Random Choice Picker is a fully functional project that lets you enter some choices and then it will randomly pick any one of them. You can create this super useful project using HTML, CSS, and JavaScript. The basic idea is to input all your choices separated by ‘commas’, here choices can be any word or text, and after you have entered all your choices press the ‘enter’ key.

Approach

Create an HTML document containing the div element ‘container’. Inside it add the input message and a ‘textarea’ where you can input your choices. Below it, there will be a div element ‘choices’ which will show all the choices input by you.
Link the CSS file with the HTML file using the ‘link’ tag. In the CSS file, design the all elements.
Link the JavaScript file with the HTML file using the ‘script’ tag.
In the JavaScript file describe methods for creating choices, picking a random choice, highlighting the choices, removing the highlighting from the choices, and showing the final answer.

Example: This example shows the implementation of the above-explained approach.

Javascript

// Filename - script.js
 
// To target the input text area
const text_area = document.getElementById("text_area");
// To target the choices
const choices_el = document.getElementById("choices");
 
// For highlighting the choices
const highlightChoice = (choice) => {
    choice.classList.add("answer");
}
 
// For removing the highlighting of the choices
const unHighlightChoice = (choice) => {
    choice.classList.remove("answer");
}
 
// For randomly picking one choice
const pickRandomChoice = () => {
    const choices = document
        .querySelectorAll(".choice");
    return choices[Math.floor(Math.random()
        * choices.length)];
}
 
// For showing the choices as user input them
const createChoices = (input) => {
    // splitting the text from each comma
    const choices = input
        .split(",")
        .filter((tag) => tag.trim() !== "")
        .map((tag) => tag.trim());
 
    // resetting the choices
    choices_el.innerHTML = "";
 
    // updating the choices
    choices.forEach((tag) => {
        const temp = document.createElement("span");
        temp.classList.add("choice");
        temp.innerText = tag;
        choices_el.append(temp);
    });
 
    return choices.length;
}
 
// For creating the animation of selecting a random choice
const randomSelect = (choices) => {
    // No. of times the animation is shown
    const times = Number(choices) * 3;
 
    // Time period for the highlighting effect
    const int = 150;
 
    // For Showing the highlighting effect 
    // on random choices at given interval
    const interval = setInterval(() => {
        // randomly select a tag
        const randomTag = pickRandomChoice();
 
        //highlight
        highlightChoice(randomTag);
 
        //unhighlight
        setTimeout(() => {
            unHighlightChoice(randomTag);
        }, int);
    }, int);
 
    // For showing the final choice(answer)
    setTimeout(() => {
        clearInterval(interval);
        setTimeout(() => {
            // randomly select a choice
            const randomTag = pickRandomChoice();
 
            // Highlight the final choice (answer)
            highlightChoice(randomTag);
        }, int);
    }, int * times);
}
 
text_area.addEventListener("keyup", (event) => {
    // show the choices as user input them
    let choices = createChoices(event.target.value);
 
    // whenever the "Enter" key is pressed
    if (event.key === "Enter") {
        // clear the input text area
        event.target.value = "";
        // randomly select one choice
        randomSelect(choices);
    }
});

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Random Choice Picker</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div class="container">
        <p>Enter your choices, seperated by commas:</p>
        <p>[ Press "enter" when you are done ]</p>
 
        <!-- Input text area for user to enter choices -->
        <textarea placeholder="Choice 1, Choice 2, Choice 3.."
                  id="text_area"></textarea>
 
        <!-- To show Choices entered by user -->
        <div id="choices">
            <span class="choice">Choice 1</span>
            <span class="choice answer">Choice 2</span>
            <span class="choice">Choice 3</span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
 
</html>

CSS

/* Filename - style.css */
* {
    box-sizing: border-box;
}
 
body {
    background-color: wheat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
 
.container {
    width: 500px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px 20px;
    background-color: #221d1d;
}
 
p {
    color: #ffffff;
    text-align: center;
    font-size: 20px;
}
 
/* Input text area */
#text_area {
    width: 100%;
    height: 100px;
    padding: 10px;
    margin: 0 0 20px 0;
    font-size: 20px;
}
 
/* Choices */
.choice {
    background-color: grey;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 15px;
    margin: 0px 5px 5px 0px;
    font-size: 14px;
    display: inline-block;
}
 
/* Highlighted Choice */
.choice.answer {
    background-color: orangered;
}