Page Title

Project: 100 Books

While your friend was cleaning his house, he found 100 books in the old storage room. However he hates reading so he decided to offer these books to other students at your college. It doesn`t work well because the college is a complex of more large buildings and he doesn`t have so much time to be everywhere. You as a beginning web programmer decided to help him and make a web which contains info of all 100 books.

Task

Make a html web which uses the API for displaying info in the following list about each of these books. Don`t forget to style the web with css to look nicely. Share your projects to comments!

title
author
country
year of distribution
language

Optional:

image
link to wikipedia

API

URL: https://raw.githubusercontent.com/benoitvallon/100-best-books/master/books.json

There are more ways how to load json file:

1. Using jQuery

$.getJSON(url, function(data) {
    console.log(data);
});

2. Fetch

fetch(url)
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        console.log(data);
    });

Data often contains the same properties about more than one elements so we can loop through it using for...in statement.

If we want to display some of our data in a div element, E6 syntax is very suitable for it.

For example we have element with id="root" and we want to display a property of each element to h2 tag:

let text = "";
for (let i in data) {
    text += `
        <h2>${data[i].something}</h2>
    `;    
}
document.getElementById("root").innerHTML = text;

Additional

Check out the structure closely - it is very important for you! You must use correct properties names.

The images repository has own specific url.

url for images: https://raw.githubusercontent.com/benoitvallon/100-best-books/master/static/

So if you want to access them, you must put into src attribute that url + value of imageLink property of a data element.

If something isn`t clear, you can message me - my profile link is bellow.

Good luck to all participants!

Contest: 100 books