Pure JavaScript - Learn JavaScript By Building A Real-World Application From Scratch

[Music] hi this is about stem from coding the smart way comm and today in this video tutorial I show you how to build a real world web application by only using Toyama script so we will not make use of any other modern web frameworks like angular react of UJS we will only use poor JavaScript and by following this tutorial you will be able to learn the basics and build a real-world application so stay tuned okay so let's take a look at the sample application we are going to build in this video tutorial and you can see it here it's a central issue tracker application where you can put in some issues may be issues with a regarding software product and you can describe each issues by using that input form here and we have input controls available for putting in a description text you can choose a severity here from a list of low medium and high and you can use the assigned to field of entering a name who is responsible for maybe solving that issue so let's try it out maybe we will use as a description here delete function in product it's not working and we choose severity medium and enter my name assigned to and then I can use the button head and you can see it immediately here shown in the bottom section of our application and you can see all the issue is shown here with status information so initially we are setting each issue to status open and you can see we have two user actions defined here by including two buttons see the user can choose to click on button close and by using the close button you can see the issue is put to use status closed maybe we can enter a second one so let's use second issue we put it too low and [Music] let's use another name here and you can see it's automatically added here to the list and now again it's put to open because of the initial status and you can see here is the severity here is the assigned to name shown and the second user action we have included here is the delete button the user can click on and by using the delete button he or she is able to remove that item from the list here okay so let's stop with implementing the sample application step by step and we will only use JavaScript and we will make no use of framework like angular and react and UK has already set so let's start right away I switch over to the terminal and let's first get the project setup done and I start by creating a new folder a new project folder so make your J's app a one okay let's change into that folder and then we do need two files here and so on we will keep things easy one file is it's our HTML file index.html and the second file is main dot KS ok so here we are ok so let's start on the source code editor and in my case on using Adam okay here we are so and let's start with opening index.html and start implementation and we will first do a very basic implementation of index.html so what do we need of course we need an HTML tag okay then we need a head section we need a body section of course and within the head section let's just say that we want to have a meter element and we'll use that to put our character set so cut care set equal to the string UTF - 8 okay and we will use the head section for defining a title okay let's name it young script turn issue Karaka is the title of our application and okay let's use a doctype of HTML and complete the first implementation by including in the body section script text and with the script tag we have the option of including our our main GS file where the other script code of our application goes into okay so main dot jf okay so the next step we need to take is to include the bootstrap framework in our application and maybe you you saw it from the user interface I showed you we are using the bootstrap CSS classes to include them as styling in our application so it does not affect our our implementation in playing the other script it's only used for of styling our user interface so that we can concentrate on on implementing our Yahoo script based web application and the easiest way of including now the bootstrap framework here is to go to get bootstrap comms and here on the web side you can see here is the button download bootstrap let's let's click on that button and here on that page you will see an overview of various possibilities of how to include bootstrap in your project the easiest way is to just use bootstrap from a content delivery network so woods web CDN is affection we um we are concentrating on and you can see if we want to include it from a content delivery network we need to include the three things in our application we need to include a link element which points to the stylesheet bootstrap mndot CS CSS and we need to include another link element which points to the bootstrap - a theme dot MnDOT the CSS but this is optional this is only needed if we want to use seaming we do not want to use seaming in our application so I do not need to include the second thing you but I need to institute the script element here that is pointing to the RS code file of bootstrap so let's do it let's first [Music] copy that link element and we will place place a link element in rehab here okay then take the script element copy it go back to Adam and include it here in the body section okay okay the bootstrap framework has one dependency and it needs jQuery so we need to include jQuery as well here in our project and again we are using it from a content delivery network so let's switch over and open another website and the website we need is code dot J query comm and you will find the jQuery core library here and we would like to use version a three point X and the minified version so let's click on it and you will get with the script tag we need to include in our application you will get it here and you can simply copy it to the clipboard and then switch back to Adam and include it now let's include it here okay then there is another dependency we do need and that is the small library which is called chance Jas the website is the Weibull at chance jegs.com and that library will only use it for one special task because we would like to generate global unique identifiers for each of the issue entries we are creating an our application and creating global unique event first is something this library is providing for us by simply using a function put as you can see here and we will use that function later on and now we need to make sure that this library is included and you will find that the meaningful minified version here and if I click on it we can take that URL here and go back to Adam and include another another script X with source set to that URL ok so that's all what's needed to hear I'll get early dependency which are used and that is the core implementation of index dot HTML ok next thing is to bring some content here into our body section and I do so by starting with this section and the dis section we'll get to find a class of container that the bootstrap class of course and within the big section let's start by adding a heading and the heading should be J as issue tracker and let's include small small tag by coding smart way calm okay so let's uncheck index dot HTML in the browser and you can do so by switching over to the command line and I'm using a web server here and the web server the development web server I'm you is called life life server so that is the command using that command I can start up the web server if you have not installed live server on your system you can do so by simply installing it from bio npm just type in npm install - g for installing it globally on your system and then use a package name live server so that would either command to install it i have already installed live server so i'm not going to execute this right now instead I'm starting with serve up okay and you can see it's automatically loading on the website here on the browser so here you can see my headline so let's see what's the advantage of using live server I will put it here as side-by-side so live server as a name already promises is a development web server with live reload capability so what does it mean I can for example now change something here my code face it and you can see the web site was the change included with the changed output here is reloaded immediate immediately I do not need to reload it manually it's just there so it's very easy to use it side by side was my code editor I can see immediately on what changes I am implementing here in the code I can see those changes reflected here in the website okay so let's take that out so okay let's continue on the implementation just here under our headline we now want to include on the HTML elements we do need for the form and the input form should be embedded in another dysfunction so what in okay and we give it a class of Jumbotron okay that's again a bootstrap CSS class and within that this section or let's include another headline and let's give it a headline of add new issue and then bring in the form element okay so we do not need the action attribute here instead we need to assign an ID and let it use the ID of issue input form okay and within our form element we will use three disk sections with a class form - group assigned so let's bring them in okay that's the first one class form - group okay and for the first input element let's use a label and the label is for the input element which gets assigned of the ID of issue description input and we give it a label of description okay next the input element and the input element for Ally description of course should be of type text we need a class of form control okay then we need to assign VI d which is issue discourage input okay and maybe like this one place over here and the place over the text should be describe the issue okay so that's the first fungal now we can take a better section here is the fungal section copy it one two so that we have three deep sections with class form this group assigned included here in our form and now we adapt the second this section here that's the input section which should be used for let's see what do we need we do need the similarity so let's give it the label of severity and change the ID here for which the label is for to issue the rarity input okay and next we do need the input element here that's text again [Music] no not in that case in that case we do need to have something this one here so we can remove it okay because we want to have a selection list so that the user can choose from the options low medium and high and to implement such a drop-down list we use the Select element and set and the Select element gets the ID of issue severity input and then within the Select element we do need to include three times the option element okay option don't forget the end here so it's option with the value of low that's the first option and the description of low here and last let's copy it okay then we have medium with a label medium then we have to value high with the list entry high okay so here we are whoo okay so we need to assign a class here as well which is the class form control once again so and you can see here as we are typing in the HTML code the output here here Nam in our browser window updates automatically and we can check right there that the drop-down list for example is already implemented correctly and showing the values low medium and high we have specified here and now we need to we need to adapt the third section here the third form and group and that's the input element for the assigned to value so let's adapt the label okay so that's again text we're using the input element here we assign the class form - control and the IDS again issue assigned to input placeholder let's check - and possible okay so here we are let's the form implemented you can see the form is there it's embedded in a Jumbotron that's indicated here at the gray by the gray background color and then we have the headline and we have three input elements the description which is of type text with the drop down list for the severity value and we have again a text here for the side - okay so one thing an our forum is as missing and we do need to include a submit button at the bottom of our form because we do want to have a button away verses of the user can click on the submit button and add the new issue entry - to the list of issues basically so let's include it here on right before the closing form text and we are using the button element okay and the button element gets the type which is submit in that case and it gets assigned again class and we are using actually two classes here we are using the button class and the button - primary class which gives us a result the blue colored button from okay and let's say that the button should contain a light LED okay here we are that is the button and now we need to include a few more things here right under the this section of the Jumbotron so one with continued implementation here and let's card was implementing a new dissection and what this section should be of class called s - LG 12 so that we use some all the 12 columns label on our layout and within that we are defining another dis section and we're using the ID attribute to assign an ID of issues list here okay that's all for now that this section will remain empty because we do only want to use it later on in our Yama script implementation when we are iterating over the list of issues and generating the HTML output we have the possibility of retrieving that this element here by retrieving it by using that ID here issues list and then we are inserting the content the HTML content here which is negative output all the lists all the issues in our list of issues and that HTML code will be generated dynamically in our Yahoo script code so that following later on so let's include one more thing here let's define another discussion and this time we are using a class of footer and within the footer let's use a paragraph element and then we say okay copy coding this mod wacom save it and you can see here is the result and yeah that's that's all we need here in index.html so far next thing else to implement the llaves code part of our application okay then let's switch over to our second file in the project directory and that is . jf and start implementation with a function which is called fetch issues and read function should be used to fetch the list of issues already on a Weibull and then as a data store and our application I would like to use the browser's local storage so that's the place that is a storage location where we will put issues which the user enters by using the form and that's a place we need to retrieve issues when the application starts and as we do need to retrieve issues as in various points in time so for example after the application has been loaded we will implement the function which we can later on call multiple times and that function is called fresh issues and if it supplies know where we put in the implementation which is fetching issue items from local storage and we start with the program code so let's define here a variable of the name issues and that should be equal to the result of Jason dot path and we are passing the return value from local storage get item and the item we would like to retrieve from local storage is the item within named issues okay next we will retrieve reference a reference to the dissection we declared in index dot HTML which helps the ID of issues list aside and in the other script we can do so by using document in calling the function get element by ID and then passing in the ID of the disk section and legacy issues list okay so let's initialize the content and make sure that the the content of that div element is empty and we can set the content by using a property which is called in our HTML and we set it just an empty string to make that sure okay okay now we need to bring in a loop and iterate over the issue items which are in the issues object and for each of the issue item inside that array we need to on generate the HTML code which is needed to to produce the output we want to have and that output needs to be added to the inner HTML property of issues worst and that's that's the way how we are generating the dynamic or is the output okay let's start we're using a for loop and the for loop is implemented by using for then we are defining a variable e equals zero and then we say he as less than issues class okay he plopped us okay and within that loop we are retrieving the various properties so let's define variable ID and we are assigning issues with index E and we are using the property ID here then let's say description should equal issues description okaying next thing is the very key then we have assigned to take the property and find two and finally we are setting the status to issues index e again and that status property okay okay with all those variables label let's generate the HTML output for that element and we will type that output to issues list inner HTML and subscribed okay and the first thing we need is this element and this element should get to class well okay let's close it so the next thing we do need is a headline and the headline will be embedded in an h6 text and the headline is just printing out the he/she ID okay and the issue ID of course is available in ID okay so the next thing is a paragraph and the paragraph should output of the status information and the status should be out put it by using a good strap label and we can do it by including a span element and assigning all the classes label and ylabel info to point it out in a light blue color and okay then use the status variables you include the status and concatenate another string here with the corresponding closing HTML text okay okay next line is another headline close this time h3 and we are outputting the description okay let's close it and then we need to output the severity information let's do that by using another paragraph and we want to output the sorority information by including an icon and bootstrap is providing a Nikon set and we can use that by again using the span element and give it a class of glyphs click on this icon like so and in that case we are using an icon which is called glyphicon - type okay those are concatenated of the value of the variable severity and finally let's close the paragraph okay and next thing is assigned to again we would like to output it by using not only the assigned Q value but also an icon it's the same thing so we can just copy it from here okay the items of time is not glyphicon - time it's called glyphicon - user pays value assigned to and let's close the paragraph again finally let's add two buttons for each armed element and one button should be for setting the status to closed and the other button should be for deleting the issue item from from the list and from local start and we do that by using an a element setting the HLF value to compound and assign in class of from button and button warning in the first case here okay so let it should be the close button and we are closing the element here the second button should be basically the same we are changing the class button warning to button danger and we are renaming the button with delete ok and now for both buttons we need to attach an event handler function to you the on click event and we do that by bringing in the on click attribute and assigning the method call we want to have so in that case for the close button we want to call a function which is named set that is closed of course we need to implement that function later on and in the second case here we want to call function which is called delete issue and of course only calling the function without passing any parameters is not sufficient we need to pass in into that function or the ID of the current element and we do that here by using the following backslash quote because we need to escape it here quote plus Rd and plus quote X slash for the second quote again and now we can take that spring copy it and insert it here and the call of the delete issue function it as well ok now one final string which needs to be concatenated here and that's the closing if element for the dish which has been opened here at the beginning and that's the last thing we need to concatenate here and it's finally our string of HTML code we are generating for each item okay so let's switch back to index dot HTML because now we want to make sure that our function fetch issues is executed one time when the application is loaded and we can achieve that by including here in the body element and attribute and event attribute which is called on load and assigning the call of the fetch issues function here and let make sure that such issues is called each time the application who loads at the moment you can see nothing has changed so far no output has been generated no issues are added to the output that's ok because we have not added any issues to local storage yet so executing that function is retrieving zero results okay so next let's implement on the source code which is needed to send data to local storage each time the user thought of the form and click on add and we are switching over to main j/s and the first thing i'm doing here is to add an event handler which handles on the submit event from our form and we can do so by saying document dot get element by ID again and i'm selecting the element we see rd issue input form because that is the ID of our form element and then I can say dot add event listener and want to respond to you or the submit event type as the first parameter I need to pattern here and I'm attaching an event handler method which I call let's say save issue okay so let's implement the save issue function next and do that here save issue okay we are passing in a parameter of e that's the event and the first thing I'm doing I'm defining some variables and designing the user input values to and the variables so let's start the first thing I need is the issue description and I want to have the well you need to user have type in into the description field here in a memo form and I can retrieve that value by saying document and get element by ID passing in the ID of the input element that's in issue issue desk input and then I would like to have value the same for issue severity let's again say docu mount get element by ID this time we want to have the element with CRD issue severity input and again the value next issue assigned to get element by ID and the ID is issue [Music] assigned to input okay the value okay that's basically what I need from my phone and then I need to two other things I do need mm identifier for that issue let's say you are issue Rd and now I'm using the chance to purchase library to generate a global unique identifier for that new ID and using that library is very easy I only need to say chance but good and this function is returning the global unique identifier and assigning that identifier now here to my issue ID arrival okay then I need to the status and I will set the status information to open because open is the initial status okay okay now we can put all those pieces of information together and create a new issue of the object so let's say well issue and then assign an object with properties of ID that OSU ID description that should be real description severity that should be issue severity okay I'm assigned to that should be issue sign to status should be put to issue status okay okay now that we have the issue object prepared we can continue inserting that object to local storage and we do that by first checking if there is already something in local storage and we do that by using the local storage and object here and using the method get' item and we get item I I would leave the issue from a local storage object that the object oh we would like to store all our issues come in and I check if this is now and if so [Music] let's initialize an empty array which is called issues as well okay and then push into that array our issue object from above with all the properties filled with the corresponding values and now the array issues is containing exact one element and now I can use the local storage again this time with set item and now I'm setting issues with the key and I'm setting that to the value to the Gaytan representation of let's see string string is high here on all our issues array so the json dot stringify method takes that array and generates a json object and that is the value we are storing in to the issues issues object and local storage that's the key okay okay now the L section and if we already recognize that we have something in local storage we need to insert our new object and a slightly different way first we need to retrieve everything which is in local storage at the moment and assistant I'm using JSON parsing and then requesting from local storage which get item again the issues object and I'm getting it back in JSON format and then I use case and pass to generate again an array which I then assign two issues here now we have everything in the issues array which is a Weibull in local storage and no again we can say issues push issue or a new object so this is extending the array one more element is inserted and now I can send it back to local storage so local storage again set item okay like so into the issues key and again I'm using JSON [Music] 25 and passing in the issues array here okay okay here we are that's basically the code we need to insert our new issue object into our local start but um before finishing implementation of save issue we need to do some final steps here first let's reset our input elements and we can use it very easily by saying document.getelementbyid d again I'm retrieving a reference to the form element by using the a D issue input form and then simply calling the reset method this makes sure that everything in the form is initialized and the values are removed next I'm once again calling fetch issues because now with a new element inserted into local search we'll need to call such issues again so that the list output is regenerated and the new element is included in the list output as well and finally I need to say here E is at the event of the object and then call the method prevent default just to prevent default okay like so just to prevent the form from submitting so that's basically all what's needed here in save issues so now let's check if everything is working as expected here in our application I am now using the form and type in the information I need to create a new issue so let's say or a function of X and I set it to medium and then I'm assigning myself and then click on button add and now you can see as expected the most output is generated on here you can see we have now one item on our list and it's output in the way we wanted to on to show up here we have VRD we have the status information the description text the severity the assigned to person and our t buttons close and delete and of course as we do not have implemented the event handlers yet those buttons are not working right now but that's the next step and now to check once again that it is stored in the local search you can open up the developer tools here and go to the tab application and here you can see here is the possibility to take a look into local storage for our application here running on port 8080 and you can see we have one object term with key issues inserted here and that object on have a value that's our with our ID and is containing all the values belonging to our issue object okay so let's continue with implementing the missing pieces of our application and as you might remember we have two more things to implement earlier we have defined here in our buttons to event handler functions set the status to closed for another close button and delete issue for other lip button of course and now we need to add both implementations to our file manager yes and we start by implementing the event handler method set status to close so okay it's a function of course and it's called set that is closed and it needs to take one parameter and that's the ID of the issue item the user would like to delete okay so on the first thing we need to do is again retrieve everything from local storage and put it into an array which is called issues and again we are using JSON path and seen before local starch get item and the item we would like to get is called issues again okay next we need to iterate over all the elements we have retrieved from local storage which now inside that array and compare the ID of each of those elements to the ID which is passed here into the method and if we have a match between those IDs we know that is the object we want to delete so let's use the for loop here and let's say for VAR e equals zero zero e less than shoes length and the cluster okay so let's do the comparison if issues index e dot ID equals ID then we want to delete it and there know not to leave it on queue to set status to closed delete will follow later on when we are implement the issue method so let's put the status property to status closed okay that is what we want to have here and now as the change is made into the object which is here still on the array we can now write it back to a local storage and again using the method set item and writing it back to the issues key and using json stringify to convert that array to json format okay and finally don't forget to call fetch issues again because we would like to update our output here so that's the implementation of set that is closed okay so here we'll one typo that's corrected and click fetch issue okay let's try it out now we can try to for that one item set the status from open to closed by using that button here so let's click close and you can see it immediately set to closed and it's updated with that new status information in local storage as well and as we call federal issues here at the end of our sets that is closed method the output is regenerated directly so that we can immediately see that the new status is available here in our user interface so finally let's implement our second event handler and that's the function with a name delete issue and again we need as a parameter the ID of the issue we would like to delete and for the implementation I will copy on pass the code from the set that is closed event handler and now it's basically the same a first step is to retrieve everything for me local storage stored in the issues array and then iterate over all the array items and compare VIPs and if the ID is equal we know that we have found all the issue which needs to be deleted and now I only need to change that line of code here instead of setting the status information to close I need to do something different and I'm using the splice method to splice that element out from bed array so it's index II and I want to splice out one element and so the element is removed from the array and then it's L ed so the same here I can write it back to local storage and now with the element removed and then call fetch issues again to update the list output ok let's save it and now we can try it out now let's sir let's enter another issue here so now it's error in function a and now we are setting like to high play let's edit here you can see a second item in our list and I will now first set that item to clear loans to play again it's close and then I'm using delete to delete it here thank you very much for watching this was a bastion from coding this Matt Wacom if you do like my videos please don't forget to subscribe to my channel here in YouTube and also was it my website at coding this mud wacom thank you very much again see you the next time bye [Music]

Channel: CodingTheSmartWay.com

Views: 295,956

Keywords: JS, Javascript, JavaScript Web Development, JavaScript Tutorial, Learn JavaScript, JavaScript Quickstart, JavaScript Web Application, JavaScript Development, Front-end, Web Development, ECMAScript, Learn ECMAScript, ECMAScript Tutorial, HTML

Id: NYq9J-Eur9U

Length: 60min 36sec (3636 seconds)

Published: Sat Jan 28 2017