Spin Wheel Using JavaScript

Spin Wheel Using HTML and JavaScript Code

Spin Wheel Using HTML and JavaScript Code

Hello Coder, In Today’s Blog We are going to create a Spin Wheel Using HTML, CSS, and JavaScript Code. When you click on spin, Spinning Wheel starts and stops after a few seconds on any random number. We Create 1 to 8 numbers in the spinner wheel and you Spin the Wheel.

Spin Wheel Game using HTML and JavaScript (Source Code)

Spin Wheel Using HTML and JavaScript Code

A spin wheel is a circle created with the help of CSS, along with different block-level elements for adding the color and number scheme inside the wheel, and then using the javascript function to move the circle for a particular time period, the wheel stops at a random number, and then using the javascript function to check the details and reward according to the number.

Before we start with our project, let’s understand some of the basic concepts related to it that will help us better understand the project.

How do we make a spin wheel?

To create a spin wheel, we will be using a block-level element like a div, adding a class to the element, and then using the class inside the CSS file. Using the border property, we will set the border to 50% to give a circle-like look to the element.

Can we customize the spin wheel?

Yes, you can customize the spin wheel as per the requirements; you can add sound movement as the user spins the wheel; and you can also add a 3D look to the spin and wheel by adding new designs.

Code byGhost Code
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesNo
ResponsiveNo
Spin Wheel

Now The Project is going to create and for that, we are first adding an HTML Code.

Spin Wheel Html Code:-

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Spin Wheel</title>
</head>
<body>
    <button id="spin">Spin</button>
    <span class="arrow"></span>
<div class="container">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="seven">7</div>
    <div class="eight">8</div>
</div>
</body>
</html>

In This HTML Code , We first creating an button class with ID =”spin” and inside of of it a an empty span class is added for the arrow to be represent.

Then With Simple div class with name as container we are adding more sub divisions inside of it until the number up to 8 that contains separate class names.

Restaurant Website Using HTML and CSS

Now the HTML code for spin wheel is complete. So we go for CSS to make some stylings in the spin wheel.

ADVERTISEMENT

CSS Code For Spin Wheel Code:-

ADVERTISEMENT

*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    background-color: #34495e;
    display:flex;
    align-items:center;
    justify-content: center;
    height:100vh;
    overflow:hidden;
}

.container{
    width:500px;
    height:500px;
    background-color: #ccc;
    border-radius:50%;
    border:15px solid #dde;
    position: relative;
    overflow: hidden;
    transition: 5s;
}

.container div{
    height:50%;
    width:200px;
    position: absolute;
    clip-path: polygon(100% 0 , 50% 100% , 0 0 );
    transform:translateX(-50%);
    transform-origin:bottom;
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:20px;
    font-weight:bold;
    font-family:sans-serif;
    color:#fff;
    left:135px;
}

.container .one{
    background-color: #3f51b5;
    left:50%;
}
.container .two{
    background-color: #ff9800;
    transform: rotate(45deg);
}
.container .three{
    background-color: #e91e63;
    transform:rotate(90deg);
}
.container .four{
    background-color: #4caf50;
    transform: rotate(135deg);
}
.container .five{
    background-color: #009688;
    transform: rotate(180deg);
}
.container .six{
    background-color: #795548;
    transform: rotate(225deg);
}
.container .seven{
    background-color: #9c27b0;
    transform: rotate(270deg);
}
.container .eight{
    background-color: #f44336;
    transform: rotate(315deg);
}

.arrow{
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    color:#fff;
}

.arrow::before{
    content:"\1F817";
    font-size:50px;
}

#spin{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    background-color: #e2e2e2;
    text-transform: uppercase;
    border:8px solid #fff;
    font-weight:bold;
    font-size:20px;
    color:#a2a2a2;
    width: 80px;
    height:80px;
    font-family: sans-serif;
    border-radius:50%;
    cursor: pointer;
    outline:none;
    letter-spacing: 1px;
}

