|
Сообщение от 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>