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]} </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, именно так я пытался решить проблему. Я все еще учусь и хотел бы узнать ваш ответ и предложения по улучшению этого кода.