Beispiel:Lotto-4.html
<!doctype html> <html> <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;
} </style> <script> class Lotto {
/** * display alerts to the user */ alert (text, type) { if (text) {
setTimeout( () => { this.alerts.textContent = text; this.alerts.className = (type ? type : "error"); }, 50 );
} else {
// reset this.alerts.textContent = ""; this.alerts.className = ""; } }
/**
* GUI element () */ alerts = document.createElement("p"); /** * setup */ constructor () { this.createGUI(); document.addEventListener("change", e => { this.handleChange(e); }); document.addEventListener("click", e => { this.handleClick(e); }); // polyfill for native Array.shuffle method if (!Array.prototype.shuffle) { // source: https://medium.com/@nitinpatel_20236/-15ea3f84bfb Array.prototype.shuffle = function () { const a = this; var i = a.length - 1; while (i > 0) { const j = Math.floor(Math.random() * i); const temp = a[i]; a[i] = a[j]; a[j] = temp; i--; } return a; }; } } /** * GUI container (<form>) */ container = document.createElement("form"); /** * create complete GUI */ createGUI () { // container this.container.classList.add("lotto"); document.body.appendChild(this.container); // selection n out of m const nm = this.container.appendChild( document.createElement("fieldset") ); nm.appendChild(document.createElement("legend")); nm.lastChild.textContent = "6 aus 49"; for (var i = 1; i <= this.selection.m; i++) { // <input type="checkbox" id="i23"> nm.appendChild(document.createElement("input")); nm.lastChild.id = "i"+i; nm.lastChild.type = "checkbox"; // <label for="i23">23</label> nm.appendChild(document.createElement("label")); nm.lastChild.htmlFor = "i"+i; nm.lastChild.textContent = i; } // additional selection 1 out of 10 // selection n out of m const s = this.container.appendChild( document.createElement("fieldset") ); s.appendChild(document.createElement("legend")); s.lastChild.textContent = "Superzahl"; for (var i = 1; i < 11; i++) { // <input type="checkbox" id="s10"> s.appendChild(document.createElement("input")); s.lastChild.id = "s"+i; s.lastChild.name = "s"; s.lastChild.type = "radio"; if (1 == i) { s.lastChild.setAttribute("checked", "checked"); } // <label for="s10">10</label> s.appendChild(document.createElement("label")); s.lastChild.htmlFor = "s"+i; s.lastChild.textContent = i; } // button const b = this.container.appendChild( document.createElement("p") ); b.appendChild(document.createElement("button")); b.lastChild.textContent = "Ziehung starten!"; b.lastChild.type = "button"; // alerts this.container.appendChild(this.alerts); } /** * react to change events * * @param Object */ handleChange (e) { const nm = this.container.querySelectorAll('[id^="i"]:checked'); // reset alerts this.alert(); // are we inside limits? if (nm.length > this.selection.n) { // revert last change e.target.click(); this.alert( [ "Sie können maximal", this.selection.n, "Zahlen für die Ziehung auswählen!" ].join(" ") ); } } /** * react to click events * * @param Object */ handleClick (e) { if (this.container.querySelector("button") == e.target) { // check required number of selections const nm = this.container.querySelectorAll('[id^="i"]:checked'), s = this.container.querySelectorAll('[id^="s"]:checked'); var errors = []; // reset alerts this.alert(); if (nm.length < this.selection.n) { errors.push( [ "Sie benötigen", this.selection.n, "Zahlen für die Ziehung!" ].join(" ") ); } if (!s.length) { errors.push( "Sie haben noch keine Superzahl ausgewählt!" ); } if (errors.length) { this.alert(errors.join(" - ")); } else { this.alert( [ "Lottozahlen:", this.pick_n_outOf_m( this.selection.n, this.selection.m ), " - Superzahl:", this.pick_n_outOf_m(1, 10) ].join(" "), "success" ); } } } /** * selection size * * @param Object */ selection = { n: 6, m: 49 }; /** * pick n from a pool of numbers ranged from 1 to m * * @param int * @param int */ pick_n_outOf_m (size, highestNumber) { const pool = Array(highestNumber) .fill() // damit map() so gelingt .map((_, i) => i + size) // Werte von n-m eintragen .shuffle(); const pick = pool.slice(0, size); pick.sort(); return pick; } } document.addEventListener('DOMContentLoaded', () => { new Lotto(); }); </script> </head> <body>
Lotto – 6 aus 49
<p class="warnung">Glücksspiel kann süchtig machen.</body> </html>
