Beispiel:Lotto-5.html
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>Lotto - 6 aus 49</title> <style> .lotto input { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }
.lotto label { position: relative; text-align: center; color: firebrick; border: thin solid firebrick; line-height: 1.5; }
.lotto :checked + label::after {
content: "×";
position: absolute; left: -0.35rem; top: -1.25rem; right: 0; font-size: 2.5rem; color: darkblue; opacity: .6; }
.lotto fieldset { display: grid; gap: .25rem;
width: min-content;
}
.lotto fieldset:first-of-type { grid-template: repeat(7, 1.5rem) / repeat(7, 1.5rem); }
.lotto fieldset:last-of-type { grid-template: 1.5rem / repeat(10, 1.5rem); }
.lotto .error, .lotto .success { padding: 1rem 2rem; }
.lotto .error {
background: #ffdddd; color: red;
}
.lotto .success {
background: #ddffdd; color: green; white-space: pre-wrap;
} </style> <script> class Lotto {
alert(text, type) {
if (text) {
setTimeout(() => {
this.alerts.textContent = text;
this.alerts.className = type ? type : "error";
}, 50);
} else {
this.alerts.textContent = "";
this.alerts.className = "";
}
}
alerts = document.createElement("p");
constructor() {
this.createGUI();
document.addEventListener("change", (e) => {
this.handleChange(e);
});
document.addEventListener("click", (e) => {
this.handleClick(e);
});
if (!Array.prototype.shuffle) {
Array.prototype.shuffle = function () {
const a = this;
let i = a.length - 1;
while (i > 0) {
const j = Math.floor(Math.random() * i);
[a[i], a[j]] = [a[j], a[i]];
i--;
}
return a;
};
}
}
container = document.createElement("form");
createGUI() {
this.container.classList.add("lotto");
document.body.appendChild(this.container);
const nm = this.container.appendChild(document.createElement("fieldset"));
nm.appendChild(document.createElement("legend"));
nm.lastChild.textContent = "6 aus 49";
for (let i = 1; i <= this.selection.m; i++) {
nm.appendChild(document.createElement("input"));
nm.lastChild.id = "i" + i;
nm.lastChild.type = "checkbox";
nm.appendChild(document.createElement("label"));
nm.lastChild.htmlFor = "i" + i;
nm.lastChild.textContent = i;
}
const s = this.container.appendChild(document.createElement("fieldset"));
s.appendChild(document.createElement("legend"));
s.lastChild.textContent = "Superzahl";
for (let i = 1; i <= 10; i++) {
s.appendChild(document.createElement("input"));
s.lastChild.id = "s" + i;
s.lastChild.name = "s";
s.lastChild.type = "radio";
if (i === 1) {
s.lastChild.setAttribute("checked", "checked");
}
s.appendChild(document.createElement("label"));
s.lastChild.htmlFor = "s" + i;
s.lastChild.textContent = i;
}
const b = this.container.appendChild(document.createElement("p"));
b.appendChild(document.createElement("button"));
b.lastChild.textContent = "Ziehung starten!";
b.lastChild.type = "button";
this.container.appendChild(this.alerts); }
handleChange(e) {
const nm = this.container.querySelectorAll('[id^="i"]:checked');
this.alert();
if (nm.length > this.selection.n) {
e.target.click();
this.alert(`Sie können maximal ${this.selection.n} Zahlen für die Ziehung auswählen!`);
}
}
handleClick(e) {
if (this.container.querySelector("button") === e.target) {
const nm = this.container.querySelectorAll('[id^="i"]:checked');
const s = this.container.querySelector('[id^="s"]:checked');
const errors = [];
this.alert();
if (nm.length < this.selection.n) {
errors.push(`Sie benötigen ${this.selection.n} Zahlen für die Ziehung!`);
}
if (!s) {
errors.push("Sie haben noch keine Superzahl ausgewählt!");
}
if (errors.length) {
this.alert(errors.join(" - "));
} else {
const selectedNumbers = Array.from(nm).map((el) => parseInt(el.id.slice(1)));
const selectedSuperzahl = parseInt(s.id.slice(1));
const drawnNumbers = this.pick_n_outOf_m(this.selection.n, this.selection.m);
const drawnSuperzahl = this.pick_n_outOf_m(1, 10)[0];
const matches = this.compareNumbers(selectedNumbers, drawnNumbers);
this.alert(
`Ihre Zahlen: ${selectedNumbers.join(", ")} | Superzahl: ${selectedSuperzahl}\n` +
`Gezogene Zahlen: ${drawnNumbers.join(", ")} | Superzahl: ${drawnSuperzahl}\n` +
`Übereinstimmungen: ${matches.join(", ")} (${matches.length} Treffer)\n` +
`${selectedSuperzahl === drawnSuperzahl ? "Superzahl stimmt überein!" : "Superzahl stimmt nicht überein."}`,
"success"
);
}
}
}
selection = { n: 6, m: 49 };
pick_n_outOf_m(size, highestNumber) {
const pool = Array(highestNumber)
.fill()
.map((_, i) => i + 1)
.shuffle();
const pick = pool.slice(0, size);
pick.sort((a, b) => a - b);
return pick; }
compareNumbers(selected, drawn) {
return selected.filter((num) => drawn.includes(num));
}
}
document.addEventListener("DOMContentLoaded", () => {
new Lotto();
}); </script>
</head> <body>
Lotto – 6 aus 49
Glücksspiel kann süchtig machen.
</body> </html>
