frontend-challenges
frontend-challenges copied to clipboard
jsartisan
FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
styles.css ```css styles.css .holy-grail { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } header { padding: 2rem; grid-column: 1 / 4; } .left-side { grid-column: 1 /...
styles.css ```css styles.css .container { display: grid; gap: 0.5rem; } .item { background: #e1e1e1; height: 100px; } @media (width >= 400px) { .container { grid-template-columns: repeat(2, 1fr); } } @media...
index.js ```js index.js export function instanceOfClass(obj, targetClass) { if (!obj || typeof obj !== 'object') return false if (!targetClass.prototype) throw Error if (Object.getPrototypeOf(obj) === targetClass.prototype) { return true } else...
styles.css ```css styles.css body { font-family: sans-serif; } main { display: flex; flex-direction: column; gap: 12px; padding: 20px; align-items: center; } button { display: flex; gap: 0.5em; align-items: center; appearance:...
index.js ```js index.js export const flatten = function(arr, depth = 1, result = []) { for (let i = 0, length = arr.length; i < length; i++) { const value...
index.js ```js index.js export function debounce(func, delay) { var canInvoke = true; var callbackFn; // your answer here return (args)=>{ callbackFn = func.bind(this, args); if(canInvoke){ canInvoke = false setTimeout(()=>{ callbackFn()...
styles.css ```css styles.css body { font-family: sans-serif; } main { display: flex; flex-direction: column; gap: 12px; padding: 20px; align-items: center; } button { display: flex; align-items: center; appearance: none; background-color:...
index.js ```js index.js export function throttle(cb, delay = 250) { var canInvoke = true; // your answer here return (args)=>{ if(canInvoke){ canInvoke = false setTimeout(()=>{ cb(args) canInvoke = true; },...
index.js ```js index.js export function flatten(arr, depth = 1) { // write your logic here return arr.flat(depth) } ```
components/very-slow-component.jsx ```jsx components/very-slow-component.jsx import React from "react"; const wait = (ms) => { const start = Date.now(); let now = start; while (now - start < ms) now = Date.now();...