Placement Lab Projects

Projects Showcase & Machine Coding Hub

Select an interactive project below to launch its dedicated laboratory, experiment with live controls, and inspect the underlying code and interview insights.

DOM Mutation CSS Transforms Code Generator

01. Interactive Shape & Color Manipulator

Real-time DOM manipulation playground with dynamic shape morphing, CSS transforms, rotation sliders, and a live synchronized CSS & JavaScript code generator.

style.backgroundColor classList.toggle transform: rotate()

Async JS Closures Performance

02. Real-Time Debounce & Throttle Playground

Visually compare unhandled raw events vs debounced execution vs throttled calls with live pulse graphs, interactive delay sliders, and handcrafted closure code.

clearTimeout() Closures Event Throttling

HTML5 Drag & Drop LocalStorage State Persistence

03. Interactive Kanban Board with LocalStorage

Full-featured Agile task management board built with native HTML5 Drag and Drop API, dynamic priority badges, task counters, and persistent client-side storage.

dragstart / drop dataTransfer localStorage

Project 01 DOM Manipulation CSS Transforms Live Code Gen

01. Interactive Shape & Color Manipulator

A real-time DOM mutation playground. Morph shapes, apply dynamic RGB color transitions, calculate 2D CSS rotation matrices, and inspect the exact CSS and JavaScript being generated under the hood.

Color:

Shape:

Rotation: 0°

Class: square Color: #D946EF Transform: rotate(0deg)

Dynamic CSS Applied

.shape-box {
  background-color: #D946EF;
  border-radius: 0px; /* square */
  transform: rotate(0deg);
  transition: all 0.35s ease;
}

JavaScript DOM Mutation

// Target DOM element
const el = document.querySelector('.shape-box');

// Mutate inline background & transform
el.style.backgroundColor = "#D946EF";
el.className = "shape-box square";
el.style.transform = "rotate(0deg)";

💡 Key Interview Insight: Modifying transform: rotate() triggers GPU-accelerated compositing without causing expensive browser layout reflows, making 60 FPS animations smooth!

Project 02 Async JS Closures Performance

02. Real-Time Debounce & Throttle Performance Playground

Visually master the crucial difference between raw unhandled events, Debouncing (delaying execution until user stops typing), and Throttling (guaranteeing execution at fixed intervals) with live counters and event pulse graphs.

Type rapidly in the search box to test events:

🔍

⚡ Or move cursor rapidly across this interactive hover zone

Debounce Delay: 400ms

Throttle Limit: 800ms

1. Standard Event (Raw) Fires Every Event

Fires immediately on every single keystroke. In production, this causes massive server API spam.

2. Debounced Call Waiting...

Waits until the user pauses typing for 400ms. Perfect for autocomplete search.

3. Throttled Call Ready

Executes at most once every 800ms during continuous activity. Ideal for scroll & resize.

Custom Debounce Implementation

function debounce(fn, delay) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId); // Cancel previous timer
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

Custom Throttle Implementation

function throttle(fn, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

💡 Classic Placement Question: "When would you pick Throttling over Debouncing?" → Pick Debouncing when you only care about the final user state (e.g. search suggestions). Pick Throttling when you need regular progress updates at a controlled rate (e.g. scroll position, infinite feed loading, game loops).

Project 03 HTML5 Drag & Drop LocalStorage Event Delegation

03. Interactive Kanban Board with Native Drag-and-Drop & LocalStorage

A full-featured Agile task management board built with native HTML5 Drag and Drop API, dynamic priority badges, and automatic localStorage persistence across sessions.

To Do

In Progress

Completed

Drag & Drop Lifecycle

// 1. Mark element draggable
card.setAttribute('draggable', 'true');

// 2. Drag Start: Store card ID
card.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', card.id);
  card.classList.add('dragging');
});

// 3. Drop Zone: Allow drop & append
dropzone.addEventListener('dragover', (e) => {
  e.preventDefault(); // MANDATORY to allow drop!
});

LocalStorage Serialization

// Save state after every drag/add/delete
function saveTasks(tasksArray) {
  localStorage.setItem('kanban_tasks', 
    JSON.stringify(tasksArray)
  );
}

// Hydrate on page load
function loadTasks() {
  const data = localStorage.getItem('kanban_tasks');
  return data ? JSON.parse(data) : sampleTasks;
}

💡 Crucial Interview Gotcha: By default, browsers disallow dropping elements on other elements. You MUST call e.preventDefault() inside the dragover event listener on the drop target container, or the drop event will never fire!