 Hi, in this project, we are going to build a sortable list application. Before we start building the application, let us first see the finished project to get feel of what we are going to build here. So here is the application, we have a list of top 10 richest people in the world here. You can create an ordered list of anything you want. You have the option to scramble the list like this. I can pick a name here and put it anywhere and I want and then you can check whether the order is order of the names are correct or not. So I'm going to press the check order button and you can see only this name appears in the correct order and the rest are not as it is shown in red. So if an element here or name is at the correct position, it will be shown in green and if not, then it will be showed in red like this. So let's pick Jeff Peshaw's and put it at number one and then again check the order. You can see that Jeff Peshaw's is now shown in green. I can refresh the page and I can see that the order is jumbled. Every time you refresh the page, you are going to see a different order. So you can arrange it to form the correct order and keep checking whether the order is correct or not by pressing at this button. So here are the project specifications. I have just demonstrated you all these functions. You can read it if you want here and now let's just move to what we will you learn from this project. The first thing that you will is that you will get command over the DOM manipulation. Second you will get more used to using JavaScript functions. You will also get to know about the array methods. You will get hold of event listener. So with so much things to learn, let's get started. The editor that I am using for this project is Visual Studio Code. You can go to Google and search for Visual Studio Code and press the download button and you can install it in your system. Now the directory inside which I am working upon is named sortable list app. You can create this folder anywhere in your system and open with Visual Studio Code. Inside this folder, I am going to create three files, the HTML file, CSS file and the JavaScript file. Press right click here and create an HTML file named index.html. Second file is CSS file named styles.css, third file is script.js which is the JavaScript file. Inside the index.html file, press exclamation mark and press enter to get the HTML boiler print. Now inside the body tag, I am going to write hello world to check if everything is working properly or not. So I am going to click on the index.html, right click on it and open with live server. If this option of live server is not showing up in your VS code, then simply go to the extensions, search for live server, the first option up here is which you have to install and then it will show up in your Visual Studio code. Now right click on it, open with live server and here you go. It's now open in the browser and you can see hello world is being displayed here. So everything is working properly. Now I will delete this hello world and start creating the actual HTML file which we are going to need for this project. So I am going to need an h1 tag here, here is a heading tag and inside it I am writing 10 richest people and now a paragraph tag inside it. I am going to write drag and drop the items into their corresponding spots and now I am going to be needing, I am going to need a UL tag with class name, draggable list and ID with same name, the draggable list. And the reason that I am using ID and class separately here because this ID we are going to use it for JavaScript and the class is going to be used for the CSS file. Now inside this UL tag I will need a button tag and it is also going to have a class and ID, its class name is check button and its ID will be check. So this is the button which we are going to use to check the order of the list. Now inside this button tag I am going to write check order and save it and let's see how it looks inside the browser and this is the actual project. I have got the h1 tag, I also have put this button here and the paragraph is here. Now you can notice one thing that here is an icon. Now to use this icon I am going to go to Google and search font awesome, go to this website and you can get it started for free. Now I already have my kit ready and you can create your own kit by signing up and you can get it for free. I have my kit ready so I just have to copy paste it and then I go to how to use and just copy this script tag and place it inside my head below the title tag. Now on this website you can see that there are lots and lots of icons here. You just have to click on it whichever icon you want to use in your project and copy it in your project. So the icon that I am looking for is the paper plane. So I am going to type paper plane here and here is the first one. Click on it, I am going to paste this here inside my project so here it is. Now save it and open the browser and you can see that it appears here. Just like this icon I have got the icon on the project. So now I will be working on the script.js file that is the JavaScript file. I am going to get this UL tag and the button tag. The UL tag has the ID of dragable list and the button tag has an ID of check so I will be using const dragable list and equals document dot get element by ID dragable list. So what it will do is that it will fetch the tag with the ID name dragable list and it will store it in this variable dragable list. For the check order button I am going to do the same document dot get element by ID and it has an ID of check. Now I will create an array and inside it I am going to store the name of top 10 richest people. So it is an array inside it I am going to have a list of 10 people. So here are the names of top 10 richest people. I have copy pasted it from Google and you can do it the same way to save your time. So now I am going to create an array called list items and basically it will use to represent the items as we store it and as it is scrambled and it will be initialized within empty array. Beside this I am going to create a variable which will keep track of the index of each items. So it is going to be named drag start index and we will not initialize it now because it will be changed later on and now we will be creating a function named create list and it will be responsible for generating a list and we are going to create this function now. So function name of the function it will not take any arguments and now I am going to have to create a copy of this array. So I will be using a spread operator sorry richest people. So what it will do is that it will create a copy of it so we do not scramble it afterwards because we need this order and then we have to loop through it. So I am going to be using an array method for each and this for each method will iterate through all the elements of this array and inside it we are going to pass a function. It is going to be an arrow function actually and it will take two parameters. The first one will be person sorry person and second one will be index. So this person represents each items in this array and this index represents the index of each element that is 0, 1, 2 and so on. And now inside it I am going to create a value const list item and it will be used to create an li tag. So create element and it is going to be a list item the li tag. So now I will be adding an attribute to this list item. So I will use set attribute function here and inside it I am going to pass data dash index. So when you create a custom attribute in html5 you will always have to use it like this so data dash index and then you can use any word here you want and it should be followed by data dash and I am going to set that to the actual index, the index. So this index will be from 0 through 9. Now I am going to add the html to this list item so html equals backtick operator. So the reason I am using the backtick operator is I am going to explain you in a while. So first put span tag here and I am going to give it a class of number and let's close it. Here it is and inside it I am going to put a variable here that is index plus 1. So this is why actually I am using the backtick operator here because in double quotes when you have to use a variable then you have to put a plus symbol then followed by a variable name then again plus symbol and then the string name. But here when you are using the backtick operator you just have to place a dollar sign and followed by two curly braces and you can just place any variable inside you want. So I am going to write div tag with class name at draggable going to be a here and I am going to set draggable equals true and here a will be there and let's close the div tag and the reason I am setting this draggable equals to true and actually it is an html property html5 property so it will actually make this div class draggable. Now I am going to place a p tag here that is the paragraph tag and let's close the p tag and let's also close this div tag div it is going to be small d and to this paragraph I will be assigning a class name of person name as it will display the name of the person and again I have to use a variable here so I will be using the dollar operator person. So what it will do is that the for each method will iterate through each of the elements in this array and it will display the index and person name and the reason I am putting plus one here because index of the array starts from zero so I don't want to display a zero here that is why index plus one will make the numbering start from one and the person name all the name of the person that is mentioned here it will display here. Now inside the finished project you can see that after each name there is another icon this is a grid line so again I am going to go to the font awesome page and search for grip lines so here it is the horizontal grip line it's loading I am going to copy paste it here just like that. Now I am going to take the list items array which we have created here and I am going to push the list item onto this so the push is another array method which pushes any element inside the array. So all this HTML is going to be pushed inside this list elements and now we are going to add it to the DOM so I am going to use this draggable list dot append child and I am going to place a list item here so what it will do is that it will append this ally tag inside this this UL tag. So now let's take a look at the actual project that we are building so here it is we can see that all the names of the switches people are being displayed here and the replies along with the numberings getting displayed here. So before I move ahead there is a small typo here it should be double G and there should be only single B here and the same here now let's see with as you can see now it becomes draggable now one thing you can notice here is that the list that is being displayed here is in right order we are just displaying this exact array on this page. What we want is that it should display a random order which is incorrect so that afterwards you can drag and drop any element or name to put it at the correct position to form the correct order and every time we refresh the page it shows any random order here it is not like that. So for that I'm going to add here another high order array method which is map it will be p here map so what map will do is that it will take an array and it will return a new array of anything we want so we need something to sort by and scramble the array so we need something to sort by and particularly we want a random number to sort by so that it can get scrambled. So what I'm going to do here is that for each a I'm going to return an array of objects and these object is going to have a value which is a and and also a sort value which is going to be math dot random this is a JavaScript function which generates a random number between 0 and 1 now to show you what it does in the for each I'm going to console dot log person to see regenerate so now let's save it and go to the browser to see the changes and as you can see here the person name is a converted to object as we are using this function to generate array of objects so it has converted all the list items into an array of objects and it is being displayed here and by pressing F12 on your keyboard you can open the console and you can see there are 10 objects that is being displayed here due to this console log and now I'm going to open it as you can see it contains two value sort value and the value that is the person name and we are going to use the sort value to randomly scramble the list and every time we refresh the page we can see that there is a different sort value so this will help us achieve this purpose so every time I refresh the page the list gets scrambled it shows the different order and this sort value is going to help me achieve just that now the method that I'm going to use to sort the order is the JavaScript sort you can go to Google and search for it the first website it you get open it and here it is the sort that and you can see here how it works so here is an array and it contains five numbers now I call the sort method and I console log it into the console and you can see here the order of sort one after that one lakh 21 30 and 4 you may wonder that it is not sorted numerically obviously here one lakh is the largest number here it should be at the end but it is at the second so what it what JavaScript does it is considering each of the number as a string so in the string one after one one lakh will appear and then two will appear it is only considering the first letter for sorting as it is a string so after that two will appear then three will appear then four will appear overcome this I'm going to use this compare function method and what it does you can read it here it specifies a function that defines the sort order and you can clearly see that if this function is omitted so if we do not use any function here to sort it so it will convert the array elements into the strings and then sort it as it is being done here you can see it so this compare function will define a sort order and it will take two arguments for comparison the first even and the second even and now you can read about the compare function here how it works and you here is the function itself and so if you want to sort this number numerically like this so that one will appear first two will appear afterwards then after that three four and then five just like this then you have to use this function and this is exactly what I'm going to use in this project now let's come here and add this word function here I'm gonna write sort inside it I'm going to use a function which is going to be an arrow function a comma b will be the arguments and it is going to return a dot sort minus b dot sort and due to this we are going to see a different order every time we refresh the page so let's save it and go to the browser and as you can see that I'm refreshing and I get this order and we'll refresh it again and you see we are getting a different order and just like this we are going to refresh it here and we see a different order here just like this so this object is achieved now now the second thing is that we see that object is still being shown here the name of the person is not being shown so what we have to do is to map this object back to the string simple we just have to add a map here MAP map and for each one we have to return the value a dot value so remember we have an object here with a property value so we are just accessing that value a dot value so let's save this and go back to browser to see changes the name of all the richest people are being shown here and here as well in the console and you can also see here that each time we refresh the page we are getting a different order and you can see every time I refresh the page I'm getting a different order like this now I'm just going to get rid of this console dot log we go delete it so so far what we have done is that we have created the list of top 10 richest people here it's an array and we are mapping it to an object where then object contains two values the name of the person and the sort and it will contain a random number between 0 and 1 and we will use this a property of this object to scramble it in a random order to sort this list in different orders every time we refresh the page and then we are mapping it back to the name of the person that is this Larry page and all and then I'm using the for each function to iterate over all the elements of this array and then I'm adding just an HTML to it with an HTML that is a lie tag is going to be placed inside this UL tag so it is being displayed on the browser let us now start working on the CSS part of the page because this does not look very good right now we have to make this page look like this in order to do so we have to move this list items into the middle of the page and style it so the first thing that I'm going to do here is grab a font from Google fonts you can search it here on Google and open the first website here and here are lots of lots of fonts you can choose any font of your choice I'm going to select a later font I will select this style import it or pay it and paste it into our CSS file here so let us now put the browser and the editor side by side so you can see live changes due to the CSS file to everything I'm going to add a box sizing property box sizing and I'm going to set it to border box now let's add the color background color of the body white now I will also add display flex to center everything flex direction and will be column to make it appear column wise and then align items will be center so now save it to see everything is centered or not as you can see here everything becomes centered now we are also going to justify it to top so I will use justify content flex start now I will add height will be hundred view port height margin will be zero and font family that we have imported I'm going to use it now and it's going to be later and sands share now let's move on to the draggable list which is this it has a class of draggable list I'm going to give it a border of one pixel and it will be a solid border and let's just add the color to a variable here so root I'm going to give it a variable border color and I'm going to set it to e3 e5 e4 and let's just define another variable for background color and it's going to be c3 c7 c8 this variable here should contain the double dash as you can see to make it a variable now I'm going to use this variable here so bar double dash and border color so you can see the border color appears here so now let's add a text color to this list here and for that as well I'm going to add a variable here so that so that I won't have to use it again and again so text color and I will give it a color of three four four four five and let's use this variable here color and set it to where text color let's save it to see the change now you can see the color of the text is changed now now I will set the padding to zero and and I'm going to give it a property of list style type and it will be none because I don't want this bullet points to appear here now we are going to style the contents of this list item so this has a class of draggable list and li and let's set the background color to white and let's set the display flex and give a flex value of one and now we are going to add a border after every name here every list item here except this last one because this shouldn't have any border here right and so every after every list item we are going to have a border line so let's set that I'm going to use this class again here draggable list li tag and I'm going to use a pseudo selector not and inside it I will put last of type it is a pseudo selector last of type and this selects all of the list item except the except the last one now let's set the border so border bottom set it to one pixels solid and I'm going to use this variable for the border color and now let's save to see changes here and as you can see here border appears after every list item here except this last one so before I move ahead I have noticed one thing here that only nine of the top reaches people are shown here so let's add one more to this list here I'm going to set it to location bunny let's say and save it and now you can see all that 10 people are appearing here and now I want my number like one two three two appear like this like this in a box and now let's do this so it's a draggable list again dot number dot number will select this number and or the index that is being displayed here let's set a background color again variable background color and then set the display to flex then align items center and set justify content to center as well and I'm going to increase the font size of this number to 28 pixels now let's define the area for it so I'm going to give it a height of 60 pixels and set a width of 60 pixel which is a square box now let's save it as you can see here it is appearing just like this here now let's start giving the margins to this name here so that it appears like this it has a space before this numbering here so let's work on that so this name has a class of persons name here as you can see here so let's select that draggable list dot person name and now let's set the margin to margin zero 20 pixels zero zero now this too has a class of draggable and as you can see here on hovering over any name the cursor changes here the cursor is different and here the cursor is different so let's start on working on that now and you can see from here this has a class named draggable so let's set draggable double jbl we want the cursor to be a pointer and I'm going to display flex and then align items center and then justify content space between now let's set the padding to 15 pics and let's set the flex to one so let's save this and you can see here this is how it looks now now one thing you may notice here that this check order button is appearing at the top of the list we want to display it like this at the bottom with some margins so let's go to the index dot html and put this button out of this u l tag so let's delete it from here and end the u l tag here now you can see that the check order button is at the button and you can also see now that when I hover over any list items or any names the cursor changes to pointer just like this cursor here is like this and on hovering over each names the cursor changes just like here so now what we are going to do here is that when we check this order by pressing the check order button so what it will do is it will display those items which are in correct position as green and it will highlight those which are in wrong positions as red so let's set the css for that so to do that I'm going to copy this and if the last name is ally dot right then what it means that if the person name is in correct order then it will display it in green so let's set the color to three a e three seven four and it's a green color so if the person name is in the correct position it will display it in green color and if the person name is not in the is not in its correct position then I'm going to copy this here and if this is wrong then color is going to be ash ff three eight three eight it's going to be in red so to test this whether the items appear in green or not or red or not so let's go here to the javascript file and let's add a list item class list dot add and right so if the ally tag has a class of right and this class list is a javascript function which adds a class name to an html element let's save it and you can see here all the names are appearing in green color and if I set it to wrong like this and save it and you can see that the list items are appearing in red color so I'm going to remove this class for now save it and now go to styles.css now what I want to do here is that whenever I pick an element here I want the background element to be a little bit darker than this as an example you can see here that whenever I pick this names and this and take it over other elements as you can see the background element becomes darker so let's set that so let's add a css for that so draggable less ally dot over if a list item is over another list item then and again draggable and let's set to background color to ea ea ea let's save it now to show you that let's let's add here the class of over to it to the list item list item dot class list dot add dot over and now let's save it and you can see here the color of the background changes so what we want is we want that one list item and it goes over another list item it turns it a little bit darker so first let's remove this from here this was just to demonstrate you I'm going to set this styles for this button here so that it appears like this so for that let's add dot check etian add a background color to it we already have a background color defined so let's set that to background color border will be none color will be set to another variable that is the text color which we have defined above the font size will be 16 picks and padding let's set to 10 picks and 20 picks cursor is going to be pointer so let's save this and you can see it appears like this exactly like this and also I want to give this button an effect so that when we click it like this it you know it's showing here a little bit of effect so we're going to add that now so let's check median active if it is active or it is being clicked and I'm going to use the CSS property transform here so when we click it it scales down to 0.9 and now you can see that on clicking it it scales down and scales up and now you can see this border right here on the check button I want to get rid of that so let's add check button focus and now set the outline and now you can see that this border is gone so this was about the CSS part of this project we have made this project look exactly like this as you can zoom in here and you can see it appears exactly like this so the only thing that is missing here is the drag and drop function and we will add it in the next video now to add the function of drag and drop to our application we are going to use html drag and drop API you can read more about it on this website called mdnwebdocs you can scroll down to see all the events that are available for drag and drop and you can read more about it here since these are events I'm going to add an event listener to our JavaScript file so at the end I'm going to call a function add event listener and after that I'm going to create it add event listener now we are going to fetch two classes here one of them is draggable and another one is the list items so for first I'm going to create a variable named draggables draggables equals document dot query selector all because it is going to select all the html html elements with the class name draggable and now the second variable I'm going to create drag list items equals document dot query selector all and it will select all the elements with the class name draggable list and li and now for each of these elements I'm going to add an event listener for the first one draggables dot for each again it's a high order JavaScript function it will take in a function and it will be an arrow function so draggable it is going to return an event listener so draggable dot add event listener and I'm going to make it listen to drag start and on listening to this drag start it will call a function named drag start small t here that's it and for the second class as well for this drag list items going to copy it paste it here change the name to drag list items it will take an item as an argument and here it will be item and here it will be listening on drag over and on listening it will call a function named drag over and let's add a multiple event listener to it so here it is going to listen on drop and on listening to it it will call a function named drag drop and third event listener it is going to listen to drag enter and on listening it will call a function called drag enter and the last one is drag leave on listening to it it will call a function named drag leave so now let's create all these functions because we have not created it so far so function drag start small t drag start and let's console out to see or which event is calling this function so event here and drag start and let's copy it create a function for everyone there is five functions I think drag start drag over drag drop drag enter drag leave so for everyone I'm going to create a function or define it so it is going to be drag enter and here it will be drag enter this will be drag leave here it will be drag leave here it is going to be drag over and also here drag over and here the drag drop function which is this and just drop to it so now let's save it and go to the application and open console and let's start dragging it and you can see the events have been called here the functions that we have called it is calling an event so you can understand series of events that is happening here so first I picked up an element here and started dragging it and event listening called drag start happened here and then I was dragging over the other elements so drag over event called here and then finally I left it so a drag leave happened so you can see it again in action I'm starting to drag now I'm dragging over and then I leave so finally drag leave and now we are going to add a function in which we pick an element and drag it over the other elements then the background of that element becomes darker just like here I'm picking a name here and dragging it over other elements and we can see that the background is getting darker so let's add that and we are going to do that through this function the function drag enter so first I'm going to comment it out so that letter you can try it on your own I'm going to add that function of making the background darker to this function so on drag enter I will add this dot class list dot add because on entering over other elements I'm going to add a class called over and on leaving I'm going to add a class list dot remove over I will remove it once I leave it so let's save it and see it in the browser as you can see here now background is getting darker every time I put an element over another element now to be able to move this element to other position we are going to use this variable that we have not initialized yet drag start index so inside this function when we start dragging I'm going to initialize it the drag start index with a disk dot closest li dot get attribute and I'm going to add data dot data dash index so what it will do is that it will fetch the closest li tag on which we are dragging the names to and this data index will fetch the index over which we are scrolling the name and it is going to return a number with a positive symbol so let's save this and see it in action on the browser open it open the console and you can see if I start dragging it over the third element nothing shows up here because we have not put console.log here so let's console.log let's drag start index now let's see now you can see here that if I drag start this it has index of zero if I drag start this it has an index of two just like the array if I drag start this it has an index of four you can see here now we have this set now let's go here drag drop and I'm going to create another variable here drag and index and I will initialize it with this dot get attribute data index so we have two variables one is for the start index drag start index and one will fetch the drag end index and this is going to be a positive number so now we are going to create a function swap items and it will take two parameters drag start index from which we have started dragging it and drag end index where we intend to drop it so what it will do is it will swap the position of two elements over which we want to perform the drag and drop operation and now I'm going to remove the over class from the list item so that the darker background doesn't stay there so class list dot remove dot over now let's create this function called swap items so function swap items it is going to take two parameters let's name the first parameter from index and the second one to index from where we intend to drop it now I'm going to console.log here to see what happens let's save it go to the browser and let's drop it and we can see the thing is being printed here because this drag over event is in between so it is getting in the way what we want to do is that we want to prevent the default action of this drag over function so I will process parameter here E and I will call E dot prevent prevent default it is a function so now let's go to the application and drag and drop and now you can see one two three appears so let's get rid of this console.log here so let's now get the DOM elements so cons item one will be list items and it is going to be from index dot query selector and it will select a element with the class name draggable and the second one is the item two with the same list items it will be from the two index query selector it will also contain class name draggable l and it is going to be a dot here one dot draggable and now console.log to again see the changes on soul.log item one from item two now let's go to the browser and drag it drop it here there is an error here so let's see where it is here it should be small take let's save it let's drag and drop it again and you can see the two elements are being fetched fetched here first one is the larry page because I because I took it and dragged it and dropped it over Jeff Bezos and now what we want to do is the swap item one with the item two swap it so list items and from index and what it will do is well it will append child to item one and list items to index and it will append child to item two let's see it in the browser let's pick it and drag and drop it to Elon Musk it's not working because we have to put item two here TWO and I have to place item one here now let's go to browser and pick Elon Musk and drop it over Bill Gates and you can see it is swapped so the function of drag and drop is working perfectly now the only thing left in this application is to check the order so that on pressing the button it checks the order whether the order is correct or not or which names are in correct position so only thing that is left we are going to see it in the next video so now what we want to do is that when we press this check order button it will check whether the elements are at the correct position or not so let's add an event listener to it we have a check button here so let's add an event listener check dot add event listener and I'm going to write here click and when that click happens it will check order it will call this function so what it will happen that whenever we press or click the check button it will call this function check order and now we are going to define this check order function so let's create the function here function check order so inside this function I will have list list item and I'm going to iterate over it using the for each method and list items is here it was initially uninitialized but later on we appended HTML in it with index and the name of the person so let me iterate over it here and it will take two functions here and function will have parameter index first parameter will be list items and the second will be index and there will be it will be an arrow function so now we want to get the person name so const person name equals list item since we are iterating over each list item containing index and the person name query selector and it will select the the draggable whatever inside the draggable so it does not whatever inside the draggable it does not contain the index it only contains the person name so we are selecting it and assigning it to this variable person name so what we want from here is the inner text inner text and we what we want to do here is trim it now I will write a condition here which will check whether the person name is not equal to richest people with an index so what we're doing here is that we are taking this index and we are matching it with this index of the original array so we are checking it and if it doesn't match so if it is not true we will add a class to it so list item dot class list dot add so we will add a class of right to it so that it becomes a red in color sorry right will make it green so I will write a wrong here and else I will add a list item class list dot add right so if it is wrong if it doesn't match with the original index of the original array so I will add a class of wrong to it which will make it display it in red and if not then right will be added to it to make it green so before we do this I also have to remove the wrong here first because wrong might be added by some previous iteration so wrong I will right remove here that's it so now let's save this and go to the browser to check whether it is working fine or not press on the check order button and only the 10th number is at the right position so let's pick Jeff Bezos and put it at the top position and now it is also correct and similarly by looking at this array here at the second is Elon Musk go to the browser put Elon Musk at the second position check order and now it is being displayed in Greek so our application is working just like this here so put Jeff Bezos at the top position and here it works fine so our application is now and obviously you can experiment around with it you can add a background to it to make it more beautiful if you can add more functionality to this website that can also be a very great thing so I hope you have learned something from this project thank you hi for this project we are going to be building an analog clock application using HTML CSS and pure JavaScript you can see here how beautiful this application looks so before we move ahead let's have a look at the finished application so that we can get a feel of what we are going to build ahead so this is how the real application looks you can see here it is just like a normal clock the analog clock the hour hand minute hand and the second hand is always on the move it is constantly moving to showing us the correct time and you can see here the beautiful background so now let's see the project specifications here are the project specifications I have demonstrated you these things right now and you can read it about here if you want and now let us look at what you're going to learn from this project first you are going to learn the basic math that is involved here in making up this application and by basic math I'm referring to the mathematics that is involved in how a clock works you will get to know about by how many degree the minute hand or second hand or the hour hand should move at a given time and then you will learn about this certain interval method then the JavaScript date function and you will also get to know about the style transform property of HTML and then obviously you will get better at using the IDs in JavaScript or linking HTML IDs with JavaScript so with so much things to learn let's get started so before we start building the application it is important to have a knowledge of mathematics which is involved in how a clock works to understand it let us take an example suppose you want to show eight o'clock 16 minutes and 17 seconds into your clock so you have to figure out here by how many degrees should I rotate this hour hand minute hand and second hand so that it shows this exact time so we are going to use unitary method which is a basic mathematics to find out how many degrees this hour hand minute hand and second hand should rotate to show any time that we want so let us now calculate by how many degrees should this hour hand rotate to show any time so let's work for the only hour hand now hour hand so we know that in 12 hours the hour hand rotates by 360 degrees so applying unitary math we can say that in one hour hour hand rotates by 360 degrees upon 12 this will come out to be 30 degrees so in one hour this hour hand rotates by 30 degrees so if we have to calculate it for h hours h is a variable here h hours then by how many degrees should it rotate so 30 times h degrees and now we have to take into consideration this minute hand as well in calculating by how many degrees this hour hand rotate suppose the time is 130 p.m so the hour hand will be between 1 and 2 so we have to calculate by how many degrees that does it rotate due to this minute hand we have calculated here that in one hour the hour hand rotates by 30 degrees so we know that in one hour there is a 60 minutes so in 60 minutes the hour hand rotates by 30 degrees so in one minute hour hand rotates by 30 upon 60 degrees it will turn out to be one and a half degree so for m minutes m is a variable here which is unknown we can put whatever here so in m minutes the hour hand will rotate by m by two degrees so this is our equation one and this is our equation two so add it up so I'll get total rotation of hour hand total rotation will be 30 h 30 times h plus m by 2 this is our formula for calculating the rotation in degrees for the hour hand and one thing to note here is that we are not taking into consideration this second hand because the movement due to this second hand in the hour hand will be negligible so we are not taking it into account so let us now calculate the degree of rotation for this minute hand so we know that in 60 minutes minute hand rotates by 360 degree as you may have noticed in a real analog clock so applying the unitary method in one minute the minute hand will rotate by 360 by 60 degrees and it will turn out to be six degrees so for m minutes m is a variable here again it will rotate by six times m degrees so this is my second formula that I'm going to be using for building this analog clock now the I'm now I'm going to calculate the degree of rotation for this second hand so for second hand we know that in 60 seconds or one minute the second hand rotates by 360 degree so in one second it will rotate by 360 by 60 and it will turn out to be six degrees so for s seconds for s second it will rotate by six times s degrees so these are the three formula that I'm going to be using to develop this analog clock so these three formulas are really important formula when it comes to how a clock works we can use this formula to calculate the exact position of the hour hand minute hand and second hand in a clock and along with these three formulas I'm going to be using my web development skills to make this page and application more responsive and working so this is my first formula this is my second formula here for the minute hand this is my third formula here so remember these formulas so these formulas will be the main part of the JavaScript file so now let's start building the application the editor that I'm using for building this project is visual studio code you can go to google and search for visual studio code and you can press on the download button and according to the operating system that you are using you can install this onto your system so let's get started with the project so this is the image that I'm going to be using for the clock in our application and you can go to google and search analog clock without dial and you will get many clock faces you can choose anyone which you like the face the clock face that I'm using here for this project is this you can hit click on it and save image and copy it into this folder named analog clock or whatever folder you have created in your system for building this application you can copy it here and I'm using this clock face and the background that I'm using for this project is this so you can go to google and search for any background image that you want there is no restriction on that you are free to experiment on your own so the background that I will be using for this project is this and the clock face will be this let us now create the files first I will create my html file named index dot html let me also create a css file named styles dot css and the main file that is the javascript file so script dot js now coming to the html file you can type exclamation mark and press enter to get the html boilerplate if you do not want to type this html head body tag again and again now I'm going to change the title of the project to analog clock and I'm going to write here hello world and save it and let's try to run it with the live server if the option of live server is not showing up here so you can go to extension and search for live server and the first option you get click it and you can install it in your system what it does it that it allows you to see live changes on the browser when you make a change in your html file you can see it live on the browser so I have typed hello world here now I'm going to open it with live server to see how it looks yeah hello world is displayed here so everything works fine and here I have opened the finished application here so and I'm going to build the application side by side so that you can get the idea what we are building now I'm going to delete delete this hello world and I'm going to link my css file so I'm going to be using link tag for that style sheet and edge ref equals styles.css close the link tag and I will also use script tag here src so it will be inside it so src script.js so why I'm using this script tag in the head not in the body tag is because we have to load the time before we load the page so that the hour hand minute hand and the second hand is at the exact position of the time that we have now I'm inside the body tag I will create a container div here with a class of clock container and inside this I will have three divs so let's copy this create three divs here the first div will have an idea of hour this will be used to display the hour hand second to second div will have an idea of minute third div will have an idea of second so here is a parent container and inside it we are having three divs and each div represents a hand of a clock so this div represents the hour hand this div represents the minute hand and this one the second hand so now let's go to the css file and give the body background so I will use the body tag body tag and background and I will use the url function to link the image bg.png I have a file named bg.png here which is like this and it will be in the background of the page so in the style of src src I have set it to set the background of the body to bg.png so let's save it and see it in the browser and this is my original project and this is the finished project so as you can see here the background is exactly like this let's add a css for clock container and I'm gonna give it a background color of red background color of red just to see the changes in the browser height will be 12px I'm using it just as an example this isn't just a random number I'm picking it here 23 pixels and let's save it and see the changes in the browser it doesn't show up here so let's see here is there because I'm using class here instead of class let's change it to id and now go to the browser and you can see here the height of 12px and width of 23px and the background color of red is being shown here and inside it I want to put my clock so let's increase the size go to the css and so here I'm going to set my height to 40 view viewport height and same for the width as well so what this means is that whatever the viewport of the page is it will set the height to 40% of that and it's the same for the width now save it and go to the browser and you can see it is being displayed like this wait so here I will change it to viewport height viewport width so let's now see and you can see here it is 40% of the whole viewport that is this whole area that you are seeing here in the browser now my clock should be inside this container now to add the clock to it I will go to my css file and add a background to it and I will use the url function use the comma use the single quote and I'm going to put my clock here as a background color go to the browser and you can see my clock is displayed like this I'm going to give it a property of no repeat as my image should not repeat now to avoid this from happening to make this clock face fall completely inside this class container all the id clock container we have to use a css property called background size and I will be setting it to 100% now let's save switch to the browser and you can see here the clock is perfectly shown here now comparing it with the original application you can see here this clock is in the center of the page and here we have a clock on the left side of the page to make it fall into the center let's add a margin auto let's save it and as you can see now the clock is at the center of the page now the next thing that we want to do here is to add the minute hand hour hand and the second hand here with the help of javascript and css so I will look at that in the next video so in this video we are going to be working upon the hour hand minute hand and second hand we are going to add that to this clock here but before moving on to that one you can open your console here by pressing F12 and click on this toggle device toolbar button here and you can adjust the size of the screen to see how the clock adjusted itself according to the screen you can see here that our application is now completely responsive it is adjusting itself according to the size of the screen you can go here and select any device of your choice like ipad this is how it will look on the ipad this is how it will look on the iphone 10 so according to the device this application size will adjust so let's close this console now and start working upon constructing the hour hand minute hand and the second hand so now let's go to our code here and open styles.css and as you can see here in the index.html this will represent the hour hand this will represent the minute hand and this will represent the second hand so in styles.css i'm going to give property for each hand so use the id selector here hour comma minute comma hash second it is going to select this div here all the three divs the first property that i'm going to give to each of the hand is position absolute along with that i will add another property that is background will be black and then i will add border radius property and i will set it to 10 pixels this is just a random number that i have picked here to see how it looks and if it is not correct or it does not look good we will change it afterwards now let's save this and switch to browser and you can see here nothing is shown because we haven't given this hour hand minute hand second hand the height and the width so after giving height and width it will show up on the clock here so let's give it so i'm going to give it separately the height and width separately for each hand so let me create the id selector for each one individually here this will be minute this will be second so let's give a height and width to this hour hand first so i will give it a width of 34 pixels and the height of the spelling of width is drawn here and now i'll give a height to it height will also be 34 pixels this is just a random number that i'm giving to see how this hour hand looks inside the browser so let's save it and move to the browser and as you can see here this is how the hour hand looks surely here we need to adjust the hour hand because this does not look exactly like the hour hand just this is just a square shape so let us adjust it now so i will now give it in the percent not pixels because it is relative to the container so let's say 4 percent and 34 percent and how it looks so this is how it looks so we meet we need to make it more slimmer so let's set the width to 1 percent and the height to 49 percent and now see how it looks so here is how it looks so we have to give margin from the left and from the top as well to fit that here so rather than going to the visual studio code and work on it i'm going to go to my console and select this element tab and come here and you can see if you select here so here in the styles section you can see the css property of every element that is present in our application so here you can pick this you can select this you can click on this and select this hour hand button and you can see the css property of this hour hand button is being shown here i'm going to adjust it so you can see it live on the page and i'm also going to increase the width no 1 percent is fine here this is good and now i'm going to give it a margin from top stop 21 percent let's say so it is down let's decrease it this is good and now i'm going to give it a margin left and i'm going to set it to 49 percent i need to increase it a bit okay so it should be between 49 and 50 so let's set that to 49.5 49.4 perfect now i need to decrease the height top height of this hour hand because it is way too long so let's decrease that and increase the top margin top i will increase the height some more sorry i will decrease it and increase the height and as you can see it is perfect and now you can copy this css here and paste it into your code so you can see how easy it is to work on the css and the console itself where you can see the changes live on your application now before we move ahead let's check that it is responsive or not whether the application is adjusting to the size of the screen or not so click on this toggle device toolbar again and you can see that this is not adjusting according to the size of the screen as this hour and minute hand is now at the wrong position this is because we have not set the property here i will give it now position relative to fix it and now let's save it and go to the browser and as you can see here it is fixed now the hour hand is not moving anywhere according to the size of the screen it is fixed now so only thing we have to do now is to adjust the margin top so that this hour hand becomes pivoted on the center so again come here and increase the margin top as you can see here it is coming down that's good now i need to increase the height i've increased the height and now set the decrease the margin top perfect now let us increase the width of this hour hand is let's set to 1.8 good now and set at a height to 25 percent and top to 25 percent i need to decrease the margin left here so let's set it to 48.8 percent let's say so now it is at the center and it is perfect and let's also give an opacity property here and set it to 0.8 perfect now now you can see that this hour hand is now perfect so let's copy the css here and paste it into our code paste it here now copy now let's do the same for the minute hand as well set the width to let's say 2 percent and height to 30 percent and the top to 20 percent the left to 50 percent and let's save it and see it in browser you can see here it is looking almost perfect but we need to decrease the size of this minute hand a bit so let's decrease it to 1.6 let's say sorry this is our hand so i should not mess with it i need to select the minute hand here so by clicking on this and selecting this button and you can see the id selector of minute appears here now let's set this to 1.6 let's say and you can see it is a bit slimmer now and let's set that decrease by 1 percent now set the margin left to 48 percent increase it a bit perfect now also give it the opacity property of 0.8 as same as the hour hand now the minute hand looks perfect now let's copy this properties and paste it here in your code now let's do the same for the second hand i'm just going to copy the same as here and then save it go to the browser and change the properties so let's select this second here and use it as you can see the id selector with the second appears here i will make some changes here set this to 1 percent set the height to 40 percent because the second hand is the largest here and set the top to 9 percent decrease it actually you can see here and now set the margin left to 49.5 percent and set the opacity to 0.8 it is perfect so you can see here our clock is looking perfect perfectly fine here our hand minute hand and second hand looks perfectly fine and those all hands are at the perfect positions so let's copy these css properties and paste it into our project let's save this go to the browser to see changes and you can see here our clock looks perfectly fine and press f12 to check whether our application is responsive or not and as you can see here by increasing and decreasing the size of the screen the hour hand and minute hand and the second hand is perfectly intact now it's time to add the javascript part to the application and we are going to see it in the next video so let us now start working on the javascript part of the application using javascript i'm going to make this hour hand minute hand and second hand set in motion so let's go to visual studio code and the javascript function that i'm going to use here is the set interval that is actually a method and it takes inside a function so let's make it a narrow function and the second parameter it will take is the time or the duration so let us set it 2000 at and this thousand it is in milliseconds so what it does is that after every thousand millisecond or one second it will call this function so let's console.log and print hello world you see what this set interval method does it is going to be arrow here since it is an arrow function let's save it and go to browser and open console by pressing f12 go to console and as you can see here hello world is being printed after every one second so the set interval method is calling this function which contains console.log hello world after every one second now let's delete this now i'm going to tell you a javascript method to calculate date or time so i'm going to use this function new date dot get hours to get the current hour you can get this minutes of the current time by typing this function in the console new date dot get minutes and it will show you the current minute of the current time and similarly you can get seconds here of the current time by typing new date function dot get seconds so we are going to use this method in our javascript file to get the current time so let's use a variable called d here and i'm going to set it to new date and our time will be d dot get hours it is a function that i have just demonstrated you now this is a minute time and it will be d dot get minutes function and then finally the second time and it is d dot get seconds functions and now i'm going to use those three formulas that i had demonstrated you earlier to calculate the degree of rotation for our hand minute hand and the second hand so let's have a quick look at it here are the three formula this is the first formula 30 times h plus m this is to calculate the our degree of rotation for the hour hand this the second formula to calculate the degree of rotation for minute hand and this is the third formula to calculate the degree of rotation for the second hand based on the current time that we have to show on the clock so i'm going to use three variables here for the three formulas so this is h rotation for the hour rotation this is m rotation for the minute hand rotation and this is s rotation variable for second hand variation second hand degree of rotation so the first formula was 30 times the h time plus minute time by two you can have a look at the formula here this 30 times h time will be performed first and then the m time by two will be performed then and finally this addition operation will take place and it is according to the rules of compiler so this is how it is calculated the multiply and division have the higher priority than the plus symbol now to calculate the degree of rotation for minutes we had the formula of of six times m time and for the secondary hand rotation the degree of rotation will be six times s time so this is in decrease so this is how much it should rotate based on the current hour hand time on the minute hand time and the second hand time now i have to change the css of hour hand minute hand and second hand to make it move also or to set it in motion so let's use the style transform property of html now so hour dot style dot transform s here and i will use a back tick operator here and the reason that i'm using back tick operator here is because it allows us to put a variable inside it inside a dollar symbol so i'm going to show you just now so first i'm i will write rotate here and then put a bracket and dollar and i'm going to write edge rotation here and finally degrees so it should rotate the hour hand by this much decrease and this is the reason why i'm using the back tick operator here because when we use double quotes we had to write this edge rotation then plus symbol and then again double quotes and before that as well as we had to add plus symbol but here when we use back tick operator we just have to put a dollar symbol and use curly braces to put any just variable inside it we want and i'm going to copy it let's copy it two times and second and this will be for the minute hand this will be for the second hand second hand and this should rotate by m rotation degrees and edge rotation sorry s rotation degrees and now let's save it go to the browser and you can see that and you can see here that this is not how a real clock works right so the problem here is that this hour hand minute hand and the second hand is rotating it at its center and its center is here so it's rotating according to the center but we don't want that we want to rotate it through this point so that one end of the minute hand is pivoted here and the second hand and the second end is constantly moving now to fix that problem of changing the point of rotation to the bottom we are going to use this property transform origin you can search for it on google and open this website called mdn web docs which contains a documentation for everything related to web so this is the property that i'm going to use transform origin equals bottom and what it will do is that it will set the point of rotation of this hour hand minute hand and the second hand to the bottom so that it can rotate from here so let's go to the css and here just paste it the transform origin bottom and let's save it and go to the clock now you can see that and the clock is working exactly like an analog clock and it is showing us the current time and style transform property here that i have used here you can go to google and you can search for html styles transform property and go to this website called w3schools that is an amazing website and you can check what style transform property does and this is here that i have used this rotate function here to rotate the clock to rotate the hour hand minute hand and the second hand for this clock and this is the definition of style transform this allows you to rotate scale move and skew the html elements and there are various functions here you can write out on your own and work on it to get better at it and now let's check whether the website is responsive or not so as you can see again the website is completely responsive the minute hand hour hand and the second hand is completely intact at this position and rotating from this point so i have used the pure JavaScript and css here to move this second hand hour hand and minute hand to show us the exact time so let us now have a look at what we have done in the project so far and what we have learned from it first we created our html page here and inside it we used a div called clock container and this div with the id clock container is used to display the clock phase and inside it we have an hour hand minute hand and a second hand and this is represented by three divs and now coming to the css part we have used a background called vg.png for our project and you can see it here this is the background that we have used and then i wrote the css for the id clock container then i added the css for hour hand minute hand and the second hand individually and this is the clock phase that i have used so let's open it so this is the clock phase you can download it from google and coming to the javascript file here we have used the set interval method which calls this arrow function after every thousand millisecond then we have used this javascript method called new date and this allows us to get the current time and date if we append get our function to this new date function then we get the current hour the current minute and then current second by appending get minutes or get seconds or get hours to it and then we have we calculated the formula for degree of rotation for the hour hand minute hand and the second hand so these were the formula that we came up with and then we use the style dot transform part property to change the css for the hour hand minute hand and the second hand and this is the rotate function that i am using for changing the rotation or for rotating the hands of the clock so the main thing involved here is the basic mathematics here you as a programmer should be good in mathematics so i hope that you have learned something from this project thank you