In this section we will add like abilities to each rendered painting, so we can give the user more relevant artworks in their following rendered. We will keep track of our like ratio to see if we are actually recommending better artworks. We will store this information in the local storage of the users browser, which will stay there even after they have closed the website.
8.1 Rendering likes per painting
First we will add the HTML and CSS for the likes element, we’ll add them just after the painting image tags:
Let’s add the eventListener in our controller file, where we also handle our heart icon:
Then add a division data attribute and an object number data attribute in the paintingView so we can retrieve more information about the artwork. We will save the object number in our likes array.
Our controller now looks like this:
Then in our Likes class model we will add the methods to add or delete a like of an artwork based on the click event in the controller. We will add a new object containing the object number and division to our likes array which is stored in our likes state array.
And it is working!
8.2 Saving likes and storing them in localStorage
We will store the likes in the local storage of the users browser so that when the user closes and re-opens the application, the likes still appear. We will update our Likes model so it stores the state.likes array inside the localstorage:
Then in our init function we will add the following so a likes state gets created on page load:
Next up we need to render a liked heart if the painting has been liked by the user. We have to update our init function for this to work.
We pass the state.likes in our renderPaintings async function:
Then in our renderPaintings function itself we search in each painting for a match between the painting objectnumber and the objectnumber we have stored in our likes state:
8.3 Recommending better artworks based on likes
It would be great if we could recommend the user artwork based on his likes. We will do that using our stores likes state which contains division information about each artwork, e.g. “Modern and Contemporary Art”.