In this section we will create the bottom part where information about the artwork is displayed, which is currently hard coded information.
7.1 Setting up event listener
Let’s add three new query selector in our elements.js file
Then create a new view file called detailView.js. Here we will add the renderDetails method which we will call in index.js after the user has clicked on an artwork.
In the renderPaintings method we will now set the year, title and description as data attributes on the parent div of the image by the following code:
In index.js we will then send the clicked painting information to the renderDetails function:
In detailView.js we can then easily update our detail information:
Great! Our detail information is working.
7.2 Default artwork information with async await
Let’s adSetting up the default information is a bit tricky, because we only can get the data attributes of the artworks when they are loaded. So that is why we’ll be using an async await functionality. Let’s first return true in the controlSettings function when it has been completed. Make sure to include the removeLoader function before calling the return, otherwise the loader will stay on screen. Then in the init function we’ll add:
The function above waits for the controlSettings function to finish, and then retrieves the artwork data from the rendered artworks.
7.3 Error handling
First let’s remove the current detail information when a new search has been called. We’ll add removeDetails in the detailView.js page
And we’ll add it in the controlSettings function
Also if no results are returned:
Our renderPaintings then looks like this:
Sometimes null or defined gets displayed on the default artwork. If we do not have that information we’ll ask the user to select an artwork first. This is an easy fix by changing our renderDetails function and checking if all the artwork data is actually available:
7.4 Fixing text breaking
Some artworks have a long title and description which breaks our layout.
Let’s set the font of .info .content .content__h2 to 2.3em so it still looks good on mobile.
7.5 Adding styles to selected artwork
It’s currently unclear which artwork the user has selected, let’s change that. In our renderDetails method inside detailView.js we’ll call the showCurrent function on the current painting that just has been clicked:
Then we’ll add the showCurrent painting in paintingView by toggling a painting–active class and adding it on the current painting:
I’ve added the following classes in the css file for the active painting:
Then for the frame around the artworks, I found a nice little pure CSS code: