Front End Developer — вопрос для собеседования начального уровня.

Серия вопросов для интервью -1

Это был один из моих вопросов на собеседовании начального уровня:

Напишите код и объясните, как ответ API на запрос getReceipt будет выглядеть на веб-странице. Ниже приведен шаблон квитанции:

Я использовал flex-box для стилей CSS и API DOM, чтобы обновить страницу с товарами и медиа-запросами, чтобы настроить размер шрифта и ширину контейнера.

‹!DOCTYPE html›
‹html lang="en"›
‹head›
‹meta name="viewport" content="width=initial-width,initial-scale=1.0›
‹title›Шаблон квитанции‹/title›
‹link rel="stylesheet" href=""./style.css"›
‹/head›
‹body›< br /> ‹div class="container"›
‹div id="dateDiv"›
‹strong id="dateItem"›‹/strong›
‹/div›

‹дел›
‹ч›
‹/дел›

‹div id="itemsDiv"›
‹ul id="itemList"›
‹/ul›
‹/div›
‹div›
‹hr›
‹/дел›

‹div id="totalDiv"›
‹ul id="totalList"›
‹li›‹span›SubTotal‹/span›‹span›‹/span›‹/li›
‹li›‹span›Налог‹/span›‹span›‹/span›‹/li›
‹li›‹span›Всего‹/span›‹span›‹/span›‹/li›
‹/ул›
‹/дел›

‹дел›
‹ч›
‹/дел›

‹div id="orderDiv"›
‹strong id="orderNoItem"›Номер заказа №‹/strong›
‹/div›

‹/div›
‹script src=»./script.js”›‹/script›
‹/body›
‹/html›

let subTotal = 0;
let total = 0;
const tax = 1.34;
const monthsArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Nov', 'Dec'];
const dayArray = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
//API Response from a fetch API provided by the Interviewer.
let responseObj = {
date: new Date(),
orderNumber: 563754,
recipts: { 'item1': ['Sandwich', 3.05], item2: ['Chocolate Milk', 5.15] }
};
//Fetching Date from the response
let dateString = `${dayArray[responseObj.date.getDay()]} ,  ${monthsArray[responseObj.date.getMonth()]}  ${responseObj.date.getDay()} `;
document.getElementById('dateItem').textContent = dateString;
//Fetching Order Number and Displaying
let orderItem = document.getElementById('orderNoItem');
orderItem.style.textAlign = 'center';
orderItem.textContent += `  ${responseObj.orderNumber}  `;
//Adding Items and Price to a List
let listsContainer = document.getElementById('itemList');
let lists = Object.values(responseObj.recipts);
let listLength = lists.length;
for (let index = 0; index < listLength; index++) {
let listElement = document.createElement('li');
listElement.style.display = 'flex';
listElement.style.justifyContent = 'space-between';
listElement.style.listStyleImage = "url('angles-right-solid.svg')";
listElement.innerHTML = `<span>${lists[index][0]}&nbsp;</span> <span>$${lists[index][1]}</span>`;
let priceItem = listElement.children[1];
priceItem.classList.add('priceSpan');
listsContainer.append(listElement);
subTotal += lists[index][1];
}
//Calculating total and displaying in HTML
total = tax + subTotal;
let spanList = document.querySelectorAll('#totalList li span:nth-child(2)');
spanList[0].textContent = `$${subTotal}`;
spanList[1].textContent = `$${tax}`;
spanList[2].textContent = `$${total}`;
.container {
display: flex;
flex-direction: column;
background-color: beige;
margin: 10% auto;
padding: 2rem;
width: 18%;
height: 60%;
border-radius: 2rem;
}
.container *:not(hr) {
padding: 0.2rem;
}
#totalList {
list-style-type: none;
}
#totalList li {
display: flex;
justify-content: space-between;
}
#orderDiv,#dateDiv {
align-self: center;
padding: 0.7rem 0 0 0;
}
@media only screen and (max-width: 600px) {
.container {
font-size: 4vw;
width: 50%;
}}
@media only screen and (min-width: 601px) and (max-width: 760px) {
.container {
font-size: 3vw;
width: 30%;
}
}

Как новичок в мире Frontend, именно так я пытался решить проблему. Я все еще учусь и хотел бы узнать ваш ответ и предложения по улучшению этого кода.