Best Cheat Sheet for Frontend Machine Coding Interview Round

Machine coding interviews are a must in all tech companies hiring for frontend/UI roles at any level. There are plenty of machine coding questions out there that can become part of the frontend interview, but the underlying concepts are quite common.

As part of this Frontend Machine Coding Cheat-Sheet, we aim to capture common concepts in a single blog post, so that anyone can revise all the important concepts from a single place. Lets 

Frontend Machine Coding Interview Round: Cheat Sheet

Here are the important concepts to revise before every machine coding interview.

Search Logic

Related Questions

1. Auto Complete Search or Type Ahead search

Search for a text in the Array of objects using Array.includes() or a Regex expression

// 🔍 Using Includes
const data = [
  { name: "Alice Johnson", role: "Developer" },
  { name: "Bob Smith", role: "Designer" },
  { name: "Charlie Brown", role: "Project Manager" },
];

const searchTerm = "Bob";

const resultIncludes = data.filter(item =>
  item.name.includes(searchTerm) || item.role.includes(searchTerm)
);

console.log("Search using includes():", resultIncludes);


// 🔍 Using Regex
const regex = new RegExp(searchTerm, "i"); // 'i' for case-insensitive

const resultRegex = data.filter(item =>
  regex.test(item.name) || regex.test(item.role)
);

console.log("Search using RegExp:", resultRegex);

Accessibility Considerations for Search Boxes

1️⃣ Search Box with Auto-suggestion

Live Code Example 

<label for="search">Search:</label>
<input
  type="text"
  id="search"
  role="combobox"
  aria-autocomplete="list"
  aria-expanded="false"
  aria-controls="suggestions"
  autocomplete="off"
/>
<ul id="suggestions" role="listbox" hidden></ul>

Key-board support in the suggestion selection

const input = document.getElementById("search");
const list = document.getElementById("suggestions");

const suggestions = ["Apple", "Banana", "Blueberry", "Cherry", "Mango"];
let activeIndex = -1;

input.addEventListener("input", () => {
  const value = input.value.toLowerCase();
  const matched = suggestions.filter(s => s.toLowerCase().includes(value));

  list.innerHTML = "";
  activeIndex = -1;

  if (matched.length > 0 && value) {
    list.hidden = false;
    input.setAttribute("aria-expanded", "true");

    matched.forEach((item, index) => {
      const li = document.createElement("li");
      li.id = `suggestion-${index}`;
      li.setAttribute("role", "option");
      li.textContent = item;

      li.addEventListener("click", () => {
        input.value = item;
        list.hidden = true;
        input.setAttribute("aria-expanded", "false");
      });

      list.appendChild(li);
    });
  } else {
    list.hidden = true;
    input.setAttribute("aria-expanded", "false");
  }
});

// Keyboard support
input.addEventListener("keydown", (e) => {
  const items = list.querySelectorAll("li");

  if (e.key === "ArrowDown") {
    activeIndex = (activeIndex + 1) % items.length;
  } else if (e.key === "ArrowUp") {
    activeIndex = (activeIndex - 1 + items.length) % items.length;
  } else if (e.key === "Enter" && activeIndex >= 0) {
    input.value = items[activeIndex].textContent;
    list.hidden = true;
    input.setAttribute("aria-expanded", "false");
  }

  items.forEach((item, index) => {
    item.classList.toggle("active", index === activeIndex);
  });
});

2️⃣ A general search box without Auto-suggestion

<input
  type="search" // Use semantic type in general search without suggestion
  role="combobox"
  aria-autocomplete="list"
  aria-expanded="false"
  aria-controls="suggestions"
  aria-activedescendant=""
  autocomplete="off"
/>

Listing Logic

Related Questions

1. Auto Complete Search or Type Ahead search
2. News feed / Infinite scroll
3. Pagination

Responsive listing using flexbox/grid

CodePen Live Example

/* HTML */
<h2>Flexbox Listing</h2>
<div class="flex-container" id="flexList"></div>

/* CSS */
body {
  font-family: sans-serif;
  padding: 2rem;
  background-color: #f9f9f9;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.flex-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 200px;
  text-align: center;
}

