If you read my previous article, you would know that I have given round 1 of the interviews for Invictus Data company. I heard back from the HR and I was selected for the round 2, which happened today.

In this article, I will share the questions asked to me, and my experience. Let’s go!

Interview Duration : Around 35 minutes

NOTE : Please note that while the terminology and phrasing used in this article may not exactly align with the interviewer's original wording, I will try my best to maintain the context and intent/meaning of the question.

Question 1 : Introduce yourself

I introduced myself, covering my skills, experience, and goals.

Question 2 : How do you rate yourself out of 5 in HTML & CSS?

I replied saying I would rate myself 3.5 out of 5.

Question 3 : What are Semantic Elements in HTML?

I answered it with the definition and examples of semantic elements.

Question 4 : What are position: absolute and position: relative?

I explained about both, and also explained about top, left, bottom, right properties.

Question 5 : What is the difference between block and inline-block elements?

I replied saying these are display formats and gave examples of tags for each display format.

Question 6 : What is the use of the alt attribute in the image tag?

I answered how it helps in improving the accessibility of the image, when the image does not render for some reason.

Question 7 : What is the use of meta tag?

I explained how it helps in improving SEO of the website and for specifying initial width, etc.

Question 8 : How do you center an element horizontally and vertically? What are the different ways?

I replied explaining multiple ways to achieve it, like using flexbox, position along with transform and translate, and grid.

Question 9 : What are pseudo elements and pseudo classes?

I answered mentioning about :active, :focus, :hover and ::before and ::after

Question 10 : What is the difference between ID and Class?

I replied how both differ in terms of accessing them, how they should be defined, and how to access them for styling.

JavaScript Questions

Question 11 : What is the difference between null and undefined?

I answered how both differ in terms of defining the value, what is the use case for each.

Question 12 : What is the difference between let, const, and var?

I explained the use cases, the difference in terms of declaration, definition, and scope.e

Question 13 : What is the difference between == and ===?

I replied saying the first one doesn’t compare the datatype of both values, but whereas the later does.

Question 14 : What are promises in JavaScript?

I answered about the usage of promises, how a promise is used for asynchronous operations, a fetch example, the three different states in which a promise can exist.

Coding Challenges

Question 15 : What is destructuring? Give me an example.

I wrote the below code to explain array destructuring and object destructuring.

let person = {
  name: "John",
  age: 25,
};

let a = [1, 2];

const [b, c] = a;

console.log(b);
console.log(c);

const { name, age } = person;
console.log(name);
console.log(age);

Question 16 : Implement a dynamic dropdown that updates the city dropdown based on the selection in the country dropdown in React?

I have implemented it by writing the below code.

NOTE : When I was changing the country from the dropdown, the cities dropdown values were not being updated. I thought it would get updated since the component will re-render on updating countryName, and hence cities will be fetched with new countryName. So, I haven’t written useEffect at that point, since I didn’t feel the need for it.

But, while I was debugging and thinking about the problem, the Interviewer helped by pointing out the same, saying the cities dropdown values are not being set, after the country is updated. That’s when I wrote the useEffect code block and then it worked.

// File - App.js

import "./styles.css";

{
  /* 
  Implement a dynamic dropdown that updates the city 
  dropdown based on the selection in the country dropdown
  in React?
  */
}

import { countries } from "./data";
import { countryCities } from "./data";
import { useEffect, useState } from "react";

export default function App() {
  const [countryName, setCountryName] = useState(countries[0]);
  const [cities, setCities] = useState(countryCities[countryName]);

  useEffect(() => {
    setCities(countryCities[countryName]);
  }, [countryName]);

  return (
    <div className="App">
      <select
        name="country"
        id="country"
        onChange={(event) => setCountryName(event.target.value)}
      >
        {countries.map((country, index) => (
          <option value={country} key={index}>
            {country}
          </option>
        ))}
      </select>
      <br />
      <br />

      <select name="cities" id="cities">
        {cities.map((city, index) => (
          <option value={city}>{city}</option>
        ))}
      </select>
    </div>
  );
}

Question 17 : Do you have any questions?

I asked 3 questions, which I have based on the conversation we had.

Conclusion

This round has been more of testing all the skills required for the role, from beginner to intermediate level. Also, Interviewers do help sometimes by giving hints or suggesting next steps on what could be done when we hit a blocker while solving something. Even if the interviewer doesn’t initiate it, you can ask for suggestions or advice.

Just prepare your best and explain whatever you know about and around the topic, when you are asked a question. Like this article, share with your friends and follow me for more such content! Best of luck!

Interview Round 2 - Frontend Developer Role @ Invictus Data AI

JavaScript Questions

Coding Challenges

Conclusion