Introduction:
Are you tired of making tough decisions? Do you often find yourself unable to choose between options? If so, you’re in luck! In this tutorial, we’ll show you how to create a simple random choice picker using JavaScript. With this project, you’ll never have to make difficult decisions again.
Things You Will Learn:
By the end of this tutorial, you will have learned the following:
- How to create a basic HTML structure for your project.
- How to style your HTML elements with CSS to make them visually appealing.
- How to use JavaScript to pick a random choice from a list of options.
- How to add event listeners to HTML elements for user interaction.
Now, let’s get started with the tutorial!
Video Tutorial:
If you prefer to learn by watching a video tutorial over reading this lengthy blog post you can watch the video tutorial here down below. Also do not forget to subscribe to my YouTube channel where I post tips, tricks, and tutorials related to web development regularly.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. Finally, Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Choice Picker</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Random Choice Picker</h1>
<p>Enter your choices, seperated by commas:</p>
<textarea
id="choices"
rows="3"
placeholder="Choice 1, Choice 2, Choice 3"
></textarea>
<button id="pickButton">Pick A Random Choice</button>
<p id="result"></p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #3dcf91;
}
.container {
background-color: #11141d;
width: min(90%, 31.25em);
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.5em;
padding: 3em;
}
.container h1 {
color: #3dcf91;
}
.container p {
color: #909090;
margin: 2em 0 0.5em 0;
}
.container textarea {
resize: none;
width: 100%;
background-color: #292c34;
border: none;
outline: none;
padding: 0.5em;
border-radius: 0.5em;
color: #ffffff;
}
.container button {
display: block;
background-color: #3dcf91;
color: #ffffff;
border: none;
outline: none;
padding: 1em 2em;
border-radius: 0.5em;
margin: 1.5em auto 2em auto;
cursor: pointer;
}
p#result {
text-align: center;
color: #ffffff;
font-size: 1em;
}
Â
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Function to pick a random choice
let pickRandomChoice = () => {
const choicesInput = document.getElementById("choices");
const resultElement = document.getElementById("result");
//Get the choices from input field and split them into an array
const choices = choicesInput.value.split(",").map((choice) => choice.trim());
//Check if there are choicecs to pick from
if (choices.length === 0 || (choices.length === 1 && choices[0] === "")) {
resultElement.textContent = "Please Enter Choices";
}
//Generate a random Index
const randomIndex = Math.floor(Math.random() * choices.length);
//Display the randomly selected choice
const randomChoice = choices[randomIndex];
resultElement.textContent = `Random Choice: ${randomChoice}`;
};
const pickButton = document.getElementById("pickButton");
//Add an event listener to the button
pickButton.addEventListener("click", pickRandomChoice);
Â
Conclusion:
Congratulations! You’ve successfully created a random choice picker using HTML, CSS, and JavaScript. This simple project can be a fun addition to your website or a useful tool when you can’t decide between multiple options. Feel free to customize the styles and add more features to make it even better. Happy decision-making!