ADVERTISEMENT

The Following Steps given below is the explanation of each CSS. So Follow the steps given below.

ADVERTISEMENT

ADVERTISEMENT

STEP 1: Inside of BODY container We are adding the alignment and flex box properties  like display , margin , padding , align-items , justify-content ,etc… for making the spin wheel to fix in center of web page sizes and additionally the background color for the web page is also added.

Portfolio Website using HTML and CSS (Source Code)

Next , We calling out the div class “container” and adding the following properties to make it look like an spin wheel. The properties are width , height , border-radius , border. for sizing and position , overflow for content relation and hidden element.

body{
    margin:0;
    padding:0;
    background-color: #34495e;
    display:flex;
    align-items:center;
    justify-content: center;
    height:100vh;
    overflow:hidden;
}

.container{
    width:500px;
    height:500px;
    background-color: #ccc;
    border-radius:50%;
    border:15px solid #dde;
    position: relative;
    overflow: hidden;
    transition: 5s;
}

STEP 2: Now We calling out each div classes that contains the number from 1 to 8 and adding separate background color and animate properties using transform: translate.

.container .one{
    background-color: #3f51b5;
    left:50%;
}
.container .two{
    background-color: #ff9800;
    transform: rotate(45deg);
}
.container .three{
    background-color: #e91e63;
    transform:rotate(90deg);
}
.container .four{
    background-color: #4caf50;
    transform: rotate(135deg);
}
.container .five{
    background-color: #009688;
    transform: rotate(180deg);
}
.container .six{
    background-color: #795548;
    transform: rotate(225deg);
}
.container .seven{
    background-color: #9c27b0;
    transform: rotate(270deg);
}
.container .eight{
    background-color: #f44336;
    transform: rotate(315deg);
}

STEP 3: The Third Step is about the button that will make rotate the circle when we click on it. The code for this is given below.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

#spin{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    background-color: #e2e2e2;
    text-transform: uppercase;
    border:8px solid #fff;
    font-weight:bold;
    font-size:20px;
    color:#a2a2a2;
    width: 80px;
    height:80px;
    font-family: sans-serif;
    border-radius:50%;
    cursor: pointer;
    outline:none;
    letter-spacing: 1px;
}

Now We have Completed our CSS code. The Last Needed one is Java Script to make the rotation stop on the random numbers between 1 to 8.

Spin Wheel JavaScript Code:-

let container = document.querySelector(".container");
let btn = document.getElementById("spin");
let number = Math.ceil(Math.random() * 1000);

btn.onclick = function () {
    container.style.transform = "rotate(" + number + "deg)";
    number += Math.ceil(Math.random() * 1000);
}

First of all , we are getting the div class container , and button class spin using JS query selector property. Then using JS Math property we are setting it to random and storing it in a variable called number.

Responsive Gym Website Using HTML ,CSS & JavaScript

In Second step , We are adding onclick function to a button and adding the transformation property by mentioning it with container class and then adding it with random numbers and it will declare the smallest integer among others in the arrow after spin.

So that’s of for Java script, and Hence we have completed our project successfully by mentioning source codes. Now we can move for Output Section to make a preview of our project.

Final Output Of  Spin Wheel Using JavaScript:-

Now We have Successfully created our Spin Wheel Using HTML, CSS, and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Refer Code – Ghost Code

Written By – Ragunathan

Which code editor do you use for this Spin Wheel coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

How do we make a spin wheel?

To create a spin wheel, we will be using a block-level element like a div, adding a class to the element, and then using the class inside the CSS file. Using the border property, we will set the border to 50% to give a circle-like look to the element.

Can we customize the spin wheel?

Yes, you can customize the spin wheel as per the requirements; you can add sound movement as the user spins the wheel; and you can also add a 3D look to the spin and wheel by adding new designs.



Leave a Reply