I’m trying to create a small project that has the user guess the degree of rotation of an image and then gives a paragraph that tells the user how many degrees the image is rotated and how many degrees they are off. I tried setting the image’s rotation to a random amount between 0 and 359 using Math.random() at line 2, and then using the transform style on the image outside of any function. I was hoping by setting the rotation outside of a function that it would occur as soon as the page is loaded but that is not working (I am new to coding). How can I fix this? Here’s my JS code:
let image = document.getElementById(`image`)
let rotation = Math.floor(Math.random() * 359)
let degrees = document.getElementById(`degrees`)
let submitButton = document.getElementById(`submitButton`)
let difference
let rotationParagraph = document.getElementById(`rotationParagraph`)
image.style.transform = `rotate(${rotation.value}deg)`
submitButton.addEventListener(`click`, guessRotation)
function guessRotation() {
difference = `Math.abs(${rotation.value} - ${degrees.value})`
rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.`
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Guess the Rotation</title>
<link href="style.css" rel="stylesheet">
<script src="script.js" defer>
</script>
</head>
<body>
<h1>Guess the Rotation</h1>
<!-- image that will be rotated -->
<div id="object">
<image src="connection.jpg" width="200" style="transform: rotate" id="image">
</div>
<!-- side panel -->
<div id="sidePanel">
<p id="">How many degrees is the image rotated?</p>
<input type="number" min="0" max="359" placeholder="0-359" id="degrees">
<button id="submitButton">Submit</button>
<p id="rotationParagraph"></p>
</div>
</body>
</html>
CSS code:
#object,
#sidePanel {
/* puts the image and side panel side by side */
display: inline-block;
/* makes the image and side panel aligned at the top */
vertical-align: top;
}
#image {
/* gives dimensions and a border to the image */
border: 1px solid black;
/* puts empty space to the right of the box to separate it from the side panel */
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
}
I tried setting the image’s rotation to a random amount between 0 and 359 using Math.random at line 2, and then using the transform style on the image outside of any function.
I tried adding the rotation in CSS using “rand(0, 359)deg” as the rotation amount and nothing changed.