LSvekis
48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
<!doctype html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>Complete JavaScript Course</title>
|
||
</head>
|
||
|
||
<body>
|
||
<span class="val1"></span> <span>+</span> <span class="val2"></span> = <span>
|
||
<input type="text" name="answer"></span><button>Check</button>
|
||
<div class="output"></div>
|
||
<script>
|
||
const app = function () {
|
||
const game = {};
|
||
const val1 = document.querySelector(".val1");
|
||
const val2 = document.querySelector(".val2");
|
||
const output = document.querySelector(".output");
|
||
const answer = document.querySelector("input");
|
||
function init() {
|
||
document.querySelector("button").addEventListener("click", checker);
|
||
loadQuestion();
|
||
}
|
||
function ranValue(min, max) {
|
||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||
}
|
||
function loadQuestion() {
|
||
game.val1 = ranValue(1, 100);
|
||
game.val2 = ranValue(1, 100);
|
||
game.answer = game.val1+game.val2;
|
||
val1.textContent = game.val1;
|
||
val2.textContent = game.val2;
|
||
}
|
||
function checker() {
|
||
let bg = answer.value == game.answer ? "green" : "red";
|
||
output.innerHTML += `<div style="color:${bg}">${game.val1} + ${game.val2} = ${game.answer} (${answer.value})</div>`;
|
||
answer.value = "";
|
||
loadQuestion();
|
||
}
|
||
return {
|
||
init: init
|
||
};
|
||
}();
|
||
document.addEventListener('DOMContentLoaded', app.init);
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|