67 lines
2.2 KiB
HTML
67 lines
2.2 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');
|
|
|
|
const isLeapYear = (year) => {
|
|
const checkOne = year % 400 === 0;
|
|
const checkTwo = year % 100 !== 0 && year % 4 === 0;
|
|
return checkOne || checkTwo;
|
|
};
|
|
|
|
let output = '';
|
|
|
|
inputEl.addEventListener('input', (e) => {
|
|
const val = e.currentTarget.value;
|
|
|
|
output = isLeapYear(val) ? `${val} ist ein Schaltjahr` : `${val} ist KEIN Schaltjahr`;
|
|
|
|
console.log(output);
|
|
outputEl.textContent = output;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|