F3 Mock Interview

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
}
}
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;
}
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 {
padding: 10px;
}
.task-title {
font-size: 24px;
}
.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.
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>
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
}
if(charCode>=97 && charCode<=122){ //ASCII values for small

letters
}
}
return chars.join("");
}
console.log(caesarCipher("shital",3));
</script>
2 . Create a class called **Ànimal`** with the following properties and methods:
- **`name`**: a string representing the name of the animal
- **àge`**: 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 **Ànimal`**, 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);
}

F3 Mock Interview

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

F3 Mock Interview

Uploaded by

Copyright:

Available Formats

F3 Mock Interview Questions

Interviewer : Lalit SDE-TFT

Interviewer : chetan intern @TFT

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

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

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

if (operator === "+") {

function addTask(title, desc) {

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

Interviewer : Parvesh Jain

Interviewer : Rohit Kumar | Upcoming SDE@Samsung

while (i < arr1.length) {

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

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

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

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

class Cat extends Animal {

const completeTest = () =>

You might also like