5 Mini JavaScript Projects - For Beginners

Key Takeaways

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