Book-liker Lab: Creating HTML Elements using Javascript
Hey everyone, and welcome to another blog! In this blog I wanted to talk about creating elements in Javascript. I wanted to focus on a specific lab my class was given and how to complete the question that was posed.
First things first the lab asked: “Be able to click on a book, you should see the book’s thumbnail and description and a list of users who have liked the book. What I wanted to focus specifically on is how I actually was able to display all that information. Once you open index.html this is what we want to see.
Once we complete the task we should be able to a picture of the book, the title underneath that, the subtitle underneath that, the author underneath that, a description underneath that, and finally list of users who like the novel. It seems like a lot but let’s get started!
Also I’ve inserted a picture below of the db.json file, which shows the information we get back for a book.
Step 1 → would be to create a function that would display all the information of a single novel. I wrote a function called showSingleBook that would display all the required elements inside of it.
Step 2 → would be to find out where on the page we need to be inserting all this information. Going to the browser, click inspect and in elements if you hover over what we want to display it’s called “show-panel”. I created a variable called showDiv and using document.querySelector I used the correct syntax to get the div I wanted. In this case is would “(‘#show-panel’)”. Below shows exactly where I found the div I wanted.
The code shown below is how I accessed this information. The 3rd line which states showDiv.innerHTML = ‘ ’ is used to ensure that any data inside of the div is cleared. This way the books will not stack on top of each other.
Step 3 → would be to show the image for the book. When we go to browser and open up the show-panel div id. Inside of it we can see the first element we want to display- the image. This is perfect because underneath the image is the title, subtitle, etc everything we want to display so we can refer back to for the other elements we want to display.
Do you notice how the image sets a url to src? Src is the source of the image and it should be set to the location where the image exists. To display our image I wrote a const img and then used document.createElement(‘img’).
Great! Now we have our book image!
Step 4 → we want to display the title next. This is going to be similar to getting the book image.Taking a look at the browser above the title is written inside an ‘header-2’ or ‘h2’. In order to access that I created a const called title that uses document.createElement(‘h2’). Next I used title.innerHTML = book.title to actually get the books title.
Step 5→ we want to display the subtitle next. This step is very similar to the step above. Instead of title though, we just replace that with subtitle. Since the subtitle is also displayed in a ‘h2’ we can leave that the same! The innerHTML also needs to be substituted with subtitle.
Step 6→ we want to display the author next. Looking at the browser we see that the author is also written in a ‘h2’. Woohoo we know exactly how to tackle this.
Step 7→ is to display the description. This is going to be similar but a little different because the description is in a p tag. That is okay we still know exactly where to replace our code.
Step 8 → is to display people who have liked the book. In order to get this information I created a const likesList and with that an unordered list element. Then I looped through all the users in the book.users. Next I created a list element with document.create for which user with their username inside. Last step would be append to likesList.
Excellent now that we have all the code working to access and create all these elements- we want to be able to actually display them on the browser. For this we want to append to the showDiv each element that we created. Now the first time I did this lab this is how I wrote out that code.
I didn’t know there was a way to condense this code so it looks neater and cleaner. But in fact this can all be written in one line as shown below~
Wonderful! Now we completed the specific part of the lab! I hope this blog helped clear any confusion. Thanks for reading :)
