Summer Sale! Additional 20% off annual and lifetime plans with the code SUMMERSALE23. Grab your discount today!

Contributed by ex-interviewers at

The ultimate Front End Interview preparation platform.

We help you ace every front end interview by mastering your fundamentals. Built by ex-FAANG Senior Front End Engineers.

Try our questions here:

greatfrontend.com

Todo List

Yangshun TayEx-Meta Staff Engineer

HTMLJS

You're given some existing HTML for a Todo List app. Add the following functionality to the app:

Add new tasks on clicking the "Submit" button.
- The <input> field should be cleared upon successful addition.
Remove tasks from the Todo List upon clicking the "Delete" button.

Notes

The focus of this question is on functionality, not the styling. There's no need to write any custom CSS.
You may modify the markup (e.g. adding ids, data attributes, replacing some tags, etc), but the result should remain the same visually.
You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).

Companies

Premium FeaturePurchase premium to see companies which ask this question.

View plans

All Questions

import './styles.css';

export default function App() {
  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input type="text" placeholder="Add your task" />
        <div>
          <button>Submit</button>
        </div>
      </div>
      <ul>
        <li>
          <span>Walk the dog</span>
          <button>Delete</button>
        </li>
        <li>
          <span>Water the plants</span>
          <button>Delete</button>
        </li>
        <li>
          <span>Wash the dishes</span>
          <button>Delete</button>
        </li>
      </ul>
    </div>
  );
}

Click here to try out the actual workspace instead of this embed.

Because front end interviews are about fundamentals.

Front end interviews come in so many formats. You could be asked to write JavaScript functions, build a UI, design a system, or even solve LeetCode-style algorithm questions.

Building your fundamentals is the only way to rock the interview every single time.

What if those fundamentals were already abstracted for you?

At GreatFrontEnd, we are focused on abstracting front end interviews into repeatable patterns and fundamental concepts. All you need to do is go through our questions and study plans!

All the essentials for front end interviews and more.

You won't find the same depth and quality elsewhere.

	GreatFrontEnd	Other Platforms
Large and curated question bank	200+ commonly asked questions across every interview format - System design, UI, JavaScript, Quizzes View question list →	Rarely cover system design or coding questions. Often community-sourced.
Quality solutions to learn from	Every question has an in-depth solution with inline explanations. Solutions incorporate scalability, accessibility and performance considerations.	Solutions are hard to find or incomplete, usually superficial.
Front end system design	Only platform with in-depth solutions to the most commonly asked system design questions. Exclusive system design guides, including solution framework, cheatsheet and evaluation axes. View our free system design guides→	System design resources are virtually non-existent. Not many have experience to write quality guides.
Study plans and Progress tracking	Proven study plans with the most important questions to practice for various preparation timelines. View study plans →	Not available.
Practice questions by companies	Practice interview questions asked by Google, Facebook, Amazon, Apple, Airbnb, LinkedIn and more.	Not available.
Real interview simulation	In-browser coding workspace with test cases - no need for any setup!	Not available.

