5 Mini JavaScript Projects - For Beginners

today I'll be walking you through five mini JavaScript projects for beginners each of these projects will take us about 15 to 20 minutes to complete they're practical you'll have a real visual working application and it'll show you how to integrate JavaScript with a little bit of HTML and CSS now these projects are designed for beginners however it will be a good idea to have a little bit of experience with JavaScript you don't need to be great but if you know basic syntax like variables for Loops if statements that's going to make it a little bit smoother also having a bit of knowledge of HTML and CSS will be helpful but if you don't no worries I will kind of teach you what those features are as we go through the videos now these projects are in order of difficulty so the first one's going to be the easiest one it's where I'll go the slowest and then as we progress through the videos it'll get a little bit faster and we'll work through some more complex projects these are super fun a great way to practice your skills and I guarantee you you're going to learn something new and have some unique projects that you can show show off after this video with that said let's get to it after this quick break now I don't know about you guys but personally I use my phone a lot I'm always sending emails slack Discord messages Etc and I'm just in constant communication all day now recently I started using type AI which is a keyboard extension that lets you use chat gbt directly from your keyboard which means you no longer need to copy and paste across various apps now it's been super helpful and I'm thankful they sponsored this video so I can share some more of their features with you with AI of course you have features like spell check and grammar but you also get AI autocomplete wording recommendations and my personal favorite the tone changer now this is a downloadable app that's compatible with iOS devices and it's helped me professionally respond to emails and change my tone based on the context while being super easy to use what's even crazier is I can just use type AI to automatically generate responses for me or ask it exactly what I should say now all of this is done directly on your keyboard which means you can do it from from anywhere with zero friction and there's no more copying and pasting to start using this on your keyboard simply click the link in the description to get a free trial of type aai premium version this is a great tool for any of you that type a lot on your phone so what I'll do now is quickly demo each of the Finish projects if you want to fast forward to one of them there will be timestamps in the video player as well as in the description this is the order in which we'll complete them I recommend if you're a complete beginner then just go in this order as I'll build upon each project in the next one okay first project color flipper allows us to Simply switch between some different colors for the background of the screen and if I click on random we will randomly generate a color pretty straightforward but it's allowing us to see how we connect events to button presses and how we can randomly generate colors and set Dom properties next is a palindrome Checker a palindrome is something that's spelled the same forwards as backwards this actually a very famous algorithm style problem and something you might get asked in a very early stage interview so a palindrome example is something like Dad because this is spelled the same forward as backwards so if we type check it says it is a paland drum if we do something like Madame right that's a palindrome because it's same forward backwards if we do dog this is not a paland drum so just a simple check showing you how we can check for a paland drum next is a random quote generator so what this will do is randomly give us a quote on the screen there's lots of modifications you can make to this but you'll notice that what I've done is made it so that we're going to go through all of the different quotes that exist before we start cycling back to one of the same ones this means you're never going to see the same quote once or twice in a row and you're going to get through all of the unique quotes before you end up seeing a repetitive one kind of an interesting feature that makes this a little bit more complicated and an interesting project next we have a timer or a stopwatch this is going to teach you about set intervals and how to handle timed events in JavaScript and with HTML so we can of course start the stopwatch here you'll see it goes up we can stop it we can reset it we can start it again and this also teaches you how to handle some different edge cases for example what happens if I press start when it's already started well in this case we restart it from the beginning what happens if I press stop a bunch of times well stay stop what if I keep resetting it right it works and lastly we have a persistent to-do list now this is interesting because this will actually allow us to store items in between browser refreshes just to quickly demonstrate this to you you'll notice that if I start the stopwatch here but then I refresh the page it's going to go back to the original state same with the random quote gener rightor right if I refresh just goes back to the original state now watch what happens with this one so I'm going to go add item here for hello world and when I refresh notice it's still here so we can do I don't know item two add this in here refresh still here if I delete one of the items and refresh it stays here so I'm going to show you how we can do some persistent storage using local storage storage in the browser which is quite interesting so again feel free to fast forward to any of these projects now we're quickly going to go through the setup which won't take us very long and then we'll actually get into coding these out all right so I've popped over to visual studio code now this is the editor I recommend that you use for working on these different projects you can use anything you want what we need to do here is get in an environment where we're able to write both JavaScript and HTML code and that's going to be easiest in Visual Studio code now what we'll do is we'll start by creating a folder so you'll notice I've already made one but if I delete it we can just remake it here so let's go new folder and I'm just going to call this one because this is where we're going to put project number one inside of here we're going to make two files the first file is going to be our main. HTML file and the second one here is going to be our index.js now this will be the structure for all of our different projects so if you're going to do all five of them you can just copy this directory and have one 2 3 4 5 as the various different names once we've got these two files I'm just going to show you a really useful extension in vs code if you're using this editor that I recommend you install now this is called the live server if you go here to the side in the extensions menu which is this that I've clicked on here kind of looks like little puzzle pieces or a square with one of them removed you'll see live server pops up here as the top result it's got a bunch of downloads and I've already got it installed what you'll do here is just click on install it might make you relaunch vs code and I'm going to show you how we utilize this so that we don't have to keep refreshing the page whenever we make a change to our code that's pretty much all you need once you've got that you're good to go and we're going to start working in our two different files so at this point we're going to begin project number one make sure you install that live server extension if you don't already have one okay so we're going to go into our main. HTML file and we're going to start by creating kind of the template or the user interface for our application now in case you're unfamiliar HTML is hypertext markup language and this is something that allows us to actually create elements that exist on a web page what's better though is that allows us to actually interact with JavaScript or vice versa JavaScript can interact with the HTML which means if we say type something into an input box or we click on a button JavaScript can handle that action for us and allow us to display different things on the screen or kind of determine what's going on it gives us that Dynamic Behavior so to begin our HTML document there's a little shortcut you can use here in vs code which is HTML colon 5 now when you type that you'll see this autocomplete shows you HTML colon 5 and if you click on it it's going to give you this whole template document now for some reason that's not working no worries what you can do is go ahead and pause the video and you can start typing this out what we need is the following we need this tag up here let me zoom in a little bit so it's easier to read that says dock type HTML and make sure you type it exactly like you see it so you have the exclamation point dock type you have your angle brackets here and then you have HTML we specify the language at at the top of the page it's not necessary but it's good practice to get into so we do again our angle bracket HTML language is equal to standing for English and then we specify our head tag now the head tag is where we put some metadata related to the application if you're copying this out yourself you don't need these two tags here you can just leave it like this so put head and you'll notice that we have an enclosing tag here that has this slash so whenever we're working in HTML you'll have an opening tag and then you'll have a closing tag and that'll denote kind of a section where we can put some different content so in this case we put a title tag so we have our title opening tag and our title closing tag and this is the title of our web page which will appear kind of like this in the little heading or the kind of browser tab so in this case for project number one this is the color flipper so we're going to name the title color flipper we're then going to have our body tag now it's important that the body tag comes after the head tag as I said said inside of this head tag here you have metadata related to the application inside of the body tag is where you're going to put the content that will live on the page now notice that all of this is happening inside of these HTML tags so we have an HTML opening tag and an HTML closing tag inside we have the head tag and below that we have the body tag if we add some indentation it kind of looks like this okay so just make sure you have this setup here I know I'm spending a bit of time on this but I just want to make sure none of you get kind of let as stray right at the beginning so it should look exactly how I have it here the white spaces don't matter you just want to make sure it looks just like this okay now we've got this it's time to start creating the basic user interface for our application now to do that we're going to write a few tags here which will represent physical elements that will exist inside of our HTML document so what we'll do just to start and just a test things out is we'll create an H3 tag now for all these tags with the exception of ones like the do type tag which we don't need to talk about right now you always have your opening tag and your closing tag and the closing tag always has a forward slash denoting the end of a section or of an element okay so like the body tag has its closing body tag the H3 tag has its closing H3 tag inside of here we're going to say color flipper okay now when I save that we're going to get a bit of formatting don't worry too much about that what I want to do now is show you how we actually open this page up so we can see where our code's actually running and what it is that we built so we have two options here the first option is we can simply just doubleclick and open our HTML file so what you'll need to do depending on your operating system is you need to find the folder this exists in now in vs code you can simply right click on the file and you can click reveal in finder or show and Explorer so if you're on uh Windows it should be something that says like show and Explorer or show location and if you click that it's going to bring up a file kind of search menu for you here and show you where the file exists so in this case if we just double click it you'll see see that it will show up and if I want I can zoom in here by hitting control+ or just by zooming in Google Chrome and you'll see that we've got our head uh tag appearing and we have the title Oops Color flipper kind of showing up here okay so I'll exit out of that for now but that's the first way to open up your code the second way is to use this live server extension once you've installed live server you should see this go live button down here so we're going to go ahead and click on it and what that will actually do is create a little server for us that's going to run this HTML file and now anytime I make any changes so let me just put this on the side of my screen and go like color flipper one as long as I save this main. HTML file here very important that you save it you'll see that it will just automatically adjust so you can see up here we're getting color flipper one in our title okay so that way we don't have to constantly keep refreshing the page uh if you don't have live server you will need to refresh the page for the updates to appear okay so from this point forward we can kind of move our screen over a bit so that we can see what we're doing on the right hand side and on the left hand side we have our code okay so we have color flipper and then we have our H3 tag here of color flipper now again just a reminder if you're not seeing any updates here just make sure you save the file you can do that by hitting contrl s or by going to file and then hitting save at the top of the screen so we're going to now work inside of our body tag that's where most of our work's going to be because that's where we're actually creating the different elements that appear on the screen for now what I want to do is create a few different buttons that are going to sit here and allow us uh to click on them essentially to change the background color of the screen so to make a button you simply type button like this and then again you're going to have your closing tag so you have an opening tag and you have a closing tag then what you'll do inside of the button is you'll give a kind of name to the button or what you want the text to show as so to start I'll start with green now when I save that you'll see that this green button appears I'll show you how to change the color in a second but for now we just have the green button so now we're going to copy this and we're going to have a button which is going to be the red button and we're going to have another button which is going to be the blue button okay we're then going to add one more button so we'll copy this down here and we'll call this the random button now I'll just make this a little bit smaller and you'll see that now it will fit all on the screen I just have this zoomed in a lot for you guys it'll probably be quite a bit smaller I'm just zooming it in so you can read it a bit easier okay so now for all of our buttons what we're going to want to do is actually change their background color right so rather than like the green button being gray we want it to be green so there's a few ways to do this but the best way is to create some CSS or a kind of styling for this button so to do that we're going to go up in the head tag now so outside of the body make sure we're in the head and we're going to write a set of style tags now the style tags is where we can specify styling properties for different elements in our HTML now before we're able to actually kind of apply a style to these different buttons we need to give them something to identify them with with now we can give them a class we can give them an ID there's these different identifiers that we can have for HTML elements right now we're going to use an ID and later on we can look at a class so for our buttons inside of the button tags here we're going to say ID is equal to and then we're going to put double quotation marks and inside the double quotation marks we're going to specify the identifier for this button now this button is going to be green it's important that for all of your IDs they're unique values they're enclosed in double quotation marks you also want to make sure you don't have any spaces or any weird characters like this or brackets okay you just want to have kind of a standard string or a standard set of characters you can have numbers that's fine but you just want to have kind of a normal set of characters here okay so for the ID we're going to go with green and then for this ID we're going to go with red and for this ID we're going to go with blue so we now have a way to identify our various buttons now what we're going to do is go in the style tag and we're going to we're going to style them now to access uh what we want to style we have to specify the identifier now the identifier for using an ID is this pound sign so when I put this pound sign and then I put the ID I want to access so in this case like green I'm now accessing any element that has the ID equal to Green so what I'll now do is put a set of curly braces and inside of these curly braces I can put any styling properties that I want to apply to this button so in this case I can simply say the background is equal to Green now when I do that it's going to change the background color of my button so it's now green now we can go ahead and do the same thing for our other buttons so we can say red and then inside of here we're going to have background color red okay so now we have a red button same thing here for our Blue Button we're going to say background color and then blue okay that's awesome now if we want to make our buttons look just a little bit nicer there's one more thing we can do that will actually apply a style to all of our buttons so maybe I want to make my buttons a little bit round want to make them a bit bigger uh you know we can do whatever we want right but let's say I want to make them a little bit bigger and rounder well to do that I can actually just access the tag button and now any button is going to get this property so I can say button and I can put two sets or I can put a set story of curly braces and now anything I put in here is going to apply to any of the elements that have this button tag so here we're using the ID as the identifier here we're using the tag name as the identifier and there's tons of different ones you can use inside of CSS it's not meant to be a CSS tutorial but I do want to teach you this okay so for our button we're going to set a border radius and by the way like look how many properties there are you don't need to memorize these okay I have a few of them memorized because I've used them before but you can always just look up The Styling properties if you want something unique so I'm going to go border radius and we're going to set this to be 5 pixels when I do that you'll notice we get some some rounding on the corners that's what border radius does next we can set say the width so I can say the width is 100 pixels make sure you have the pixels here if you don't have the pixels you're going to get an error and then I'm going to set the height here of 40 pixels okay now you'll notice the buttons are a little bit close to each other so what I can do is apply something known as a margin the margin is the amount of space between the different elements and I can say we're going to have a margin of 5 pixels and when I do that notice they kind of gets spaced out a little bit nicer here and they're separated on the screen okay so at this point we've got pretty much all we need for the actual user interface what we want to do now is start working with our JavaScript which is what this tutorial is supposed to be about so what we're going to do is inside of this index. Javascript file sojs we're going to link that to the HTML now to link this file we go into our body tag and at the bottom of the body tag we specify a script okay and make sure again you have your closing script tag and we say that the source for this script which is SRC is equal to index. JavaScript now this works because this index file is directly in the same directory as our HTML file so we just want to make sure that this file is in the same directory so we can reference it directly so that means all we have to do here is just write this out and assuming you have the name spelled correctly just always double check your naming it's going to link these files together so now what we can do is we can start setting up some events so that we click on the buttons it does something in the JavaScript which then modifies the code so how should we do this well there's a few ways that we could kind of get started here but the first thing I want to do is access the kind of body component so I want to access this body element so that I can show you how we change the background color of it programmatically in JavaScript so to do that we're going to create a variable now there's two types of variables in JavaScript that we can create we can create them using the constant keyword or const this means it's a variable that's not going to change we're not going to modify it later on or we can use the let or the VAR keyword and this is going to create a dynamic variable where its value can change now in our case we're not going to change this variable so we're going to say const and then body is equal to and now we're going to use document now what document is going to access is the HTML document and it's going to allow us to reference any element that exists inside of here so in this case I want to get the whole HTML document pretty much so to do that I'm going to say document. getet element and then notice that we have a bunch of options here right we have by uh tag Name by name by class name Etc we're going to use Tag name because we want to get the tag name of the body element so let me zoom out a little bit here okay so we're going to say con body equals document. get Elements by tag name and then we're going to get the body tag now what this is going to do is give us the body tag itself however there's a little thing we need to look at so so what we're doing is saying get Elements by tag name notice this plural s now that means that this is actually going to return to us what's known as an array of the different elements that have this tag name because when you're getting a tag name there could be multiple elements that have say the button tag or the paragraph tag or other HTML tags now in our case we're getting the body tag and we know there's only going to be one of those however to in order for us to access that tag we have to actually index it at index zero the way you can think of this pretty much is that body here like this variable so this tag so right is going to return to us a list and this list is just going to have one element and that's going to be the body tag we want to access now to access the first element in the list we simply put these square brackets and we put zero that's the index or the kind of uh pointer I don't know how what you want to say identifier of this element because zero is always the first element in our list so now this variable is going to get well the first element in our list which is just the body tag okay I know it's a little bit confusing for a completely beginner tutorial but I'm trying to go nice and slow so now what we're going to do is we're going to say body. style. background color is equal to and then we can set this to any color we want so I could set it to say red now when I do that notice that the whole thing changes right the background color changes to Red the reason that happens is because once we've kind of made all these UI elements here we've linked our script tag and inside of the script tag what's happening now is we are getting that body uh component that body element that I was talking about we're then changing the style and specifically we're changing the background color to be red now we can change anything else we want there's a bunch of other properties we can modify but in this case we just want to do the background color okay so that's working really nicely now the next thing that we want to do here is we want to make it so that when we click on these buttons we change the color so to do that we're going to make a function now a function is just a block of code that we can call that's reusable so I can say function this is how you start defining one and then I can give the function a name in this case I'm going to call it set color make sure you don't have any spaces or any weird characters in your name and then I'm going to give this something known as a parameter now parameter is kind of a unique value that you can pass into the function so that it can do something different based on the value you give it so now inside of this function so I have these set of curly braces by the way you don't forget this you got to kind of type it exactly as I have it what we're going to do is what we just did we're going to say body. style Dot and this going to be background color is equal to and then name now name is going to represent the name of the color that we want to set the background to so what we've just done is made a function and when we call this function we can give it a name and whatever that name is we'll set the background color to so I can simply go here and I can call the function the way you call the function is you write the name of the function which is set color and and then you pass to it any of the parameters that it specifies in this case the parameter value is name so I can just pass it say green and when I save it you'll notice that the background color goes to Green now the thing is I can call the function multiple times so I could say red now it's going to go to Red because first we set it to Green then we immediately set it to Red now if we want we can change this and we can set it to Blue we could even go to something like purple and you get the idea here we're going to continue to change the background color using this function so that's great but the thing is I want to call this function when I press on these buttons so how do I do that well I'm going to go to my HTML and inside of my button tags here I can actually register an event called onclick now what onclick will do is call a JavaScript function when the button is clicked now that's great for us because we have our function here that we can call so we're going to go onclick is equal to and inside of Double quotation marks here we're going to write the name of our function exactly as we have it in the JavaScript now in this case it's set color but remember that we have to pass a parameter which is the name of the color we want to set so what we're going to do is put two sets of parentheses here and make sure you put single quotation marks Okay the reason we're using single quotation marks is because we have double quotation marks here which is kind of uh what do you call it giving us the ability to write this function in whenever you're working with these properties of these HTML tags you need to kind of put them inside of Double quotation marks so in our case saying okay onclick is equal double quotation marks and then inside of here we're saying set color but now we need to pass a string value to our function so in order to do that we're now going to use single quotation marks so we don't get mixed up with double quotation marks so we're just using singles because it does the same thing as doubles but it allows us to embed them inside of a set of double quotation marks I know it's a little bit confusing but please just use double quotation marks here and then for this one we're going to say green okay and now what happens is when I click this button it's going to call this set color function with the parameter green and set the background color to Green so now all we need to do is copy this for all of our different values and change the parameter here to be the according color this going to be red and blue okay so now I can go red green blue and I can set these colors on the screen and the last thing that's left is to set the random color okay so now to set the random color we're going to need a different function because we're going to do something different so we're going to say function random color and same thing here we're going to put a set of parentheses but this time we don't need any parameters we don't really care we don't want need to pass anything to the function it's just going to do something when we call it and inside of here we're going to generate a random RGB value now RGB stands for red green blue these values go from 0 to 255 okay and this allows us to create pretty much any color by using a combination of red green and blue if we had zero red Z green and zero blue we'd have black if we had 255 255 255 we have the full red full green and full blue then we would have a white okay that's kind of how RGB works so what we're going to do is start generating three random values a random amount of red a random amount of green and a random amount of blue so we're going to create a constant variable again because these don't need to change we just want to create them so we can store our value and we're going to say const red that's the name of our variable is equal to math with a capital M do random and then we're going to multiply this by 255 now the multiplication operator is simply the asteris here uh which you can find on your keyboard above the eight if you hold shift now what math. random does is it generates a random value for us between 0 to one so you get this kind of random um you know multi- decimal value like an example is like 0 point you know something like this okay we now take that and multiply it by 255 and what that ends up giving us is some value that's between 0 and 255 because if we generate a number between 0 and 1 and then we multiply that by 255 we get a random value in the range of 0 to 255 the issue is that random value is going to be a huge you know decimal point value with a bunch of things so what we need to do is round it off so we're going to say math.round and then we're going to put all of this inside of here what we're actually doing is using the rounding function we're passing in some random value we generated and now it's going to round it to a whole number so we can copy this and paste this and do the same thing for green and for blue so now we have a random red value random green value and random blue value that are all in the range of 0 to 255 now all we need to do is use those values to create a color that we set the the background width to do that we're going to do a bit of a string manipulation so we're going to say const color again creating a new variable and this is going to be equal to and we're going to use back ticks now you may not have seen this symbol before but if you look at the Tilda on your keyboard which is the squiggly line typically below the Escape key or at least close to there there's these symbols that kind of look like single quotation marks they're not they're called back ticks and you're going to find those on the keyboard okay you're going to put a set of back ticks and of here you're going to type RGB you're going to put a set of parentheses and we're going to embed the variable red green and blue inside of here now to do that we're going to put a dollar sign and a set of curly braces and we're going to put red and then we're going to repeat this for green and blue now what we're effectively doing here is creating a color that we will be able to use to set the background color with so to do that we have to have the string RGB and then we have to have three numbers right the amount of red a comma the amount of green a comma and the amount of blue that all needs to be inside of a string so we use this kind of neat string manipulation trick with these back ticks to embed these number variables because the data type of these variables is a number not a string strings are in double quotation marks or single quotation marks numbers are just values like 67 or 255 and we embed them here inside of this variable now that we have the color we can simply say body. Style background color and rather than using the name of our color we can use this RGB value so we can say color like that and now when we call the random color function so let's do it down here you'll see that we get a random color so every time I save you'll see we get a unique random color because it keeps refreshing the screen for us or every time you refresh you'll get a different random color so now what we need to do is make it so when we pass press this random button it does that so all we have to do here is for the random button we just go on click is equal to random color make sure you put your set of parentheses here to call the function and when we call random we get a random color on the screen so that's going to wrap up project number one I know there was a lot of explanation there but I just want to make sure for the first one at least I'm kind of teaching you all of the Core Concepts now we'll start to pick up the pace just a little bit as we head into project number two all right we're moving on to project number two which as you might recall is a palindrome Checker so we're just going to check if a string is the same forward as it is backwards okay how do we do this well let's begin by creating our files so we're going to have our main. HTML file and we're going to have our index.js file now I've already done this for project one so if you're confused at all go back to project one I'm going to go a little bit faster now than I was before so again if it's too much go back and watch Project number one we're going to start by typing HTML Colin 5 and then we get our auto complete if that doesn't work for you go to Project one and you can just copy the HTML and you can remove what you don't need or you can pause the video and you can type this out you don't need these you can remove those from the screen I'm going to zoom in a bit so it's a little bit easier to read okay so now we're just going to change the title of our document so rather than having this we're going to have palindrome Checker and for the interface for this one is going to be quite simple we just want to have a title that says pal drum Checker and then we want to have the ability for someone to type into a little box and to press a button to check their string so we're going to start inside of our body by having an H1 tag and we'll just say pal in Drome Checker like that and what we can do if we'd like here is we can rerun the live server which will give us access uh to view this code as we're writing it so what you'll notice here is that if you look at the bottom right hand side of the screen you'll see this thing that says Port 5500 if that doesn't work you can also just type live server the way I open this by the way I know I want to bit faster is I hit control shift and the character p on my keyboard This opens the command pallet in VSS code so it's either command shift p or control shift p depending on your operating system and then I typed live server when you do that you'll see you have open with live server and stop live server so first I'm going to stop the live server because I had that running before so you saw that stopped it I also could have just pressed the button down here and now if I click on go live or again I have control shift p and then I go live server and then open with live server it's going to open up that HTML document which you saw right here so what we'll do is we'll just leave this on the right hand side of our screen we'll move this over to the left uh so that we can kind of see what we are doing as we write the code now let's make this a little bit smaller so that we can actually see the full title okay so now we have our title the next thing we want to do is create an input box as well as a button for the user to type in so in order to get an input box in HTML you simply type input now this is what's known as a self enclosing tag meaning you can simply type a forward slash and the closing angle bracket like this you don't need to type like SL input like we had before in fact that won't work if you do that and here for the input we're going to specify the type of the input which is going to be text and we can give this a placeholder and we can say type something okay let's make this a little bit smaller so now you'll see a little input box pops up here and I can type inside of this that's the basic uh HTML tag you can also use this for numbers dates all kinds of stuff now as well as the input button or input box sorry we just want to have a button that you can click on so we're going to say button and then for the button this is going to say check you'll notice a button appears and now nothing's happening because we don't have this linked up but you could click on the button okay lastly we're going to link this to our HTML or to our JavaScript story to do that we're going to create a script tag at the very bottom of the body of our HTML document then we're going to say source is equal to index.js again recognizing that this only works because the index.js file is inside the same directory as our main. HTML file okay so make sure you have that set up all right now we're just going to give an ID to our input the reason for that is I need a way to actually get what the user typed into the input box there's some other ways to do it but the cleanest way is to Simply give this an identifier so we're going to say ID is equal to you can call this whatever you want but I will just call this the input okay again don't use any special characters just use kind of a normal string like this okay so that's pretty much it for our HTML we've got our very simple interface Here and Now what we want to do is start writing in our JavaScript so let's open up our Javascript file and we'll do the rest of the work from here other than a few small things We'll add in the HTML okay first thing we need to do is figure out how we can get what the user has typed in this box because before I can check if it's a paland drum well I need to know what it is that they typed right so to do that we're going to say const input we're declaring a constant variable one that's not going to change and this is going to be equal to document. getet element by ID now what this allows us to do is get one element by its identifier right which is the ID that we set now in this case the ID is input so what I do is I put input inside of Double quotation marks just to quickly show you we have ID equals input if it was input one we would go here and we would change this to input one okay I know it's confusing because I did the same thing but just it's the ID okay it's not the name of the tag it's the ID we're doing it differently this time that we did in the first um project okay so now we've got the element when we have the element it gives us access to this whole input box so we could change the styling we could clear what's inside of it we can also get what's inside of it it but that's not what this does this just gives us the whole tag or the whole element itself and then if we want to get the value that's different so let's write a function here called check okay and inside of this function all we're going to do is we're just going to Output what the value is so to do that we'll say const value is equal to input dot you guessed it value now you might notice that I'm putting these um semicolons you don't need them in Javas script but they're what's known as a line Terminator this just means we're ending the current line and then moving to the next one again you don't need them like it's fine if you don't have them but if you see me add one it's just out of habit anyways what this does is give us the value of the text input so now if I'd like I can use something known as an alert and alert is a message that will pop up in the browser and I can simply alert the value so now all we need to do is make it so that when we hit check here we call this function and it will tell us what value is so to do that we go to our button here and we say onclick is equal to check with two sets of parentheses okay or sorry one set of parentheses because we have the opening and we have the closing so now when we click this button it calls the check function the check function gets the value of the text input and Pops it up on the screen Let's test it with test click on this and notice it shows us in the alert box test okay so now we know how to get the value now what we need to do is figure out how to determine if this is a palindrome now recall that a palindrome is simply something spelled the same forwards as backwards so if we have Dad that's a palindrome if we have dog not a palindrome okay so how do we check this well there's a bunch of ways and I challenge you at this point if you know some basic JavaScript try to see if you can figure this out but I'm going to walk you through it now the easiest way to do this is for us to Simply reverse the string and then just compare it to the original string and see if they're the same so what I mean by that says okay we have the string dad so let's now reverse it well that gives us Dad we're going to check if they're the same they are the same so they're palum whereas if we have something like dog and we reverse this we're going to get god well these are not the same okay so it's not a pal drum so now we got to figure out okay how do we reverse string now I'm going to show you a fancy way to do this and then we can go through a manual method as well so I'm going to write a function called reverse string now this is going to have the parameter St Str this is a value that will give us input to the function a function is simply a reusable block of code that you can call as many times as you want so what we're going to do is we are going to First Take This string so a string is anything again in double or single quotation marks and we're going to convert this into a list or to an array now an array is a collection of elements that are ordered so we can have an array that has the values like this okay now the way you access the elements in an array are by using its position or its index the first position in the array is always the zero with index we always start counting at zero in programming so here this is position zero or index zero this is index one index 2 oops let's go here index 3 and index 4 okay now the interesting thing with arrays is there's all kinds of what's known as methods which are essentially operations or functions that we can call on the array they can manipulate them so what we can do is we can take our string which is a different type right it's just a set of texts essentially we can convert it into an array we can then reverse the array and then we can take the array and turn it back into a string it's not the most optimal way to do this but it is a way uh that we can kind of do this in a single line and I'm going to show you those operations so what we can do is we can say return Str str. split now what do split does is it takes a string again anything in double or single quti marks and it splits it based on what's known as the delimiter which is the value that we specify here now often times you would use this split operation to take a string and maybe get all of the words that exist to do that you would have a delimeter of a space and that means that we're going to look for all the spaces and as soon as we see one we're going to take whatever's on the left side and whatever's on the right side and we're going to add those as unique elements into an array so if we were to split on hello world and we used the delimeter of a space it would give us hello and World in an array so now we have all of the words like that are in a sentence right now if we split on an empty string all that means is take every single character and put it into an array so in the case where we have hello it just turns that into an array that has those five characters so we're going to split now after we split we're going going to reverse now notice I'm using this dot notation you can use this on certain data types and it's like calling a function on that thing so we're calling split on the string then we take all of this and we call reverse on it so we're now reversing the array now that we've reversed the array that's going to give us the Reversed array so in the case of dog right that would give us g o and d and what we want to do is we want to compare this to the original input but remember the original input is simply the string dog right in in this example that I'm using so what we need to do is need to now take this array and we got to convert this into the string version of it that looks like this how do we do that well there's another method we can use which is joyan and what join does is it takes all of the different elements that are in our array and it combines them together into a string with a separator or a delimiter now in this case if we use the empty string delimeter we just get all of the characters smooshed together join is kind of the opposite thing of splitting right it's taking the array elements and turning it into a string whereas splitting is taking the string elements and turning it into an array if I were to join with a space then we would get this but when I join with the empty string we just get the string okay so that was my long explanation of how these methods work again I'm trying to be really thorough especially with the beginner projects let me know what you think of this in the comments okay so we have reverse string so now we can reverse a string so now let's just do a test and let's say okay const reverse is equal to reverse string of value all right so what we're doing now is we're calling the reverse string function we're passing in the original value we're now returning a re reversed version of that so now let's simply alert reverse okay now let's go here and go hello and notice we get the Reversed version now I need to make sure I remove the space here because you can see it's kind of spaced out so let's run this again again every time when I save this it's going to automatically update so just make sure you're saving it and you see We Get It reversed okay so now that we have It reversed we're just going to check if it's the same as the original so to do that we're going to make an if statement an if statement allows us to check a condition a condition is something that evaluates uh to true or to false and the way that we can do this condition is we can say value equals equals so two equal signs to reverse now it's actually best practice to do three equal signs I don't really want to get into all of that in this second but either two or three equal signs doesn't matter for this example and what this will do is it will compare these two values for equality it's going to check are these the same that's what happens when you use multiple equal signs don't think you can use like four or five equal signs it's just two or three they have different meanings but in our instance they'll do the same thing so we're going to use three here we're going to say if value is triple equal to reverse then inside of a set of curly braces we're going to alert and we'll say pal in Drome like that okay I'm just making it a little bit excessive so that's if this is the case then we go inside of these curly braces and we do this we have an alert otherwise which is where this else statement comes in so we're going to put an else and we're going to put a set of cly braces we're going to alert and we're going to say not today exclamation point okay so that's it um this is a basic check if statement again you have some condition in this case we're checking if these things are the same this is going to give us either the true or false value if they're the same it's going to give us true and if this thing is true we do this otherwise we do this right that's all how this works so if I go here now and I type dog we get not today but if I type Madame I get palindrome okay so now the thing is is you might be notice when I click this it keeps this input here I don't really want that it's going to be a little bit better if I actually remove this input after I press this button so I can do that by simply going here and saying input remember that's this variable here do value is equal to an empty string so rather than um getting the value we're actually setting the value here so I'm setting the value to an empty string so now you'll notice if I type hello and I click on check it says not today and then it gets removed right we change the value to be nothing this is just clearing the value from the input field okay so I think that's pretty clear that's going to wrap up this video or this not this video sorry this project now let's move on to the next one so now we are moving on to project number three which is our random quote generator let me first stop the live server here so this is going to stop and let's make a new folder here called three and let's go in here and make our files so main. HTML and index.js I'm going to go a little bit faster again or just going to progressively pick up the pace if you're getting confused go back to the previous project because that's where I really break it down in more detail okay so for main. HTML we have a random quote generator we're going to begin by setting up our HTML document so we can type HTML coin 5 and hit enter let's remove this so we can view it more again if that doesn't work for you then you can simply pause the video and type this out or you can go and copy some of the other projects also this code will be available on GitHub in case you want to copy it you don't need this so you can remove that if you want although you can also keep it and for the title we're going to change this to be the random quote generator now I'm going to copy this and we're going to create a header tag here inside of our body so we're going to say H1 random quote generator and now we just need to Simply make the interface now for the interface we're simply going to have a paragraph tag which is this P tag just for some standard text we're going to say the ID is the quote just so we have a way to identify this tag and this is where we're actually going to put what the random quote is so when we generate it from JavaScript we're going to populate this paragraph tag with it now we're going to create a button now for this button we're just going to say generate quote and inside of the button properties we're going to say onclick is equal to and we're going to call a function called generate quote with our double parenthesis like this again if it's confusing please go back to the other video it's already explained how all of this stuff works now we haven't yet written this function in JavaScript we're going to write it in a second so now all we need to do for this interface is we need to make our script tag so we're going to say script at the bottom of the body make sure it's at the bottom source is equal to index.js keeping in mind this only works because index.js is in the same directory as our main file okay that's the HTML let's go live again this time and now you can see that we have this generate quote random quote generator when we click this nothing happens that's fine okay quick thing by the way at this point I guess I'll show you that if you're on Chrome if you right click and click inspect it's going to bring open this kind of developer view if you click on Console you can see any errors that might be happening so if you're getting some issues you can see in the console what's going wrong I should have showed that earlier but I'm I guess we didn't have any mistakes yet uh so if I refresh you see it gets cleared and now if I press this button it's telling us oh uncaught reference error because we haven't defined this function okay just wanted to quickly show that to you anyways let's now go into index.js we pretty much done with the HTML and let's write our random quote generator so first things first we need some quotes now I'm just going to copy in a bunch of these you guys can kind of find your own quotes you can write them or you can just stop and you can write these out or you can go to the link in the description there'll be a GitHub link where this finished project code is and you can just download all of these quotes or kind of copy and paste the text and paste it in just to get started if you want to just test this you can just have quotes that are like one two three whatever okay something super simple now what we're doing is we're putting this inside of an array now remember I was talking about an array in the previous project where this this is an ordered collection of elements where each one of these quotes here even though they're quite long they have an index or a number that allows us to access them so this is index zero this is index one this is index two index 3 index 4 Etc and that's how we'll grab our different quotes from our kind of collection of quotes here so what I'm going to do is create a new data structure that we haven't seen yet with a variable called used indexes now this is going to be equal to a new we're going to use this new keyword which I'll discuss in a second set now let's quickly discuss a set so a set in JavaScript is a unique collection of elements now the set typically is denoted with the curly braces although in JavaScript doesn't really have that type of notation and inside the set you can only have values that are unique so I could have like one three four but I can't have two ones okay you just have a single instance so the set doesn't keep track of order it doesn't keep track of quantity it just tells you if you have something or if you don't have something so we know okay yeah four exists in the set and we know that five does not exist in the set that's all a set is used for now you might be saying well Tim can't I just use an array for that with all these elements you can but the thing with a set is it's actually more performant so it's a faster data structure when all you care about is if an element exists or if it doesn't exist in our case when we're going to be generating these quotes what we're going to do is we're going to put the index index of quotes that we've already used inside of the set so that we can check really quickly if we've already used that quote or not so that way we don't recycle the same quotes until we've gone through all of them that's what makes this project a little bit more complex we're introducing this set now in this case I use this new keyword now you have to use this with some certain data structures in Python essentially what we're doing here is we're creating a new instance of the set class you don't have to worry about all that terminology it doesn't matter that much for a beginner but it's just a bit different than creating something like an array where you can just Define it like this okay so for the set and for some other data structures you need to actually use the new keyword so I'm saying okay we're making a new set all right that's it so now we have the two variables quotes and sets what we want to do now is we want to populate the paragraph tag with a quote so we'll Begin by simply randomly picking a quote and then we'll start using this set to make sure that we're not recycling the same quotes so we're going to say function generate quote okay now inside of here the first thing we've got to do is we've got to get access to that paragraph tag so this one right here so that we can set its value now what I'll do is I'll create another variable here I'll say const uh and this can be quote tag is equal to document. get element by ID and the ID of this I believe is simply quote we can go back and reference that and you see yes it is quote okay so what we're doing is we're just grabbing access to that paragraph tag right now you don't see it because there's no text in it but when we start using it it will be I'm actually just going to call this quote element so it's a little bit more clear okay inside of here if we want to set the text of this paragraph tag we can simply say quote element Dot and we have a few options but the option I'm going to use here is inner HTML with all capitals for HTML what this does is set what's in between the opening and the closing tag you can use this on other tags as well but for us we'll just use enter HTML and we can just make this equal to like hello world for now just to test it out so when I press this now you should see that hello world appears in the tag if I refresh and press it again you see that we're populating the inside of the HTML of that paragraph tag with Hello World okay so that's kind of what we're going to use to actually set quote so now what we've got to do is we got to randomly pick an index inside of our quotes array select that quote and then populate it inside of the paragraph tag now we've already kind of done this but let's do it again we're going to say const random idx is equal to math. floor and then inside of here we're going to say math. random and we're going to multiply this by the quotes. length Okay so we just use a a few new pieces of syntax let's quickly talk about this math. random as we saw before randomly generates a value between 0 and one now what we're doing is we're multiplying that by the length of our quotes so you can use this do length property tells you how many elements are inside of the array and that's going to give us now a random value that's between zero and whatever the length of the quotes are in this case I think we have like 10 quotes or nine quotes or something like that okay now what I'm doing is I'm saying math. floor now what floor we'll do is always round down the reason I'm always going to round down is because the length of the quotes is actually going to be one index beyond what we can access so let's say here I don't know how many this actually is but let's say we have 10 quotes okay if we have 10 quotes this last quote has an index of nine right not 10 nine so if I try to access quotes at index 10 we're going to get an error it's going to tell us that this index doesn't exist so what I'm doing is I'm saying okay well will generate a random number between and this is going to be 0 and one and multiply by the quotes. length the thing is it's never going to actually be one the most it will be is like 0.99999 whatever right so when we take that and we multiply it by quotes. length we might end up getting something like 99999999 okay if that's the case we simply take that value and we round it down to n and now we're getting the last quote as opposed to if we were just to round it it would round up to 10 and then we'd be trying to access an index that doesn't exist okay so that's why I'm using floor there's also a seal that will round it up also not sure if you guys can hear the superar behind me but I'm currently in Dubai and that has proven to be a bit of an issue that there's too many Ferraris and Lamborghinis driving around so kind of a fun fact but uh yeah that's where I'm recording and if you heard that well there you go sorry not much I can do about it okay so we have random index now that we have the random index we're going to use that to get one of our quotes okay so to do that we're going to say cost quote is equal to and this is going to be quotes and this is going to be at index random index Okay so we've generated a random index we've now used that to access the quote in our array and can you guess what's next well we're going to populate the paragraph tag so we're going to say the quote element. innerhtml is equal to the quote okay so now let's run this and it's see starts giving us random quotes however you'll see that sometimes we'll get the same quotes and like pretty um close together because we don't have that other component that we're going to implement now okay so let's make this a little bit larger all right now what we want to do is we want to make sure we're not using the same quotes so to do that we're going to keep generating a new random quote or a new random index until we haven't yet used that so to do that we're going to make a Loop and we're going to say while true okay and then we're inside of curly braces here we're going to take all of this and we're going to paste it here now what we're going to do is we're going to generate this random index and we're first going to check and make sure that we haven't used it yet so we're going to go here and we're going to say if the used indexes do has okay so this is how you check if the set has a value we're going to say if it has the random index that we just generated then what we're going to do is use this continue keyword now notice that I didn't actually have to write the um what do you call it parentheses here or these curly braces the reason for that is because if you only have one thing you want to do with an if statement you can just write it directly to the right or directly below the if State uh definition you might not have known that in JavaScript but it's kind of a nice shorthand syntax anyways what I'm saying is okay if the used indexes has this random index it means we've used this quote before so we're just going to continue and what continue will do is simply bring us to the top of this Loop now this Loop is going to continue looping while this condition is true so I say while true so while this is true it's always going to be true we keep going through here and then if this is the case we're going to continue so just going to bring us up to the top of this Loop now you might be asking well doesn't that mean we're never going to exit the loop well as of right now yes however I'm going to show you how we can do that so if we are in a position where this does not have the random index what will happen is we won't continue which means we're going to continue down to these lines kind of a weird way to say that but we'll essentially advance to these lines if this condition is not true which then means down here I can say break and what break will do is break me out of this walloop so as soon as the break keyword is encountered you simply go to wherever the wall Loop is finished and you just continue there that that's all that does okay so it just gets you out of the loop if you have well true you're going to need a break to make sure you don't have an infinite Loop now the last thing we need to remember to do is to add the index we used to that set so we keep track of it so we're going to say used indexes. add and we are going to add the random index so what that's now doing is adding that to the set and telling us okay next time you try to generate a random index don't use this one because we just used it before all right we're almost finished with one more thing but I want to just show you that this is working so if we run through here still functioning however if we do this enough times you're going to see that we will actually get an error and no more quotes will be generated notice no more generated the reason why that's happening is because we've run out of quotes that we can pick from and right now the browser if I refresh you'll see it's actually in an infinite Loop so I need to close this out uh the reason it's an infinite Loop is because of something we implemented that I'm going to fix for us in a second so let's just go live again and we'll see if we can figure out what's going wrong here okay so let's have a look at this code and before I kind of answer the question here try to ask yourself or try to figure out let's zoom out a bit why did I just get that error where my browser was kind of Frozen like it wasn't generating any more quotes pause the video if you want to try to figure it out I'm going to go into the answer now so you'll notice what happens here is we have this while loop we say while true we generate this random index we then check okay well does it exist inside of the set if it does exist we're just going to try again so we could be trying quite a few times but eventually we're going to get an index that does not exist in the set right so then what happens is we will advance down here and we're going to grab the quote set it and then add it to the set now at some point in time what we'll happen is we will have exhausted all of the available indexes and we will have used all of them so what will then continue happening is we're going to be in this wall loop we're going to try to generate a random value we'll do that but no matter which one we generate it's always going to be inside of the set which means we're just going to continue doing this portion right here a ton right that's what's going to happen so how do we avoid that well the way we avoid that is right here before we go in the while loop we make sure we do actually have a quote that we can pick from so to do that we can say if the used indexes do size for a set you use size for an array you use length we're going to say if that's greater than or equal to the quote. length what that tells me is that we've used all of the quotes right if the number of elements which are all unique inside of the used indexes is equal to the length of my quotes that means we've used all them so what what do we do well we simply reset and we say used indexes do CLE now do CLE will simply remove all of the values from the set which now kind of sets this back at the beginning State and allows us to continually keep generating uh new quotes but now kind of right back from the beginning so now all of the quotes are available and we go through the exact same thing again once we use all of them then we can start to recycle them so this way you're only ever going to see the same quote uh in the number of quotes which is equal to the number of uh quotes that exist here I know that's a bit of a mouthful but that's kind of how this works so now if we start generating them you'll see that we're never going to get the same quote until we've exhausted all of them and then we'll get a random one and then same thing we won't get the same quote again until we've used all the other ones that exist all right so there you go that is the random quote generator getting a little bit more complex but hopefully you guys were able to handle that let me know what you think if you have any feedback for me and let's move on to project number four all right we are continuing project number four let's make a directory and let's make our two files main. HTML and index.js now for HTML you already know the drill if you watch the previous projects we're going to go a bit faster HTML colon 5 that is going to create for us this kind of template HTML file you do not need these two if for some reason that shortcut does not work you can simply type out what I have here let me zoom in a little bit let's set the document title this is going to be our timer SL stopwatch it's actually really more of a stopwatch so let's call it a stopwatch okay and inside of our body tag let's give an H3 that says stopwatch and now let's run our live server we're going to dispose of the old one and we're going to rerun this new one and you're going to see that stopwatch appears in our browser Okay so we've got the basic setup what we're going to do for the stopwatch is we're going to have some functionality that allows us to start stop and reset a timer that will appear on our screen now I just want to be clear I'm going again a bit faster in this one if it's too fast for you or too complicated go back and watch some of the previous projects because I'm much slower in Project 1 2 and three but as we go through I assume you've watched those or you're already experienced enough that I don't need to expl explain like the really really basic stuff okay so now that we have stopwatch what I need to do is start setting up the user interface now for the interface we are going to have something that shows us the time and then we're going to have three buttons start stop and reset so let's begin with the time I'm going to put this in an H1 tag we're going to give this an ID of time and we're going to start with 0 0 0 0 okay so this is just showing us the minutes and seconds we can do with hours if we want but for now we'll just do minute seconds and you'll see how you can adjust this to go as you know long as you want now we're going to have our buttons for our buttons we're going to have onclick for our onclick we're going to call a few functions which we will then write in the JavaScript which will handle when we press these buttons essentially so right now they're not ritten yet but we'll write them in a second so the first one's going to be start clock and then inside of the button we're going to have start okay let's copy this and paste it twice and just adjust these now to be stop and reset okay so now rather than start clock it's going to be stop clock and rather than start clock it's going to be reset clock Okay so we've got three different functions that we're going to need to write start stop reset now we need to link our JavaScript so we're going to say script source is equal to index. JavaScript and that's all we need that is our HTML so now you see we have start stop and reset we have our z00 we have our stop watchat heading and now we can go into index.js and we can do the fun stuff which is the JavaScript okay so for our JavaScript we need those functions so let's start by stubbing those functions out when I say stub that just means you write the function but you don't actually write the logic for it okay so we're going to say function start clock we're going to say function stop clock we're going to say function reset clock okay so now we have our three functions we're going to need to to write in a second now before we go any further there's a few variables that we're going to need here and I'll talk about how we'll actually do this timing component which involves using something known as a set interval now first we need to keep track of how many seconds have elapsed okay so we're just going to track how many seconds of elapse since we started the clock and then if we stop the clock we'll just stop counting the seconds pretty much and if we reset we'll reset them right otherwise we'll just keep adding one to it every second which will allow us to well have a stopwatch so let let's begin by having our variable and we're going to hold this seconds elapsed okay now this is going to be equal to zero because when we start the clock well 0 seconds have been elapsed and until you start it well 0 seconds have elapsed right we're then going to have something known as the interval now for now we're going to set this equal to null which just means we're kind of defining a variable and we're saying okay we're going to change this later but for now we're going to make it null null just kind of means nothing empty right undefined I mean it's a different value but in this case null is fine okay so we're saying second elapsed and notice we're using let when we use let that means that we can actually change this value later on as opposed to if we had con then we wouldn't be able to change it okay now we're going to grab the actual time uh kind of paragraph tag here or header tag so that we're able to modify it later so we're going to say cons time is equal to document. getet element by ID the ID of this was time and this is okay to be a constant because this does doesn't change just what's inside of it will change nice so now what we need to do is figure out well what are we doing when we're starting the clock stopping the clock Etc so to start the clock we'll go in here and we'll start writing this we need to create an interval now an interval is something that can run at any predefined kind of period of time so every second every two seconds every hour every 10 minutes whatever you want okay you can specify the time in Mill MCS which I'll show you and what it will do is call a function whenever that increment hits so every th milliseconds or one second we will increment the clock right so we'll say second elapsed plus equals 1 so to do this we're going to say interval is equal to set interval this is a function that's built into JavaScript so you can just write set interval and then what we do is we call a function which we'll write here in a second and we put the number of millisecond so we want to call this function in between so in this casee I'm putting a th and now we need a function to call so we're going to make a function we're going to say function timer like this okay and inside of timer all we're going to do is say second elapsed Plus+ now plus plus simply means add one that's all it means it's equivalent to plus equal one it's equivalent to this equals second elapse plus one okay so we have second elapse Plus+ and now what we do is we put timer just the name of the the function notice I don't call the function I just put the name of the function here as the first argument to the set interval function so what's going to happen now is when we start the clock we're going to set this variable interval to be equal to the set interval which calls this timer function every 1,000 milliseconds or every second the thing is if I do this now if I refresh and I run and I click Start you'll notice that nothing's actually happening because we're not updating this so what we need to do now is we need to update this every time we change the value of our timer or of the second elapsed okay so to do that we're going to make another function and we're going to call this set time now the set time function is simply going to be responsible for telling us how many seconds have elapsed in updating this value right here so all we can do in here just to keep this super simple for now is we'll say time.in HTML so let's go here is equal to and then this is just going to be time okay or sorry not time this is going to be seconds elapsed and now inside of the timer after we increment the seconds we're going to call the set time function so what happens now is okay we have the interval every second we call timer it adds one to the number of seconds we then call set time time goes here and it then changes this text to be equal to the number of seconds you're going to see what happens but let's run this out and you'll notice that it starts simply counting up right 1 2 3 four five however what will happen if we let this run long enough it's going to start giving us 61 62 63 it doesn't really look like that kind of stopwatch we're looking for we want it to be in that hour or in that minute second notation and also these buttons obviously don't work and when I click Start again you'll notice it starts counting even faster because we now have multiple intervals that are running so we got to fix all of that I'm going to show you how that works okay so first things first let's make it so that when we adjust this it actually looks proper how do we do that well we need to determine first of all based on how many seconds have elapsed how many minutes have elapsed and then how many seconds have elapsed so to determine the number of minutes we simply need to take the number of seconds we need to divide it by 60 and we got to figure out the even division of that right so we don't want something like 2.3 we just want 2 minutes and then the remainder we'll have as our seconds so we're going to say const minutes is equal to and this is going to be second elapsed divided 60 however again we don't want to have a decimal value which we're going to get right so so we want to put math. floor now we're not rounding we're flooring meaning we're going down to the nearest whole number because even if we have something like 1.99 999 minutes we don't actually have 1.999 minutes we have 1 minute and 59 seconds right or whatever the remainder value is which is what we'll calculate next so we always round down so next we're going to have const seconds now the number of seconds is simply equal to the second elapsed mod 60 now the modulus operator is the remainder operator this is the percent sign what this will do is give you the remainder after division by 60 so if we had something like 61 mod 60 it gives us one 62 mod 60 gives us two 59 mod 60 gives us 59 because you cannot divide 59 by 60 evenly so you get 59 as the remainder okay so now we have the number of minutes and the number of seconds what we need to do is format this into a nicely padded string that will appear here so right now naively you might say okay well Tim I remember you showed me this back tick trick if you look at the Tilda on your keyboard which is the squiggly line it should be on the same key as that back ticks kind of look like single quotation marks but they aren't typically in the top leftand corner of your keyboard what you can do is put a dollar sign and then two curly braces like this or an open and closing one and you can put minutes colon and then we can do the same thing here with seconds okay so we do minute col it seconds and what this is going to do now is take these numeric values and embed them inside of a string with a colon separating them when we call this set time function so now we're not quite done but watch what happens if I click Start you'll see we get 0 1 02 03 again still doesn't look great we need that leading and trailing zero which I'm going to show you how to get but this is a decent start and now again if we were to have this go up to 60 you'd see that it would start showing us the minutes now to prove that let's just make this 61 and let's go with start and then notice you get 1 minute 3 seconds 1 minute 4 seconds Etc okay let's make that back to zero all right now that we've got this we've got a pad our value so padding the values simply means okay well we're going to look at the values and if they're not two digits then we're just going to add a leading zero right so if it's less than nine pretty much add a leading zero we can do this in a function so I'm didn't mean to do that but I'm going to say function pad start this takes in a value and what we're going to do is actually return something from this function this just means we get a value back when we call it so we're going to say return we're going to take our number because that's what's going to be passed inside of here and we're going to convert this to a string when we convert it to the string that allows us to use this method called pad start and for pad start we specify how many characters we would like the string to be in this case I would like the string to be two characters so I put two and then we put the character we would like to pad string with so now what happens is we take the numeric value convert it to a string and we pad it with a leading zero if it is not two digits long hopefully that makes sense so now for minutes and seconds we can simply just call these with pad start and that's going to return to us a string that has those padded zeros so we're going to say pad start like that so we're taking this as a value passing this into the function it's then returning to us a value that we will bed embed St inside of here in the string so if we go ahead and we can refresh this and we start you'll see now that we get a stopwatch that's a little bit more familiar and what we're actually looking for now the next thing we should look at at this point is what happens when you press Start multiple times because you'll notice if I click it it's just counting really really fast because it keeps making these new set intervals now that's not what we want what we would like to do instead is essentially clear the previous interval if we click start again and we want to also reset the timer so what we'll do is we'll say okay well if we had this clock right so if we've already started it so we're going to say if interval then we're just going to reset the clock and we'll write the reset clock function so sorry let me just scroll down here what I'm doing is I'm checking before I make this new interval I say okay well if the interval exists reset the clock resetting the clock should reset everything for us and then we will just redefine the interval here okay that's pretty much all it's doing inside of the reset clock what we're going to do is we're going to stop the clock we're going to set the seconds elapsed equal to zero and then we're going to set the time just so that it shows us 0 0 again and then inside of the stop clock we're going to say clear interval and we're going to clear this interval now I have some chaining of functions that's actually intentional cuz I want to show that to you in this project it's a bit of learning thing but you can see that what I'm doing again if the interval reset the clock so now we go to this function inside of this function when we reset the clock the first thing we got to do is stop the clock so when I click stop the clock I clear the interval now when I clear the interval all that does is just stop counting okay it doesn't change what's like being appeared here it just stops making this go up by one every time so that's what stopping does now after I stop I now reset the second elapse to be zero so that's resetting the clock value and then I set the time and the reason I set the time is so that we see that we've actually reset the clock back to zero okay because if you don't call this you're not going to see the update on the screen because that's what's updating the screen so now if we just press stop clock it doesn't actually show us anything different on the screen right it still stays at like seven or eight seconds or whatever is appearing it just cleared the interval which now means if we start timer again it doesn't reset it just starts to count so let's look at this if I click Start starts counting if I click stop doesn't reset just stops counting I click Start then it starts counting from the beginning now actually that gives me reason to want to do something else so let's remove inside of start clock if interval reset clock and instead of that for start let's actually just clear the interval interval so we can actually say how do I want to do this here yeah I'll say if interval stop clock and then I'll just make the interval again now I know this seems a little bit weird I'm going to explain this but this is actually something I just caught while I was doing it so I'm starting okay I'm stopping and when I start it starts counting again okay so the reason I did what I just did there is don't want when I click Start for it to reset and then start counting I just want it to resume what it's at and I only want the reset button to reset it back so what I did instead is I said okay well if an interval already exists let's remove that interval so we're saying clear interval and then we'll just set it again that way we never have like two three four five intervals going at the same time we've just removed the previous one and then we've reset it so we've just kind of continued it on that's what I'm doing when i'm start the clock so whether I'm starting at zero or whether I'm starting with an interval already it doesn't matter right we just keep counting so if you press start when it's already started then it just keeps going now when I click on stop again it's going to stop if I click on start it will start I click reset brings me back to zero I can start and I can reset while I'm started and you guys get the idea okay so that is the stopwatch hopefully that was clear all of this code will be available from GitHub now let's move on to the last project so let us now move on to project number five now this is the most advanced project by far I'd probably classify this more an intermediate project but if you've made it through all the other ones and this one is kind of a natural stepping stone so I think you'll still be able to follow along with it quite fine I just want to be clear that I'm going to go again even faster so make sure you watch the other projects if you haven't because anything I explained there I'm not really going to recover here so let's begin by making a folder for project 5 and inside of here let's call this main. HTML and let's make another file and this will be index. JavaScript so we've got two files main. HTML index.js we're going to set up our HTML boilerplate at this point I think you've heard me say this many times so I don't need to repeat myself just get the HTML up and running for the name we are going to call this the to-do list remember this is the persistent to-do list which will remember the items that we had we're going to stop the live server from our previous project and we're going to restart it for this this one which will open a blank browser tab now inside of our body we're going to link our script we'll just do this first and we'll say source is equal to index.js to get that sorted out we're going to have a H1 tag this is going to be the to-do list we're then going to have an H2 tag and this is going to be the items list so for the to-do list we have two components we have something that specifies all the items in the list and then we have kind of a place where we're able to actually add the item right so for items we're going to create a div div stands for division and it's something where we can actually just Place items inside of so I can take all my items and kind of render them inside of this div so we're going to say ID is items so we're able to access that we're going to create a very basic input so that someone can add an item so we're just going to say input like that remember this is a self- enclosing tag you don't need the sep for closing tag the ID is going to be the item input the type is going to be the text and the placeholder is going to be to add an item okay save that it should appear on the screen next we're going to make a button and the button is going to say add item and then for the onclick we're going to call the function add item like that okay that is all of our HTML zoom out so you can see all of it again we have our header we have the h2 tag for the items we have the div this is where we're actually going to render all of the dynamic items so when we do something like hello and we click add item it's going to appear inside of the items list okay then we have the input so that we can add the item and the button obviously which will take that and add it to the screen so now let's go to our JavaScript and let's start on so let's start first of all understanding what it is that we need to do and then writing this out this is going to be a little bit longer so so it's worth having a bit of a plan for what we want to do here so what we need to understand first of all is that we want to store these items persistently that means that we need to have the ability to well store them we also need to have the ability to load them now one thing to consider is that we're going to probably have an array of items right this is the order in which we have our individual items we're going to have the ability to remove items and we need to show the reflection of our items on the screen so when we first load them all we got to render them on the the screen means we got to actually put them there and then when we remove them we got to remove the correct item and then kind of rerender them onto the screen so there's a few things we got to do right we got to save items we got to load items we got to render items and we have to add and we have to remove items so what we can do is start writing out some of the core function names so we know those operations and we can tackle them one at a time so we're going to say let items is equal to an empty array we'll get into some other things in a second but for now we understand that we're going to have items ins not of an array we now know we also need to load items so we'll write a simple function so that we remember that that's something we need to do we also know we need to render the items onto the screen so we'll write a function for that we know that we need to save the items so let's do that and we know we need to remove and add so we're going to say function add item and function remove item okay so that's kind of that the first thing I think makes sense for us to do is to figure out how to display an item on the screen once we know how to display an item then it's a little bit easier for us to understand loading saving adding removing Etc but we need to say okay let's say we had some items in here right that we wrote ourselves how do we show them on the screen dynamically because we might have one item might have five items we don't know we're going to have to kind of loop over all of them and show them on the screen so for render items what we need to do first of all is understand where do we want to put the items well I want to put them inside of this div so I need to access that div so we're going to say const items div is equal to document. getet element by ID and this is items now let's just take this and put this at the top of the screen and let's start writing our render items function so inside of render items the first thing I'm going to do is I'm I'm just going to clear this div to make sure that any other items that were in there I get rid of because I'm just going to read them in so kind of every time I'm rewriting all of the items it's not the most optimal thing in the world but it's totally fine for this example so I'm going to say items div. innerhtml is equal to null and all that's doing is just removing everything that's inside of the items div so now we've got a fresh slate and we can start adding our items now what I want to do is I want to Loop through all of my items so if I have one item I want to add one item if I have 10 I want to add 10 right I want to Loop over them and I want to create what that item is going to look like and then put that inside of the div so we start with a for Loop and a for Loop is what you use when you know the number of times that you want to iterate a while loop is what is what you use when you don't know the number of times you want to iterate so in this case we know the number of times it's equal to the number of items so I'm going to say constant and inside of square brackets I'm going to say idx which stands for index and item of object dot entries I'm going to explain this don't worry and then items and I'm going to put a set of square brackets now what this does is it will take all of these items it will essentially give us pairings now the pairings are going to look like this zero item one one item two what that means is that the index here is going to be equal to the index corresponding with the item which will be stored in this item variable so when you kind of do object. entries here and you pass an array it just allows you to Loop through and to access both the index and the item at the same time which is what we want there's other ways to do this but I wanted to show you this kind of neat syntax in case you haven't seen it now what I want to do here is for now we're just going to create some text and this text will just be whatever the item actually is and we'll just add that inside of the div but later we're actually going to add another div inside of the div that's going to contain the text content as well as a button okay so let's look at how we do this we're going to start by saying const text is equal to document. create element now we can create an element in JavaScript and then put that on the Dom the Dom is essentially just the interface that you see over here and by the way oh yeah the two list is already appearing okay so that's good so we're going to create this element P now we have this element though it's like doesn't really have anything it doesn't have any text it doesn't have any styling so what we're going to do is we're going to set the contents we're going to say text. text content is equal to the item okay so now we've created a paragraph tag we've set the text content and now what we want to do is add it into this div so to do that we say the items div. append child and then we just simply add the text so what this does is it creates the text element and then it just adds it inside of the div as a child so we can keep adding different text elements now we'll use the other components of this later but for now I just want you to see how this works so I'm going to go hello world 1 2 3 I'm just going to call this function and you'll see when I save that we get two items appearing inside of our div okay so that's great that's how we dynamically render items now the thing is I want to actually render some more complex elements here because I want each item to have a button that says remove so I need to kind of add inside of here not just the text but also the button in order for me to do that though I need to have those inside of one element that I add to the div so what I really want is something that looks like this where I have a div that has a paragraph tag and then I have a button like this right that says move so I need to create this programmatically and then add this whole thing this whole div as a child inside of the items div it also gives me some more flexibility with styling which we'll see in a second so we'll keep the text tag but before we make the text tag we have to make like a container that's going to be storing all of this stuff that we want to put on the screen so I'm going to say cons container is equal to document. create element and we're going to create a div then we're going to say the container. style. margin bottom this just means we're going to add a bit of space at the bottom is going to be equal to 10 pixels as a string just that I separate these different containers a little bit if you don't have this you'll see It'll get really squished together so we make our container we make our text now we want to make our button so we're going to say const button is equal to document. create element we're going to create a button and now for the button we're going to say button. text content is equal to delete okay and now we want to set the onclick for the button now the onclick for the button is going to call this remove item function which is going to remove the item from our list however in order to remove the item from the list we need to know the position in the list where the item exists so that's why we will have access to this index so what we're going to do is for remove item we're just going to specify that we want to take the index of the item that we want to remove and that now means that when we want to call this function we need to pass the index so what I'm going to do is I'm going to say button. onclick is equal to and then what I'm wanting to do here is I want to call the remove item function and I want to pass the index of this specific element it's very important that we have the index because we're dynamically rendering different elements so for each one of these elements we need to have something that identifies where it is on the screen right or what position in the list it is we don't delete the wrong element so that's why we're passing the index here to this function the problem with this is when we see this line here JavaScript will actually call this function for us it's different than inside of here so notice here when I have the unclick I actually write the call right which is the parenthesis in this case this only actually gets called when we click the button here as soon as JavaScript Encounters this statement so even if the button has not been clicked it calls this function which will automatically delete the item which we don't want so what we need to do instead is wrap this in a function that then calls this function a little bit complicated hence why I left this for the last project we're going to use this Arrow function notation so what we do is we put a set of parentheses we put this Arrow which is the equal sign and then the angle bracket and then we call remove item now what this essentially is doing is wrapping the call to this function in another function so it's a bit difficult for me to explain this entirely but what we're essentially doing is we're saying okay we're going to have a function that calls this function so that means this whole thing here right when we call this so if I were to do this this actually valid syntax by the way but if I did this then it calls this function which in turn calls this function so the point of me doing that is that now when we have the onclick event it calls this function which then calls this function so that we don't call this before we actually want to be calling it I know it's a little bit confusing I'm hoping it's clear you guys can let me know in the comments if you have any questions about this kind of wrapper syntax but this is a unique thing you should know about and that you're actually going to use quite a bit in JavaScript okay so that removes the item for us now what we want to do is we want to take the button and take the text and we want add that into the container and then we add the container into the div so we say container do append child and we're going to append the text and then we're going to say container. append child okay and then we're going to append the button if I can type this correctly and then rather than appending the text here we're going to append the container into the div so now let's refresh and I guess we're getting some kind of error oh no we just didn't call this function so let's call render items and you'll see now that we get our containers that contain the item and the button now when we press the button it doesn't do anything but that's fine you get the idea okay so that's render items now the thing is we want this delete to be appearing to the right side or to the left side we don't want it below so in order to fix that we're going to use a display property on our text now you may not be aware of this but every element in HTML is either a block or an inline element a block element means that it will actually take up its own uh row inside of the document and any element you put after it's going to be on the next row so in this case paragraph tags P tags are block elements meaning that anything you render after them goes on the next line by default same with header tags right these are block elements whereas something like an input tag or a div or a span these are inline elements okay which means anything you add just goes in the same row inline now we can actually change the display type of elements with their style property so I can say text. style. display and if I change this to inline and we actually call render [Music] items you'll see now that our delete goes after the text now it's not ideal because there's no spacing I'll show you how we add that in a second but you can see that I've changed it from inline whereas before it was block if we change it back to block then we get what you saw before so kind of an interesting thing you might not have known about now what we'll also just do here is we'll say text do style. margin right and we'll just make this equal to 10 pixels so we just add a bit of spacing between this and the button we also of course could put the buttons on the left side if we want them to be lined up vertically there's a bunch of things you could do here but in this case this is totally fine okay so there you go we have now everything we need to render our items so now that we have the ability to render the items we want to be able to add them and to delete them now actually let's start with delete because we already kind of have that hooked up so to remove an item all we have to do is remove it from the list or from the array and then just rerender the items on the screen so to do that we say items. splice now splice will simply remove an element at a specific index so what I can do is say SPL idx and then one now what this is saying is okay well what element do you want to remove I want to remove the element that exists at this particular index and then one is saying how many elements do you want to remove from this index we just want to remove one okay so you can see it says start and then the delete count so we're deleting one element and we're doing it at this index you could delete multiple if you want so that's how you remove an item from the array now what we're doing after this is updating the screen by rendering the items so if we refresh this now and I click on delete you can see we delete that item let's refresh delete 1 2 3 we delete that item okay so it deletes the correct item obviously this is not being persistently saved but we're going to get to that in a second okay so we've now removed now we want the ability to add so let's get rid of the already existing items here and for render items we we can now remove that and we can just do that when we add an item so to add an item we want to get whatever is inside of this input box and we just want to add it as an item so we're again going to go to the top of our program we're going to say const the input is equal to document. getet element by ID this is going to be the input item item input what did I call this let's see item input okay so let's change this back to be item input okay and now what we're going to do for add item is we're going to get the value of that so we're going to say cons value is equal to the input. value what we're now going to do is add that so we're going to say first of all if not value so if you didn't give us any value we're not going to add an empty string to the list so we'll just say alert and then this is going to say you cannot add an empty item and then we can just return so when we return early from the function we no longer will execute any lines beneath it so this is called a naked return some people don't like it but in JavaScript it's fine and this is essentially saying okay as soon as you hit this just get out of the function we don't need to give any value back but we're just going to egit the function as soon as this uh keyword is encountered then down here we're going to say items. push and we're going to push the value which is whatever they typed into the input field and we're going to rerender the items by calling the render items function then lastly we're going to say the input. value is equal to an empty string so we clear whatever they had typed so let's go here and let's add item one and you can see it gets added we can add item two and you can see that I can delete the items as I did before if I refresh though of course they go away okay so now we need the ability to save the items and to load the items and then we are pretty much done so what we're going to do here is use something known as local storage so just to give you a bit of a primer on local storage this is essentially storage inside of your browser so it's stored on your computer and a bunch of websites will use this to keep track of information that can make it more convenient for you as a user now you should never store any sensitive data in local storage because it can be accessed by pretty much anyone that's utilizing the computer and there is ways that you can store data on the server side but in our case we're going to be storing it on the client side which is user facing right it's what you're using so we're just going to store all of the items that you had and we'll reload those every time you open up this website again okay now when we use local storage we can't store anything we can only store specific values so we can store like strings numbers Etc in our case we have a list or an array so what we're going to actually have to do is convert that into a string and then once it's a string we're able to store it so we're just going to go into save items and I'm just going to write this out and then I can kind of walk you through it so what we're going to do is say const string items is equal to Json in all capitals do stringify and we're going to stringify the items array so it just means we're converting it to a string okay so we're just taking the list converting it to a string now that it's a string what we can do is we can store it in local storage so we can say local storage which is the built-in variable that you can write do set item and we're going to set an item which is equal to a variable I'm going to Define here so I'm going to say const storage key is equal to and then this is essentially what you're going to use to access the storage that you're using so you can set as many keys as you want you just make them unique so I'm going to make a key called items and I'm saying okay well I'm going to set the key which is the storage key in this case it's items and I'm going to make it equal to the string items now what this will also do is it will override any key that already existed so if I already had something in local storage called items I'm going to change what its value was to be this new value so that I'm always keeping the most upto-date version of my items okay now in terms of loading items you kind of just do the same thing but in Reverse so we're going to say const old items is equal to local storage this time it's going to be get item and now what item are we getting well we're getting whatever the item is associated with the storage key however this is a string so what I need to do now is convert this into an array that I can then use in JavaScript so I'm going to say first of all if we actually have anything because it's possible that we don't have any items stored so if I do have some items stored which is what I'm checking here then I'm going to say that my items which is this variable right here is equal to and this is going to be json.parse and then old items now whatp parse is going to do is it's going to read through this and it's going to convert it to a JavaScript object in this case the JavaScript object is an array it could be an object it could be a different type but it's just going to be uh an array okay so it's going to give us an array that contains all the different items from that string that we put in the storage then we're simply going to render the items so what we want to do now is we just want to call load load items as soon as the document has loaded so that as soon as we kind of open up this website we load the items and then we'll call Save items anytime we do something different to the items we can actually do that first we'll go down here and we'll say save items so we're going to save items after we add an item and we're going to save items after we remove an item so if we remove or add the only two operations we can perform on the items then we're just going to save it okay now though we want to call load items so we're going to say document. add event listener and The Listener is going to be the Dom content loaded okay and then we're going to say load items now let me just explain what I did because this might be a little bit confusing so what we're doing here is we're adding an event listener to our HTML document and we can listen for different types of events in this case the type of event we're listening for is the Dom content loaded which means it's actually load loed all of the HTML onto the screen as soon as it does that we're going to call the load items function so again we don't actually call it we just put the name of the function and then this will automatically call it for us now you'll see that I have two items popping up because I already had them stored in local storage for this exact project but uh we can delete them and when I delete them now and I refresh like it'll be persistent okay so that's it this is the finished project and I just want to show you it works so we'll say hello World We'll add that before if we were to refresh it would have gone away because it wasn't being persisted but now it's being persisted right so if I refresh it's still there if I delete it and now I refresh we get the updated version so I just wanted to quickly show you how to use local storage there a lot more you can learn about it but the basics is you can assign a string key to some kind of value in this case we're using a string and that's how we can store our different items and we can retrieve them whenever we rerun this code so that's pretty much it for this project all of this code will be available from the link in the description in case it's a bit confusing or you want to reference it I realize that this is a bit beyond a beginner project but it is Project five the most difficult one so I wanted to give you something a little bit more advanced if you like JavaScript definitely let me know in the comments down below I do have an entire course it's with course careers that teaches JavaScript go and a ton of other Advanced programming features with the goal of helping you land a job we had a lot of success there if you guys want to check it out you can do that from the link in the description or techwith .n/ if you guys enjoyed the video make sure to leave a like subscribe to the channel and I will see you in the next [Music] one

Channel: Tech With Tim

Views: 55,541

Keywords: tech with tim, javascript introduction for beginners, javascript for beginners, javascript for beginners 2018, javascript introduction, coding for beginners, javascript primer, javascript (programming language), javascript, self-taught software developer, learning how to code, andy sterkowitz, learn programming, javascript projects, how to code, how to learn javascript fast

Id: 2ml4x0rO1PQ

Length: 105min 9sec (6309 seconds)

Published: Thu Feb 08 2024