Job application's technical task

 I got a response back from the place I applied to! Cheers and jump-up-and-downs quickly subsided though, after seeing the technical task they've set up for me. It's quite a pickle!

Essentially, I need to build interactive dictionaries, AKA DOM manipulation on steroids. This means I have to brush off dust from my Javascript skills big-time, if I want to complete this task in 5 days. I am not yet so proficient in React, so I can only hope that doing it "old school" and styling it aesthetically pleasing would show how invested I am to make it work with the best way I know right now.

For the sake of confidentiality, I modified the given data to animals/colors in the blog.

Some source information was already given, so I decided to put the original data in an object array (eventually it would need to be an array of object arrays with other dictionaries too): 

let tabledata = [{
    animal: "hippo",
    color: "grey"
  },

{
    animal: "puma",
    color: "black"
  },
{
    animal: "flamingo",
    color: "pink"
  }

]; 

I started to build this thing from scratch, but after realising how many dynamic elements the task included, I started to research if there are interactive form libraries. One stood out for sure: Tabulator. The documentation certainly feels overwhelming, but for the sake of not building a bicycle, I'll give it a go. After all, using libraries was encouraged in the task!

✓ Goal 1 - Dynamically generate a table from a pre-existing object array using the animal/color key values.

This was relatively straightforward and I was able to achieve this without Tabulator as well.

✓ Goal 2 - User is able to modify the data array by adding/deleting rows.

Adding a row I was able to achieve, but deleting, now that was a pickle. That's why I opted towards Tabulator as well, since deleting rows is implemented in it. The trick is to modify the function to also delete the relevant bit from the original object array. I smell some StackOverflowing! Here's my question and gosh, I love developer's community. Someone literally took time out of their day to help solve this problem with the filter API. One step closer!

✓ Goal 3 - Editing rows.

Finally an easy win. Tabulator's built-in editor luckily also modifies the data array. Phew! This means I kind of have a MVP of a single table ready, where you can add, edit and delete rows. Looks hideous right now of course, but codepen is demo is here.

? Goal 4 - User is able to create new dictionaries and delete existing ones.

For creation, I reckon I'll make a form interface, capture the data via JS and create a new object array from the results. Then, create a new section in DOM including the title and generated table.

? Goal 5 - Validation.

The task also required a way to validate the dictionaries for duplicates and indicate the problematic bits visually. Some sort of validation options exist in Tabulator too, so hopefully I can utilise them.

? Goal 6 - Styling.

Let's hope I am alive by this bit, to make it all look actually nice!