Cracking Front-End Interview - Part 2

I applied for a Full-Stack position at one of the biggest startups in Southeast Asia a long time ago. I got an extra interview for Front-End. Here is how I solved it.

Resume

The resume does matter. In my previous article, I got the interview because I put my portfolio on the resume. At this interview, I put my professional experience. It does matter a lot. I think it is also good to put side projects on the resume if you have them. I felt a little lucky that they responded to my resume because they are a large and international company.

Algorithms and Data Structures Interview

The first interview I got was Algorithms and Data Structures. I hardly remember that maybe I got 3-5 questions in HackerRank. Some companies use Codility for this kind of interview. I solved those questions using Go.

You have to solve them in a given time. It is about 1-2 hours. I forgot the exact given time. I suggest getting practice if you are not familiar with this kind of interview. I practice on LeetCode.

Front-End Interview

Finally, I got the Front-End interview after solved the first interview, Algorithms and Data Structures. I also got the final interview after the Front-End interview. The final one is about the system, personal, and live coding too.

The Front-End interview is about live coding interview. The recruiter gave me the question after a little chit-chat. I forgot the exact question but the point is to implement CRUD (Create Read Update Delete) operations to manipulate DOM (Document Object Model) or HTML using JavaScript. You can use any framework or tool such as jQuery, React, Angular, etc. But I chose VanillaJS or pure JavaScript. I need to solve the question within 1 hour. I was free to ask any question to help me out with the recruiter. But it is better not to ask because the question or instruction was clear enough.

Now, let's simulate the question. I hope it can help you to understand the VanillaJS and to pass this kind of interview.

Get Started

We are going to create a web app that manipulates articles. Let's create three files:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
    <title>VanillaJS</title>
    <meta charset="UTF-8">

    <script src="./app.js"></script>
</head>
<body>
    <h1>VanillaJS</h1>
    <ul></ul>
    <h2>Article</h2>
    <form>
        <p><input type="number" name="id" placeholder="ID"></p>
        <p><input type="text" name="title" placeholder="Title"></p>
        <p><textarea name="description" placeholder="Description"></textarea></p>
        <p><button type="button">Submit</button></p>
    </form>
</body>
</html>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

[
  {
    "id": 1,
    "title": "Article 1",
    "description": "The description of the Article 1."
  },
  {
    "id": 2,
    "title": "Article 2",
    "description": "The description of the Article 2."
  },
  {
    "id": 3,
    "title": "Article 3",
    "description": "The description of the Article 3."
  }
]

Read

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var list

function entry(id, title, description) {
    let node = document.createElement('li');

    node.setAttribute('id', 'article-' + id);
    node.innerHTML = '#<span id="id-' + id + '">' + id + '</span>: <strong id="title-' + id + '">' + title + '</strong> - <span id="description-' + id + '">' + description + '</span> (<a href="#" onclick="update(' + id + ')">Update</a> | <a href="#" onclick="remove(\'article-' + id + '\')">Delete</a>)</li>';

    return node;
}

function read() {
    const xhttp = new XMLHttpRequest();
    list = document.getElementById('list');

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let response = JSON.parse(this.responseText);

            if (
                response !== undefined &&
                response.length
            ) {
                response.forEach(function(item) {
                    list.appendChild(entry(item.id, item.title, item.description));
                });
            }
        }
    };
    xhttp.open('GET', './data.json', true);
    xhttp.send();
}

Add an attribute onload="read()" to the body and id="list" to the ul. We will load the data and put them in the body or list. The entry is a function to render the HTML or list item.

Create

Let's put id to the input and textarea and add attribute onclick="create()" to the button. We remove the existing list then add the list to prevent duplication.

1
2
3
4
5
6
7
8
9

function create() {
    let id = document.getElementById('id');
    let title = document.getElementById('title');
    let description = document.getElementById('description');

    remove('article-' + id.value);

    list.appendChild(entry(id.value, title.value, description.value));
}

Update

The update is all about filling form fields with existing values. Because in create, we remove the old list and add the new version of the list.

1
2
3
4
5

function update(e) {
    document.getElementById('id').value = document.getElementById('id-' + e).textContent;
    document.getElementById('title').value = document.getElementById('title-' + e).textContent;
    document.getElementById('description').value = document.getElementById('description-' + e).textContent;
}

Delete

We put an unique id in the list item and use it to remove the element.

1
2
3
4
5

function remove(e) {
    let item = document.getElementById(e);

    if (item !== null) item.remove();
}

Closing

Choosing VanillaJS for this kind of interview is awesome I think. It is impressive. We work under pressure or at a given time using pure JavaScript which is not many Front-End developers are familiar.

As you see, even VanillaJS, our code is still simple enough and easy to understand. It is not difficult as many people think. I got an impressive review from the recruiter after solved the question this way. You can find the full code at https://github.com/aristorinjuang/vanillajs.

Related Articles