Dynamic
Sites Without
a Server

<!-- HTML5 built-in constraint attributes -->
<input type="email"    required>
<input type="url"      required>
<input type="number"   min="18"  max="120">
<input type="text"     pattern="[A-Za-z]{3,}"
               minlength="3"  maxlength="50">
<input type="tel"      pattern="[\d\-\+\s]{7,15}">

// Constraint Validation API
const inp = document.querySelector('#email');

// Check validity
inp.validity.valid          // boolean
inp.validity.valueMissing   // required but empty
inp.validity.typeMismatch   // bad type (email, url)
inp.validity.patternMismatch// failed pattern=
inp.validity.tooShort       // below minlength
inp.validity.rangeUnderflow // below min
inp.validationMessage       // browser error string

// Custom error message
inp.setCustomValidity('Username is taken!');
inp.setCustomValidity('');   // clear error
inp.reportValidity();        // show bubble

// Form submit handler (prevent default & handle)
form.addEventListener('submit', e => {
  e.preventDefault();
  if (!form.checkValidity()) { showErrors(); return; }
  processForm(new FormData(form));
});

// ── localStorage as a Database ────────────────
// Save (like INSERT/UPDATE)
function save(items) {
  localStorage.setItem('todos', JSON.stringify(items));
}
// Load (like SELECT *)
function load() {
  return JSON.parse(localStorage.getItem('todos') || '[]');
}

// CREATE — add new item
function addTodo(text, priority) {
  const todos = load();
  todos.push({
    id:   Date.now(),   // unique ID
    text, priority,
    done: false,
    created: new Date().toISOString()
  });
  save(todos);
}

// UPDATE — toggle done
function toggleDone(id) {
  const todos = load().map(t =>
    t.id === id ? { ...t, done: !t.done } : t
  );
  save(todos);
}

// DELETE — remove by id
function deleteTodo(id) {
  save(load().filter(t => t.id !== id));
}

// READ + FILTER (like WHERE clause)
const active = load().filter(t => !t.done);
const byPri  = load().sort((a,b) =>
  {'high':0,'med':1,'low':2}[a.priority] -
  {'high':0,'med':1,'low':2}[b.priority]);

// Live search — like PHP: WHERE name LIKE '%query%'
function filterProducts() {
  const q   = searchInput.value.toLowerCase();
  const cat = activeCat;

  const results = products.filter(p => {
    const matchSearch = p.name.toLowerCase().includes(q)
                     || p.desc.toLowerCase().includes(q);
    const matchCat = cat === 'all' || p.category === cat;
    return matchSearch && matchCat;
  });

  // Highlight matching text
  function highlight(text, query) {
    if (!query) return text;
    const re = new RegExp(`(${query})`, 'gi');
    return text.replace(re, '<mark>$1</mark>');
  }

  // Sort results
  results.sort((a, b) => {
    if (sortBy === 'price-asc')  return a.price - b.price;
    if (sortBy === 'price-desc') return b.price - a.price;
    if (sortBy === 'name-asc')
      return a.name.localeCompare(b.name);
  });

  renderGrid(results); // re-render DOM
}

// ── HTML5 Drag & Drop API ──────────────────
// 1. Make element draggable
<div draggable="true"
     ondragstart="onDragStart(event)">Card</div>

// 2. Drag start — store the card ID
function onDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
  e.target.classList.add('dragging');
}

// 3. Allow drop on containers
function onDragOver(e) {
  e.preventDefault();   // MUST prevent default!
  e.dataTransfer.dropEffect = 'move';
}

// 4. Handle drop
function onDrop(e, column) {
  e.preventDefault();
  const id   = e.dataTransfer.getData('text/plain');
  const card = document.getElementById(id);
  column.appendChild(card);   // move the DOM node
}

// 5. Drag end — cleanup
function onDragEnd(e) {
  e.target.classList.remove('dragging');
  saveBoard();    // persist positions to localStorage
}

// ── GET (PHP: file_get_contents($url)) ────────
const data = await fetch('/api/users')
  .then(r => { if (!r.ok) throw r.status; return r.json(); });

// ── POST (PHP: $_POST + INSERT INTO) ──────────
const res = await fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hello', body: 'World' })
});
const created = await res.json();  // { id: 101, ... }