Not convinced yet? Try the product (it's free) →

Practice everything here.

With over 200 practice questions curated by senior front end engineers, you get all-rounded coverage for your preparation — HTML, CSS, JavaScript, algorithms, DOM APIs, accessibility, performance, front end fundamentals, and more.

Everything you need

JavaScript Questions

Front end coding interview questions come in many forms — practice writing JavaScript functions, data structures, and algorithms.

View All Questions

DebounceFree
Implement a function to limit how many times a function can be executed by delaying the execution of the function until after a specified time after its last execution attempt
Difficulty
Medium
Languages
JSTS
FlattenFree
Implement a function that recursively flattens an array into a single level deep
Difficulty
Medium
Languages
JSTS
Promise.allFree
Implement the Promise.all() function that resolves to an array of results if all the input elements are resolved or rejects otherwise
Difficulty
Medium
Languages
JSTS
Array.prototype.filterPremium
Implement the Array.prototype.filter() method
Difficulty
Easy
Languages
JSTS
getElementsByTagNamePremium
Implement a function to get all DOM elements that match a tag
Difficulty
Medium
Languages
HTMLJSTS
JSON.stringifyPremium
Implement a function that converts a JavaScript value into a JSON string
Difficulty
Hard
Languages
JSTS

Pick your framework

User Interface Questions

Practice build all sorts of user interfaces: components, apps, games, etc, in the framework of your choice.

View All Questions

Contact FormFree
Build a contact form which submits user feedback and contact details to a back end API
Difficulty
Easy
Available Frameworks
Holy GrailFree
Build the famous holy grail layout consisting of a header, 3 columns, and a footer
Difficulty
Easy
Available Frameworks
Todo ListFree
Build a Todo list that lets users add new tasks and delete existing tasks
Difficulty
Medium
Available Frameworks
Digital ClockFree
Build a 7-segment digital clock that shows the current time
Difficulty
Medium
Available Frameworks
Like ButtonPremium
Build a Like button that changes appearance based on the states
Difficulty
Medium
Available Frameworks
TabsFree
Build a tabs component that displays a list of tab elements and one associated panel of content at a time
Difficulty
Medium
Available Frameworks

You can't find it elsewhere

System Design Questions

Front end system design resources are virtually non-existent. This is the only place you'll find in-depth solutions for front end system design questions along with our proven answering framework.

View All Questions

News Feed (e.g. Facebook)Free
Design a news feed user interface similar to Facebook and Twitter
Difficulty
Medium
Languages
AutocompleteFree
Design an autocomplete component seen on Google and Facebook search
Difficulty
Medium
Languages
E-commerce Marketplace (e.g. Amazon)Premium
Design an e-commerce marketplace website like Amazon and eBay
Difficulty
Hard
Languages
Image CarouselPremium
Design a horizontally-scrolling image carousel component
Difficulty
Medium
Languages
Photo Sharing (e.g. Instagram)Premium
Design a photo sharing application like Instagram
Difficulty
Medium
Languages
Poll WidgetPremium
Design a poll widget that can be embedded on websites
Difficulty
Easy
Languages

Know your fundamentals

Quiz Questions
Free

Knowledge is power. Over 100 short questions with answers to build and solidify your front end fundamentals.

View All Questions

Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`?
Do you know any exceptions?
Importance
High
Quiz Topics
HTMLPERFORMANCE
Describe the difference between a cookie, `sessionStorage` and `localStorage`.
Importance
High
Quiz Topics
HTMLJAVASCRIPT
Explain how `this` works in JavaScript
Importance
High
Quiz Topics
JAVASCRIPT
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
Importance
High
Quiz Topics
CSS
What does `* { box-sizing: border-box; }` do?
What are its advantages?
Importance
High
Quiz Topics
CSS
What kind of things must you be wary of when designing or developing for multilingual sites?
Importance
Mid
Quiz Topics
HTMLINTERNATIONALIZATION

Learn from the best solutions.

Studying well-written solutions is one the most effective methods to ace the interview. Our platform guarantees the quality of our solutions because they are all written by us, ex-FAANG Senior Front End Engineers.

You can always rely on our solutions to include multiple approaches, reinforce fundamentals, patterns & techniques, and include a large number of practical considerations. If not, leave us a message!

Check out sample solutions:

import './styles.css';

(() => {
  // Decouple the tasks from the rendering
  // and client-side render the tasks during initial load.
  const TASKS = [
    'Walk the dog',
    'Water the plants',
    'Wash the dishes',
  ];

  // Retain a reference to the elements which persist
  // throughout usage of the app.
  const $inputEl = document.querySelector('input');
  const $form = document.querySelector('form');
  const $todoListEl = document.querySelector('ul');
  const $taskTemplate = document.querySelector(
    '#task-template',
  );

  function addTask(label) {
    // Use the template to make it easy to add new tasks.
    const $newTaskElement =
      $taskTemplate.content.cloneNode(true);
    $newTaskElement.querySelector('span').textContent =
      label;
    $todoListEl.appendChild($newTaskElement);
  }

  function deleteTask($itemEl) {
    // Remove the task from the list.
    $itemEl.parentNode.removeChild($itemEl);
  }

  $form.addEventListener('submit', (event) => {
    event.preventDefault();
    const value = $inputEl.value;
    // Don't do anything for empty value. Good for UX.
    if (value.trim() === '') {
      return;
    }

    // Trim before adding to the list.
    addTask(value.trim());

    // Reset the input so that new tasks can be added.
    $inputEl.value = '';
  });

  // Add a listener to the list instead of individual tasks.
  // This is called event delegation and the benefit is that
  // the Delete button of new tasks can also respond to clicks.
  $todoListEl.addEventListener('click', (event) => {
    // Check that the button is being clicked and not something
    // else (e.g. the task label).
    if (event.target.tagName !== 'BUTTON') {
      return;
    }

    // Add confirmation before destructive actions.
    if (
      window.confirm(
        'Are you sure you want to delete the task?',
      )
    ) {
      deleteTask(event.target.parentNode);
      $inputEl.focus();
    }
  });

  function initialRender() {
    // Render the initial tasks using the template.
    TASKS.forEach(function (label) {
      addTask(label);
    });
  }

  initialRender();
})();

Want to see more solutions? Explore our product →

We have helped thousands of Software Engineers

Larry Almeida
Senior Software Engineer — Front End, Zalando, Berlin, Germany

Nafis Hasnain
Software Developer Intern, Vidyard, Ontario, Canada

As someone who has given as well as taken a lot of interviews, I can say GreatFrontEnd is a f'king goldmine. I would highly recommend GreatFrontEnd to anyone who is preparing for front end interviews or anyone who just wants to learn some new concepts. The content is well-organized, has some great practical coding challenges, and the system design part is just amazing!!!

Front End Engineer, Delhi, India

Jacky Liang
Software Engineer, New York, NY, USA

GreatFrontEnd has been a great help to me for prepping front end focussed interviews. Lot of focus on JavaScript utility and React/Vanilla implementations. The system design questions asked in interviews are slightly different in front end interviews and GreatFrontEnd really shines here. I will continue to use this amazing platform!

Anand Dharne

Software Engineer — Front End, Perch, USA

You are doing great things for the Front End community. Especially for those who are Junior engineers like me, advanced solutions covering various aspects of front end development help a lot. Thank you to the team.

Software Engineer, Vietnam

Ryan Van Valkenburg
Senior Software Engineer, Seattle, WA, USA

Prashanth Reddy
Senior Software Engineer — Front End, UserTesting, Toronto, Canada

If you are looking for front end interviews, GreatFrontEnd is for you. It has a wide variety of coding questions ranging from HTML, CSS, JavaScript, to React. It also covers formats like functions, algorithms, user interface, quiz etc. If you want to get into top tech companies for front end roles, GreatFrontEnd is best for you.

Gouse Basha

Software Engineer, Chennai, India

Amazing to see such a comprehensive resource for front end dev interviews. Coming from a more traditional backend role I found this website to be a treasure trove of knowledge and it really takes you from a beginner to advanced level.

Front End Engineer, India

We're still growing our question base.

Our focus is currently on expanding our question base. New coding and system design questions are added to the platform on a weekly basis.

We are also looking to include more framework-specific questions like React, Vue, Angular, etc.

Please leave us an email if you have any other needs or wants. We would love to discuss them!

FAQs.

Can't find the answer you are looking for? Reach out to us!

Have questions, feedback or anything to say?

Email us at contact@greatfrontend.com or use one of the options below. We usually get back within a day or two.

Email GitHub Twitter Reddit

The ultimate Front End Interview preparation platform.

Notes

Because front end interviews are about fundamentals.

What if those fundamentals were already abstracted for you?

All the essentials for front end interviews and more.