Front-End Interview Question to Create TODO List App.

In Front-End Interview, you may get asked to create Drag and Drop Div. HTML5 has introduced very widely used Drag and Drop feature. Many app requires drag and drop feature to use by client side users which they can easily interact with their mouse. One example is ticketing system where you move your “Done” tasks into “Don” column from TODO list column.

Read More about Front-End Interview Prep Guide

And That is very widely asked interview question to create TODO list in native web language.

Your ASK is to create todo list app using HTML5 Drag and Drop API.

Lets understand basic of drag and drop feature. HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button.

HTML drag-and-drop uses the events to interact with mouse clicks and to fire appropriate callbacks. Here is the quick review of drag and drop events.

Event	On Event Handler	Fires when…
drag	ondrag	…a dragged item (element or text selection) is dragged.

drop

ondrop

…an item is dropped on a valid drop target.

Now lets start building “TODO” App. First we need to create HTML/CSS Layout so we can visually see the toto list app.

We can create two columns using css “flex” layout where we can create one div in first column which can be dragged to next column.

Our HTML code will look like this:

<div class="container">
  <div class="colm1">
    <h4> Todo List</h4>
    <div id="dragDiv" draggable="true">
      Drag Me!
    </div>
  </div>
  <div class="colm2">
    <h4> Done </h4>
    <div id="dropDiv">
      Drop Here!
    </div>
  </div>
</div>

So Adding CSS is the next step to show “TODO” App layout.

.container {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.colm1 {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 5px;
  border-right: 1px solid gray;
}

h4 {
  margin: 0px;
  padding: 0px;
  margin-bottom: 15px;
}

#dragDiv {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid black;
}

.colm2 {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 5px;
}
 
#dropDiv {
  background-color: #cccB;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px dotted black;
}

We have added HTML/CSS layout. Now we need to add callback functions with each event fires.

Now First we will accomplish drag event. Here we are making callback to event “ondragstart” And we are just setting data transfer with drag div using target id.

const dragMe = (event) => {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
}

Next step is to add that event to HTML drag element so it will fire cal back function to it.

<div class="container">
  <div class="colm1">
    <h4> Todo List</h4>
    <div id="dragDiv" draggable="true" ondragstart="dragMe(event);">
      Drag Me!
    </div>
  </div>
  <div class="colm2">
    <h4> Done </h4>
    <div id="dropDiv" ondragover="dragEnd(event);" ondrop="dropHere(event);">
    Drop Here!
    </div>
  </div>
</div>

So we have added call back for drag start event. Now we can add drop event.

But we have to add prevetDefault to allow drop event to work

const dragEnd = (event) => {
  event.preventDefault();
}

Because we have added preventDefault we can start writing final drop event to make todo app functional.

on Drop event we need to getdata which we have already set. Using that “ID” we can append it to current Target!

const dropHere = (event) => {
  
  const id = event
    .dataTransfer
    .getData('text');
  
  const draggableElement = document.getElementById(id);
  
  const dropzone = event.target;
  
  dropzone.appendChild(draggableElement);
  
  event
    .dataTransfer
    .clearData();
}

Now we have working “TODO” App Here:

For your Front-end Interview, review this article as cheat sheet which can help you to crack the interview.