Set B — Full HTML, CSS and JS Code
Below is the complete simple HTML file containing all answers with HTML, CSS, and JS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Set B — Simple HTML + JS Examples</title>
<style>
body { font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial; line-height:1.4; padding
h1 { font-size:1.4rem; margin-bottom:6px; }
h2 { font-size:1.05rem; margin-top:22px; margin-bottom:6px; color:#0b5; }
p { margin:6px 0 10px; color:#333; }
.card { border:1px solid #eee; padding:12px; border-radius:8px; background:#fafafa; margin-bottom
pre { background:#111; color:#dff; padding:8px; border-radius:6px; overflow:auto; font-size:13px;
button { padding:6px 10px; margin:6px 4px 0 0; border-radius:6px; border:1px solid #bbb; backgrou
.output { margin-top:8px; padding:8px; border-radius:6px; background:#fff; border:1px dashed #ddd
/* Responsive grid example */
.grid { display:grid; gap:15px; grid-template-columns:1fr; }
.grid .item { padding:14px; border-radius:6px; background:#fff; border:1px solid #eee; text-align
@media (min-width:480px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:769px){ .grid{ grid-template-columns:repeat(3,1fr); } }
/* center with flex */
.fullcenter { display:flex; align-items:center; justify-content:center; height:160px; border-radi
/* positioning demo */
.pos-parent { position:relative; height:120px; border:1px dashed #ccc; border-radius:6px; padding
.pos-child { position:absolute; top:10px; right:10px; background:#ffeecc; padding:6px; border-rad
/* small styles */
code { background:#eee; padding:2px 4px; border-radius:4px; font-family:monospace; }
</style>
</head>
<body>
<h1>Set B — Simple HTML + JS (single file)</h1>
<p>Each section includes a tiny demo and the simplest code you can run. Click buttons to see result
<!-- SECTION A: HTML & CSS -->
<h2>1) Responsive lazy image</h2>
<div class="card">
<!-- tiny inline SVG used as image (so file is self-contained) -->
<img id="resp-img"
src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400
alt="responsive"
loading="lazy"
style="max-width:100%; height:auto; display:block; border-radius:6px;"/>
<p style="margin-top:8px">This <code><img loading="lazy"></code> is responsive because of <
</div>
<h2>2) Responsive CSS Grid (1 → 2 → 3 columns)</h2>
<div class="card">
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<p>Resize the browser: mobile 1 column, tablet 2, desktop 3. Gap = 15px.</p>
</div>
<h2>3) <code>em</code> vs <code>rem</code> (simple)</h2>
<div class="card">
<p style="font-size:16px">Root font-size (browser default used). Outer will set <code>font-size:1
<div style="font-size:1.5rem; border:1px solid #eee; padding:8px; border-radius:6px;">
Outer (1.5rem = 150% of root)
<div style="font-size:1.2em; margin-top:6px;">Inner using <code>1.2em</code> → 1.2 * parent si
<div style="font-size:1.2rem; margin-top:6px;">Inner using <code>1.2rem</code> → 1.2 * root si
</div>
<p>em = relative to parent; rem = relative to root (<html>)</p>
</div>
<h2>4) Positioning (relative parent + absolute child)</h2>
<div class="card">
<div class="pos-parent">
Parent (position:relative)
<div class="pos-child">Child (position:absolute)</div>
</div>
<p>If parent is not positioned, absolute child uses the page (viewport). Use <code>position:relat
</div>
<h2>5) Flex center (horizontal & vertical)</h2>
<div class="card">
<div class="fullcenter">
<strong>Centered box</strong>
</div>
<p>Use <code>display:flex; align-items:center; justify-content:center;</code>.</p>
</div>
<!-- SECTION B: JavaScript -->
<h2>6) IIFE (run immediately)</h2>
<div class="card">
<pre>(function(){ console.log("Hello, World!"); })();</pre>
<p>Open browser console to see "Hello, World!" (runs immediately).</p>
</div>
<h2>7) <code>indexOf</code> vs <code>includes</code></h2>
<div class="card">
<button onclick="showIndexOf()">Run indexOf/includes</button>
<div id="out-7" class="output"></div>
<script>
function showIndexOf(){
const text = "JavaScript is awesome";
const a = text.indexOf("Script"); // number or -1
const b = text.includes("Script"); // boolean
document.getElementById('out-7').textContent = `indexOf -> ${a} | includes -> ${b}`;
}
</script>
</div>
<h2>8) <code>async</code> vs <code>defer</code> (explain)</h2>
<div class="card">
<p><strong>defer</strong>: downloads while parsing, runs after HTML parsed, preserves order. Use
<p><strong>async</strong>: downloads while parsing, runs as soon as ready (order not guaranteed).
<p>(You can't demo here both in same file meaningfully — note is enough.)</p>
</div>
<h2>9) Find largest word (simple)</h2>
<div class="card">
<input id="in-9" placeholder="Type a sentence" style="width:70%; padding:6px" />
<button onclick="largest()">Find largest word</button>
<div id="out-9" class="output"></div>
<script>
function largest(){
const s = document.getElementById('in-9').value || "";
// split on non-word characters and filter empty
const words = s.split(/\W+/).filter(Boolean);
if(words.length===0){ document.getElementById('out-9').textContent = "No words"; return; }
let longest = words[0];
for(const w of words) if(w.length > longest.length) longest = w;
document.getElementById('out-9').textContent = longest;
}
</script>
</div>
<h2>10) Update first & last child of element by id</h2>
<div class="card">
<div id="demo-list">
<div>First</div>
<div>Middle</div>
<div>Last</div>
</div>
<button onclick="updateChildren('demo-list')">Update children</button>
<div id="out-10" class="output"></div>
<script>
function updateChildren(id){
const el = document.getElementById(id);
if(!el) { document.getElementById('out-10').textContent = 'Element not found'; return; }
const children = el.children;
if(children.length === 0){
el.textContent = "No child elements to update";
document.getElementById('out-10').textContent = 'No element children';
return;
}
children[0].textContent = ">> Updated First <<";
children[children.length-1].textContent = ">> Updated Last <<";
document.getElementById('out-10').textContent = 'First and last updated';
}
</script>
</div>
<!-- SECTION C: Coding -->
<h2>11) processData (array or object sum)</h2>
<div class="card">
<button onclick="runProcess()">Run examples</button>
<div id="out-11" class="output"></div>
<script>
function processData(d){
if(Array.isArray(d)) return d.reduce((s,v)=>s + Number(v||0), 0);
if(d && typeof d==='object') return Object.values(d).reduce((s,v)=>s + Number(v||0), 0);
throw new TypeError("Unsupported type");
}
function runProcess(){
const a = processData([1,2,3]); // 6
const o = processData({a:5,b:7}); // 12
document.getElementById('out-11').textContent = `array -> ${a} | object -> ${o}`;
}
</script>
</div>
<h2>12) localStorage with 1-minute expiry</h2>
<div class="card">
<button onclick="setExp()">Set key (1 min)</button>
<button onclick="getExp()">Get key</button>
<div id="out-12" class="output"></div>
<script>
function setWithExpiry(key, value, ttl = 60*1000){
const record = { value, expiry: Date.now() + ttl };
localStorage.setItem(key, JSON.stringify(record));
}
function getWithExpiry(key){
const raw = localStorage.getItem(key);
if(!raw) return null;
try {
const rec = JSON.parse(raw);
if(Date.now() > rec.expiry){ localStorage.removeItem(key); return null; }
return rec.value;
} catch(e){ localStorage.removeItem(key); return null; }
}
function setExp(){ setWithExpiry('demoKey', {name:'you'}, 60*1000); document.getElementById('ou
function getExp(){ const v = getWithExpiry('demoKey'); document.getElementById('out-12').textCo
</script>
</div>
<h2>13) Hoisting example (why <code>undefined</code>)</h2>
<div class="card">
<pre>
var x = 1;
function test() {
console.log(x);
var x = 2;
}
test(); // prints undefined
</pre>
<p>Inside <code>test</code> the <code>var x</code> is hoisted (declared before run) but assigned
</div>
<h2>14) Promise (microtask) vs setTimeout (macrotask)</h2>
<div class="card">
<button onclick="runOrder()">Run demo</button>
<div id="out-14" class="output"></div>
<script>
function runOrder(){
const out = [];
setTimeout(()=> out.push('1'), 0);
Promise.resolve().then(()=> out.push('2'));
out.push('3');
// show a bit later so tasks complete
setTimeout(()=> document.getElementById('out-14').textContent = out.join(' , '), 50);
}
</script>
<p>Printed order will be: <code>3 , 2 , 1</code></p>
</div>
<h2>15) Debounce (simple)</h2>
<div class="card">
<button onclick="debouncedClick()">Click (debounced)</button>
<div id="out-15" class="output">No clicks yet</div>
<script>
function debounce(fn, delay){
let t;
return function(...a){ clearTimeout(t); t = setTimeout(()=> fn.apply(this,a), delay); };
}
const onClick = debounce(()=> {
document.getElementById('out-15').textContent = 'Debounced handler fired at ' + new Date().to
}, 800);
function debouncedClick(){ onClick(); document.getElementById('out-15').textContent = 'Waiting.
</script>
</div>
<h2>16) fetchUserData (async + error handling) — demo with placeholder</h2>
<div class="card">
<input id="uid" placeholder="User id (1..10)" style="padding:6px" />
<button onclick="fetchUser()">Fetch user</button>
<div id="out-16" class="output"></div>
<script>
async function fetchUserData(userId){
const url = `https://jsonplaceholder.typicode.com/users/${encodeURIComponent(userId)}`;
const res = await fetch(url);
if(!res.ok) throw new Error('Network response was not ok: ' + res.status);
const data = await res.json();
if(!data || Object.keys(data).length===0) throw new Error('User not found');
return data;
}
async function fetchUser(){
const id = document.getElementById('uid').value || 1;
document.getElementById('out-16').textContent = 'Loading...';
try{
const user = await fetchUserData(id);
document.getElementById('out-16').textContent = JSON.stringify(user, null, 2);
} catch(err){
document.getElementById('out-16').textContent = 'Error: ' + err.message;
}
}
</script>
</div>
<hr style="margin-top:30px"/>
<p style="font-size:13px; color:#666">If you want, I can also: (a) combine all demos into separate
</body>
</html>
