77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Übung 24: Die Sache mit dem Schaltjahr — Teil 2</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="container py-5">
|
|
<div class="alert alert-primary">
|
|
<h2>Übung 24: Die Sache mit dem Schaltjahr — Teil 2</h2>
|
|
<p>
|
|
Verschaffe deinem Schaltjahr-Tool aus Lektion 10 ein Facelifting. Mithilfe der logischen Operatoren kannst
|
|
du einige <code>else</code> einsparen und den Code einfacher, kürzer und übersichtlicher gestalten.
|
|
</p>
|
|
|
|
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
|
|
<ul>
|
|
<li>ganzzahlig durch 400 teilbar ist.</li>
|
|
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="input-year" class="form-label">Jahr</label>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
name="year"
|
|
class="form-control input-year"
|
|
id="input-year"
|
|
placeholder="insert year..." />
|
|
</div>
|
|
<div class="output alert alert-secondary my-3"></div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
'use strict';
|
|
|
|
const inputEl = document.querySelector('.input-year');
|
|
const outputEl = document.querySelector('.output');
|
|
let isLeapYear = false;
|
|
|
|
inputEl.addEventListener('input', (e) => {
|
|
const year = e.currentTarget.value;
|
|
|
|
if (isNaN(year) || year <= 0) {
|
|
const errorMsg = 'Bitte geben Sie ein gültiges Jahr ein.';
|
|
console.log(errorMsg);
|
|
outputEl.textContent = errorMsg;
|
|
} else {
|
|
// wenn ganzzahlig durch 400 teilbar ist.
|
|
// oder (nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist).
|
|
if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
|
|
isLeapYear = true;
|
|
} else {
|
|
isLeapYear = false;
|
|
}
|
|
|
|
// isLeapYear = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
|
|
|
|
const resultText = isLeapYear ? `${year} ist ein Schaltjahr!` : `${year} ist KEIN Schaltjahr`;
|
|
|
|
console.log(resultText);
|
|
|
|
outputEl.textContent = resultText;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|