| 123 |
- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Donut Bingo</title> <style>*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;width:100%}body{display:flex;flex-direction:column;justify-content:center;align-items:center}.contents{display:flex;justify-content:center;width:100%;position:relative}#inputs{display:flex;flex-direction:column;position:absolute;left:35px;top:35px}table{border-collapse:collapse}td{height:125px;width:125px;border:1px solid black;position:relative}.cross{height:100%;width:100%;position:absolute;top:0;left:0}
- </style> </head> <body> <h1>Donut Bingo</h1> <div class="contents"> <div id="inputs"> <button id="saveInputs">Save</button> </div> <button id="start">Start</button> <div class="bingo"> <table> <tbody id="tbody"></tbody> </table> </div> </div> <svg class="cross" id="cross" style="display:none" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"> <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ff0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <script>(()=>{var c=document.getElementById("inputs"),s=document.getElementById("tbody"),o=[],i=localStorage.getItem("inputs");i?i=i.split(","):i=[];for(let t=0;t<25;t++){let e=document.createElement("input");e.type="text",i[t]&&(e.value=i[t]),c.appendChild(e)}for(let t=0;t<5;t++){let e=document.createElement("tr");for(let n=0;n<5;n++){let l=document.createElement("td");t===2&&n==2&&(l.textContent="Free"),e.appendChild(l),o.push(l)}s.appendChild(e)}var d=t=>{for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1));[t[e],t[n]]=[t[n],t[e]]}};document.getElementById("saveInputs").addEventListener("click",()=>{let t=document.querySelectorAll("#inputs input"),e="";for(let n=0;n<t.length;n++)t[n].value!==""&&(e+=`${t[n].value},`);e[e.length-1]===","&&(e=e.slice(0,-1)),localStorage.setItem("inputs",e)});document.getElementById("start").addEventListener("click",()=>{let t=document.querySelectorAll("#inputs input"),e=[];for(let l=0;l<t.length;l++)e.push(t[l].value);d(e);let n=document.querySelectorAll("#tbody td");for(let l=0;l<n.length;l++)n[l].textContent=e[l]});for(let t=0;t<o.length;t++)o[t].addEventListener("click",()=>{let e=o[t].querySelector("svg");if(e)o[t].removeChild(e);else{let n=document.getElementById("cross");n=n.cloneNode(!0),n.removeAttribute("id"),n.style.display="block",o[t].appendChild(n)}});})();
- </script> </body> </html>
|
