Make a Like Button with Javascript | Like Images & Posts with JavaScript

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Make a like button with Javascript and learn how to like images & posts with Javascript like you see in Instagram and other social media platforms. This JavaScript tutorial could be the start of an Instagram clone or be applied to any app that needs to mark favorite contacts, images, and more.
Subscribe ➜ bit.ly/3nGHmNn
JavaScript for Beginners: Full Course (8 hours): • JavaScript Full Course...
Make a Like Button with JavaScript
🔗 Source Code: github.com/gitdagray/save_fav...
(0:00) Intro
(0:32) HTML Structure
(2:43) Adding SVGs for Like and Dislike
(3:45) Starting the JavaScript
(5:27) Getting Data from an API
(7:24) Rendering the App with JS
(16:17) Adding Random Images
(19:45) Add and Remove Favorites
(26:58) CSS Styles
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to make a like button with JavaScript helpful? If so, please share. Let me know your thoughts in the comments.
#like #button #javascript

[@DaveGrayTeachesCode]

Liking and disliking posts, images, and more is a common feature in many modern apps. This tutorial shows you one way to do this with JavaScript in your frontend code. We'll use the Faker API to simulate real data in our contacts app and grab the selected contact data when we like or unlike the contact card. This pulls together several concepts from my 8 hour Vanilla JavaScript tutorial found here: czcams.com/video/EfAl9bwzVZk/video.html

[@nancychaudhry3623]

Very nice! Exactly what I needed to learn! Thank you.

[@DaveGrayTeachesCode]

You're welcome!

[@hassaneoutouaya]

Thank you so much Mr. Dave for all the golden information !

[@DaveGrayTeachesCode]

You're welcome!

[@hsardrake5373]

The intro is awesome!

[@DaveGrayTeachesCode]

Thanks!

[@rangabharath4253]

Awesome as always 👍😀

[@DaveGrayTeachesCode]

Thank you! 🙏

[@ahmad-murery]

Very cool video as usual,
the way you structure your code keeps amazes me,
may be set the cursor: pointer; on the like button (see, I'm smart 🤓)
since I have nothing more to add, I just wanted to mention that adding a lot of event listeners may reduce the performance to a certain degree (not in this project),
so alternatively we can add one event listener on the container and from within we can check event.target for the actual element we're looking for like this:
main.addEventListener('click', event =>{
// Check if clicked element is a like button by looking into its class list
if(event.target.classList.contains('like')){
// the same logic for the like click handler goes here
}
});
the down side is this handler will be triggered on wherever you click on the container element but still makes the app lighter.
Thank you Dave for keeping our brains working 🤯

[@DaveGrayTeachesCode]

Once again, great feedback Ahmad. Thanks! Yes, a vast amount of event listeners could cause an issue. In such a case, your alternative looks like it would be a good solution! 🚀

[@ahmad-murery]

@@DaveGrayTeachesCode Thanks Dave,
Edit: I forgot to mention another benefit of adding the listener on the container is that we eliminate the need to re-adding the listeners when loading a new set of the elements (like in load more/pagination cases)

[@CynthiaSotoCaballerolYEAHl]

Is this approach what is called "Event Delegation"?

[@ahmad-murery]

​@@CynthiaSotoCaballerolYEAHl I've been using this technique for a long time ago and just now I know that it has a name "Event Delegation" 🤦‍♂️
anyway, if anyone is interested in this topic this link might be useful:
www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
Thanks for mentioning that

[@CynthiaSotoCaballerolYEAHl]

@@ahmad-murery thanks for your answer my friend and your feedback about event delegation vs. listeners

[@karabomolemane9971]

Thank you for this great tutorial. I would like to add the SVG icon on the top right of a table. However, it always shows outside. After a bit of research, it seems like tables and divs do not play well together. Any idea on how I can get around this?

[@DaveGrayTeachesCode]

You're welcome! There is no issue with using a div or divs with a table element. I think you will learn how to do this by learning about CSS position: czcams.com/video/zqg4A6g9GfA/video.html

[@beahowel]

Thank you for the tutorial. Where did you copy your svg code from?

[@DaveGrayTeachesCode]

Hi Beth, it has been so long ago I cannot remember. I had it for a few years prior before making this tutorial almost a year ago. You can Google for free resources. Sorry I'm not more help on this one!

[@beahowel]

@@DaveGrayTeachesCode That's ok! thanks for the quick reply!

[@streamx2]

How can you use createCardElements() at the top when function expressions can not be used before you have created them?

[@DaveGrayTeachesCode]

Good question! Everything is contained inside of a function definition. The definitions are read before a function is called. If I called the function in the global scope, it would be a problem. A detailed look at scope here: czcams.com/video/_E96W6ivHng/video.html

[@streamx2]

@@DaveGrayTeachesCode Sorry for asking too many questions. If I understand correctly, at first the variables are hoisted to the top. So elemObj and const createCardElement are both hoisted to the top. Now createCardElement is read, its going to assign elemObj to createCardElements()?

[@DaveGrayTeachesCode]

@@streamx2 Notice initApp() is defined before the listener that calls it. No functions are called in the global scope. initApp() is called by the event listener. All function definitions are read as the script is processed. All functions are then only called within other functions. In that regard, they are not called before their definitions. Arrow functions do not get hoisted. Hoisting does not apply to const. (updated this after a quick review!)

[@nugySun]

I was looking for favorite image function as I had already done api fetching etc, posting the image with author and title, but then i saw how this code looks like and now I feel miserable by looking at mine, cuz it is just not this clean as i didnt even know i can render api data like this and all... To even use the favorite function id have to probably rewrite my whole code. ouch. Anyway ill probably now watch the whole tutorial of 8h when i have time, just to get to know how to use everything better...

[@DaveGrayTeachesCode]

Glad I could help! Thanks for the note. 🙏🚀

[@nugySun]

@@DaveGrayTeachesCode i should say thank you instead, the way you show to render fetched data is what I definitely need to learn, would make it way easier to work with this all for me

[@kiern1285]

test

[@nugySun]

Ah hello again, Since ive been doing image scroller and the fav function has been kicking me a lot where it hurts, can someone tell me why, i get
"custom.js:16 Uncaught TypeError: Cannot read property 'toggle' of undefined
at myFunctionFavo (custom.js:16)
at HTMLButtonElement.onclick (index.html:31)
myFunctionFavo @ custom.js:16
onclick @ index.html:31"
code parts below--------
html:
21. Favorite
js:
function myFunctionFavo() {
var x = document.getElementsByClassName('image__favorite fav_button');
if (x.innerHTML === "Favorite") {
x.innerHTML = "Favorited";
x.classList.toggle("favorited");
} else {
x.innerHTML = "Favorite";
16. x.classList.toggle("favorited");
}
}
but it works fine if i do "var x = document.getElementsId('FAV_btn');"
Ill redo do everything anyway, but im just curious, cuz couldnt figure it out tonight.