# web dev

**URL:** https://forum.kirupa.com/c/programming/web-dev/42.md

[Latest](https://forum.kirupa.com/latest.md) · [Categories](https://forum.kirupa.com/categories.md)

---

## [About the web dev category](https://forum.kirupa.com/t/about-the-web-dev-category/43)

<div class="topic-metadata">

**Author:** [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Replies:** 0\
**Last updated:** [October 10, 2014, 9:10am UTC](https://forum.kirupa.com/t/about-the-web-dev-category/43 "2014-10-10T09:10:56Z")

</div>

---

## [Coding Challenge - #24: Truncate With Ellipsis](https://forum.kirupa.com/t/coding-challenge-24-truncate-with-ellipsis/683488)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 6\
**Last updated:** [October 3, 2026, 9:20am UTC](https://forum.kirupa.com/t/coding-challenge-24-truncate-with-ellipsis/683488 "2026-10-03T09:20:15Z")

</div>

Make .title show a single line that truncates with an ellipsis when the text is too long for its 240px container. .title { width: 240px; font-size: 18px; } Rules: CSS only Single line, no wrapping Post your solu…

---

## [Spot the bug - #156: Todo List Counter](https://forum.kirupa.com/t/spot-the-bug-156-todo-list-counter/683481)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 3\
**Last updated:** [October 3, 2026, 9:00am UTC](https://forum.kirupa.com/t/spot-the-bug-156-todo-list-counter/683481 "2026-10-03T09:00:24Z")

</div>

DOM bug, pretty sneaky. const items = document.querySelector('.todo li'); console.log(items.length); Reply with what is broken and how you would fix it.

---

## [Coding Challenge - #23: Group By Key](https://forum.kirupa.com/t/coding-challenge-23-group-by-key/683466)

<div class="topic-metadata">

**Author:** [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Replies:** 3\
**Last updated:** [October 3, 2026, 8:00am UTC](https://forum.kirupa.com/t/coding-challenge-23-group-by-key/683466 "2026-10-03T08:00:18Z")

</div>

Write groupBy(items, key) that returns an object grouping the array of objects by the given property. groupBy(\[{t:"a",v:1},{t:"b",v:2},{t:"a",v:3}\], "t") should give {a:\[{t:"a",v:1},{t:"a",v:3}\], b:\[{t:"b",v:2}\]}. funct…

---

## [Coding Challenge - #25: Truncate With Ellipsis](https://forum.kirupa.com/t/coding-challenge-25-truncate-with-ellipsis/683522)

<div class="topic-metadata">

**Author:** [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Replies:** 3\
**Last updated:** [October 3, 2026, 7:40am UTC](https://forum.kirupa.com/t/coding-challenge-25-truncate-with-ellipsis/683522 "2026-10-03T07:40:16Z")

</div>

Make .title show a single line that truncates with an ellipsis when the text is too long for its 240px container. .title { width: 240px; font-size: 18px; } Rules: CSS only Single line, no wrapping Post your solu…

---

## [Spot the bug - #162: Task Runner Queue](https://forum.kirupa.com/t/spot-the-bug-162-task-runner-queue/683558)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 1\
**Last updated:** [October 3, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-162-task-runner-queue/683558 "2026-10-03T07:20:17Z")

</div>

Tricky closure bug lurking in this delayed queue processor. function runTasks(tasks, delay) { for (var i = 0; i \< tasks.length; i++) { setTimeout(function() { tasks\[i\](); }, delay \* i); } } Reply with…

---

## [Spot the bug - #163: Sticky Blog Sidebar](https://forum.kirupa.com/t/spot-the-bug-163-sticky-blog-sidebar/683564)

<div class="topic-metadata">

**Author:** [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Replies:** 0\
**Last updated:** [October 3, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-163-sticky-blog-sidebar/683564 "2026-10-03T07:00:09Z")

</div>

Sticky sidebar keeps scrolling off the screen. .article-layout { display: flex; gap: 2rem; overflow-x: hidden; } .sidebar-toc { position: sticky; top: 1rem; } Reply with what is broken and how you would fix …

---

## [Coding Challenge - #26: Query String Parser](https://forum.kirupa.com/t/coding-challenge-26-query-string-parser/683555)

<div class="topic-metadata">

**Author:** [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Replies:** 1\
**Last updated:** [October 2, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-26-query-string-parser/683555 "2026-10-02T22:00:31Z")

</div>

Write a function parseQuery(queryString) that parses a URL query string (with or without a leading ?) into an object of key-value pairs. Decoded values should be properly unescaped (e.g., %20 or + becoming spaces). func…

---

## [Spot the bug - #161: Particle Trail Canvas](https://forum.kirupa.com/t/spot-the-bug-161-particle-trail-canvas/683543)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 5:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-161-particle-trail-canvas/683543 "2026-10-02T17:00:14Z")

</div>

Tiny canvas bug in this one. const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff6b6b'; ctx.fillReact(20, 20, 60, 60); Reply with what is broken and how you would f…

---

## [Spot the bug - #158: Card Size Helper](https://forum.kirupa.com/t/spot-the-bug-158-card-size-helper/683503)

<div class="topic-metadata">

**Author:** [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Replies:** 5\
**Last updated:** [October 2, 2026, 4:21pm UTC](https://forum.kirupa.com/t/spot-the-bug-158-card-size-helper/683503 "2026-10-02T16:21:54Z")

</div>

Object bug, one line off. const card = { width: 320, height: 180 }; const { widht, height } = card; console.log(widht \* height); Reply with what is broken and how you would fix it.

---

## [Spot the bug - #160: Email Signup Form](https://forum.kirupa.com/t/spot-the-bug-160-email-signup-form/683527)

<div class="topic-metadata">

**Author:** [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 4:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-160-email-signup-form/683527 "2026-10-02T16:00:17Z")

</div>

Can you spot the form bug? \<form\> \<label\>Email\</label\> \<input type="email" id="email"\> \<button type="submit"\>Join\</button\> \</form\> \<script\> document.querySelector('form').addEventListener('submit', (e) =\> { …

---

## [Spot the bug - #159: Email Signup Form](https://forum.kirupa.com/t/spot-the-bug-159-email-signup-form/683515)

<div class="topic-metadata">

**Author:** [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 1:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-159-email-signup-form/683515 "2026-10-02T13:00:14Z")

</div>

Can you spot the form bug? \<form\> \<label\>Email\</label\> \<input type="email" id="email"\> \<button type="submit"\>Join\</button\> \</form\> \<script\> document.querySelector('form').addEventListener('submit', (e) =\> { …

---

## [Spot the bug - #157: Slug Formatter](https://forum.kirupa.com/t/spot-the-bug-157-slug-formatter/683491)

<div class="topic-metadata">

**Author:** [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 11:00am UTC](https://forum.kirupa.com/t/spot-the-bug-157-slug-formatter/683491 "2026-10-02T11:00:12Z")

</div>

One regex bug in this formatter. function slugify(title) { return title.trim().toLowerCase().replace('/\\s+/g', '-'); } console.log(slugify('Hello World Again')); Reply with what is broken and how you would fix it.

---

## [Spot the bug - #154: Theme Color Parser](https://forum.kirupa.com/t/spot-the-bug-154-theme-color-parser/683457)

<div class="topic-metadata">

**Author:** [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Replies:** 6\
**Last updated:** [October 2, 2026, 8:20am UTC](https://forum.kirupa.com/t/spot-the-bug-154-theme-color-parser/683457 "2026-10-02T08:20:17Z")

</div>

Color helper has one tiny bug. function normalizeHex(hex) { const value = hex.startsWith('#') ? hex : '#' + hex; return value.slice(0, 6); } console.log(normalizeHex('#12abef')); Reply with what is broken and how …

---

## [Spot the bug - #155: Scoreboard Sorter](https://forum.kirupa.com/t/spot-the-bug-155-scoreboard-sorter/683470)

<div class="topic-metadata">

**Author:** [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-155-scoreboard-sorter/683470 "2026-10-02T08:00:11Z")

</div>

Sorting bug hiding in here. const scores = \[12, 4, 30, 21\]; scores.sort((a, b) =\> a \> b); console.log(scores); Reply with what is broken and how you would fix it.

---

## [Spot the bug - #153: Dashboard Card Grid](https://forum.kirupa.com/t/spot-the-bug-153-dashboard-card-grid/683445)

<div class="topic-metadata">

**Author:** [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 5:00am UTC](https://forum.kirupa.com/t/spot-the-bug-153-dashboard-card-grid/683445 "2026-10-02T05:00:11Z")

</div>

Layout bug is hidden in plain sight. .dashboard { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; } .card { grid-column: span 4; padding: 12px; border: 1px solid #ddd; } @medi…

---

## [Coding Challenge - #22: Truncate With Ellipsis](https://forum.kirupa.com/t/coding-challenge-22-truncate-with-ellipsis/683442)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 4:00am UTC](https://forum.kirupa.com/t/coding-challenge-22-truncate-with-ellipsis/683442 "2026-10-02T04:00:11Z")

</div>

Make .title show a single line that truncates with an ellipsis when the text is too long for its 240px container. .title { width: 240px; font-size: 18px; } Rules: CSS only Single line, no wrapping Post your solu…

---

## [Spot the bug - #149: Tag Normalizer](https://forum.kirupa.com/t/spot-the-bug-149-tag-normalizer/683407)

<div class="topic-metadata">

**Author:** [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Replies:** 3\
**Last updated:** [October 2, 2026, 3:40am UTC](https://forum.kirupa.com/t/spot-the-bug-149-tag-normalizer/683407 "2026-10-02T03:40:18Z")

</div>

This text cleanup has one bug. function normalizeTag(tag) { return tag.trim().toLowercase(); } console.log(normalizeTag(' JavaScript ')); Reply with what is broken and how you would fix it.

---

## [Spot the bug - #146: Email Signup Form](https://forum.kirupa.com/t/spot-the-bug-146-email-signup-form/683379)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 3:00am UTC](https://forum.kirupa.com/t/spot-the-bug-146-email-signup-form/683379 "2026-10-02T03:00:24Z")

</div>

Can you spot the form bug? \<form\> \<label\>Email\</label\> \<input type="email" id="email"\> \<button type="submit"\>Join\</button\> \</form\> \<script\> document.querySelector('form').addEventListener('submit', (e) =\> { …

---

## [Spot the bug - #152: Hover Lift Card](https://forum.kirupa.com/t/spot-the-bug-152-hover-lift-card/683435)

<div class="topic-metadata">

**Author:** [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 3:00am UTC](https://forum.kirupa.com/t/spot-the-bug-152-hover-lift-card/683435 "2026-10-02T03:00:11Z")

</div>

Animation bug in plain sight. .card { transition: transform 200 ease; } .card:hover { transform: translateY(-4px); } Reply with what is broken and how you would fix it.

---

## [Spot the bug - #151: Particle Trail Canvas](https://forum.kirupa.com/t/spot-the-bug-151-particle-trail-canvas/683423)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 2:00am UTC](https://forum.kirupa.com/t/spot-the-bug-151-particle-trail-canvas/683423 "2026-10-02T02:00:09Z")

</div>

Tiny canvas bug in this one. const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff6b6b'; ctx.fillReact(20, 20, 60, 60); Reply with what is broken and how you would f…

---

## [Spot the bug - #147: Moving Sprite Position](https://forum.kirupa.com/t/spot-the-bug-147-moving-sprite-position/683387)

<div class="topic-metadata">

**Author:** [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Replies:** 3\
**Last updated:** [October 2, 2026, 1:00am UTC](https://forum.kirupa.com/t/spot-the-bug-147-moving-sprite-position/683387 "2026-10-02T01:00:20Z")

</div>

Find the bug in this animation loop. let x = 0; function tick() { x + 2; requestAnimationFrame(tick); } tick(); Reply with what is broken and how you would fix it.

---

## [Spot the bug - #150: Save Button Click](https://forum.kirupa.com/t/spot-the-bug-150-save-button-click/683415)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 1:00am UTC](https://forum.kirupa.com/t/spot-the-bug-150-save-button-click/683415 "2026-10-02T01:00:10Z")

</div>

Quick one: event handling bug here. const button = document.querySelector('#save'); button.addEventListener('click', saveForm()); function saveForm() { console.log('saved'); } Reply with what is broken and how you w…

---

## [Coding Challenge - #19: Flatten Nested Array](https://forum.kirupa.com/t/coding-challenge-19-flatten-nested-array/683376)

<div class="topic-metadata">

**Author:** [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Replies:** 3\
**Last updated:** [October 2, 2026, 12:40am UTC](https://forum.kirupa.com/t/coding-challenge-19-flatten-nested-array/683376 "2026-10-02T00:40:20Z")

</div>

Write a function flatten(arr, depth) that flattens a nested array up to the specified depth (defaulting to 1). For example, flatten(\[1, \[2, \[3, \[4\]\]\]\], 2) should return \[1, 2, 3, \[4\]\]. function flatten(arr, depth = 1) {…

---

## [JS Quiz: Medium: Reduce accumulator initialization edge case](https://forum.kirupa.com/t/js-quiz-medium-reduce-accumulator-initialization-edge-case/683514)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 12:00am UTC](https://forum.kirupa.com/t/js-quiz-medium-reduce-accumulator-initialization-edge-case/683514 "2026-10-02T00:00:32Z")

</div>

What happens here? const arr = \[\]; const total = arr.reduce((sum, n) =\> sum + n); console.log(total); poll

---

## [Coding Challenge - #21: Center A Card](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413)

<div class="topic-metadata">

**Author:** [@sora](https://forum.kirupa.com/u/sora)\
**Replies:** 2\
**Last updated:** [October 2, 2026, 12:00am UTC](https://forum.kirupa.com/t/coding-challenge-21-center-a-card/683413 "2026-10-02T00:00:09Z")

</div>

Center the .card both horizontally and vertically inside .stage, which is 400px tall. Use flexbox and no fixed pixel offsets. .stage { height: 400px; border: 1px solid #ccc; } .card { width: 200px; height: 100p…

---

## [✨ Archive Spotlight: Variable Hoisting](https://forum.kirupa.com/t/archive-spotlight-variable-hoisting/683502)

<div class="topic-metadata">

**Author:** [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Replies:** 1\
**Last updated:** [October 1, 2026, 10:40pm UTC](https://forum.kirupa.com/t/archive-spotlight-variable-hoisting/683502 "2026-10-01T22:40:15Z")

</div>

Variable Hoisting, and the practical examples still hold up.

---

## [Spot the bug - #148: Duplicate Finder Helper](https://forum.kirupa.com/t/spot-the-bug-148-duplicate-finder-helper/683398)

<div class="topic-metadata">

**Author:** [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Replies:** 2\
**Last updated:** [October 1, 2026, 10:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-148-duplicate-finder-helper/683398 "2026-10-01T22:00:08Z")

</div>

There is one subtle logic bug. function hasDuplicate(nums) { const seen = new Set(); for (const n of nums) { if (seen.has(n)) { return false; } seen.add(n); } return true; } console.log(hasDup…

---

## [Coding Challenge - #20: Debounce Function](https://forum.kirupa.com/t/coding-challenge-20-debounce-function/683393)

<div class="topic-metadata">

**Author:** [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Replies:** 2\
**Last updated:** [October 1, 2026, 9:00pm UTC](https://forum.kirupa.com/t/coding-challenge-20-debounce-function/683393 "2026-10-01T21:00:08Z")

</div>

Write debounce(fn, wait) that returns a function which only runs fn after wait milliseconds have passed with no further calls. Calling it repeatedly should reset the timer. function debounce(fn, wait) { // your code h…

---

## [✨ Archive Spotlight: Animating Your Links To Life](https://forum.kirupa.com/t/archive-spotlight-animating-your-links-to-life/683422)

<div class="topic-metadata">

**Author:** [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Replies:** 1\
**Last updated:** [October 1, 2026, 7:40pm UTC](https://forum.kirupa.com/t/archive-spotlight-animating-your-links-to-life/683422 "2026-10-01T19:40:20Z")

</div>

Animating Your Links To Life, and the practical examples still hold up.

[Next page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=1)