Спасибо всем огромное, кто помогал!
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
fetch("restaurants.json")
.then(response => response.json())
.then(restaurants => {
document.getElementById("app").innerHTML = `<h1>Restaurants (${
restaurants.length
} results)</h1>
${restaurants
.map(function(bars) {
return `
<div class="image-list">
<img class="image-styles" src="${bars.image}">
<h2 class="image-title">${bars.name}</h2>
</div>
`;
})
.join("")}
`;
})
.catch(error => {
console.warn(error);
});
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.image-list {
position: relative;
float: left;
display: inline;
}
.image-styles {
margin: 15px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.image-title {
background: red;
width: 80%;
position: absolute;
bottom: 15px;
left: 15px;
color: #f7f7f7;
text-align: center;
padding: 2px;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
</style>
</head>
<body>
<button id="switch">Try it</button>
<div id="app"></div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#switch").addEventListener("click", userSort);
function userSort() {
fetch("restaurants.json")
.then(response => response.json())
.then(restaurants => {
restaurants.sort(function(a, b) {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
alert(a.name);
});
document.getElementById("app").innerHTML = `<h1>Restaurants (${
restaurants.length
} results)</h1>
${restaurants
.map(function(bars) {
return `
<div class="image-list">
<img class="image-styles" src="${bars.image}">
<h2 class="image-title">${bars.name}</h2>
</div>
`;
})
.join("")}
`;
})
.catch(error => {
console.warn(error);
});
}
});
</script>
</body>
</html>