// ── PUT (PHP: UPDATE SET ... WHERE id=?) ───────
await fetch(`/api/posts/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Updated' })
});

// ── DELETE (PHP: DELETE FROM WHERE id=?) ───────
await fetch(`/api/posts/${id}`, { method: 'DELETE' });

// ── AbortController (cancel/timeout) ───────────
const ctrl = new AbortController();
setTimeout(() => ctrl.abort(), 5000);  // 5s timeout
await fetch(url, { signal: ctrl.signal });

// ── FormData (PHP: multipart form POST) ────────
const fd = new FormData();
fd.append('name', 'Alice');
fd.append('avatar', fileInput.files[0]);
await fetch('/upload', { method: 'POST', body: fd });
// Content-Type set automatically (multipart)

// PHP equivalent: $_FILES['file']['tmp_name']
const file = fileInput.files[0];
const reader = new FileReader();

// Read as DataURL (for image preview)
reader.readAsDataURL(file);
reader.onload = e => { img.src = e.target.result; };

// Read as text (txt, csv, json, html...)
reader.readAsText(file, 'UTF-8');
reader.onload = e => {
  const text = e.target.result;
  const rows = text.split('\n').map(r => r.split(','));
};

// Read as ArrayBuffer (binary files)
reader.readAsArrayBuffer(file);

// Progress events
reader.onprogress = e => {
  const pct = Math.round(e.loaded / e.total * 100);
};
reader.onerror = e => console.error('Read failed');

// File metadata (like PHP $_FILES)
file.name      // "photo.jpg"
file.size      // bytes
file.type      // "image/jpeg"
file.lastModified  // timestamp

// Drag & drop zone
zone.addEventListener('dragover', e => e.preventDefault());
zone.addEventListener('drop', e => {
  e.preventDefault();
  readFile(e.dataTransfer.files[0]);
});

// ── Simple SPA Router ──────────────────────────
const routes = {
  '/':        () => show('home'),
  '/about':   () => show('about'),
  '/blog':    () => show('blog'),
  '/blog/:id':id => showPost(id),
};

// Navigate — update URL + render
function navigate(path) {
  history.pushState({ path }, '', path);
  render(path);
}

// Handle browser back/forward
window.addEventListener('popstate', e => {
  render(e.state?.path || '/');
});

// Render function (like PHP's page switcher)
function render(path) {
  // match dynamic segments /blog/:id
  const match = Object.keys(routes)
    .find(r => pathMatches(path, r));
  if (match) routes[match](path);
  else show('404');
}

// Intercept ALL link clicks
document.addEventListener('click', e => {
  const a = e.target.closest('a[href]');
  if (a && a.href.startsWith(location.origin)) {
    e.preventDefault();
    navigate(a.pathname);
  }
});

<!-- Embed PHP-style template data in HTML -->
<div
  data-id="101"
  data-price="29.99"
  data-category="electronics"
  data-in-stock="true">
  Product Name
</div>

// Read via .dataset (camelCase)
el.dataset.id        // "101"
el.dataset.price     // "29.99"
el.dataset.category  // "electronics"
el.dataset.inStock   // "true" (data-in-stock → inStock)

// Write
el.dataset.price = "19.99";

// CSS access
[data-category="electronics"] { color: cyan; }
div::after { content: attr(data-price); }

// Select by data attribute
document.querySelectorAll('[data-category="tech"]')
document.querySelector('[data-id="101"]')

// ── OPEN / CREATE DATABASE ───────────────────
const req = indexedDB.open('MyApp', 1);

req.onupgradeneeded = e => {
  const db = e.target.result;
  // CREATE TABLE contacts (...)
  const store = db.createObjectStore('contacts',
    { keyPath: 'id', autoIncrement: true });
  store.createIndex('email', 'email', { unique: true });
};

// INSERT INTO contacts VALUES (...)
async function add(contact) {
  const db = await openDB();
  return db.transaction('contacts', 'readwrite')
    .objectStore('contacts').add(contact);
}

// SELECT * FROM contacts
async function getAll() {
  const db = await openDB();
  return new Promise(resolve => {
    const req = db.transaction('contacts')
      .objectStore('contacts').getAll();
    req.onsuccess = () => resolve(req.result);
  });
}

// DELETE FROM contacts WHERE id = ?
async function remove(id) {
  const db = await openDB();
  db.transaction('contacts', 'readwrite')
    .objectStore('contacts').delete(id);
}

<!-- Inert until cloned — like PHP template files -->
<template id="card-tmpl">
  <div class="card">
    <h3 class="name"></h3>
    <p  class="role"></p>
  </div>
</template>

// Clone and populate (like PHP include + template vars)
function renderCard(user) {
  const tmpl = document.getElementById('card-tmpl');

  // .content is a DocumentFragment
  const clone = tmpl.content.cloneNode(true);

  // Fill in the blanks (PHP: $name, $role)
  clone.querySelector('.name').textContent = user.name;
  clone.querySelector('.role').textContent = user.role;

  document.getElementById('output')
    .appendChild(clone);
}

// Template literals as alternative
const html = users.map(u => `
  <div class="card">
    <h3>${u.name}</h3>
    <p>${u.role}</p>
  </div>
`).join('');
container.innerHTML = html;