1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Wheel Code

Discussion in 'HTML & Website Design' started by Wheel Spinner, Aug 29, 2024.

0
  1. #1
    I'm working on a wheel spinning tool that randomizes between yes or no answers via js. The following code for my wheel https://yesornowheelspin.com/ yes or no for random decision making is a very basic one to avoid plagiarism. All i need is guidance on whether I took the wrong route and how my code and its functionality can be improved. attaching the html, css scripts.

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yes or No Wheel Spinner</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="wheel-container">
<div class="arrow"></div>
<canvas id="wheel" width="500" height="500"></canvas>
</div>
<button id="spinButton">Spin the Wheel</button>
<p id="result">Result: <span id="output"></span></p>
<script src="script.js"></script>
</body>

</html>

body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}

.wheel-container {
position: relative;
display: inline-block;
}

.arrow {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid red;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}

canvas {
border: 4px solid #333;
border-radius: 50%;
}

button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#result {
margin-top: 20px;
font-size: 24px;
}
    HTML:

     
    Last edited by a moderator: Aug 29, 2024
    Wheel Spinner, Aug 29, 2024 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #2
    Hi there, I wanna help but it would be helpful to see the js code first. Could you add that please?
     
    kennedygitahi, Aug 29, 2024 IP
  3. GreenHost.Cloud

    GreenHost.Cloud Member

    Messages:
    256
    Likes Received:
    20
    Best Answers:
    3
    Trophy Points:
    33
    #3
    From what you've shared, it looks like you're on the right track with the basic structure. To improve functionality, consider adding animations to the spinning effect and varying the number of spins before the wheel stops to enhance the excitement! Don't forget to handle any edge cases, like making sure the wheel always lands on either "Yes" or "No."
     
    GreenHost.Cloud, Sep 1, 2024 IP