🖼️ArtLibrary:

ArtLibrary is a single page web app. The user can enjoy National art and info of the Rijksmuseum collection. 2022-03-03 (63)

📝Course Description

This course is a intro how to build a web application without frameworks or unnecesarry libraries, but with vanilla HTML, CSS & JavaScript. The course will give a better understanding of how API's, frameworks and libraries work.

🔗API

The data is retrieved from Rijksdata by the Rijksmuseum;https://data.rijksmuseum.nl/object-metadata/api/ . The API gives acces to the collection with information about each object up to a total of 10,000.

WireFlow

Activity diagram

Fetch & render data

fetch (endpoint)
.then(function(response){
    return response.json()
})

// Function logging the response of requested data 
.then(function(Data) {
    theData = Data;
    console.log(Data);

// Function rendering objects in HTML (displaying data on screen)
    for (let i = 0; i <Data.artObjects.length; i++) {
        const  kunstImg = Data.artObjects[i].webImage.url.slice(0, -3)+"=s1000"
        const  kunstTitel = Data.artObjects[i].longTitle
        const  titleShort = Data.artObjects[i].title
        document.querySelector('ol').insertAdjacentHTML(`beforeend` ,`<li>
            <h3 class="titleClass">${kunstTitel}</h3>
            <h2 class="titleShort">${titleShort}</h2>
            <img src="https://github.com/Yolandaokyere/ArtLibrary/raw/main/${kunstImg}">
            </li>`
        )  
        console.log(Data.artObjects[i]);              
    }                
})

To do list

[x] Get data from API
[x] Render data in HTML
[] Render the next page with more data from API
[] Loading, Error and Empty states
[] Modules
[x] Working searchbar
[x] Filter on name
[] Filter on year
[] Filter on title
[] Detail page
[x] Styling page
[] Good looking page
[] Documentation > Progress pages in Wiki
[] How to install this project?
[] Activity diagram
[x] WireFlow
[] License

💡Features

📚Sources

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML https://attacomsian.com/blog/javascript-dom-remove-all-children-of-an-element (Remove child from element) https://medium.com/nerd-for-tech/skeleton-screens-in-plain-javascript-88bce254b0ab Best Practices for JavaScript

Yolandaokyere / ArtLibrary

readme