script.js

(function(){"use strict";const $=(s,c=document)=>c.querySelector(s);const $$=(s,c=document)=>Array.from(c.querySelectorAll(s));const setMsg=(el,t,k)=>{el.textContent=t||"";el.classList.remove("error","ok");if(k)el.classList.add(k)};const KEY="theme-preference";function applyTheme(t){document.body.classList.toggle("theme-dark",t==="dark");const b=$("#theme-toggle");if(b){b.setAttribute("aria-pressed",String(t==="dark"))}}function getStored(){try{return localStorage.getItem(KEY)}catch(_){return null}}function store(t){try{localStorage.setItem(KEY,t)}catch(_){}}function initTheme(){const s=getStored();applyTheme(s==="dark"?"dark":"light")}function toggleTheme(){const d=document.body.classList.contains("theme-dark");const n=d?"light":"dark";applyTheme(n);store(n)}let count=0;function render(){$("#count").textContent=String(count)}function inc(){count++;render()}function dec(){count--;render()}function reset(){count=0;render()}function initCounter(){$("#inc")?.addEventListener("click",inc);$("#dec")?.addEventListener("click",dec);$("#reset")?.addEventListener("click",reset);document.addEventListener("keydown",e=>{if(e.key==="ArrowUp"){inc()}else if(e.key==="ArrowDown"){dec()}else if(e.key.toLowerCase()==="r"){reset()}})}function initFAQ(){$$(".faq-question").forEach(btn=>{btn.addEventListener("click",()=>{const next=!(btn.getAttribute("aria-expanded")==="true");btn.setAttribute("aria-expanded",String(next));const ans=document.getElementById(btn.getAttribute("aria-controls"));if(!ans)return;if(next){ans.removeAttribute("hidden")}else{ans.setAttribute("hidden","")}})})}const re={name:/^[A-Za-zÀ-ÖØ-öø-ÿ'’ -]{2,}$/,email:/^[\w.!#$%&’*+/=?^_`{|}~-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+$/,passwordUpper:/[A-Z]/,passwordLower:/[a-z]/,passwordDigit:/\d/,passwordSym:/[^A-Za-z0-9]/};function validateName(v){return re.name.test(v.trim())}function validateEmail(v){return re.email.test(v.trim())}function validatePassword(v){return v.length>=8&&re.passwordUpper.test(v)&&re.passwordLower.test(v)&&re.passwordDigit.test(v)&&re.passwordSym.test(v)}function validateConfirm(p,c){return p===c&&c.length>0}function validateTerms(ch){return !!ch}function initForm(){const form=$("#signup-form");if(!form)return;const name=$("#name"),email=$("#email"),pw=$("#password"),conf=$("#confirm"),terms=$("#terms");const msg={name:$("#name-msg"),email:$("#email-msg"),password:$("#password-msg"),confirm:$("#confirm-msg"),terms:$("#terms-msg")};const status=$("#form-status");function flag(input,ok,mEl,okText,errText){input?.setAttribute("aria-invalid",String(!ok));setMsg(mEl,ok?okText:errText,ok?"ok":"error");return ok}const upName=()=>flag(name,validateName(name.value),msg.name,"Looks good.","Please enter your full name (2+ letters).");const upEmail=()=>flag(email,validateEmail(email.value),msg.email,"Valid email.","Please enter a valid email address.");const upPass=()=>flag(pw,validatePassword(pw.value),msg.password,"Strong password.","Min 8 chars with upper, lower, number and symbol.");const upConf=()=>flag(conf,validateConfirm(pw.value,conf.value),msg.confirm,"Passwords match.","Passwords do not match.");const upTerms=()=>{const ok=validateTerms(terms.checked);setMsg(msg.terms,ok?"":"Please accept the terms to continue.",ok?"ok":"error");return ok};name.addEventListener("input",upName);email.addEventListener("input",upEmail);pw.addEventListener("input",()=>{upPass();upConf()});conf.addEventListener("input",upConf);terms.addEventListener("change",upTerms);form.addEventListener("submit",e=>{e.preventDefault();const okAll=[upName(),upEmail(),upPass(),upConf(),upTerms()].every(Boolean);status.hidden=false;if(!okAll){status.textContent="Please fix the errors before submitting.";return}status.textContent="Success! Your account would be created.";form.reset();[name,email,pw,conf].forEach(i=>i.setAttribute("aria-invalid","false"));Object.values(msg).forEach(el=>setMsg(el,""))})}document.addEventListener("DOMContentLoaded",()=>{initTheme();$("#theme-toggle")?.addEventListener("click",toggleTheme);initCounter();initFAQ();initForm()})})();