Atlassian Frontend Developer Interview Experience

This is about the first round for a Frontend Developer role conducted on Karat. All questions asked were related to HTML, CSS, and JavaScript.

Security Issue in JavaScript Code: Can you find if there is any security issue in the following JavaScript code? javascript const data = await fetch("api"); const div = document.getElementById("todo"); div.innerHTML = data;

In this scenario, I needed to identify the security vulnerability and propose a solution.
UI Implementation from Image: An image URL was provided, and the task was to create an identical UI. There were six specific requirements: a. A title heading that needed to be centered and bold. b. An image positioned on the left, occupying 30% of the viewport width. c. A paragraph on the right side, occupying the remaining viewport width, with the image covering 30%. d. Metadata text, "Published - 2023", positioned at the far right.
Fetching and Displaying Todos: Given an API that returns a list of todos, the objective was to fetch the list, create a separate block for each user, and display their todos within the appropriate block. The endpoint URL to get the todos was: https://dummyjson.com/todos?limit=10&skip=80. The API returns the following structure with a total of 10 todos: json { "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 and a list of the user's todos.

javascript const data = await fetch("api"); const div = document.getElementById("todo"); div.innerHTML = data;

What is the issue, and how can it be resolved?

Given an image URL, create a UI that matches it precisely. There are six requirements:

A title heading that needs to be centered and bold.
An image that should be on the left, covering 30% of the viewport width.
On the right, a paragraph that should cover the remaining viewport width, complementary to the 30% covered by the image.
Metadata: "Published - 2023" should be at the far right.

Given an API returning a list of todos, fetch the list and create a separate block for each user, displaying their todos within that block. Use the following endpoint URL to get the todos: https://dummyjson.com/todos?limit=10&skip=80. The API will return a structure similar to this, with a total of 10 todos:

json { "todos": [ { "id": 1, "todo": "Do something nice for someone I care about", "completed": true, "userId": 26 } ] }

Each block should have the userId as its title and then list the corresponding todos.

Atlassian