Building A Vanilla JavaScript Todo App From Start To Finish | EP 1: Introduction & Project Setup

hi guys this is fasting again from coding the smart way calm welcome back today this is the beginning of a new tutorial series here encoding is a smart way and this time this series is about building JavaScript web application a vanilla JavaScript web application we will be building a to do application as a special thing about this series is that we will use pure JavaScript no frameworks involved of course HTML CSS and pure yarra script and that is all what's needed to build up but to do an application and we will do it step by step so that you will be able to learn everything from start to finish and really have the opportunity to get into JavaScript programming from the beginning without any prior knowledge required and this is what we do now of course you may ask this question why not use a framework because there are so many great frameworks in the Yahveh script web development area around and we have covered already here on coding the smart way that comes so many different frameworks just to name a few react angular well those are all great frameworks of course and its really worth taking a look into the framework when starting like the project but the truth is for most very simple web applications it's not needed to really bring in a framework because bringing in such llaman script framework on top of course is increasing complexity is increasing the effort you have to invest of first learning such a framework and there is another advantage of only using javascript because a very profound and good knowledge of Yahveh script is always a requirement for getting into those frameworks and so starting was application which is just consisting of pure vanilla our script it's always worse to do because with that you have the opportunity to learn JavaScript around the concepts there and then later on when maybe going forward and implementing more complex web applications it's easier for you to get into the frameworks and really separate what are the concepts coming from JavaScript on the one side and what are the concepts which are added for example by a framework like react this serious we're starting today is comprising multiple episodes and today of course we're starting with episode 1 in this first episode is about setting up this project setting up a project structure and then bring in the first part of the implementation so that we really have done the bases available we can move on in the next episode and do everything step-by-step so that you will be able to understand everything from bring in the HTML code styling the application which pure CSS code and then of course bringing in the logic with Java Script but before actually getting into the project getting to of a code I would quickly show you what we will have built at the end of this series so that you already have have an understanding of what is the final result and you can see it here that that's a very simple to do application and you can see we will be implementing a very nice and modern looking UI and functionality here is very simple you have that input field here available and I can directly add text here to create new to do our terms which is then added to this list area here underneath so for example first view is grab coffee so like so and then I can hit on that button here ok I can just hit return and then this new to-do item is added here to that list instantly without me to reload the page and anything like that that's not needed it's added instantly and we can add a second one here for example complete tutorial hitting return and you can see it's added to the list as well and we have two options here from the list and you can see it here we have that Hoover effect here if I'm moving over the icons they are colored in a in a red color here we can just check that item then it is crossed out list too and just to say that an item is completed and then we can delete it here then it's deleted from the list in total then we have two option clear all with that we can clear the complete list so let's try it out first let's say ok our coffee is there let's check it okay and then it's striped through as you can see here and of course I can redo it to you by clicking again on that check mark here and strike and bring in the strikethrough text decoration in again okay then we have the option to delete it here I can click on the trash icon here and then you can see we have a nice animation included here and then those to-do items removed from the list of course I can also use clear all option here to clear the complete list of to-do items with just one click so that's it very simple functionality modern looking UI and now we can start and we will do that with pure HTML CSS and JavaScript of course so to get started we first of all need to create a project and s we do not rely on any dependencies on any frameworks and so on creating this project is actually very easy because basically it comes down to creating just a new folder and a few farts in that folder and that is what I'm doing first of all here so saying make deer and I'm naming that project folder here vanilla - Jas - to do so that the project folder and then I can change into that newly created folder here and inside that folder we do need three files and I can create those new empty files by using the touch command here and the first file is a file where our HTML code goes into and that is index dot HTML then we have a file where our CSS code will be stored into and that is tired start CSS and finally of course the JavaScript file which is called F dot J s so those are the three files we do need no more and hitting return is creating those files here and as you can see set our project structure I would like to get started with okay now in the next step we need to insert first pieces of code into our files and to do so of course you can use any any editor and code editor you like to do that my recommendation is to use the free and open source visual studio code if you have no other preferences here and visual studio code the code editor which you can find let's see which you can find here at code via studio.com and you can download it for all major platforms you can see it here it's a way but for Mac OS for Windows for Linux and you can just download it here and then follow the steps of which the setup program guides you through to set up this code editor on your system and then you are ready to go this code editor is a great choice because even if your projects grew larger it helps you very much with structuring your projects with editing code and it is extensible so we can extend stall extensions here into Visual Studio code which makes working with your code with your implementation more easy and faster ok so I have already installed visuals to your code here on my system I can return to the command line here and then use a command code and don't just start Visual Studio code and open the current folder the my project folder here in Visual Studio code so that I have access to all those three files which I have just created here so let's increase the font size a little bit you can see it here it's FJ s which is an empty file it's index dot HTML empty as well and starts dot CSS that are the three files we have just created so let's start out in index dot HTML and let's insert a very simple HTML template here that can be done by just starting to end an exclamation mark here and then you get this code snippet presented here and I can just from the list here of two entries I can just hit return to select the first entry here and then insert this HTML code template so it's just a template here which which contains an HTML element here inside that HTML element of course a head element and the body element in that head all ready to meet our elements predefined and the title here and first of all we can change that title here and change it to the lil er-er script to do app like so so then we of course need to make sure that our Styles dot CSS file which later on is containing our CSS code to style our application UI is included here otherwise styling which is put into starts dr. CSS won't be applied and to include it here we need to include in the head section so right here under the title element we need to include a link element which has the attribute rel which is set to stylesheet and then sets the href attribute here to a string which is the name of the CSS file so in our case it starts dot CSS okay and then we need to make sure to include one further thing because we have that F dot J s file already created and therefore our Yama Script code goes into and we need to make sure that the see our script code is also included here in our app and therefore we need to add one more line here to index.html and what we need is a script element here and that is being placed in the body section and this script gets type attribute assigned and the type is set to the string text slash JavaScript like so and then we have this SSE attribute here which is pointing to the script file we would like to include and that is of course app dot J s so that's it that's basic setup now we have we have included all the files to CSS file the JavaScript file and we have a starting HTML template inserted here in index dot HTML okay then let's insert one more thing here in the body of section so that our application is already printing out a headline for example and let's do that by using an h1 here and the headline I would like to print out is just again the niller yeah was flipped to do app like so and then let already assign a class here to the body element let's give the class off container like so and then I would like to do in the next step I would like to include a font because at the end and that is what I demonstrated you would like to have a modern-looking user interface and for that I would like to include a modern-looking font as well and a great option is to do so is to use google fonts here and it's very easy so to quickly show you that you just need to go to fonts Google com here you have all the google fonts which can be used in for example a web application listed and you can directly tap here into search and the font I would like to use for our simple to do application is called rail way here it is and then you can just click on that entry here and it takes you to the following the following page here where you can select the styles of that font type and let's say we would like to have the light 300 and then I need to click select this style here and maybe I'm adding the italic one here as well okay and then you have that area here at the right side where the start of that font owls that here you have selected and then we can switch over to the embed tab here and this gives you a link element I can just copy that out here and go back to videos to your code and then just making sure that this link element is inserted here in the head section as well and having included this link element gives us and later on the possibility of applying that font type to the font we are using here in our web application to the text elements we are printing out actually hey men I would like to include another thing here because what you have been see in the sample application I've just demonstrated is there are icons which are used for example the trash icon to get a trash icon displayed where the user can click on and then delete the element we have the plus icon we have the check icon and all those icons are coming from an article library which is called font awesome and this library can be found on the web here for example if you type in font awesome it directly takes you to the project which is available here at font awesome here and we can include that we do not be to install it locally in our project and like we did before we can include it from an external resource like we did with the google fonts we can include it from a so called CD and account and delivering framework and doing so is it's very easy we can just go to google again type and font awesome CDN and then select the first entry here open it up that is the latest version here and then we can switch to the CSS tab and include the first link you with which is pointing to all dot min dot CSS which is basically the bundle here which is including all the icons the library is offering and we can copy that here go back to visual studio code here right inside the head section insert another line start with a link element here which is of type star sheet here and then insert this string here which is assigned to the edge ref attribute here to include the font awesome library from a content delivery network so that we can later on apply special CSS classes here and they always get our icons included in the UI so so man we have it our basic HTML template with a Google font included which font awesome library included with our app KS included and of course we are including our style start the CSS which is coming from our local project folder and we can test it out just to see if we get that output here it's basically only that headline so far and there is a great thing here in Visual Studio code you can go here to the extension tab and search for extension which is called live server just type it in here and then you can find the first hit here alive server and in a stolid as you can see here I have already installed it so it's not giving me the install option here like for all the other packages if you have not installed a live server package already you can install here but just then hitting that install button which is then displayed here for that entry as well and just edit you to visuals to you to bring in your first extension and then you have the option to select from the context menu here to select open with live server if you click on index dot HTML because it's a starting point of our application or you can click here in the status bar on go live as well this isn't starting up a life server as you can see and that is an indicating on which part it is running and at the same time the browser comes up displaying already the result here and life server is just a very simple web server but great thing about that larger functionality is you can just quality from within visual studio code and live server has live reloading capabilities so meaning you change anything in your code base and then the website output here in the browser as long as live server is running is updated automatically we will see later on without needing to reload anything in a manual way so live server is the tool we will be using for our complete project just to have a very simple web server up and running and have that live reloading kappa capability available okay great so this one sebastian from codings a smart way sensor very much for watching this first episode of my implementing a vanilla JavaScript to do application from start to finish serious and if you do access serious please don't forget to subscribe to my channel on youtube if you haven't so because subscribing to my channel and hitting the bell on youtube make sure that you will not miss one of the next episodes which will be released very soon I hope you do likes a serious I hope you have fun building such a simple and to play near a script web application from scratch and we will continue doing so with the next steps in the next episode so I hope to see you in one of the next videos again until then have a good time have much fun trying everything out have much fun trying to build your own JavaScript application and see you the next time bye you you

Channel: CodingTheSmartWay.com

Views: 7,618

Keywords: JavaScript, Vanilla JavaScript, Pure JavaScript, No Frameworks, Vanilla JavaScript Todo App, JavaScript Todo App, JavaScript Only, No Framework, Vanilla JavaScript Tutorial, Learn JavaScript, JavaScript Tutorial, How To Build A JavaScript App, JavaScript Web Application, From Start To FInish, JavaScript Series, CodingTheSmartWay, Project Setup

Id: Udw66fdmKfQ

Length: 21min 41sec (1301 seconds)

Published: Sun Jul 12 2020