🖤 Like icon
Every movie app should have a like button which shows if the user likes the movie or not. In my pursuit of learning React, today, I added a new Like icon in my Vidly application. If you are not sure what Vidly is, you can read my blog on my 5th day of React. There I have described everything about it in details. 🤞
You can see that there is a heart right next to Rate. When you click this heart, it becomes total black showing that you liked the movie.
🤔 So, how did I do it!? First of all, I created a new JSX file for Like component. Then I added a like property in my external JS file from where I picked the data. Next thing was displaying the heart icons. For this, I used a library — Font Awesome.
I then developed a logic to toggle between two heart icons — the simple heart icon and the full black heart icon. The logic is also setting the value of like property in the external file to true if the heart is entirely back. Thus, making necessary changes in the database.
After successfully creating this like component, I started my course on React. Today’s lecture was about pagination. While learning it, a thought came in my mind. Why don’t create pages and show only four movies per page in my Vidly app!? It was a nice idea considering my entire webpage was full of movies. 😅
So, I created a new JSX file for creating pagination component and started brainstorming on how to make these pages? Within half an hour, I started building up a logic.
It is still incomplete but I believe I am going somewhere with it. I will do more tomorrow. I hope it will not be much difficult. But until then cheerios!! 🤞