Connect the Web With WebSockets

3.4 Displaying Likes

Welcome back. In the previous video we added the ability to add items to our collection of messages from our Front-End. Using just this part of WebSockets you can already make a full app. In the following videos we'll just be looking at some JavaScript strategies to better work with WebSockets. Specifically what to do if multiple users are signed on and want to interact with your collection at the same time. So what we're going to do is we're going to add the ability to like these posts that have been added to the message board. So let's navigate over to our text editor. So here I am in main.js in the app folder. The first thing we're going to want to do is update our Generated HTML for each piece of data so that it displays the number of likes as well as a button to like that particular message. Here within this template string let's add an input field. And we'll give it a type of submit And we'll give it a class of likes count, for styling. And we'll give it a value, and for this value, we'll use a template. So whatever we put inside these curly brackets will be interpreted as JavaScript. And we'll say data.likedBy, cuz you remember it had that field, and the length of that array, so it'll count the number of people who like it. And we'll just put that inside quotes. And after our template we'll just have a word for likes, like likes, or hearts, or enjoys. You can choose your own word. For this one, I'm going to go with likes. And one more thing, let's go ahead and add liked by to our pay low that we made on the bottom. And that can be an empty array for the most part. So let's restart our application in the terminal and see what happens. Okay, so you can now see that the number of likes displays next to each message. Clicking it doesn't do anything because we need to add that functionality. We'll do so in the next upcoming videos.