Five CSS statements I am unfamiliar with from this code:
1.) #spin-button { background-color: #4CAF50;
This statement is used to define the background color of the “Spin the Wheel” button. If it’s removed the button would revert to the default background color, gray or white, depending on the browser which makes it less visually appealing. By changing the statement to, background-color: #FF0000, this would affect the button’s appearance and change the color to red.
2.) border-radius: 5px
This statement is used to add slightly rounded corners to the bottom, which gives it a softer, more modern appearance compared to sharp 90-degrees corners. If the statement is removed the button would have sharp corners, making it less visually appealing in modern web design. By changing the statement, like increasing it to border-radius: 20px, this would make the corners much more rounded, creating a pill-shaped button. Reducing it to border-radius: 0px would create sharp corners.
3.) cursor: pointer
This statement is used to change the mouse cursor to a pointer when hovering over the “Spin the Wheel” button. This change signals to users that the button is clickable and interactable. If it is removed the default cursor would be displayed, which doesn’t clearly indicate that the button is clickable. By changing the statement a little bit (e.g., cursor: crosshair or cursor: wait) this could change how users perceive the functionality of the button.
4.) align-items: center
This statement is used to properly align all elements like the wheel and button vertically within the center of the page. If this statement is removed those items would no longer be vertically centered and could be altered depending on the default browser behavior. By changing the statement to align-items: flex-start this would align everything to the top, or by changing it to flex-end this would align everything to the bottom.
5.) border: 5px solid #333
This statement creates a solid black border around the wheel, which visually helps to separate the wheel from the rest of the content on the page and gives it a clear, defined boundary. If this statement is removed the wheel would no longer have a border around it, making it blend more into the background, and less visually distinct. By changing the statement to 10px this would increase the border thickness or by changing the statement to 3px this would decrease the border thickness. Also by changing the color to #FF0000 this would change the color of the border to red.
Entire Code:
<div class=”wheel-container”>
<canvas id=”wheel” width=”500″ height=”500″></canvas>
<div class=”dash”>|</div>
<button id=”spin-button”>Spin the Wheel</button>
</div>
<style>
.wheel-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#wheel {
border-radius: 50%;
background-color: #f5f5f5;
border: 5px solid #333;
margin-bottom: 20px;
}
.dash {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
font-weight: bold;
color: #333;
}
#spin-button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#spin-button:hover {
background-color: #45a049;
}
</style>
<script>
const canvas = document.getElementById(“wheel”);
const ctx = canvas.getContext(“2d”);
const spinButton = document.getElementById(“spin-button”);
let startAngle = 0;
const arc = Math.PI / 4; // 8 segments
const spinTimeout = null;
const spinAngleStart = Math.random() * 10 + 10;
let spinTime = 0;
let spinTimeTotal = 0;
const colors = [“#FF0000”, “#FFA500”, “#FFFF00”, “#008000”, “#0000FF”, “#4B0082”, “#EE82EE”, “#A52A2A”];
const segments = [“Prize 1”, “Prize 2”, “Prize 3”, “Prize 4”, “Prize 5”, “Prize 6”, “Prize 7”, “Prize 8”];
function drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous frames
for (let i = 0; i < segments.length; i++) {
const angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, 200, angle, angle + arc, false);
ctx.arc(250, 250, 0, angle + arc, angle, true);
ctx.fill();
ctx.save();
ctx.fillStyle = “black”; // Set text color to black
ctx.font = “bold 18px Arial”; // Increase text size and make it bold
ctx.translate(250 + Math.cos(angle + arc / 2) * 150, 250 + Math.sin(angle + arc / 2) * 150);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
ctx.fillText(segments[i], -ctx.measureText(segments[i]).width / 2, 0);
ctx.restore();
}
}
function rotateWheel() {
spinTime += 30;
if (spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
const spinAngle = spinAngleStart – easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI) / 180;
drawWheel();
spinTimeout = setTimeout(rotateWheel, 30);
}
function stopRotateWheel() {
const degrees = (startAngle * 180) / Math.PI + 90;
const arcd = (arc * 180) / Math.PI;
const index = Math.floor((360 – (degrees % 360)) / arcd);
alert(“You landed on: ” + segments[index]);
}
function easeOut(t, b, c, d) {
return c * (t /= d) * t * t + b;
}
spinButton.addEventListener(“click”, function () {
spinTime = 0;
spinTimeTotal = Math.random() * 3000 + 4000;
rotateWheel();
});
drawWheel();
</script>