Приложение API — отличный способ продемонстрировать свой опыт в проектировании, создании и внедрении практического программного решения с использованием API. Вы можете не только продемонстрировать свое мастерство кодирования, но и продемонстрировать свою способность разрабатывать интуитивно понятное и удобное приложение.
В этой статье я предоставлю пошаговое руководство, которое поможет вам начать работу.
Я собираюсь использовать бесплатные публичные API https://nationalize.io/ и https://agify.io/, которые позволяют предсказывать национальность и возраст по имени.
- Начнем с HTML-структуры нашей страницы:
<body> <div id="container"> <div id="header"> <input type="text" id="input" spellcheck="false" placeholder="Enter your name..."> </div> <div id="nameEnter"> <p id="name">Maria</p> <p id="par">You are most likely</p> </div> <div id="age"> <p id="years">45</p> <p id="par2">years old</p> </div> <div id="age"> <p id="par">You are most likely form</p> <p id="country">Australia</p> </div> </div> <script src="index.js"></script> </body>
2. Затем добавим немного стиля с помощью CSS:
body {background-image: url('https://images.unsplash.com/photo-1531685250784-7569952593d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'); background-size: cover; background-repeat: no-repeat;} #container{display: flex; flex-direction: column; flex-wrap: wrap; min-height: 100vh;} #header { display: flex; justify-content:center; margin-top: 30px; width: 100%; } #input{ background-color: #F8C4B4; border-radius: 20px; border: 2px solid #686c63; padding: 15px; font-size: 20px; } #input:focus { background-color: #fff; } #nameEnter { display: flex; flex-direction: column; align-items: center; } #name { color: #686c63; font-size: 35px; font-family: 'Roboto', sans-serif; } #par { color: #686c63; font-size: 24px; font-family: 'Roboto', sans-serif; } #age { display: flex; flex-direction: column; align-items: center; } #years{ color: #fff; font-size: 70px; font-weight: bold; text-shadow: 5px 10px rgb(81, 87, 81); font-family: 'Roboto', sans-serif; margin:0; } #par2{ color: #686c63; font-size: 30px; font-weight: bold; font-family: 'Roboto', sans-serif; } #country { color: #fff; font-size: 70px; font-weight: bold; text-shadow: 5px 10px rgb(81, 87, 81); font-family: 'Roboto', sans-serif; margin:0; }
3. А теперь давайте поработаем с JavaScript. Сначала нам нужно получить доступ к полю ввода и добавить прослушиватель событий в поле ввода. Когда происходит событие нажатия клавиши (т. е. пользователь нажимает клавишу), будет вызвана функция enter().
const input = document.querySelector(`#input`); input.addEventListener (`keypress`, enter);
4. Функция enter() вызывается, когда пользователь нажимает клавишу Enter. Он проверяет, была ли нажата клавиша Enter (keyCode 13), и если да, то вызывает функцию getInfo() со значением поля ввода в качестве аргумента.
function enter(e){ if(e.keyCode===13){ getInfo(input.value) } }
5. Функция getInfo() запрашивает два разных API (https://nationalize.io/ и https://agify.io/) с входными данными пользователя. Он ожидает ответа от каждого API с помощью ключевого слова await, а затем преобразует ответ в формат JSON с помощью метода json(). Затем он регистрирует ответ от второго API на консоли и вызывает функции displayResult() и displayResultTwo() с данными ответа API в качестве аргументов.
async function getInfo(data) { const res = await fetch(`${"https://api.agify.io/"}?name=${data}`); const result = await res.json(); const resTwo = await fetch(`${"https://api.nationalize.io/"}?name=${data}`); const resultTwo = await resTwo.json(); displayResult (result); displayResultTwo (resultTwo); }
6. Функция displayResult(), которая получает данные ответа от первого вызова API и обновляет HTML-код элемента с идентификатором 'name' с помощью свойства name объекта API-ответ и обновляет HTML-код элемента с идентификатором «years» с помощью свойства age ответа API.
function displayResult(result){ let name = document.querySelector (`#name`); name.textContent = `${result.name}`; let age = document.querySelector (`#years`); age.textContent= `${result.age}` }
7. Функция displayResultTwo(), которая берет данные ответа из второго вызова API и обновляет HTML-код элемента с идентификатором 'country' вторым элементом в country. >массив ответа API.
function displayResultTwo (resultTwo){ let country = document.querySelector(`#country`); country.textContent = `${resultTwo.country[1].country_id}` }
И вот что мы получим:
Хотя пример, используемый в этом руководстве, относительно прост, те же принципы можно применить к более сложным приложениям, использующим API. Создавая проекты, которые демонстрируют ваше понимание API и способов их использования в веб-разработке, вы можете продемонстрировать свои навыки и добавить ценные элементы в свое портфолио.
Надеюсь, эта статья была полезной.