Technical Tests: The good, the bad, and the 200

"There is a curse. They say: May you live in interesting times."

― Terry Pratchett, Interesting Times_

The end of 2023, was also the end of a 19+ years with a single company, but it was also the start of an interesting journey. I found myself at the start of something I had not done in nearly 20 years - interviews and technical tests/assessments.

With that in mind, and doing the usual "update CV, contact my contacts, read through plenty of job listings", I applied to the roles that I thought could be a good fit, that I thought on paper, based on the requirements, sounded interesting.

Moderate success followed, where I got my foot in the door, got through the initial HR screening and then to my own personal bane - the technical assessment. Please, dear reader, keep in mind, that I used to be on the other side of the table, I was the one issuing technical tests when hiring for previous teams, so this was a new process for me - since I never needed to attempt or even complete one before.

So, you might be wondering what is the point of this article, well its about the technical tests, more specifically, a sample of some that I had attempted.

In the interest of fairness, and discression, I wont mention company names, but I will merely present the tests as were given to me, and no, I wont be providing solutions - as a challenge, you should try at least one of them yourself. And just to be clear, the roles I was going after, were pure frontend, no backend, no server side scripting, no AWS, nothing like that, in a nutshell, HTML, CSS, Javascript, and optional other things

One thing I will call out, if you are attempting any of the tests below, or are fortunate to find yourself in a position of doing a test for an exciting role - the requirements below are the MINIMUM, if you have the time and can go beyond what is asked, do so, it will make you stand out (e.g accessibility, mobile responsiveness)

Each technical test was "live", e.g I was coding in front of an audience, via a screen share, either in a local dev environment or on a remote sandbox

Without further preamble, lets dive right in

Technical Test #1 (3 hours)

Using the provided json, product a HTML page with the following requirements

[
    {
        "firstName": "Daniel",
        "lastName": "Brown",
        "age": 65,
        "job": "Teacher",
        "location": "Tokyo",
        "email": "daniel.brown173@yahoo.com"
    },
    {
        "firstName": "John",
        "lastName": "Taylor",
        "age": 58,
        "job": "Chef",
        "location": "London",
        "email": "john.taylor973@outlook.com"
    },
    {
        "firstName": "John",
        "lastName": "Anderson",
        "age": 46,
        "job": "Doctor",
        "location": "Paris",
        "email": "john.anderson252@example.com"
    }
]

User Interface Instructions:

1. Table Display:

   • Display a table on the screen with 3 cells per row:
     • The first cell should show the person's First and Last name.
     • The second cell should display their email address.
     • The third cell in each row should contain buttons for "Move Up", "Move Down", and "Delete" actions for each person.

2. Table Interaction:

   • For each row in the table:
     • If it's the first row, the "Move Up" button should be disabled.
     • If it's the last row, the "Move Down" button should be disabled.
     • When the "Delete" button is clicked, the corresponding row should be removed from the table.

3. Add New Person Form:

   • Below the table, provide a form for adding a new person:
     • Include 3 input fields for first name, last name, and email address.
     • Include a submit button for adding the person.

4. Input Validation:

   • Perform validation on the input fields:
     • Validate the first and last name using the regular expression /^\w+\s\w+$/.
     • Validate the email address using the regular expression /^\w+@\w+\.\w+$/.
     • Display appropriate error messages if validation fails for any field.

Implementation Details:

• Implement UI logic to handle the table, including row deletion and button states.
• Utilize JavaScript to validate input fields upon submission of the form.
• Display error messages near the respective input fields if validation fails.
• Implement logic to add a new row to the table upon successful validation of the form.

I did finish the technical test using Vanilla JS

Technical Test #2 (1 hour)

Interface Requirements:

Search Field:

• Display a search field on the screen.
• As the user types into the search input, dynamically present a scrollable list of countries underneath the search field, filtered based on the user's input.

Country Information:

• When a user clicks on any item in the scrollable list of countries:
  • Display a message indicating which country the user clicked on.
  • The message should include the name of the clicked country, such as "You clicked on {name_of_country}".

Implementation Details:

• Utilize the API endpoint https://restcountries.com/v3.1/name/{name} to fetch country data based on user input.
• Implement logic to update the list of countries dynamically as the user types into the search field.
• Upon clicking a country in the list, display a message showing the name of the clicked country.
• Design the interface to be user-friendly, with clear instructions and visual cues for interaction.
• Optionally, you can enhance the interface with additional features such as error handling, loading indicators, or styling for improved aesthetics.