Приложение API — отличный способ продемонстрировать свой опыт в проектировании, создании и внедрении практического программного решения с использованием API. Вы можете не только продемонстрировать свое мастерство кодирования, но и продемонстрировать свою способность разрабатывать интуитивно понятное и удобное приложение.

В этой статье я предоставлю пошаговое руководство, которое поможет вам начать работу.

Я собираюсь использовать бесплатные публичные API https://nationalize.io/ и https://agify.io/, которые позволяют предсказывать национальность и возраст по имени.

  1. Начнем с 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 и способов их использования в веб-разработке, вы можете продемонстрировать свои навыки и добавить ценные элементы в свое портфолио.

Надеюсь, эта статья была полезной.