Форум

posso · #1 (**permalink**) 06.05.2021, 22:40

Мне задали задание по практике. Я совсем голову сломал с заданием. Задание звучит так: "При нажатии на кнопку показать еще к существующему списку требуется дорисовать следующие 20 стран и т.д. При этом после того, как страны для вывода закончатся кнопку необходимо скрыть или удалить." Помогите, пожалуйста, сделать. Задание нужно сделать на чистом javascript.

рони · #2 (**permalink**) 06.05.2021, 23:18

posso,
где ваши попытки?

posso · #3 (**permalink**) 06.05.2021, 23:26

let data

async function getCountry(){
    let val = document.getElementById('country').value;
    const response = await fetch(`https://api.sampleapis.com/countries/countries?name=${val}`);

    let data1 = await response.json();
    let table = document.querySelector('#table');

    data1.forEach((data2)=>{

        table.innerHTML = '';
        let tr = document.createElement('tr');
        table.appendChild(tr);
       createCell(`<img src=${data2.media.flag} style = "width: 150px" alt="hello">`, tr);
        createCell(`${data2.capital}`, tr);
        createCell(`${data2.name}`, tr);
        createCell(`${data2.phone}`, tr);
    })






}

async function getapi(n) {
    const response = await fetch("https://api.sampleapis.com/countries/countries");
    data = await response.json();


    if(data){
        document.getElementById('spinner').style.display = 'none';
    }


    let notesOnPage = 20 + n;
    let countOfItems = Math.ceil(data.length / notesOnPage);

    let table = document.querySelector('#table');
    let pagination = document.querySelector('#pagination');



    let showPage = (function() {
        let active;

        return function(item) {
            if (active) {
                active.classList.remove('active');
            }
            active = item;

            item.classList.add('active');

            let pageNum = +item.innerHTML;

            let start = (pageNum - 1) * notesOnPage;
            let end = start + notesOnPage;

            let notes = data.slice(start, end);

            table.innerHTML = '';
            for (let note of notes) {
                let tr = document.createElement('tr');
                table.appendChild(tr);
                createCell(`<img src=${note.media.flag} style = "width: 150px" alt="hello">`, tr);
                createCell(note.capital, tr);
                createCell(note.name, tr);
                createCell(note.phone, tr);

            }
        };
    }());

    let items = [];
    for (let i = 1; i <= countOfItems; i++) {
        let li = document.createElement('li');
        li.innerHTML = i;
        pagination.appendChild(li);
        items.push(li);
    }

    showPage(items[0]);

    for (let item of items) {
        item.addEventListener('click', function() {
            showPage(this);
        });
    }

}

function createCell(text, tr) {
    let td = document.createElement('td');
    td.innerHTML = text;
    tr.appendChild(td);
}

рони · #4 (**permalink**) 07.05.2021, 01:10

Сообщение от posso

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

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            width: 80vm;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 0 auto;
        }

        li {
            list-style: decimal;
            flex-basis: 120px;
            font-size: .8em;
            word-wrap:  break-word;
            margin: 0 6px;
        }
    </style>
</head>
<body>
    <ul id="countries"></ul>
    <script>

        const baseURL = "https://api.sampleapis.com/countries/countries";
        const makeСards = data => data.filter(obj => obj.media && obj.media.flag)
        .sort(({name : a},{name : b} ) => a > b ? 1 : a < b ? -1 : 0)
        .map(obj =>
        `<li>
        <h3>${obj.name}</h3>
        <img src=${obj.media.flag} style = "width: 50px" alt="hello">
        </li>`);
        const show = data => {
            let num = 0, delta = 20;
            const cards = makeСards(data);
            const button = document.createElement("button");
            button.textContent = "add countries";
            const add = _ => {
                countries.insertAdjacentHTML("beforeend", cards.slice(num, num += delta).join(""));
                num < cards.length || button.remove()
            }
            add();
            button.addEventListener("click", add);
            countries.after(button)
        }
        fetch(`${baseURL}`)
            .then(resp => resp.json())
            .then(show);
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript