Atlassian Frontend Software Engineer interview questions

After the initial phone screen I had to setup an interview through Karat, which I had never used before. The interview is all vanilla JS. The first part is questions like "what is the expected output of this code? How would you fix it?" and you have to solve it by looking at it (you can't run it), questions like "what is the difference between bandwidth and latency", then a coding challenge in vanilla HTML and CSS (no JS) to style something (you'll get an image to use as reference), then a challenge to build a component in vanilla JS (so know how to do DOM manipulation). The Karat IDE is extremely frustrating because it does not format or autocomplete, nor will it yell at you if you forgot to close a tag, and you have to click 'run' (no hot refresh). Unlike a regular coding challenge, you can't ask the interviewer any questions and they won't help you at all, even if you get stuck on something dumb (like not closing a paragraph tag and wasting time trying to figure out what the issue was because the IDE didn't tell me anything, nor did the interviewer). The DOM manipulation part was also annoying. Is Atlassian really requiring devs to `document.appendChild()` in their code? It was a pretty impersonal experience and I think I'll avoid any future interviews with companies that use Karat.

It is about first round for Frontend Developer role that conducted on Karat. All questions they asked related to only HTML, CSS, and Javascript. 1. Can you find is there any security issue in javascript code? const data = await fetch("api") const div = document.getElementById("todo") div.innerHTML = data So in that I need to find what is that how can resolve it. 2. they gave an image url and I need to make same ui as it is. there were 6 points there I need to fulfil those. a. one title heading that need to align in center with bold b. there were one image that should be on left side with covering 30% width of viewport. c. on right side one paragraph there that should cover remaining view port as 30% covering by image. d. one metadata - "Published - 2023" that was at right end. 3. Given an API returning a list of todos, we want to fetch the list, create a separate block for each user, and display their todos in the appropriate block. Use this endpoint URL to get the todos: https://dummyjson.com/todos?limit=10&skip=80. It will return the following structure with total of 10 todos: { "todos": [ { "id": 1, "todo": "Do something nice for someone I care about", "completed": true, "userId": 26 }, ], } Each block should contain the userId as the title of the block and the list of todos.