Having some trouble getting this color change animation to work on a successful result. I was experimenting with animations for the first time and can't quite pinpoint why it's not functioning as expected. Appreciate any help you can offer!
HTML
<p>Roll two dice and check if they match:</p>
<p id="answerSpace"></p>
CSS
#answerSpace {
font-size: 52px;
padding-top: 0px;
display: block;
margin: auto;
}
p{
padding-top: 0px;
padding-bottom: 0px;
display: inline-block;
margin: auto;
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
Javascript
const randomNum = num => {
let answer = Math.floor(Math.random() * Math.floor(num))
return answer;
};
const compareRolls = () => {
let firstRoll = randomNum(6); console.log("first roll: " + firstRoll);
let secondRoll = randomNum(6); console.log("second roll: " + secondRoll);
if (firstRoll === secondRoll){
a = true; result = "Success!" + ` Two ${firstRoll}s!`}else{ a=false; result ="Nope.";}
console.log(a);
let space = document.getElementById("answerSpace");
if (a == true){space.style.animation = "color-change 1s infinite";}
space.innerHTML = result;
};
compareRolls();