2024-09-16 14:21:43 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app"></div>
|
|
|
|
|
<script>
|
|
|
|
|
// model
|
|
|
|
|
var app = document.getElementById('app');
|
|
|
|
|
var score;
|
|
|
|
|
var scoreRating = '';
|
|
|
|
|
//view
|
|
|
|
|
updateView();
|
|
|
|
|
function updateView() {
|
|
|
|
|
app.innerHTML = /*HTML*/ `
|
|
|
|
|
Input score:<input type="number" onchange="score = this.value">
|
|
|
|
|
<button onclick="getScoreRating(score)">check your rating</button>
|
2024-09-16 14:59:03 +02:00
|
|
|
<button onclick="fizzBuzz()">Fizz the buzz</button>
|
2024-09-16 14:21:43 +02:00
|
|
|
<div>Your rating: ${scoreRating}</div>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//control
|
|
|
|
|
function getScoreRating(score) {
|
2024-09-16 14:59:03 +02:00
|
|
|
scoreRating = score > 90 ? score + " Excellent" :
|
|
|
|
|
score > 70 ? score + " Good" :
|
|
|
|
|
score > 50 ? score + " Average" :
|
|
|
|
|
score + " Do better!";
|
2024-09-16 14:21:43 +02:00
|
|
|
updateView();
|
|
|
|
|
}
|
2024-09-16 14:59:03 +02:00
|
|
|
function fizzBuzz() {
|
|
|
|
|
for (let i = 1; i < 101; i++) {
|
|
|
|
|
let fizzbuzzOrBuzzOrFizz = i % 15 === 0 ? 'fizzbuzz' :
|
|
|
|
|
i % 5 === 0 ? 'buzz' :
|
|
|
|
|
i % 3 === 0 ? 'fizz' :
|
|
|
|
|
i;
|
|
|
|
|
app.innerHTML += `<br>${fizzbuzzOrBuzzOrFizz}`;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-09-16 14:21:43 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
