Upgrade your Personal Website: How to Animate a Like Button

1. Introductions: What makes a website look good? How can you use animations to better engage with your audience? What's involved in designing and intuitive UI. Welcome to Learn By Doing: animating a like button. In this course we'll learn how we can make a simple button into an animated one. Hi, my name is Jude sub and I have been making websites and slick UI for over eight years. We'll learn together on how to utilize HTML, CSS, and JavaScript to make fun micro interactions and cool UI. By the time we're finished, we'll have learned how to use custom fonts icons, listen for user click, and manipulate the DOM to display our cool animations. That said, you should have some very basic knowledge of HTML, CSS, and JavaScript. But don't worry, I'll be guiding you along the away. With that, let's get started. Let's make awesome UI crush it. 2. Downloading VS-Code Editor: Before we begin, let's download a text editor. I like VSCode, you'll see right up here, I have one available. Let's go ahead and open up our browser and on the search bar, let's go type visual studio code. Now, go ahead and click on this link. Now, I'm using Windows, but if you're using Mac or any other operating system, feel free to download the binaries that's appropriate for the operating system, so just click here and there you have it. Now, go ahead and click on ''Download'' and download should appear. I'm not going to go through this setup process because I already have one available. Again, feel free to do hop along and join me, we are using Visual Studio Code. See you in the next video. 3. Setting up Live Server: Now that we have installed Visual Studio code, let's go ahead and customize it. One of the ways you can do that is finding this little button called Extensions. We're going to add one called Live Server. On the search, let's type Live Server, and on the top right here, let's go ahead the install button. It may take a little bit, but once it finishes, you want to hit the reload button right here. What Live Server does is it allows us to develop locally and see things instantly change on our browser. Pretty nifty. 4. How to start a Live Server: Great. Now that we've installed Live Server, let's go ahead and see how it works. Let's it explore. You'll notice it's asking for our workspace folder. So let's go ahead and add one. I've already created a skillshare folder inside my documents so you can have whatever structure you want, but I'm going to use this and it says it's skillshare. I'm going to add a new file and we're going to call this index.html. Now, VS Code is equipped with Emmet. So let's use that. We're going to type in html:5 and hit "Enter". Now we have a boil plate HTML carry that's given to us for free. Go ahead and type in now, Hello, World and hit "Save". We're going to click on now "View" command palette, and then open up live and you'll notice it's already auto-completed for us. Server, open with Live Server. You'll notice that we have now a Live Server of our local development. Let me minimize this real quick, just a little bit more. Great. One thing you can do is type in, This is a test, and hit "Save" again. Notice we see the changes instantly appear without having to hit "Refresh", that's a nifty feature. Let me go ahead and type in h2, This is cool. Hit "Save". You'll notice that Live Server picks up the changes, and that's why I really recommend using Live Server for local development. 5. Adding a Basic Button: For the first project, I want to spend a little bit more time describing my thought process when I tackle a design problem. One thing we know is that a like button is technically a checkbox. Let's go ahead and just do a basic HTML. We're going to do is get rid of this and I type in less than sign, input, type equals quotation mark, ''check box''. We're going to close it by adding a slash and then a greater than sign. Now, if we hit ''Save'' right now, you'll notice that all we get is a check box, but that's not pretty descriptive; what's the checkbox for? Let's go ahead and add in, Like us and then hit ''Save''. Now we know why the checkbox is there for, and while it's very basic, the next few videos we'll style it and add it some functionalities. 6. Like Button Project Case Study: For our first project, we're going to start really simple. We're going to look at Instagram's Like button as an inspiration, when you click on it, it turns red and it fills the heart. That's a really good visual feedback. But what if you could actually animate it and pulsate it when the user clicks on it. That's what we're going to try to do. We're going to use HTML, CSS, and JavaScript so that when the user clicks on it, it pulsates. If you haven't touched any of those technologies, it might sound a little daunting. But don't worry, that's why I'm here for. I'll see you in the next video. 7. Adding an External Stylesheet: Great. Now that we have our normalizer, we can now have a CSS that's consistent across all our browsers. One other thing we need to do now is to actually add the style. Let's go ahead and do that. You'll notice that we'll create a new file and we'll call the style.css. Inside our style.css, I'm going to go ahead and make a simple rule for html and it's going to change the color to tomato. All right, and afterwards, we're going to hit "Save" and switch over to our Index.html and I'm going to copy this and we've got to make sure not to call it normalize, but rather style.css. Once you do and hit "Save" you'll notice that the colors do in fact change to tomato. You'll notice that I've actually put style.css underneath normalize.css. That's really important because you want normalize actually normalize first and then our styles. 8. Using Fonts for icons: In what design, there's multiple ways of doing things. One of the ways that we could have added a heart was through CSS, but I'm going to just create a new folder and we're going to use a font. Let's create a font directory, and you'll notice there's nothing in here, and we're actually intend to get one from I like my Fontello. Go ahead and type in Fontello in your search bar. You'll notice it takes a little bit to load. There's a font Awesome Font, and you'll notice these two. There's a heart and the heart empty. I'm going to go ahead and select those two and download it. I don't have to download the whole Font Awesome, and you'll notice it's inside the zip drive, and I'm going to go ahead and open up through the Visual Explorer and right-click this and hit reveal in Explorer. You'll notice here we have a directory that's similar along the same lines. I am going to go ahead and drag these into my font folder, and you'll notice there it is. Let's go back to skill share and hit CSS. In our zip drive, I'm going to hit the CSS folder, and I just need this one right here and move it over to you, CSS, and you'll notice I have all three now. Perfect. Let me go ahead and close these two, and you'll notice on the font directory it's actually empty. Make sure to hit this refresh button, and there you go. Everything is populated correctly. Let's go ahead and open up our Fontello CSS. You'll notice all these CSS we get for free. It references the font files and it's going down. These are the classes that you'll need to remember when we actually declare the heart icons. Let's go back to index.html and we're going to need to reference it because it's an external CSS. I'm going to go ahead and include it by the Emmett abbreviation, and it's in current directory, CSS folder, and the name is fontello.css, let me go ahead and hit save. You won't really see anything immediately. We're going to need to add an I tag and go ahead and type in class equals colon colon. We're going to call this icon dash heart, and again, that's references the fontello.css, and you'll notice over here we have all three. Now if we want the empty one, we're just going to go ahead and do icon heart empty oops, misspelled that T, remove the other T, hit save, and there you go. We see both hearts, the filled and the empty one. Again, I chose the font route. There's many other ways you could have done this, but I felt the font route was the easiest. Cool. See you in the next one. 9. Using CSS to "pulse" a heart: So far a lot of what we've been doing, it was just purely setup work. But now we're ready, we have Fontello, we have our normalized, and we have our style.css. Let's go ahead and remove the input type. What we want to do now is create a container. Let's create a div and create a class called container. Great. What we're going to do is move these guys inside our div container that's formatted a little bit. It looks a little bit more cleaner. Okay, fix this little bit, and here's, well, great. Now everything is aligned and we're going to hit save. You'll notice the index looks fine. We did create a container class, so let's go switch over to style.css, and let's remove this. What we're going do is create this container class and add a display, a flex. Once you hit Save, you'll notice that a red tomato is gone, but we're going to go ahead and also change our icon heart, so that when you add the color tomato back again, you'll notice that we do have the filled heart and it's inside icon heart and notice our colors there, great. Now we're going to add a pulsing effect. Let's create a class called pulse, and we're going to add the animation and the name will be pulse. The duration, we're going make it 0.3 seconds, and we're going to have it run infinitely. We can remove everything else here, great. What we want to do is create this pulse animation, let's add a keyframe at keyframes, and we're going to call it pulse. Oops, get rid of that period. Inside our curly braces, we're going to add a percentage. Let's start with zero percent, and basically, we're going to add transform: scale. We're going to have it set at one, don't forget the semicolon. We're going to finish it off for the exact same transform. Let's go ahead and add transform again and scale it to one. But in between, we're going to have at 50 percent. Let's go ahead and add 50 percent, and we're going to modify this a little bit. Let's add transform again, colon scale, and this time we're going do 1.3 semicolon. You're going to notice I just hit Save, but nothing's actually happening even with my pulse animation. We did set to infinity, but notice our class here for the eye, it's called Icon heart, but what we need to do is add pulse to it. Let's do that, and there you have it, it's pulsating now, it's because we've added the pulse class to our i tag. Let's go ahead and do that right now in our index. I'm going to add pulse, hit Save, and there you go you have a pulsating heart. This is going to be a key lesson for animating in the future videos. See you in the next one. 10. How to Manipulate the DOM: The next thing we want to do is manipulate the DOM. By DOM I mean the Document Object Model. We're going to specifically want to target this little heart. How do we do that? Well, we're going to need JavaScript. One of the few ways you can do that is right-click and hit this "Inspect" or Control+Shift+I or Command+Shift+I, and you'll notice that there's this console button. This allows us to type in some JavaScript target. Let's first figure out. We call this icon-heart, and we're going to click on "Console" and we're going to type in document.querySelector. Make sure the S is capitalized. Open paren, single quote, period because it's a class that we're going to target, icon-heart, and end quote and parenthesis. See, we have a reference now to our icon heart class. This will be the basis for how we can use JavaScript to modify the DOM. You can even go ahead here and click on the little arrow and you'll see that the whole DOM is listed. What we want to do is remove the pause. I'm going to directly do it and you'll notice that the animation stops. Now we know how to reference the DOM. This will be pivotal for the next video where we'll actually use JavaScript to remove it. 11. Adding an External Javascript: This time around I want to talk about how we can add JavaScript externally. Previously, we talked about DOM manipulation and how we can do that via JavaScript. We're going to begin by removing the first icon. Now we're left with the empty heart. We're going to want to add a script tag, but we're going to add it right above the ending body tag. Element again has this available, but you can type it all the way. Before we go ahead and type something in, we're going to actually need to create a folder. We're going to call it Scripts. Inside Scripts, we're going to create a new file and we're going to name this main.js. I'm going to do something really simple, console.log('this is java script!') and I'm going to save this. We're going to go back to our index.html. Now that we have a place that we can reference, we're going to look at the current directory and it's inside Scripts. It's called main.js and hit "Save". Nothing should change. I'm going to hit "Console". There you go. We have now a reference to this main.js because we've added it in our index.html. 12. Toggling a Basic Heart: In this lesson, we're going to put together everything we've learned so far into one. Right now we want this heart to toggle. Currently it's on empty, but if we remove the empty modifier, we have now the full heart. Now, we could definitely target icon heart empty, but that's going to cause us some problems. I'd like to create a js-heart. What this allows us to do is target without worrying about the actual class icon. We're back at our main js, I'm going to get rid of the console statement and get a reference to our heartDOM equals document.querySelector ( 'js-heart ') ; again, I'm going to move it just a bit. The reason why we do this is we want to get a reference to the heartDOM, and I'm going to go write a comment regarding that. Great. The next thing we want to do is add an event listener. Let's write a quick comment, create a onclick listener, and then we're going to add the heartDOM, and again we have the reference of it. Go ahead with the.on-click= (event) =>, which is equals greater than sign, and then a curly brace, and if you didn't know, this is the ES6 way of writing a function. The next thing we're going to need is a liked variable, to check if the user had liked it or not previously. Let's go ahead and create that right now. Let liked equals false. Basically, we're initializing it to false. Let's go and write a comment on that. We're going to say initialized to false. Probably helps to be a little more descriptive, initialized like to false. Specifically this is when the user hasn't selected. Great. Now that we've created the liked variable, when the user clicks on it, we want the liked variable to actually flips. How did we do that? We add the exclamation mark and the variable liked again, basically a fancy way of toggling the like. Keep this in mind that this is small little way of flipping a variable. As you can see here, I'm adding the exclamation mark which basically means the opposite of what it currently is. Next, we're going to check if liked is set to a truthy value. We're going to have target.classList. Make sure the L is capitalized.remove(' icon-heart-empty') ; again this will flip it so that we will remove the iconheart. But notice the target here, I'm going to actually define that. We'll have target= event, from the event object, dot currentTarget, the T capitalized for Target. The currentTarget against property of event object that we have passing forward and we're going to do a const because it won't be changing. Let's be a little bit more descriptive. This target is basically what we clicked on. We sign it here. Let's go write some comment on that. This is what we clicked on. Great. Again, we use a target to basically remove the old icon and let's add a new one with classList. add and now we need to define the class that we use, which is iconheart and great. We have remove the empty one and we add in the filled one. We need now the opposite. Let's do else curly braces inside there. We're actually going to copy these two lines and paste them here and I should just flip the remove in the ad. Let's do that. Remove now becomes add and add becomes remove. Another thing I like to do is be more consistent. Let's move the remove function up and the ad is underneath it. Now it's consistent with the previous statements. Just to make sure that we understand what's going on, I'm going to write some comments. For the first case, we remove the empty heart if liked, and add the full heart. We're going to actually do the opposite when the user has unliked it. Let's go ahead and paste it here and change that to full heart. If unliked, we want to add the empty heart. Perfect. Just for a quick review again, base of the liked variable, we're going to basically toggle the hearts and that's what we just did. Let's refresh and, there it works. Now it's not really good feedback because I really want that cursor to you show a pointer finger. What we're going to do is we're going to create a heart class that basically includes in itself a cursor pointer. Let's go do that. I'm going to type in iconheart and start with a curly brace. Actually, let me go with heart and we're going to type in cursor pointer and this allows us to go back to our indexed file and we're going to add in our heart class. Anytime we roll-over it, we're going to see a cursor pointer, like this. Perfect. Now it's really good feedback because now a user can know, if I hover over it, I can actually toggle it. 13. Animating the Heart using JavaScript: Now that we're able to toggle a heart, like so, what we really want to do is have it pulsate once a user clicks it. Let's go ahead and jump onto our main.js. The simple way of doing things is really to just add the pulse class. Let's do that right now. You might be tempted to go ahead and remove the pulse class when it's no longer light. But it's going to give us a slightly undesirable effect. Watch this. I'm going to hit "Save" and jump over back to our browser. That's not what we want. We don't want it to pulsate forever, we want to click on it once and have one pulse. What we're going to do is go ahead and remove the pulse that we thought was going to remove it after an unlike. Instead we're going to start with the heartDOM and attach, and add an EventListener, and we're going to listen for an animation end. Once the animation ends, we want the heart to remove the pulse class. Let's go ahead and pass in the event via arrow function, and what we're going to do is go ahead and target the event object. Then we're going to want to access the current target of the event object, and what we want to do is remove the pulse class. Let's do that,.classList.remove, and we're going to type in pulse because that's the class we want to remove from the DOM. Great. Let's go ahead and comment that. Let's type in remove the pulse class once it finishes. Great. Let's hit ''Save'' and check it out. Wait, what's going on here? Well, if you go back to our style.css, you'll notice that our pulse class actually has set itself to infinite. Lets go and remove that, save and try it one more time. Perfect. It pulsates exactly once. When you look at the DOM Inspector, you'll notice that quickly flashes the pulse class and then remove itself, and that's because we attach the EventListener to the heartDOM, listening for the animation end. This is going to be the basis for a lot of our animations in the future. Good job on the first project. 14. Conclusion: This animation tutorial was quite simple. However, the principles of targeting a dome, adding an event listener for animation end and listen to a user's interaction like a click can be used for creating complex animations. I hope this was helpful for you.