How-Good-Your-Math-Skills-Are/minify.html at main · code-ga/How-Good-Your-Math-Skills-Are · GitHub

1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>How Good Your Math Skills Are</title><style>.equals,.firstNumber,.operator,.result,.secondNumber{font-size:24px;font-weight:700;color:#333}body{font-family:Arial,sans-serif;background-color:#f2f2f2;margin:0;padding:0}.container{margin:0 auto;padding:20px;background-color:#d8d8d8;text-align:center}h1{color:#333}.calculator,.scores{display:flex;justify-content:center;align-items:center;background-color:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.firstNumber,.result,.secondNumber{margin:0 5px;padding:5px;border:1px solid #ccc;border-radius:3px}.scores h2{margin:0 10px}</style></head><body><div class="container"><h1>Show off your math skills</h1><div class="scores"><h2>Score:<span id="score">0</span></h2><h2>Time:<span id="time">0</span></h2></div><div class="calculator"><input class="firstNumber" type="number"><div class="operator"></div><input class="secondNumber" type="number"><div class="equals">=</div><input class="result" type="number"></div></div></body><script>const operators=["+","-","*"];function getState(){const fN=Math.floor(100*Math.random()),sN=Math.floor(100*Math.random()),oI=Math.floor(Math.random()*operators.length),o=operators[oI],r=eval(`${fN} ${o} ${sN}`);return{fN:fN,sN:sN,o:o,r:r,bI:[fN,sN,r]}}let sc=0,st=getState(),stt=new Date;const render=()=>{const t=Math.floor(2*Math.random()),e=document.querySelectorAll("input"),o=document.querySelectorAll(".operator"),r=document.querySelector("#score"),n=document.querySelector("#time");r.textContent=sc,n.textContent=Math.floor((new Date-stt)/1e3),o[0].textContent=st.o;let a=0;for(const o of st.bI){const r=e[a];console.log(r),a!=t?(r.value=o,r.readOnly=!0):(r.readOnly=!1,r.focus(),r.value="",r.addEventListener("keydown",(t=>{if("Enter"===t.key){const t=Number(r.value);console.log(t,o),t==o&&(sc++,st=getState(),render())}}))),a++}};document.addEventListener("DOMContentLoaded",render);</script></html>