Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a spin wheel app. To build this project we need HTML, CSS and Javascript.
This project is suitable for javascript intermediates. If you are looking for more projects to improve your javascript skills you can check out this playlist here. This playlist consists of 100+ javascript projects along with source code. The difficulty level of these projects varies from easy to quite complex ones. Hence this playlist is suitable for all kinds of javascript learners including javascript beginners to javascript experts.
Let us take a look at how this project works. The spin wheel app consists of a pie chart divided into 6 equal pieces. We label each piece as a number starting from 1 to 6. You can use any numbers or text of your choice.
For more projects based on HTML, CSS and Javascript check out this amazing post.
We use the chart.js library to create this pie chart. I have commented on each line of code so you can customize your spin wheel according to your need.
When the user clicks on the spin button the wheel starts to spin and randomly stops at a random angle. The number at which the arrows point is the value of the spin. The ‘Spin’ button is disabled until the wheel stops spinning completely. Once the wheel stops spinning and the value is displayed the user can start spinning the wheel again.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out this video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding let us create the project folder structure. We create a project folder called – the ‘Spin Wheel App’. Inside this folder, we have three files. These files are index.html, style.css and script.js. The first file is the HTML document, the next file is the stylesheet and lastly, we have the script file.
HTML:
We begin with the HTML code. First, 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>Spin Wheel App</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<canvas id="wheel"></canvas>
<button id="spin-btn">Spin</button>
<img src="spinner-arrow-.svg" alt="spinner-arrow" />
</div>
<div id="final-value">
<p>Click On The Spin Button To Start</p>
</div>
</div>
<!-- Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!-- Chart JS Plugin for displaying text over chart -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this app with 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 {
height: 100vh;
background: linear-gradient(135deg, #c3a3f1, #6414e9);
}
.wrapper {
width: 90%;
max-width: 34.37em;
max-height: 90vh;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 1em;
box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#wheel {
max-height: inherit;
width: inherit;
top: 0;
padding: 0;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#spin-btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: radial-gradient(#fdcf3b 50%, #d88a40 85%);
color: #c66e16;
text-transform: uppercase;
font-size: 1.8em;
letter-spacing: 0.1em;
font-weight: 600;
}
img {
position: absolute;
width: 4em;
top: 45%;
right: -8%;
}
#final-value {
font-size: 1.5em;
text-align: center;
margin-top: 1.5em;
color: #202020;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.wrapper {
font-size: 12px;
}
img {
right: -5%;
}
}
Javascript:
Finally, we implement the functionality of this app with javascript Once again copy the code below and paste it into your script file.
const wheel = document.getElementById("wheel");
const spinBtn = document.getElementById("spin-btn");
const finalValue = document.getElementById("final-value");
//Object that stores values of minimum and maximum angle for a value
const rotationValues = [
{ minDegree: 0, maxDegree: 30, value: 2 },
{ minDegree: 31, maxDegree: 90, value: 1 },
{ minDegree: 91, maxDegree: 150, value: 6 },
{ minDegree: 151, maxDegree: 210, value: 5 },
{ minDegree: 211, maxDegree: 270, value: 4 },
{ minDegree: 271, maxDegree: 330, value: 3 },
{ minDegree: 331, maxDegree: 360, value: 2 },
];
//Size of each piece
const data = [16, 16, 16, 16, 16, 16];
//background color for each piece
var pieColors = [
"#8b35bc",
"#b163da",
"#8b35bc",
"#b163da",
"#8b35bc",
"#b163da",
];
//Create chart
let myChart = new Chart(wheel, {
//Plugin for displaying text on pie chart
plugins: [ChartDataLabels],
//Chart Type Pie
type: "pie",
data: {
//Labels(values which are to be displayed on chart)
labels: [1, 2, 3, 4, 5, 6],
//Settings for dataset/pie
datasets: [
{
backgroundColor: pieColors,
data: data,
},
],
},
options: {
//Responsive chart
responsive: true,
animation: { duration: 0 },
plugins: {
//hide tooltip and legend
tooltip: false,
legend: {
display: false,
},
//display labels inside pie chart
datalabels: {
color: "#ffffff",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: { size: 24 },
},
},
},
});
//display value based on the randomAngle
const valueGenerator = (angleValue) => {
for (let i of rotationValues) {
//if the angleValue is between min and max then display it
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
finalValue.innerHTML = `<p>Value: ${i.value}</p>`;
spinBtn.disabled = false;
break;
}
}
};
//Spinner count
let count = 0;
//100 rotations for animation and last rotation for result
let resultValue = 101;
//Start spinning
spinBtn.addEventListener("click", () => {
spinBtn.disabled = true;
//Empty final value
finalValue.innerHTML = `<p>Good Luck!</p>`;
//Generate random degrees to stop at
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
//Interval for rotation animation
let rotationInterval = window.setInterval(() => {
//Set rotation for piechart
/*
Initially to make the piechart rotate faster we set resultValue to 101 so it rotates 101 degrees at a time and this reduces by 1 with every count. Eventually on last rotation we rotate by 1 degree at a time.
*/
myChart.options.rotation = myChart.options.rotation + resultValue;
//Update chart with new value;
myChart.update();
//If rotation>360 reset it back to 0
if (myChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
myChart.options.rotation = 0;
} else if (count > 15 && myChart.options.rotation == randomDegree) {
valueGenerator(randomDegree);
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
}
}, 10);
});
That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys so if you have any queries, suggestions, or feedback comment below.
Happy Coding!
Is it possible to make a sound play when it’s spinning?
Considering using it for a children’s website, so it would make it exciting for the little ones.
This spinning wheel does NOT work as soon as you put an alphabet in the labels!
I think there is an error in the java- you have 7 rotational value items, but only 6 polygons, which allows a single polygon to have multiple potential winning values. I think they should be in 60 degree increments and there should only be 6 sets.
I have a question :
Why Total rotationValues array is 7 fotr 6 option win ?
And if I need 7 option win, so I create mean 8 rotationValues ?
I hope you reply me.
Regard,
I’m trying to have 10 options instead of 6 for a school project. The issue I’m facing so far is, the values are generated correctly but the spinner arrow stops at the wrong value on the pie chart. Can you guide on a potential solution. A token can be offered
It works on my computer! I’ve changed labels and values and it worked to me 🙂