Example Demos

Hello World
Form Validation
Responsive Grid
\n\n` }, grid: { preview: `
\n
Box 1
\n
Box 2
\n
Box 3
\n
Box 4
\n
`, code: `\n\n\n\n\n\n
\n
Box 1
\n
Box 2
\n
Box 3
\n
Box 4
\n
\n\n` } }; function loadExample(id){ document.querySelectorAll('.tab').forEach(t=>t.classList.toggle('active',t.dataset.id===id)); const ex=examples[id]; document.getElementById('preview').innerHTML=ex.preview; document.getElementById('code').textContent=ex.code; } document.querySelectorAll('.tab').forEach(tab=>tab.addEventListener('click',()=>loadExample(tab.dataset.id))); loadExample('hello'); // additional script for form demo document.addEventListener('submit',e=>{ if(e.target.id==='demoForm'){ e.preventDefault(); const name=document.getElementById('name').value.trim(); const msg=document.getElementById('msg'); if(name){msg.textContent='Hello, '+name+'!';msg.style.color='green';} else{msg.textContent='Please enter your name.';msg.style.color='red';} } });