Scribd
Upload
820 views

F3 Mock Interview

The document contains mock interview questions for a frontend engineering role. It includes coding questions involving fetching API data and displaying it, promises, async/await, a Caesar cipher, a delay logger, and a basic todo list app. It also includes theory questions about merge sort, async functions, promises, React advantages/limitations, JavaScript constructors, callbacks, HTTP status codes, and features of React. Candidates would be expected to code solutions to the problems and answer the theory questions in an interview.

Uploaded by

vignesh waran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
820 views

F3 Mock Interview

The document contains mock interview questions for a frontend engineering role. It includes coding questions involving fetching API data and displaying it, promises, async/await, a Caesar cipher, a delay logger, and a basic todo list app. It also includes theory questions about merge sort, async functions, promises, React advantages/limitations, JavaScript constructors, callbacks, HTTP status codes, and features of React. Candidates would be expected to code solutions to the problems and answer the theory questions in an interview.

Uploaded by

vignesh waran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

F3 Mock Interview Questions

Interviewer : Lalit SDE-TFT


Coding Questions :
1. Send a GET Fetch Req -(https://dummyjson.com/products) and show the data
you receive in a list view as shown in the gif.Handle using promise chaining or
using async await.UI Reference:
https://storage.googleapis.com/acciojob-open-file-collections/ezgif.com-video-t
o-gif_(7).gifPlayground:
https://githubbox.com/acciojob/Frontend3_mock_product_list

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Product List</title>

</head>
<style>
ul {
list-style: none;
padding: 0;
}

li {
margin: 20px 0;
border: 1px solid #ccc;
padding: 20px;
}

h2 {
margin: 0;
}

p {
margin: 10px 0;
}

span {
font-weight: bold;
}
</style>
<body>
<h1>Product List</h1>
<ul id="product-list"></ul>

<script>

fetch('https://dummyjson.com/products')
.then(response => response.json())
.then(data => {
const productList = document.getElementById('product-list');
data.products.forEach(product => {
const li = document.createElement('li');
li.textContent = `${product.title} -
${product.price}-${product.description}`;
productList.appendChild(li);
});
console.log(data)
})
.catch(error => console.error(error));

</script>
</body>
</html>

2. Create a function which returns a promise and returns a random number after
2500 milliseconds.Playground:
https://githubbox.com/acciojob/frontend3_mock_consoleCreate a function
which returns a promise and returns a random number after 2500
milliseconds.Playground:
https://githubbox.com/acciojob/frontend3_mock_console
<body>
<h2 >Random Number:<span id="random-number"></span></h2>
<script>
//function to get random number
function getRandomNumber(){
return new Promise((resolve)=>{
setTimeout(()=>{
const randomNumber= Math.floor(Math.random()*100);
resolve(randomNumber);
},2500);
})
}
//function to display the number
async function displayRandomNumber(){
const randomNumber= await getRandomNumber();
document.getElementById("random-number").innerHTML=
randomNumber;

displayRandomNumber();

</script>

Theory Questions:
1. Explain Merge sort Algorithm
2. What are async functions in JS
3. Async await
4. Promise and Promise chaining
5. Advantages and limitations of React

Interviewer : chetan intern @TFT


Coding Questions :
1. Write a function called caesarCipher that takes in two arguments: a string to
encode and a number representing the shift. The function should shift each letter
of the string by the shift amount to the right in the alphabet. For example, if the
shift is 3, then "a" becomes "d", "b" becomes "e", "c" becomes "f", and so
on.Playground: https://githubbox.com/acciojob/frontend3_mock_console
<script>

// function caesarCipher
function caesarCipher( str,shift){

var chars = str.split("");//to split the string into letters


for(var i=0;i<chars.length;i++){
var charCode = chars[i].charCodeAt(0);//

if(charCode>=65 && charCode<=90){ //ASCII values for capital


letters
charCode = ((charCode-65+shift)%26)+65;
chars[i]=String.fromCharCode(charCode);
}

if(charCode>=97 && charCode<=122){ //ASCII values for small


letters
charCode = ((charCode-97+shift)%26)+97;
chars[i]=String.fromCharCode(charCode);
}
}
return chars.join("");

}
console.log(caesarCipher("shital",3));
</script>

2. Create a function called **`delayLog`** that takes two arguments: a string to log
and a number representing the delay in milliseconds. The function should log the
string to the console after the specified delay. For example, calling
**`delayLog('Hello, world!', 2000)`** should log "Hello, world!" to the console after
a 2-second delay.Playground:
https://githubbox.com/acciojob/frontend3_mock_console
<script>
function delayLog(str, delay) {
setTimeout(function () {
console.log(str);
}, delay);
}
delayLog("Hello, world!", 2000);
</script>
3. Create a Calculator: Build a calculator using JavaScript that can perform basic
arithmetic operations such as addition, subtraction, multiplication, and division.
Take 2 numbers as inputs and 4 buttons (+,-,*,/) show the result immediately in a
p tag.UI Reference:
https://storage.googleapis.com/acciojob-open-file-collections/ezgif.com-video-t
o-gif_(8).gifPlayground: https://githubbox.com/saksham-accio?tab=repositories
https://codesandbox.io/p/github/saksham-accio/Frontend3_mock_Calculator

<!DOCTYPE html>
<html>
<head>
<title>Basic Calculator</title>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var operator = document.getElementById("operator").value;
var result;

if (operator === "+") {


result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
}

document.getElementById("result").value = result;
}
</script>
</head>
<body>
<h1>Basic Calculator</h1>
<label for="num1">Number 1:</label>
<input type="number" id="num1"><br><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2"><br><br>
<label for="operator">Operator:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<button onclick="calculate()">Calculate</button><br><br>
<label for="result">Result:</label>
<input type="number" id="result" disabled>
</body>
</html>

4. https://codesandbox.io/p/github/saksham-accio/Frontend3_mock_todolist/main
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>To-Do List</title>
<style>
/* some basic styling for the app */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
label {
display: block;
font-size: 18px;
margin-bottom: 5px;
}
input[type="text"],
textarea {
display: block;
width: 100%;
padding: 10px;
font-size: 18px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
button {
display: block;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
ul {
list-style: none;
padding: 0;
margin: 0;
margin-top: 2rem;
}
li {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.task-title {
font-size: 24px;
margin-bottom: 10px;
}
.task-desc {
font-size: 18px;
}
.task-actions {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1>To-Do List</h1>
<form id="add-task-form">
<label for="task-title">Task Title:</label>
<input type="text" id="task-title" name="task-title" required />
<label for="task-desc">Task Description:</label>
<textarea id="task-desc" name="task-desc" rows="4"
required></textarea>
<button type="submit">Add Task</button>
</form>
<ul id="task-list"></ul>
</div>
<script>
const addTaskForm = document.getElementById("add-task-form");
const taskList = document.getElementById("task-list");
let tasks = [];

function addTask(title, desc) {


const task = { title, desc };
tasks.push(task);
updateTaskList();
}
function removeTask(index) {
tasks.splice(index, 1);

updateTaskList();
}

function updateTaskList() {
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const taskElement = document.createElement("li");
taskElement.innerHTML = `
<div class="task-title">${task.title}</div>
<div class="task-desc">${task.desc}</div>
<div class="task-actions">
<button onclick="removeTask(${index})">Remove</button>
</div>
`;
taskList.appendChild(taskElement);
});
}

addTaskForm.addEventListener("submit", (event) => {


event.preventDefault();
const title = event.target.elements["task-title"].value;
const desc = event.target.elements["task-desc"].value;
addTask(title, desc);
event.target.reset();
});
</script>
</body>
</html>

Theory Questions :
1. Constructors in javascript
2. Callback and callback hell
3. Status codes in https and their class - HTTP response status codes
4. What is React and its Important features

Interviewer : Parvesh Jain


Coding Questions :
1. Merge 2 sorted arrays into 1 sorted array using a callback function. Use merge
sort algorithm. and console log the merged array.
2. Create a function which returns a promise and returns a random number after
2500 milliseconds.
Theory Questions :
1. CallBack hell and solutions
2. Event loop in JS , callback Queue , microtask Queue
3. Guess output : Async await
4. React and important features

Interviewer : Rohit Kumar | Upcoming SDE@Samsung


Coding Questions :
1. Merge 2 sorted arrays into 1 sorted array using a callback function. Use merge
sort algorithm. and console log the merged array.
<script>
let arr1 = [1, 3, 5, 7, 9];
let arr2 = [2, 4, 6, 8, 10];
i = 0;
j = 0;
function mergeSortedArray(arr1, arr2, compare) {
result=[];
if (compare(arr1[i], arr2[j]) <=0) {
result.push(arr1[i]);
i++;
} else {
result.push(arr2[j]);
j++;
}

while (i < arr1.length) {


result.push(arr1[i]);
i++;
}
while (j< arr2.length) {
result.push(arr2[j]);
j++;
}
return result;
}

let merged = mergeSortedArray(arr1, arr2, (a, b) => a - b);


console.log(merged);
</script>

2. Create a function which returns a promise and returns a random number after
2500 milliseconds.
<body>
<h2 >Random Number:<span id="random-number"></span></h2>
<script>
//function to get random number
function getRandomNumber(){
return new Promise((resolve)=>{
setTimeout(()=>{
const randomNumber= Math.floor(Math.random()*100);
resolve(randomNumber);
},2500);
})
}
//function to display the number
async function displayRandomNumber(){
const randomNumber= await getRandomNumber();
document.getElementById("random-number").innerHTML=
randomNumber;

displayRandomNumber();

</script>

3. Create an input field and take the name of the user through that input field and
have a submit button. Use cookies to store the name. Whenever the page is
reloaded, write a message saying “Hi There - ${name}” where name is fetched
from the cookie you savedUI
<body>
<form>
<label for="name">Enter Your Name</label>
<input type="text" id="name" />
<button type="submit">submit</button>
</form>
<div id="message"></div>

<script>
function setCookies() {
const name = document.getElementById("name").value;
console.log(name);
document.cookie =
"name = " +
encodeURIComponent(name) +" ; expires = Thu,31 Dec 2023
23:59:59 GMT";
document.getElementById("message").textContent = "Hii
there," + name;
}
document
.querySelector("form")
.addEventListener("submit", function (event) {
event.preventDefault();
setCookies();
});
</script>
</body>

Theory Questions :
1. What is web storage
2. Difference between local storage and session storage
3. Promise chaining with code example
4. Advantages and limitations of react
5. Class Inheritance in JS
6. Predict the output :

<script>
function Person() {}
Person.prototype.sayHi = function () {
console.log("hi!");
};
let rahul = new Person();
Person.prototype.sayHi = function () {
console.log("Greetings!");
};
rahul.sayHi();

</script>
Interviewer : Anshika SDE- Microsoft
Coding Questions :
1. Write a function called caesarCipher that takes in two arguments: a string to
encode and a number representing the shift. The function should shift each letter
of the string by the shift amount to the right in the alphabet. For example, if the
shift is 3, then "a" becomes "d", "b" becomes "e", "c" becomes "f", and so
on.Playground: https://githubbox.com/acciojob/frontend3_mock_console
<script>

// function caesarCipher
function caesarCipher( str,shift){

var chars = str.split("");//to split the string into letters

for(var i=0;i<chars.length;i++){
var charCode = chars[i].charCodeAt(0);//

if(charCode>=65 && charCode<=90){ //ASCII values for capital


letters
charCode = ((charCode-65+shift)%26)+65;
chars[i]=String.fromCharCode(charCode);
}

if(charCode>=97 && charCode<=122){ //ASCII values for small


letters
charCode = ((charCode-97+shift)%26)+97;
chars[i]=String.fromCharCode(charCode);
}
}
return chars.join("");

}
console.log(caesarCipher("shital",3));
</script>

2 . Create a class called **`Animal`** with the following properties and methods:
- **`name`**: a string representing the name of the animal
- **`age`**: a number representing the age of the animal
- **`sound`**: a string representing the sound that the animal makes
- **`makeSound()`**: a method that logs the animal's sound to the console
- Create a subclass called **`Cat`** that inherits from **`Animal`**, and add the
following properties and methods:
- **`breed`**: a string representing the breed -->
- **`meow()`**: a method that logs "meow" to the console
<script>
class Animal {
constructor(name, age, sound) {
this.name = name;
this.age = age;
this.sound = sound;
}

makeSound() {
console.log(this.sound);
}
}

class Cat extends Animal {


constructor(name, age, sound, breed) {
super(name, age, sound);
this.breed = breed;
}

meow() {
console.log("meow");
}
}
const myCat = new Cat("jimmy", 3, "cat", "cat");
console.log(myCat.name);
console.log(myCat.age);
console.log(myCat.sound);
console.log(myCat.breed);

myCat.makeSound();
myCat.meow();

</script>
Theory Questions :
1. callback
2. callback hell with code example & solutions
3. What is heap memory
4. Constructors with code example
5. What is React and Its Features
6. Predict output :

function introduceAccio() {
return 'Hi, I am AccioJob!';
}

const completeTest = () =>


"Please complete your test";

console.log(introduceAccio.prototype);
console.log(completeTest.prototype);
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy