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:
    36
    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:
    313
    Likes Received:
    23
    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
  4. mukesh1997

    mukesh1997 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Hi there! It sounds like you’re building a basic Yes or No Wheel tool using JavaScript, which is a great start for a fun decision-making tool! Here are a few suggestions to enhance your code and its functionality:

    1. Improve Randomization Logic
    • If you’re using Math.random() for randomizing, make sure you multiply it correctly to get a fair probability for both "Yes" and "No." For example:
    2. Enhance the Spinning Animation
    • Adding CSS animations (like rotation effects or easing functions) can make the wheel look more dynamic and realistic.
    3. Add More Options or Customizable Text
    • You could give users the ability to add their own custom answers. A simple input field can allow them to add their own options before spinning.
    4. Sound Effects or Visual Feedback
    • Adding sound effects (like a ticking sound) or a highlight effect when the wheel stops adds interactivity and makes the experience more exciting.
    5. Optimizing Code and Layout
    • Simplify your HTML and CSS by using CSS grid or flexbox for layout, making the wheel responsive on different screen sizes.
    • If your CSS and JavaScript are in separate files, you might consider bundling or minimizing them to improve load speed.
     
    mukesh1997, Nov 3, 2024 at 7:47 AM IP