Work with a partner to implement the following user story:
It’s done when I understand the application’s functionality in index.html and index.js.
It’s done when I have converted var to const or let based on the use case.
It’s done when I have converted all functional expressions to arrow functions.
When is it not suitable to use arrow functions?
If you have completed this activity, work through the following challenge with your partner to further your knowledge:
Use Google or another search engine to research this.
const $root = document.querySelector("#root");
let score;
let targetScore;
const makeGuess = () => {
const $score = document.querySelector("#root p");
$score.textContent = "Score: " + score + " | " + "Target: " + targetScore;
if (score > targetScore) {
alert("You lost this round!");
playRound();
} else if (score === targetScore) {
alert("You won this round!");
playRound();
}
};
const Crystal = function(color) {
this.element = document.createElement("div");
this.element.className = "crystal " + color;
this.value = 0;
this.element.addEventListener(
"click",
() => {
score += this.value;
makeGuess();
},
false
);
};
Crystal.prototype.render = function(target) {
this.value = Math.floor(Math.random() * 15) + 1;
target.appendChild(this.element);
};
const crystals = [
new Crystal("red"),
new Crystal("blue"),
new Crystal("green")
];
const playRound = () => {
const fragment = document.createDocumentFragment();
const $score = document.createElement("p");
targetScore = Math.floor(Math.random() * 50) + 25;
score = 0;
$score.textContent = "Score: " + score + " | " + "Target: " + targetScore;
crystals
.sort(() => 0.5 - Math.random())
.forEach(crystal => crystal.render(fragment));
fragment.appendChild($score);
$root.innerHTML = "";
$root.appendChild(fragment);
};
playRound();