/* JS */
const items = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Vue",
  "Angular",
  "Svelte"
];
const flexList = document.getElementById("flexList");

items.forEach((name) => {
  const card = document.createElement("div");
  card.className = "flex-card";
  card.innerHTML = `<h4>${name}</h4>`;
  flexList.appendChild(card);
});

Product catalog listing with images

Codepen Live Example

  <h1>🛍️ Product Catalog</h1>
  <div class="catalog" id="catalog"></div>

    h1 {
      text-align: center;
      margin-bottom: 2rem;
    }

    .catalog {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1.5rem;
    }

    .product-card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease;
    }

    .product-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }

    .product-info {
      padding: 1rem;
    }

    .product-info h3 {
      font-size: 1.1rem;
      margin: 0 0 0.5rem;
    }

    .product-info p {
      margin: 0;
      color: #888;
    }

    .product-info .price {
      font-weight: bold;
      color: #333;
      margin-top: 0.5rem;
    }

const products = [
      {
        name: "Classic Sneakers",
        price: "$59.99",
        image: "https://images.unsplash.com/photo-1618354691373-5f1c94ef18d4?auto=format&fit=crop&w=400&q=80"
      },
      {
        name: "Leather Backpack",
        price: "$89.00",
        image: "https://images.unsplash.com/photo-1600180758890-5b568f0a5a63?auto=format&fit=crop&w=400&q=80"
      },
      {
        name: "Smart Watch",
        price: "$199.99",
        image: "https://images.unsplash.com/photo-1519838264761-1aa9af7fa66f?auto=format&fit=crop&w=400&q=80"
      },
      {
        name: "Sunglasses",
        price: "$39.99",
        image: "https://images.unsplash.com/photo-1606811844664-c1b33e5c05c3?auto=format&fit=crop&w=400&q=80"
      }
    ];

    const catalog = document.getElementById("catalog");

    products.forEach(product => {
      const card = document.createElement("div");
      card.className = "product-card";
      card.innerHTML = `
        <img src="${product.image}" alt="${product.name}">
        <div class="product-info">
          <h3>${product.name}</h3>
          <p class="price">${product.price}</p>
        </div>
      `;
      catalog.appendChild(card);
    });

Infinite scroll using Intersection observer

How it works in summary

• Create a "loader" element at the bottom of the page.
• IntersectionObserver watches this element.
• When the element becomes visible (user scrolls near the bottom), more items are loaded.
• New items push the loader again on the bottom, and the observer keeps triggering as needed.

// JavaScript
const container = document.getElementById("item-container");
const loader = document.getElementById("loader");

let itemCount = 0;
const batchSize = 10;

function loadItems(count) {
  for (let i = 0; i < count; i++) {
    const item = document.createElement("div");
    item.className = "item";
    item.textContent = `Product ${++itemCount}`;
    container.appendChild(item);
  }
}

const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  if (entry.isIntersecting) {
    // Simulate loading delay
    setTimeout(() => {
      loadItems(batchSize);
    }, 500);
  }
});

// Initial load
loadItems(batchSize);
observer.observe(loader);

<h2>📜 Infinite Scroll Example</h2>
<div id="item-container"></div>
<div class="loader" id="loader">Loading more items...</div>

.item {
  background: #fff;
  margin-bottom: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.loader {
  text-align: center;
  padding: 1rem;
  font-size: 1rem;
  color: #777;
}

API Calls

API calls using fetch - GET, POST, PATCH

GET API call example

Code

POST API call example

Code

PATCH API call example

Code

Cancel fetch API call using AbortController

Code

Parallel API calls using Promise.all() & Promise.allSettled()

Code

API call Exception handling

Code

DOM - Event handling & Delegation

Event handling

Code

Event Delegation

Code

Debouncing & Throttling

Debouncing

Code

Throttling

Code

Media Queries - Responsive Design

Code

Menu/Modal Creation (Absolute positioning)

Code

Data Polling

Code

Random number generation

Random numbers are very commonly used in Machine Coding rounds to generate a large number of random data sets. 

Code

Date handling

Difference between 2 Dates

Format dates for UI display