🔥4 JavaScript Projects under 4 Hours | JavaScript Tutorial For Beginners | JavaScript | Simplilearn

foreign welcome to this interesting video in JavaScript the best way to master a language is by programming in it if you enjoy watching such Tech videos make sure to subscribe to our Channel and hit the Bell icon to never miss an update so what's in store for you we'll first create some simple beginner level projects like how to build a calculator app then we'll move on to more advanced apps like the weather app the tic-tac-toe game and finally we'll conclude the session by creating a snake game application now I'm sure you're excited to dive deep into it so let's begin so decided to basically develop very interesting project in JavaScript traditional calculator application like you have seen earlier some projects like in tic-tac-toe you talk about snacking you talk about the quiz application this time we're going to introduce you another very interesting project using this JavaScript HTML CSS so called calculator application so let's get started let me try to delete first those files which we really do not need it now uh we delete this all yeah now I'll be creating a new folder now into the name call calculator and in this calculator app once again we need some new files which is called index Dot ht1 and we also need one more that is called app Dot CSS and another one that is called app dot Js so these three files required now first of all I would start with index.html file where we'll be creating a template of my code now let me go and create I forgot body with me let's start with the first tag here that's called H1 and this H1 we are giving the name called calculator so that will be my H1 heading after that we'll start working the div tag now within this tip I have to create lot many classes I may not have lot many CS classes but we can't give some classes here so we can say class equal to container okay so within this div tag we're going to create to organize it so I'm starting with the table within this table TR tag and within this TR tag I need a TD now in this 3D I need few things called call span equal to 3 another value here I want to offer the text box type equal to text okay inputable text ID equal to give the new core result that will be the final outcome while pressing all the different buttons ID equal to result and plus equal to the screen remember I haven't created two CSS classes but we're giving some names but later on we can utilize it while creating those CSS classes table data is getting closed let's get started with another TD now inside this TD we need another text box type equal to text and here in this input a group text sorry I would like to better say button because I'll be having buttons okay input I'm equal to button value equal to C and one click equal to I may not have any function right now but yes I can create a function but let me give some dummy name here I'm saying clear screen okay so that will be the function we get called and after that class equal to clear yeah so this is my button tag after this a TD tag is getting closed after the daily tag the table rules also getting closed after the table row which is getting close we're going to start working with another table row okay and in this table view I'm going to create one more TD so let's go and create another TD here and inside is 3D I'll be having another project we get created so I'll just say this is my another button now input Apple button value equal to 1 on click equal to you call it another function called display okay and inside this we're giving the valuable one okay and class equal to number class equal to number and here after that the TV Tag is getting closed okay now you have to start another TD tag here okay like that you keep on creating the multiple button so let me copy and press another table data here again value equal to for equal to display give the value equal to and class equal to what number like that I'll keep on creating multiple buttons but first check how it actually looks like it now I can see the buttons so I can see one two three but yes I'm going to create few more buttons one after another okay so I'll go here and create few more buttons so this is where the table data is getting closed okay I'll copy this now paste it again how to create the button like in three four something like that so after this two we're giving the vertical three yeah three so value equal to 2 value equal to 3 display 3 and then afterwards just giving the value call forward slash and here also you're going to get the vertical forward slash and here class equal to operator operator after that we have to give the value Code 4 and Then followed by six seven so you're making four four five five six after six we're giving call minus [Music] okay one second it will be what type of operator okay after this minus we'll be talking about course seven then we have to have a okay nine okay after that we're giving chord Plus and display plus plus equal to operator okay so here you can see the table data is getting closed and here the table is also getting closed and after this table row you can start working with with another table over here and after this table row we can start working with again TD let me have this again inside this I'll be given the option called decimal which is value equal to Dot and here we get the vertical decimal decimal okay now this will be zero so after giving this dot it basically take what the value 0 which we have input now so we're talking about value called zero so here the decimal value we have given it TD is getting close let me have the another one zero zero so like that we have to keep this now after that maybe once again taking this and this time rather than giving this zero we'll be using this call as a button and value equal to equal to or click equal to solve okay and then this song will not be passing anything it looks like a normal function and plus equal to equal okay so table data is getting closed so we will be using another table data now so here it will be the button only okay it will be using call equal to multiplication display and here we'll be using operator okay so table data is getting close table rules getting close table is also getting closed here okay so your Dev tag is also getting closed here okay that's it okay so that's the only thing which we wanted to make awesome so we have got uh all those necessary calculator Behavior which we wanted to review okay now our next statement will be once we are giving this C then you have to call one two three and then forward slash followed by four five six will come down okay so let me check whether we view six or not okay so we haven't used six so let me check here four five six so let me go back here four five six let me copy this and paste it later on before minus equal to okay so we're almost set now so we are having this look and see in this way giving one two three four five six and after this we have a call minus and then plus related Behavior so we are all set now and after that we'll be basically applying the CSS as well as the JavaScript look towards my code okay thank you well everybody we are all good to go now but I just want to first check whether my uh this Outlook is looking properly or not see what my expectation is after one two three forward slash I really want to bring four five six to the next and then seven eight nine end again forward slip but I can think this is absolutely unorganized so after this when we say this forward slash which we have used after hyphen okay your TD is getting closed here okay so here the TR I also want to close here okay and after this tier I also want to start another tier here okay so that I can put them into the another level now so under this TR I can use this DD now so after this minus after four five six minus once again I would like to start another table row here okay so that it lines go to the next row so here after TD we're closing this Dr and starting another tier now okay we're starting another tier after that we talk about seven eight nine okay plus see here talking about 789 plus here the table is getting close and it is starting right now like this see that looks better now okay but still few more things which I would like to make it even more organized but that's not a problem we will do it later on okay because you can see it is missing right now so here seven let me copy this equal to T8 yeah that looks better now so now they are basically completely organized so the moment I expect my application so we will call Dot here then 0 then equal to and then we will call multiplication okay so it looks better now now I just would like to perform the overall look at field so I need to go ahead and use what CSS because without CSS I really can't utilize this in a proper way so I have to start working with a series first we will go back to my code and here to my CSS we'll start working with font family but before font family I would like to start with the body part now body background color that looks so I will be using this app.css in my HTML to see the look how it is being appeared right now so in my index.html file on the top under my head section link stylesheet okay now see it looks better now going forward in my services you want to use some H1 color too so here we would like to use the H1 sector because white merging top margin top would like to use 50 pixels this is for H1 let's check perfect so it is now coming in between next statement will be called the screen so we say dot screen so in this screen we use the background color if I go to the gray and after that border border solid black and two pixels after that color white font size medium next bit we're using this hundred percent then we'll talk about cursor will be same what are the default cursor is then padding you would like to say 20 . and then margin say Auto then margin bottom so the proper ly okay look that's how exactly we want that's for a screen where the exact outcome will be visible to me and rest of the details we'll be showing you one by one and now we'll be talking about called input okay input type equal to button for input type equal to button okay into button of type mode over the model over on my button I say background color to what okay and when the button is active what do you want let me copy and put a little button button and here I say in this like this as you can see now how it's basically looking like it okay active the color will be like this okay I'll be talking about operators operator should behave different from same Dot operator in this opportunity I want 5 pixels okay then I want color that should be black after this I'm using call border sorry the portal I'm using this called solid and then black and after this bit I'm using 100 then height height is 40 pixels then cursive let us keep quantitative okay that's it perfect so they should turn back to what to your original and you can see the moment I take my curves on the returns to White perfect and now those who are type number I also want to change them so for number phone number I want to say the same option spreading I want 5 pixels then I need height of time 40 pixels then I say color it looks I want to see called Black that border border I want solid black into this for it look it says then with I would say Point width I would say 100 percent and cursor once again what that's for number let's check awesome so they looks nice now we left a few other type of options I can Dot and equal to okay that is nothing but good decimal or decimal I need to have a different options with Okay so let me try to copy this paste it and I say for does it so for decimal background color will be light blue heading 5 pixels color black or solid okay black two pixels with 100 540 pixels fine and closer pointer perfect okay looks nice but I have changed the color to light blue now I talk about clear okay now come back and see clear okay in this color background color is object light salmon light salmon padding 5 pixels color black border same width hundred percent 540 pixels fine so cursor pointer Point margin Auto and margin bottom margin bottom let's check perfect now it looks beautiful okay now here after giving this details we're talking about called equal part dot equal so for protocol also I'm just copying the same so you have a background color adding color just change to lightly lightly and after this since it is equal so we say padding 5 pixels is okay color black find model find width hundred percent High 40 pixels color and cursor pointers just I don't need this photo and I want for container container in this container with time 140 with 40 percent black angular White foreign pixels so display block first of all you follow it you see just click block which we're taking margin okay in March okay now align cells equal to send okay border radius border radius which is 10 pixels okay now we're using box shadow box Shadow 5 pixels black and ready to do the retails I have it now okay we have it background color we are taking it now align sir display block order radius padding and now ready 15 pixels we've given already I don't need to give it any merging or fine box here let's try awesome so it's looking beautiful now okay so this where exactly my application works like that and table will talk about everything width foreign okay that's it super so it's now giving me the proper look of how my application should be here but I can just see about the container what we have done with 40 we are taking background color let's bring it below then align itself display block okay margin okay and Border radius and uh fine I think we're all good now so that's it so we'll try and implement the JavaScript part well every now so our CSS file is ready our HTML is ready it's time to just uh go ahead and talk about my file portion that is called GS part where I want to basically perform some calculators now here I just see function display function display which takes that as in parameter and Save document dot integrated mean by ID here I'm saying result okay dot value okay plus equal to whatever we are adding it just it basically try to apply calculation on the top of that okay here's the function after that we have another functions available here called function solve here in the song you just use the value called lit x equal to document dot create image by ID result okay dot well sorry dot value okay and say delete all right equal to perform the calculations probably be using one function called either and type access and parameter now the next statement will be again document Dot created by ID Dot value equal to y okay now later on so I'll write to you another function here function here screen and here we say document ID here we see result report value equal to like that so clear screen so and display three functions are associated with me and these three functions are the part of this JavaScript file which I'll be calling it at the end before the water tank that closed so here 's the script equal to I have plot yes that's it okay let's try to execute now here two you can see the values I will say plus six equal to 8 R2 here I say C is clear the screen six divided by 2 equal to 3. awesome so friends your calculator application is ready congratulations to all so it is a very simplest form which we have developed this is your HTML which is a template for you this is the CSS which is your complete the area of like how the look and feed will look like in of this template beautification and here last we look at GS which is smaller logic but really meaningful okay hello everyone and uh welcome to the another very exciting project for our development in JavaScript that is known it's called weatherpro it is in a continuation to the series of the previous project what we have developed in JavaScript and this is once again a very competitive project I'm gonna present to you which is called weatherpro where I would like to offer you the real-time weather application into your browser taken from the real-time weather applications okay so let's get started with the new development of our application which is called a weather probe now once again compared to the previous project what we have seen these projects were working more a kind of static in nature where like you talk about snake game you talk about Tick Tock too or other type of games like an online quiz where the data was very much static in nature but we were presenting the data in the form of more dynamic in nature this time this project we are presenting you while connecting with the real-time weather application where I'll be making a one rest API call or else you can see asynchronous call and since JavaScript is working as a what a pure asynchronous nature you will be enjoying the way how the JavaScript can communicate with your backend load the data and represent the records in a very very beautiful manner so once again we would need this vs code editor only just to develop our code and once again for developing a presentation part will be using HTML for formatting part will be using CSS and to make some Dynamic update we'll be using JavaScript now here I'm going to create a new file name called index .html apparently I just want one more that's not called app.css and another file we needed and that is called your GS file so you're saying up dot GS5 so total number of three files are available to us so I'll start working with an HTML now and here will start with this HTML templates now here first of all I would like to load my CSS file which I do not have right now but certainly I can use it okay so I can just say link area equal to style sheet and href equal to app dot CSS well that is my CSS location now I just want to create some this link area I would better use inside my head tag that will be the more convenient place now in my body I want to have some of the div tags and there I can decide where the weather to be displayed so I can just start with my div tag now with my div tag I say plus equal to I can just create a class which later on I can offer a different size of or different type of styles so we can say container so we're saying div class equal to container now within a div tag we'll like to use another Dev tag which is a nested one so this tip will have another class called class equal to app hyphen title I have hyphen title in the same div tag we can use this typical paragraph tag and here we say weather info whether info now after this paragraph tag we want to have a text box because I would expect a client to enter the detail on which city or for which city he or she would like to get the details so we can say input some properties like ID equal to search second type equal to text next placeholder equal to okay enter the city next autocomplete I'm saying autocomplete of the reason because I do not want the previous value user can see in this case we can say autocomplete off I do not want any autocomplete in this okay now here it is getting close now after that we also want the locations for that I may use some of the PNG files and all but right now I just want to display the details of the user like which city he belongs to in accordingly I can display the records right in your application so for that I really need some of the dev tags once again when I get display the details of this particular City so I'm just having this only text box let me go and check go back and check how it looks so I have a call into the city so here I'll be picking up the city and somewhere down the line I have to display the record so after this tip we can also have some of the locations to be displayed so we can just use the notifications and also the location where you want the details to be displayed okay so we can use Dev class equal to temperature value temperature hyphen value okay so div plus equal to temperature high point value but inside this I will be using a paragraph tag and here is my paragraph I'll say hyphen and this degree Centigrade or whatever you want to display it here and we'll use spandex in this and show in degree centigrade that's it and if you want to define the temperature description after this Dev tag we can use another Dev tag and inside my Dev tag I can Define the temperature description okay so we can sit here class equal to temperature hyphen description temperature hyphen description and within this I'll be using what a paragraph tag here I'll be displaying all the description so right now that is the only thing which I want let me check okay so it's here right now so now let me try to collect the value from the client and perform some JavaScript tag within this okay now it's time for us to go back and try to bring some of the CSS features insert my code now now few things I would like to say is I have basically downloaded some fonts which I would like to use it in my application and I also have some of the icons which I would like to use during my application presentation so there are some PNG files are there which I've downloaded from the internet just to bring more beautiful experience towards my application development well this is another background image which is called vg.jpg which I would like to make it as a background of my existing application so I'll start with my CSS and see how this CSS can really bring some new features to my code well first thing I need to have a called font face so to make this font face we are using this statement name call here at the rate on face and I like to use Font family foreign family amazing mod select okay it is already there with me monster it and the URL what is looking forward for so we are saying SRC URL and I'm saying under the font so we have a file called tdf okay that is called bold.df that is the file which is there next thing so for every location I want to use the font family font hyphen family I want to use same answer and the next thing is like in my body so in my body few details like background image I need URL and in this URL we can say bg.jpg in my background next thing is background color that I needed still blue then I need height I'll say 500 pixels next your background position all right this I needed is Center next is your background repeat I say no repeat next is your background size this I'm saying cover this is my body part okay let's check okay looks awesome now you see this now this is how my weather info is looking like it I can see like the background looks awesome now now next thing we required a container so you say dot container container we save it with 50 percent next background color which is using white next we needed to see our align itself that will be Center display if we block margin so in margin you can say 100 pixels after that border radius border radius we are saying that pixels and then padding bottom this padding bottom will be 50 pixels then box shadow this box should be giving 5 pixels 10 pixels 20 pixels and black this will be with my content so index.html file we have a call container now okay looks awesome now so this is where exactly the details will be okay now after this thesis container we have used we can talk about called title you can say hyper title inside this we will save it will be 100 percent then height will be 150 pixels then border radius 10 pixels 10 pixels then we need display we need Flex and then we need align items this align items which is saying Center next we need justify content that will be the Justified content will be the center then Flex Direction would be column so this option we are using for our tool name called what app iphone title okay so here in my index.html file we were called D plus equal to what our python title we go to weather info let's check okay so this is the another we have used that it's called app title now we need to use it for paragraph inside my app title what should be alignment for my paragraph so here this app title app title space b but it should be the class so we are saying Dot and there also we have to use what dot because both have to be the Class Type okay so here you can see now there is a difference I forgot to add Dot and now I can see it looks better comparatively paragraph So once again in my paragraph I'll be having text align Center padding I want 15 pixels then I need margin margin would be zero and Auto followed by font size font size these are things called 1.2 here this position then color you're giving hash value call 333 okay now here okay so some changes in a paragraph well going forward for the search because if you remember we have an index.html file we have a call ID equal to what search so here in my app Dot CSS I have to use hash search okay so this search conditions I want to use it now inside my search I need few things one is called display I need block after that I need margin left Auto margin right Auto width I'm looking forward for five pixels height that I'm looking forward for 20 pixels then border radius foreign pixels then outline that's called none let me say border okay in this bottle what we can say three pixels space solid okay and once again that's what let's check foreign block margin left Auto margin right Auto with 5 pixels width padding sorry one thing I said hiding should be 5 pixels width foreign let's check yeah let's look better now okay so my text box is now ready I'll be having some of the details for the notifications also so what I need for the notifications let me go back and create a class for notification so dot notification okay know the notifications I would like to give some value called background color and in this background color we are just giving White and after that we are saying display I'm using none this is for notification and followed by the notification we're talking about the same notification okay and followed by its paragraph we are giving the color first of all it is in color color is basically red okay first if you want to give maroon and after this the next property we're taking is called font size we're taking is called 1.2 am followed by margin margin we are taking is zero after that texture line Center adding 10 pixels 0. so this is for notification p and then the weather container okay in my wizard container I will save it 100 percent sorry here with 100 height will be giving 260 pixels for it to you to 50 pixels if you want background color this background color we are giving this call once again White and followed by margin top 20 pixels 20. pixels this is for weather container now for the weather icon weather hyphen icon I'm saying width is 100 percent and height 128 pixels just to give you a better look now the next thing we're using Dot weather iPhone icon space IMG here we're going display none and sorry display not no I will say rather block display block and margin giving 0 space Auto this for Icon and location icon if I want to give then location hyphen icon this location icon I can save it same width height so width I'm giving is 100 percent then height I'm giving 40 pixels and then we give this option called padding then 10 pixels so it's not location icon now followed by location icon we are also giving call location icon IMG okay dot location hyphen icon space IMG here we're giving the value called display block on display block with giving is called 32 pixels and then we're looking forward margin margin would be 10 pixels and Auto then cursor so cursor will be pointer for sure and then we required padding pardon me looking forward for 5 pixels followed by border border we are looking forward for State Loop steel blue solid and two pixels then border radius quarter radius we're looking forward for 10 pixels and followed by your color steel blue so these are the look and feel we have to basically offer it for my current application which I yet to discuss in my next development then I'll be having some small small properties here okay and those properties are nothing but to give you the details of like uh temperature values so we say dot temperature hyphen value okay this type of value we can give it foreign pixels okay this is for temperature value let me copy this again and uh I'm giving this temperature value space paragraph here I'm gonna give padding zero margin 0 then color which color you're looking forward for we can just say dark gray okay for any color which you're looking forward for it's up to you now but if you want you can change the color also to the other one we are giving this called hash 293 okay two five four okay that is a more perfect color for this development now font size 4 em Then followed by texture line and once again Center so this is for temperature value p we haven't used much but you can see now it looks somewhere in much more better way okay that is called temperature value P then you can use the temperature values Prime here Dot temperature value span space span and here we remove the additional Dot now within this is spam say color once again save and font size span and in the same temperature description paragraph you can use it Dot temperature iPhone description space b so this will be having the padding of 8 pixels the margin 0. followed by color same color the one which we have used it earlier foreign Center font size 1.2 here this is for temperature description okay last which is available for your location so let me give the location now Dot location space p here we can say margin 0 then padding zero then color same color I would like to use after this color texture line and font size and copy text align Center and here we'll be giving some different values 0.8 okay and last which is really left with called div in that relative here position I'll be using absolute top from Top I'm using 600 pixels okay and right everything 120 pixels okay so all set so you can see now here we have to basically offer the details how my pictures will be taken it out so this is what my CSS now we'll be applying some of the CSS into my applying the CSS into my HTML to see how it really looks like it if getting your learning started it's half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more okay so we have seen some of the CSS classes we have introduced in my HTML we have used this autocomplete equal to off then we have used strip classical root temperature value okay if you just check carefully we have used this temperature and if we have used temperature hyphen value but before that we would like to use some other properties too okay after this auto complete equal to off we want to use uh another div class okay before my previous debt tag is closed here so here after this people like to use another div tag div here in my div I'll say plus equal to location hyphen icon location hyphen icon okay and here I'll be using IMG SRC equal to what under icons I'm using the file name called location dot PNG and ALT equal to we leave it as it is a blank okay now here the Dev tag is getting closed okay now there's another Dev tag is getting closed here so two div tags are closed after that we'll be using another div class for notification here real class equal to notification div class equal to notification and this step tag is getting close right here okay now another tip for the weather condition another div type and here we say class equal to weather hyphen condition thank you brother hyphen what a condition or I can say whether iPhone container whichever so I can say weather hyphen container under this weather container I like to use another tip for weather icon therefore class equal to weather hyper icon all right weather hyphen icon and within this I want to use another IMG SRC equal to once again icons slash unknown dot PNG okay div tag is getting closed so after this div tag is closed I'm gonna use temperature value so the temperature value is anyways used here if you see resin call temperature value after the first step tag is closed you see like temperature value we have used after that the paragraph tag and the temperature hyphen description P after the P that the div tag is getting close okay and after this we are using tip class equal to location so we want to use do plus equal to location and within this location we want to use one more paragraph tag [Music] with this hyphen after this paragraph it's closed desktop tag desktop tag another type three div tags are closed that's it and at the last before my body tag is closed I would like to use SRC equal to app dot Js that's it let's check great my application looks pretty beautiful now so this I want to be displayed only when I don't find the weather and the location and also look and feel is absolutely good and now I'll start working on my JavaScript okay so let's go ahead and start writing our JavaScript code so in this JavaScript code first of all I need few things uh first thing what I need is called individual elements or individual properties of my application I need const icon element I can remain equal to document Dot query selector and I'll be using the name call Dot wither hyphen icon okay now copy this now we will call icon element we can say location icon call location icon here we are saying dot location hyphen icon now next I need is called temp element we are using the property called Dot temperature hyphen value space p next we're looking forward for desk element which is called description here we're giving temperature hyper description hyphen temperature happen description space what then location element okay we need location element when we use dot location [Music] next we need notification element notification element and here we're gonna give the call notification notification so four properties we have taken so we are selecting all the elements next statement what we're going to talk about see this statement is all about selecting the elements the next step we are talking about call get the input field so we are saying VAR input equal to document Dot get element by ID here we give the name call search which is the name or ID of my text box select City equal to blank next we're going to cube score let latitude equal to 0.0 we are initializing this value and let longitude let longitude equal to again 0.0 so we are getting the coordinates right now so this is how to get the input Fields next we want to apply the events here we are saying input to variable Dot add event listener the variable what we're talking about which event is going to be talking about key up okay up and what even do you want to apply so we are saying function with a parameter name called what event and now we would like to attach the logic now we're saying if what are the condition event Dot key code equal to 30. okay then that means number 13 is basically the inter see the key code means what 13 13 represent the enter keyword so event.key code equal to what 13 so we are saying event dot prevent default why we're using this because I do not want my page to be get refreshed just to avoid this we are using this and after that we are saying City equal to input Dot value now you'll be using this or other function because I do not have function created otherwise I have to call the function name called get search whether I'll be passing this as in parameter so we will get searched whether I do not have this function I yet to create this and pass it here as a what City and you say console DOT log City whatever we are basically printing it okay so that is the first thing later on we need to get the data so to get the data we are just using this variable name called const whether equal to const whether equal to curly places after that we are saying whether Dot temperature equal to this and which temperature conditions you want on the same unit of type what Celsius I wanted a Celsius okay so next statement will be getting the details in kelvin I'm saying const Kelvin equal to value of the Kelvin is what 273 and after that go on C ultimately what we need is we need to interact with our backend API from where I will get or receive the updated weather applications okay now to get this I'll be using one very popular API here that is known as call open weather map.org this is all very very popular app which people use it and it's used and trusted by many companies clear so here what you can do this open with a map.org so you need to basically first of all get yourself registered because if any third party application is interacting it requires that particular unique API key since as a visitor you really can't get it unless you register yourself so I have my APK with me so I'll go here It'll ask me for the registration so I already signed up so if you're not easy to sign it there's an API key for me which I need to copy and this API key I'll be using it in my project so I just use this property called const k equal to paste my key here okay after this pasting the key but make sure that you rather using my key you use your key otherwise this application sometimes won't work so I'm basically trying to use this tool name for jio location I'm saying if geo location okay and Navigator Navigator is unit is a browser object model element so here we are using Navigator okay Navigator Dot jio location Dot get current position in which I'll be passing the first parameter new convert set position and second parameter will be show error in case if any error is received okay else in the sales condition what would happen I'm using this statement in call notification element if it is notification element Dot style Dot notification remain Dot get Elements by class name but I don't need this rather I will use what the style dot display equal to block then I'll be using the same notification element Dot inner HTML equal to You're Gonna use a paragraph saying what browser doesn't support so you have to enable the current location of use okay that's where exactly so after that we have to basically set what the user position okay if the user is having that support available so after this location we'll be just using another function here function set foreign it will I'll be taking position as a parameter and take latitude latitude equal to position Dot Chords chords for coordinates Dot latitude okay like that longitude equal to what position Dot chords Dot longitude after this we'll be using this function called what get weather so this get weather will be the function in which you will be passing it so this function will be soon see I'll be having it defined below but as of now we are just saying get feather and in which this we are passing latitude and longitude that's it so we have this functioning called what set position in which we'll be passing all the values okay at the same time I'll be using one more function here that is called function not function in fact I would like to use location icon the one which you defined on the top part add event listener which even listener I'm saying one click second function which take event is in parameter and inside this I'm saying console just to confirm whether the records have been taken console.log hey just and we say get with it okay one second we'll be passing what latitude and longitude same I just copy this and paste it here okay everyone so we have written till here when I try to run my browser so I should see there is a message name called show error is not defined but obvious because this message what we're writing it here called show error okay this as a function as a parameter it is not defined let me Define this function called show error so we are saying function show error which take errorism sorry just take errorism parameter in this we are using notification Dot Style dot display equal to what block after that once again notification element Dot inner HTML equal to what we're just using this as a paragraph and here Dot message okay and after that paragraph so this is how we are basically writing it down and now see it is immediately asking you to know your location okay if I say allow that's okay okay so nothing you can see now it is saying get weather is not defined because right now the moment I click on this so it is saying like get weather is not defined but obvious because I told you this great weather function I need to develop so I get to develop this function called get weather but before that I'm using another function called function get search weather okay search whether in which I'll be passing what city name now what exactly my API will be in case if I want to make a call I will be using let API equal to now the URL will be what HTTP colon double forward slash API Dot open weather map Dot org now open weather map.org slush data slash two point sorry 2.5 that is a version slash weather okay question mark I have to take the city dynamically so I'm saying whether question mark Cube equal to here we're using what city and where is the amp percent app ID equal to double app ID we have used it already okay what is that key so that is a key which you've already written that app ideally we are passing it right over here okay Q equal to city and have I equal to this now after that to make the restful API call I'll be using one independent or by default API which is available to us that is one is called what fetch okay so if you just check this fetch it is basically a take request info and give you the word a promise response so return type will be the promise type in this fetch I will be passing what the API and we'll be using dot then that means if the request is successful using function function response then function is a parameter response we are saying let data equal to response dot I'm expecting the responses type of what Json is in Json now and return what data so it will be returning data back to me now if it is successful then what then say dot then once again it is chaining okay function again parameters now in this case we'll be getting lot of things I am saying whether okay dot temperature it's a predefined DOT value equal to I'm using what math Dot flow inside this we are crossing code data Dot main dot temp it is a predefined property we are receiving it now hyphen Kelvin what are the Kelvin values basically we're taking score 273 on the top minus Kelvin followed by another property what weather Dot description whether dot description equal to we're using data Dot whether zeroth position because it contains a lot of data but I will be taking what description out of that then weather Dot icon ID whether or not I can ID equal to data Dot weather Dot icon then dot icon then once again weather Dot City okay equal to data Dot name after this weather.country Dot equal to data Dot sys Dot so these are the properties I have it right now with me okay and once I received all the property I'll be using Dot then I'll be using one function and I will say what display there is no function written called display weather but I'm gonna say there's a one function name called display together this function I have to write but this function just putting it here okay now this is closed after that since I need to get a weather from the API provider so I have to also pass what the latitude and longitude which I am receiving it from the client because here I just want to have two things the properties as well as whether both and both I'll be using it one by one okay so here we have kept this get search weather and now I'll be calling one more function after this logic and I'm giving the name call function get weather okay it takes two parameter one is called what latitude and second is called longitude so we have two things called attitude and longitude and here I'm using this property called what lit API equal to once again if you remember uh I have used this statement I'll just copy the same and password it here but challenge would be this time I will not be passing city name because the two options are available either you type the city name or else you click on the icon and let your application identify the location which you belong to so after this weather question mark here I will not be using Q I'm using what led equal to latitude okay and we're using and Halloween equal to we're using longitude okay and applied equal to what key so this is the variable which we have it now okay now similar thing which we have used it on the top okay called Fetch API so I just copy this same fetch API again because I really don't want to waste time on keep on typing the code when we know it very well it can be similarly done I just copy and paste it here so the same fetch API dot then response data equal to response.json return data then display weather so we have used the same thing here and after that we have to use the last function here that is called display weather display weather and here in my display weather I can use what icon element Dot inner HTML equal to I'll be using IMG SRC equal to icons slash dollar and we'll be passing what weather okay dot icon ID okay dot PNG Okay so that we are basically putting it here dot PNG and after that we're just closing that okay and this icon we also need to close here rather than closing this I'll be closing that and this I'll be closing it here now we'll be using top element sorry temp element Dot inner HTML equal to what we'll be using this dollar weather Dot temperature Dot value okay and after this value we can just use this asterisk sign the one which I told you okay and use expire okay next we are using called Talk element so we have okay sorry DAC limit we have for DEC element Dot inner HTML equal to weather Dot description and last but not least location element Dot inner HTML equal to what I'll be using one second this and here weather Dot City comma dollar weather Dot that's it these two properties we have to use it and we are all done let's check with my code if I get any error now allow so awesome you can see now 27 broken clouds Globe undefined that's perfectly fine Intercity awesome beautiful it is showing you the conditions it's like smoke 28 degree centigrade in and on let me put another city here I'm gonna say called Pune awesome your application is working perfectly fine and uh let's see one more I would say awesome if getting your learning started is half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more and now we are planning to develop our very special game for you in JavaScript in now it's time to talk about another very interesting game that is known for Tic Tac tic-tac-toe is world's favorite game we have already played a lot in our Childhood Days and still my favorite game so I have decided to basically offer you this tic-tac-toe game developed in JavaScript HTML CSS which can create something really really great effects for the end users so let's go and start developing our next game that's called tic-tac-toe so in this tic-tac-toe I will start working with creating a folder called Tic Tac and inside this I'm going to create a new file name called index dot HTML now here onwards the same thing I'll be creating this HTML tags and now here onwards we want our some classes for headers and footer but so we're going to create some Dev diagram so in this div tag I'll be creating some of the tags in which the CSS class will be applied so we just gonna create a classes for languages use those classes but we'll create it later on so just go ahead and create those so using div okay so now this point onwards is my first step tag inside this I'll keep my H1 tag and under this H1 I will be offering some of the headings which will be useful to contain some necessary information with regards to this game so tip here we say H1 and inside this H1 we give the message called class equal to header and here I'll give the name call is a Tic Tac token after this div class here we will start working with our form tag within my form tag I will start my div after div tag I will use label so label for player one or else I can say player one and inside this let's give the name call ER labor is closed and after this label will start working with our input tag input now in this input what are the details I need first I need to call type equal to number one second placeholder equal to enter name next name equal to layer 1 next we want ID equal to layer 1 and then any class if I want to play anyways we're going to close this this is my first text box and same thing I would like to create for my another one so the first dip tag we have used let me go and create another tip tag in this div tag I'll use the same label copy the same paste it here and this is for play 2. so we have this two players with me and after this div tag and offer the submit button now input typically subnet start game now the form tag is closed here Dev tag is also closed so you want a div tag to be closer before that it's up to you now so here we have a card dim class whichever we have taken so if you want you can basically put it later or before whatever so we have a basically form that with us so form tag is there later on you can just show some containers where the details will be visible to me so here after the form tag let me try to offer but first check whether it's really working fine so here yeah we have this option called enter name internet so [Music] yeah so here the details we have taken input available text and then put up a little text okay so two values we are taking now and accordingly we go ahead now finally after the form tag we would like to start with working with the Dev tag again div and inside this div I since I haven't created any CSS classes so those we can use it little later on but let's have this tip and insert this tip I would like to use remote depth type okay and here we want to use one more div tag so inside this tip we will be using one more div tag so in this div we can just give the value called Data ID equal to zero are equal to zero it's just a value we are passing it div data is equal to zero the div tag is getting closed fine so that's how we want it now so here the first step tag is closed like that we can create another data ID so 0 1 2 total number of three we want to create it so I want to create 0 1 2 3 4 5 like this so the way we have created here for this div let's go and create one more div tag ID equal to 1 2. three options we have it now okay like that I can keep on creating the others also true three four five so zero one two three four five total number of five we operated one more I would like to create it now here for six there'll be no difference because we haven't changed anything here okay so the div tag is getting closed here okay and uh that's it and if you want to create some clear border button that you can basically offer it a little later on but here we can use one more dim and here we say Dev class equal to relating and within this type I can use any image tag if I want so I just leave it as it is and after this I can create one more tip type and inside is another tip okay and under this I'm going to create a button okay and in this button will be having some value okay we can secure the value name called replay this button is created and now we can create a clear board span and here is a clear board that's it okay so here is just a small game I want to develop it better now there's no user interface has been used so this user interface will be using it later on by offering them a pure look at field so that you know it gives me more better look when your application will start but most importantly I need to start working with a JavaScript part where the logic will get calculated here Okay so we want to start with the JavaScript so let's get included a JavaScript with my code so here I can see here script tag script equal to now the file I haven't created so let it be as it is that's it so this is my script tag and let me try to include my style sheet also so I just say link are you equal start sheet thank you the name called app Dot see says go I haven't created but I'm giving it okay that's it so we have taken this HTML into over consideration now we'll be creating this CSS as well as the JavaScript to make this example complete well we are ready with our HTML but it's time to basically go back and spend time on our JavaScript we're going to create a new file now with the name called app.js and inside this we will start writing the logic with our main application okay now the first thing is how we gonna start now yeah so first thing what we need to do is we need to attach window Dot add event listener and when the window will load some logic should happen so I'm saying load second is the name of the function so the name of the function perhaps does not exist but I can give the name call app which I'm going to create it shortly now here first of all let me try to create a game mode I'm saying lit game board equal to now let me have some of the values because it is eight digit so we just make it like that and one more for making it right okay so that's how we're going to create it now okay now this is all empty right now of that we're going to create lit turn this new variable equal to zero what this is it keep tracking if x or zero player it's done like which player turns it will be suggest it is trying to measure it so I'm saying let ters equal to pause okay now let's go and create the player so create okay how are you going to create a playlist const player equal to what you're gonna pass name okay equal to now inside this we can say name equal to name next we say return name that's it okay after that I'm defining lit here x equal to clear with the empty value and again player y equal to layer is an empty value now let's try to initialize the app okay initialize inside this initialized app we're going to create a new function function out and inside this we're going to create a variable likewise saying let input feed equal to first of all document dot get element by ID here we're gonna take the class name of this particular text field so we are saying input iPhone field okay dot Focus okay now after this we have to say const add players equal to once again document Dot get element by ID we'll just give the new code player form okay next we are saying add hello okay dot add event listener we want to attach the event on which event submit event and what logic add players okay after that once the plates are added we are saying let replay button equal to once again document sorry yeah dot get element by ID or rather I will say document.query selector document dot query selector replay type BTN okay it will adjust the name we are basically taking that and here we say sorry replay button Dot add event listener which even I want to say click okay that is the first event second reset code reset mode that we are basically passing out okay now this is the initial case which we have it now beyond that I will add this is the place what we have added right not slides to add the players so this is how we've initialized after that let's third Place how to basically add the players here we have to just Define the function that plays okay so take event as a parameter and say event Dot prevent default this prevent default will try to prevent the default uh you know Behavior which is submitting to be get avoided and now here we say if this Dot player one so we just Define the property called player one if this dot layer 1 dot what value okay is blank okay or foreign now I just want to find it out its value also value black then what I should do in this case I am saying alert you almost enter name for each the user has to add the values and after that editor okay now the next thing is like we would like to select the plates in this inside is by saying calls player form container okay const play from controller container equal to document Dot query selector query selector here we will just pass the value column enter icon okay place okay now we say const ant equal to foreign dot once again query selector code underscore I mean okay after that player form container Dot class list dot class list Dot and here we've given the name for our height container all right and after that you just say board mail board main dot class list Dot remove hide hyphen container okay so we are basically taken that and after this what I will do I'll just say player x dot name equal to this Dot player one Dot value okay this is for player x copy this player y 2 and after that that's it so we have done it now so will be calling other functions one by one but that is the first thing which we have implemented well so add player function is added right now and after this add player we have to basically call one more that is called which Returns the current player so I'm saying returns current player and here what I will do is we'll just write function and here we say current player and in this current player what we will do is we will say return just variable okay percentile we're just adding it with this zero okay if it is then X turn I'm telling you okay or else so we are in like the current player who says the current player right now well after this adding the return current player we're gonna add another function that is known is called return the current flavor written current player is having this value and after that we need to say resize the square in event browser is resized once again if the browser is getting resized automatically the square size of your Tic Tac Toe should also get increased so we just say precise of course and here we're gonna say this option equal window Dot add event listener now we have a call option called resize here and the second parameter what you're passing is called resize okay on resize foreign after this we are writing this function called function resize that is the functioning for me the one which you are passing into the second parameter we are saying let all cells equal to document Dot query selector all in this we are passing board underscore okay and then we're using another option called what lit cell height equal to all cells with the position okay dot of set width of set width after that we are saying all cells Dot for each here we are passing cell and after that we are using cell Dot style Dot height equal to now you'll be using this backtick and the uses dollar side and say height and that way in a pixel so this will be taking the dynamic values okay that's it that's it over now we have to just launch our build board now billboard build so how are we gonna build our board now for this we are saying function all right billboard and inside this billboard we will see this option called let reset container equal to document Dot once again query selected and pass the value called dot reset okay and after that we are saying reset container Dot class list dot remove and we are passing the value call reset hyphen hidden this value and after that we may call some other type of functions also okay so for those functions I can say first will be called on resize okay after that we are calling add some click listener but I do not have that function with me these functions we need to create it by our own okay so we will just link those for a time being let's go back and create another functions now so we just want to write another event with cell click event for play to attempt to make move so here we are trying to say foreign click event for player 2. attempt to make now this function we need to create it so we just say function now we just say function and give the name of the function to make move Now function make move it takes if it doesn't parameter and here we are saying console.log and sector now let's go back and try to check the another condition that is called let current cell equal to percent because you have to read the value from there and here we are saying what event Dot current Target sorry even Dot current Target Dot first element child okay dot data set Dot ID so we're reading these values after that we use another variable called it cell two add token now here we are typing document dot query selected and here you know using backtick I'm using this vertical data hyphen ID okay equal to here we are using once again in a single quotes dollar current cell okay so this value we are taking it like that after that we are using this situation called if cell to add token Dot inner HTML extra material mark black once again if Cell to add token dot inert HTML equal to blank then what next so sell to add token dot inner HTML equal to blank then what you should do I'm saying console DOT log and give the value the one which you want okay so in this console.log what value we can give it sell to a token we have it it is taking this value to the current cell dot inner HTML console.log and inside my console.log we can set this cell is already take care so values are already taken for this and now we will be returning those values after that we will be using else condition and here we use once again if foreign then we'll be using this option called cell see we have this property option available called send to add tokens so we're using cell to add token okay dot text content equal to current player foreign this value called current cell and in this correct cell value will be equal to okay else we can say to add token Dot text content equal to current player okay and say game board current cell equal to like this okay so here we are adding the values like that so it is closed after that we can just use the function name code is winner to check whether the user is winner or not so we are saying is winner okay and after that we are saying done plus plus after that we are saying change we do not have the function name called change board header names okay so it's just like that we're giving it so as usual we can leave this function for a time being and we'll call this little later on so and if it is a full time being okay so your function is now ready so the next thing what we need to check whether it is tie or not okay so we are saying function check if I was just taking the function whether it is game is tie or not so here we say if the condition is turned greater than 7 alert okay we can say give over as we can see our time okay well after that we are saying winner function is winner now what it will check is you will check const winning sequences winning sequences and here sorry here we are having this array and having the different conditions Associated we say zero one two probability we are checking it and then I just copy it well we are saying 0 1 2 and here we say three four five six seven eight and zero three six again zero three six and once again one four seven four seven and next we have a call 258 eight then we are checking the vertical zero for it and one more last option we will put is equal to four six so these conditions we are adding after this array we can say winning sequence is stored for each and give an equal winning compost ready combos and inside this winning compost we are giving lit cell 1 equal to winning combos position 0 then copy and paste three times cell two cell three and here we get the radical what one two three words are giving it and after that we are checking the condition let's say if any other conditions you're checking what exactly that will be for the game board we are saying game board seven one foreign player sorry current player Ampersand time percent come down game board I just want to copy this the same line and paste it multiple times now here we are checking the condition for cell 2 and cell 3 and cell three and after that we're starting the position so after that we're starting the position call [Music] recording this condition call cells caused cells and then equal to document Dot get element by or sorry document.query selector query selector all right here let's select the position Dot board underscore okay then after that we will be using cells Dot for each cell and inside is what you're passing we are saying let cell ID equal to cell Dot first element child okay dot data set dot ID so this is the value which you are basically adding it now and we're using one more different condition pressing if cell ID now we're talking about wholesale ID triple equal to cell one or salary or cell ID equal to cell 3 okay and in that case we can use cell Dot class list plot add get the name for board just give the class name so here we'll be giving the winner and a part of that we can use the other conditions today okay so here it is adding the value and now let's say let current player equal to document Dot get element by ID so you can basically Define it so current player you want so we can use the current player or whichever conditions you want so here we use what the cell winner now Small Change rather than using curve clear we can use the current player text a new variable we are creating it current create text document dot rather than same get element by ID you can see query selector and in this query selector you'll be giving the value by saying dot board player hyphen turn the value which you are given it here and that query selector value whichever you've given this let me try to put it here parenthesis like this okay now here we just checked if current player X then what then in this case we can say current player whatever the value we are using current text plot inner HTML equal to now we can Define the value whichever you want to offer it we just use a condition called div class equal to okay so we are saying congratulations and here we say congratulations along with this dollar sign and here we pass player try Dot name and here the tip tag is getting closed like this okay so that's the message we are basically printing it and after that we give this value and say this message call winner equal to true and after that if you want to apply remove that function we haven't written we'll be talking about a little later on and just say return purely so your function is ready now and later on we can just check the condition if winner if winner all right we can say check if I am written Force that's it now in a continuation to this example we are going to develop another function which the name is called change board header names so let's continue by defining the new function called function change all right board header names so this change Port header names will be the new function for us and here we would like to check whether the user is winner or not so here we say if not winner then what then in that case we have to select current player text equal to document Dot query selector in this we'll be getting the details like Dot code and here we're gonna give the name called player and hyphen turn player hyphen term now later on after this particular variable we have to just check the condition by saying if current player equal to X if the position is X sorry let me try to put it in capital letter here X then we have to say current player Dot inner HTML equal to now here we have to just use the same option called back text because I want to go multi lines that's the benefit of this Factory and here we say in our inner HTML span foreign hyphen Style close this and here we want to use the statement now this value we want to write it with name attribute so it is getting close and here we are saying dollar with this player x dot name and then closer span tag and we say you are like this and after that we say div class equal to which is going to create a class which later on we can apply the CSS Style on the top of that U hyphen R hyphen winner and here we say closing the diff type so the div tag is closed that's it and now after this line for next we have this called else condition else what else here we say current layer text dot inner HTML energy table equal to after this we're gonna write the spam class equal to here we say email same option we're gonna use it so in this condition so winner conditions so let me try to copy this C rather than copying it again and again I'll just copy the whole text span class equal to name hyphen hyphen style player rather than saying X we have to use y you are up you are Fitness okay so here it's getting closed well after this what we have to do create another function called reset code function reset board now in this function reset board we just say console.log a small message resetting resetting is added now afterwards we will be using the game board now the same game board what we have used it earlier I'll be using the same conditions on the top if you remember that was the game code for me so I'll be using the same game board the copy this yeah with the same condition okay gameplay could do this after that line we will say that sell to add token sell to add token equal to document dot query selector all here in this I'll be using another class call later now sell to add token whichever we've used Dot for each Square and within this Square we would like to use Square Dot text content equal to Black after that Square Dot parent element Dot class list Dot remove and here you would like to say both okay underscore underscore sell ER so these classes we have to create because these CSS classes we are just using this but we haven't created we'll be using it little later on so that was the point now after that we are defining the turn value turn equal to zero because we are resetting it and winner equal to false after that win is equal to false we just Define another variable called Define let current player text current layer text equal to document Dot query selector all so here we're gonna use the name call board Define player hyphen hyphen turn after that current player current player text currently text Dot inner HTML equal to once again we have to use the condition for up and winner point so let me try to copy this inner HTML equal to okay and in this we have to say playerx.net okay just everything is same no change at all okay now here after that we're gonna write one more function called function foreign listener that means when I will be adding or clicking something to myself what kind of event I would like to listen here we are saying const cells equal to document Dot query selected all let's check the condition board [Music] cell and here once again we say sell stock for each Dot for each and here this is cell Dot add event listener which event I want to listen click and the second parameter will be Handler on score might move okay and this function which we have created called add self clicks listener okay this I'll be calling it here perfect later on once it is done let's try to add one more function called function remove foreign click listen remove cell click listener now here we say let all cells equal to document Dot query selector all let's pass board cell and now we say all cells Dot for each cell and here we say send Dot remove event listener which event click and second parameter will be make that's it so friends now here most of our JavaScript code is written now so going forward we would like to use CSS and finally we'll be applying everything into our HTML file well after the Javascript file is ready towards my application now it's time to go and create our HTML file now sorry the CSS so inside my Tic Tac I have got app.js and index.html ready now here I'm going to create another file here called app.css see you can basically put this app dot CSS in either folder like in static folder but I have just kept it outside now from this point onwards I would like to start with my basic functionalities okay what those are let's start with the first feature called morning with my body some basic settings I would like to do like in background image background color so I just start with background color background color I can just use it as a white okay but I don't think it's really needed it so if you want you can have it otherwise leave this background color because it's by default gonna be white only and now next would be called height height will be 800 pixels next background position background position I just say like Center next background repeat in case if you do not want to repeat the image background repeat and here I say no repeat next background size here using cover so it resize the background image to cover the entire container okay so that's what the body part now the next thing is we have to select the rest of the CSS classes first select div dot relative inside is date dot relative is for Circle position position we are saying absolute next is stop from the top I'm just making 760 pixels next right right here's the same 120 pixels next after this we are saying height container height Dot container or sorry height hyphen container here in hide hyphen container we will display display colon well after that we have to use the header point header inside the seller we will say color will be by default white but still we just say color and White next text line we just say Center next margin margin will be 50 pixels next font family font family I'm selecting call permanent Michael permanent okay permanent marker okay next class we are talking about call interplayer let's call Dot enter hyphen players I need to hyphen players with the same color will once again we can use another layer but we can just use white or any color you want or you can just use there's okay margin margin we're giving it is called zero Auto width we're looking forward for 80 percent next text align Center position now next we're going forward for input field in this input field we just say border border 2 pixels solid and black next outline outline none I do not want any outline to be there next padding I can take 4 pixels 8 pixels 4 pixels 8 pixels now margin we're saying zero zero 10 pixels okay and finally four pixels after switching we say font size 18 pixels okay so that is your input field next we are talking about something called input field Focus input hyphen field okay colon Focus now here border 2 pixel solid or any other color which you want to use it next how you want to submit button to be so I'm saying Dot submit hyphen bdn border two pixels solid and black adding 8 pixels and again eight pixels font size 80 x now with 250 pixels followed by border radius 5 mixes next your margin from Top let's take 10 pixels after that background color let's take y20 okay so this is the property now going forward you can associate with your submit button active and submit button Focus so we are saying Dot submit hyphen vtn cooler active and two options we are taking followed by condition outline now outline next border we're talking about equal to pixels solid and the color right okay so that's the one and after that we'd like to use hover Dot submit hyphen button colon over what you want change the background color to what white you can use white smoke well here we'd like to use a Dot board here we'd like to use player hyphen these are the classes we were using in our JavaScript we remember and here we say color we're using once again white or you can use this white smoke whichever you want so well later on text align okay set to margin 10 pixels 0 and 10 pixels height 54 pixels okay so these are the properties initially we have taken okay so after this so let's go and start another classes here I'm saying Dot name hyphen hyphen style and here we are seeing color red and then font size 22 pixels well now coming back to the another properties now we're talking about a next report called border container called board container plot about container here we Define width which is 40 pixels we are taking or sorry 40 we can really take after that background colors that we can say coded blue okay next margin we're taking is a zero and Auto after that font size font size we are taking zero next border border we are taking two pixels then solid and then black followed by box shadow if you remember this worksheet is one of the very very season three popular property here we are defining three pixels 3 pixels 3 pixels zero pixels and RGB we can talk about called Black okay so my border color will be shading color will be black after that we're offering this board cell Dot now in this board cell we are defining width now in this width we are using calculation CA LC and in this calculation we are defining hundred percent okay divided by tree this calculation after this the next property will be displayed display will be inline block next font size we're taking 40 pixels well texture line Center border we are taking two pixels solid and black adding 20 pixels vertical align top next for family this formula can use permanent permanent markers okay now next option a part of this we have a call your board civil board cell hyphen winner I would say rather type no it's going wrong this is 3D here Port circular let's make background color okay and [Music] later on just use letter now in this letter we just give the color combination so color will be White next position relative top 50 percent next transform translate by 2 minus 50 percent after that font family we are making it once again permanent marker foreign copy okay now here next option will be called winner container here we're giving winner with DOT Dot winner hyphen container okay so for this winner container what are the values we want to use it that's you want to basically do it so if all this winner container what I would rather suggest is you can use Dot reset text line Center margin 20 pixels that is for reset and now reset hidden inside this reset here we will set display now display num okay after this the replay button it's yeah I'm going to talk about replay button Dot replay hyphen video and here width we make it through 25 percent okay and followed by padding 10 pixels we take it from here and 20 pixels border this bottle we are taking is called two pixels followed by solid okay and black color now later on Border radius border radius we're taking 5 pixels later on outline and signal after this outline we say later spacing now this little spacing would be again zero after that text transform this text wrong form where we are talking about call uppercase next font size font size we're taking 16 pixels then margin top margin top would be 12 pixels then word spacing that you're taking 3 pixels followed by background color so this is for your replay button okay now in a similar line we can also have call Dot replay hyphen BTN colon over followed by Dot replay hyphen active now apply the common style outline we are making it null that color we are making it is called White then background color will be black okay and when it comes to the congratulations so we'll be using this Dot thank you okay so this congratulations class will be using font size to what 24 pixels and after this we are using this call winner dot U hyphen r dot winner in this winner we'll be taking font size okay that's 18 pixels after that height we are taking 18 pixels again then line height line height we are taking 18 pixels and then margin two pixels and then zero okay that's it so last but not least we would like to use this Dot replay hyphen BTN this I'm saying with 50 percent 50 percent so this is what my C6 file is all set I know it was pretty lengthy but it is required for this particular application okay everyone so we are all ready with our CSS also now it's time to go back to our index.html file and take care about the final finishing touch so we have this index.html file with us and now the CSS class which we were using it in our application that is known as call this uh permanent marker this class is not by default available so we have to include this using this external API so here where we have a call CSS with us before that we want link So within this link we want our variable name called href equal to now we have to give the proper location by saying https colon double forward slash fonts dot Google apis okay.com slash CSS question mark family equal to permanent Plus marker okay so if you just copy this into your browser you will get to know where exactly it is using okay if I just copy and paste it so I just need to say https before yeah https fonts Dot Google apis .com slash or spelling ground CSS family equal to permanent marker that is the main URL from where I can take this kind of font so here CSS so that's what I was cross verifying it well it's there we have included our CSS also but in which class we need to use that is an important now JS I also want to include it so here in my head tag only I would like to include script SRC code tool app.js so here my script is actually loaded now after that if I just go back and check the final outcome of my code which is index.html file well it pretty much look like in basic nothing else has started when we talk about called start game okay so it needs to start because there is no CSS class are attached so I need to attach those classes within my code so here onwards we have to start with offering those CSS classes so that at least I can apply those common behaviors to my application okay like here we have a call div we haven't attached any class to this after this body we have a div H1 class equal to header tic-tac-toe then we have a called div we have a call body uh under this we have a call another Dev tag so just imagine how many type of classes are available one we have a call to class equal to header div class is closed again we have a call one more div tag so like that multiple CSS files are there where we have to apply the new CSS class to make it happen so now we have to just go back and change our HTML and to apply our main class so this is what my final HTML which looks like the same you can see we have added all those type of csys classes which we had that is called interplayer player form player container level placeholder and player container and if you see all different type of classes we have attached this to okay because here only my CSS class will get applied and the JavaScript will apply those kind of dynamic CSS based on certain conditions so these CSS classes are already there added inside your HTML page our app CSS is ready app.js is also ready let's go back and try to reveal how it looks like it awesome so it looks like pretty nice tic-tac-toe is again it is expecting when it says start game it says You must enter a name for each field validation is working let me try to add two names and say start key awesome so now you can see it is saying hey you are up now let me try to give the values awesome now you can see it's saying like hey you are a winner great so guys congratulations on this is the first example of how the tic tac toe game is used so it is a classical example of CSS JavaScript and HTML together so this time we're gonna talk about our next very interesting feature that is launched called dealing with another example that is called snake game so snake is one of the very very powerful example which I'm gonna share with you which will help you to understand like how we offer a very simplest way of developing a mini project okay that is something which is a snake game let's see how the snake game is important and how we're gonna deal with this these are our previous examples which we have seen which I will call a project which we have created that is called quiz application and now we're going to start working with our new project now here first of all I'm going to create a new folder that is called snake again and inside this is a snake game we need some new folders uh first folder I'm going to create it inside this that is called images and within this is snake games I'm going to create few new files that is called index .html and here I'm going to create a new file name called app dot JS at the same time I'll be having some of the CSS files if I need so I can say app Dot CSS so total number of three files I have it now let me close down all the files whichever I have opened it earlier so now that looks cleaner approach so this is a snake game for us from where we need to start and we have a index.html file and here I will as you should create our basic HTML syntax and here I would like to include our script tag the script SRC equal to app.js that's it and now going forward we will start developing our next implementation of snaking now inside my body tag I would like to have some basic property called speed okay and later on I'll be taking the input from the client so we are saying input type equal to so here we can justify the speed and we can give ID equal to game speed and followed by value equal to we can give the value equal to 5 initial value and Min equal to 1 that is the minimum value and Max equal to 9 that is the maximum and minimum value we can offer beyond that I won't allow the users to go and step that means the increment value that is 1. well that is the input type and now another input we are taking input type equal to button and value equal to start and then ID equal to game start okay so we're giving this values after that I can give some bricks so two bricks we're giving it and start working with a div diagonal and in this Dev tag I'll be using the canvas it is a HTML5 feature we use canvas and I just give ID equal to game area there's a canvas and after this canvas we will the div tag is closed here after div tag I can use another Dev tag div here I can say class equal to I may not have any class written but I can say class equal to relative so later on if I want to apply any CSS style I can certainly apply and after that I can offer the images okay if I may not have any images right now so I just leave this image blank right now okay and this is script SRC I'll load it only before my body tag had closed it's always a good practice to keeping this script tag on a bottom of the body tag always designed for good practice now this is almost ready for me let me check okay so I can see values now it will go maximum 9 that is how we have given and minimum is one start with the button which is not doing anything but later on we can allow some logic inside this now we have to start working with our main JavaScript tag this is my app.js and here onwards we will use some of the properties okay which I want to initialize it so we are saying or game start equal to none initialize second game speed equal to none next game area equal to null Game Area context equal to none then give area width Game Area width equal to 0 that is in integer value Game Area height game area equal to 0 again then solve it solve it equal to 0 play score equal to 0 again next snake equal to null next is snake food equal to null next snake Direction equal to null snake speed or a second set speed size speed size equal to zero next we have a timer equal to so these number of properties we've initialized okay now after that we will be writing a function by saying function name is called initialize okay and here initialized we would like to use some of the properties first we are saying game start equal to document Dot get element by ID here I can give the value called hash game start let me put it in double quotes okay start now game speed now these are all basically the values are there game start game speed these all values we have to take it okay so we will be seeing these values one by one so let me set another one that is called game speed game speed equal to again document Dot get element by ID now we are passing the game speed View game speed now here once again I will take another point game area I say okay game area here we have to give the value called game area okay so these values we have taken now we'll be talking about called Game Area context give me the context equal to game area Dot get context get and in this game context we will be using what type of context we're using 2D okay because I want to have the kind of 2D so this is how the kind of environment we want to set next we talk about Game Area width equal to just initialize to 400 next Game Area height equal to 600 now sell it we are initializing with 20. next game area dot width okay so Game Area Dot width equal to Game Area width and then we Define km area dot height Dot equal to the game area height so these are the values we are initializing this okay now after that we have to start writing the logic here I'm saying game start game start dot now we have to line uh which event you would like to take so I will say on click on click so when I basically click what should happen so on click equal to function so what you want to write it here I'm saying this Dot this dot disabled equal to true so I'm going to disable these values and after that we want to call another function inside this but which function let's do that so here we are saying function start game start okay and here in start game we want to Define the initial score see the initial score for the player will be certainly zero so we say player score equal to zero after that direction in which direction you want the snake to move so we are saying snake Direction equal to right in the right direction then speed size the value of the variable which we've defined so speed size equal to because it will be accepting the value from the text boxes or from the drop down so it can certainly will be string type so we have to use percent so using this option called percent and here we are using game speed Dot value okay so we are using this value again speed dot value now here we would like to calculate certain things what those are first we are saying if okay what if condition uh see this function we are writing called start game because there are certain things which you need to make it so like that you have to Define it so function initialize we have started okay and then after that we have written on click within this so this is what the on click we had and there onwards we have to finish this point and after that we've started start game and now we'll be writing the logic for this so here we are saying if we think speed size missing equal to 9. we basically initialize to what nine here we say else if speed size is 0 we say speed size sorry speed size equal to one that means if it is less than 0 I will be making it minimum to one if it is greater than 9 I'll be making it to 9 maximum and that's it okay so after this else if condition is getting closed we are seeing speed size equal to 1 so here we just say snake snake equal to array so that is my array for me and after that we are saying snake dot push because it needs to move ahead and here we'll be pushing it towards by saying X position 0 and then the Y and here the Y value will be what sell bit that means how far it can go so it'll go within the width of this application okay so that's how exactly we would like to make it okay so here we have a call Salvage we have given here after that what we have to do is we have to Define our own function called clear interval and this clear interval will perform any logic whichever I would like to make it okay so here after the snake dot push value has been given here I will be creating one more function here that's known as called uh create food okay so here we're saying create food so create food will be the function for me now you might be thinking where this function is but this one should be declared soon within your application but here first we are saying the function called clear interval clear interval with a timer [Music] we'll be passing it and after that this clear interval will be same timer equal to set interval with this we are saying create game area create now here in our application whatever the value we are giving it that we need to basically implement we are giving this called create food is a function we are calling after that we are calling this clear interval clear interval will be just like in a typical function which is there using this option called create game area so this will be available to me on which the value will be taken that okay and then we will be telling you how you can call this function create food and how to create it first well so we are talking about a functionality call create game interval so this create game timer is the one which we have to create it by our own so this function which we are passing it after the same set interval this function is not it there so we have to basically go back and create this function within my application fine so what we will do is just particular one we will try to comment it for a time being okay so here we have a call what create interval in this created level will be passing any parameters which we are password about as a timer here and here we are calling this called create food so here after that we'll be calling this function called create food so let's go and say function create food and this function create food let's go and write the logic here and what logic we want to write it in a great food we say snake food snake food equal to and here in our curly basis we use two Direction X and Y we say in X we say math Dot round and insert this we say math Dot random after this method random function we have to just take this calculation and check the another parameter called Game Area width game area width minus subject the one which you are causing it and here after that we'll be performing the calculation by saying celebrate okay so this is for our x coordinate similar way we would like to use for my y coordinate also area [Music] Game Area height but here rather than using width we'll be using height minus solve it let me give some space divided by cell width okay so that's where exactly it's got closed okay now here our applications is now ready by calling the function called create four like that we'll be going to create another function called create game area let me go and create all the functions first so we are saying function create game area create game area there's another function for me after this create Game Area there will be another function I'm going to create it that is called control function control okay after that we'll gonna write one more function called function right School there's another function available for us control we have a call write score there's another function which you're going to write it down here that is called function write score is done now we say create Square so to create Square is another function and finally we'll have a call change direction function change change direction so that's it these many functions we wanted to create return here in our system well we know it very well that we have taken this called create food create food function is already ready now now we're going to talk about our next function called create gain area and in this create game area we are defining two locations of our X Direction and Y interactions we said a snake x equal to snake the position we are taking is called zero and we say dot X for the X Direction we are saying VAR snake y equal to snake position we are taking once again zero and Dot okay so two directions we have taken X Direction and Y Direction now here we are starting again area context Dot filter unit variable it is a property fill style equal to which color you want to fill this up so I'm saying hash white color okay and then we are using this game area context again dot fill react fill react so keep the position values I'm saying 0 comma zero comma Game Area width game area with comma Game Area height so we are basically filling the values with color we want to use it called stock style let me take this game area context again Dot stock Style stroke Style equal to now we give the another color here by saying hash okay and then the next option called same give me the context dot stroke react stroke react and here we pass the values again 0 comma zero comma Game Area width comma again area height so we are passing those values like that and now after this we have to write a logic of the directions now see the when you talk about snake game it move left right and Center up and down so now in this case we have to increment the situations accordingly so we say if the snake Direction if the stick Direction right then we say snake X Plus now else if same let's copy this snake Direction left then what should happen here we say snake X minus minus okay so we are taking like that let me copy this again now here here we're talking about left right we sit down so in this case we say snake why plus plus and in this case if it is up let me see it's name y minus so these conditions we are taking it now now here after this SF condition we would like to take another if condition now here in my if condition we are using some more lengthy statements what's that we say if snake X if snakes X minus 1 or snake X double equal to Game Area width which we have taken divided by solve it okay or we are taking this condition called The Snake y snake y double equal to minus 1 okay so we're giving this call minus one or snake y stick y equal to okay area height to serve it or here we will take the another condition here yeah we will take the another condition here call we will have another function called control which we have created it sometime back and inside is control it will take some parameters so what of parameters we can pass and we can say a snake X comma snake y comma third parameter will be mistake so this would be my another function okay so here we are passing the conditions just like that okay now here this is availability is a parenthesis and here we're writing the situation for right score which is so far the function is only created not described more so we're writing the right score the score will be written here and here is a clear interval because the typer will be stopped okay I'm using game start Dot disabled equal to thoughts and after that return that's it so this is the logic for we have written for this particular example now we can use another if more conditions here just to check the behavior of my code if getting your learning started is half the battle what if you could do that for free visit scale up by simply learn click on the link in the description to know more well here we have finished till this game start dot disabled equal to false and we returned now going forward after this return we would like to have another condition for the snake X so we say if snake X snake X double equal to snake food dot X okay let's make photex temperature snake why double equal to snake food dot y then in this case I will say VAR new head bar new head sorry new hit equal to here X colon snake X foreign these options we are taking it now after that we are using this option called play score plus equal to speed size and then we are calling create food method again and here after that we're using the else condition and in this else condition we are saying VAR new head equal to snake dot or okay and we are saying new head dot X equal to snake X and new head dot y equal to snake y so these variables basically associating with your heads and after that we are saying snake Dot unshift and shift snake Dot unshift and here we are passing this option called new head thank you that's it and after that we'll be starting with our for Loop by saying for VAR equal to y I equal to 0 then I is less than a snake Dot length and snake dot length and once I plus plus okay later on we just use the optional call create square and in discrete Square we are passing snake snake position I Dot X comma same snake dot y that's it so it's getting closed here and after that we are calling the same option with this snake food let me copy this again and here rather than using this we can just make food protects and it's like food.y okay so now this values has been added into my code now if we start working with your control needs to take three parameters x y and the array so we are passing this option called control and in this control we are taking X comma y comma array three parameters we are taking it later on we are using this option called for bar I equal to 0 I is listed array Dot length and I plus plus and after that we'll be using this option called if condition and here we say array I which value you're passing dot X double equal to X amp percent time percent here we say array with the position called I and in this we are saying dot Y and this position we are checking for the Y condition for the Y condition so it Returns what true return the condition okay that is for if condition else return one false you know that's it now we are talking about this option you call write score this right score we have to use the game media context game area context Dot font equal to here we'll be passing the situation using 50 pixels 50 pixels and then since iPhone service after that we are using call km context again let me copy this take it again called Game Area context Dot fifth style equal to here I'll be using another color now so we say hash okay now after that we are saying once again the game area context Dot fill text here we are saying score colon and here we say Plus player score whatever it is with Game Area width Game Area width slash two minus 100. and then again area width slash two so this is great exactly the right score where the data will be actually written okay next will be having this option called create square and this great Square it takes two parameters one we're talking about column X second is taking Y and now here we're using this game ideally context same Dot film style equal to let me give the color after this we are using call same query and text game media text Dot foreign here using X multiplied by solve it comma y multiplied by Salvage comma solve it comma solve it this is what my grade square is now we are left with only one option that is known for change direction it's time to figure out this last function called change direction which takes one parameter called e typically we talk about for parameters now here we are passing this option called War keys equal to e Dot and later on we want to say if keys equal to 40 okay amp percent ampersand snake Direction equal to up okay so here we say snake Direction equal to so we're changing the directions here okay now let me try to copy this [Music] and here we use elseif foreign [Music] okay so here we took this 30 40 and here we say 39 and followed by 38 followed by 27. 29 28 37 and here we say up let's change to what left down right here we say right up left the three options we have changed and last but not least here I'll just use window Dot on key down equal to change directions and window dot on load okay equal to initialaries that's how exactly we want to use now and this function what we have defined in initialize okay so in this initialize we are having this game start dot on click in and all so you have a called start game now so just start game will be calling it here okay so let's start we have a cold snake we were called snake dot push and after that we are calling this function called what create food clear interval and here we say driver equal to here set clear interval and here change game area slash speed size let's say you want to use it okay everyone so our code is almost ready so we have this complete JavaScript code ready with me now it's time to basically use within my HTML just to check how it may behave so in my HTML page I have written this normal speed number game speed value button start we will call game start after that we have a call canvas where we print ID code to call Game Area Dev class equal to relative and that's it and here we have a call script Sr secret to app.js so that's it what we have written now finally we would like to see how it may look if I try to use in my browser let me try to refresh okay I really do not see any changes in my code okay uh despite I'm having this because the CSS content is actually missing okay because they're only my code really look better because if there is no CSS it won't really make good towards my application okay and I also want to have certain images but those images we will take it a little later on let me go back and try to bring CSS into this picture now so first of all have this index.html file with me and here I want to use CSS so inside my head tag we want to use link Ariel equal to style sheet okay Enter equal to app dot CSS okay now here in my CSS we want to offer certain details what those details I want to start working with I will start with my body part body so we want to offer the font family so one family maybe a little bit later on I can use it first I want to use margin margin 20 pixels Auto later text align Center next font size font size 150 pixels also 150 percent and here we want to say background background image since I do not have an image so I will just leave it as a blank okay so just otherwise I have to say URL and insert this URL to give some values but I leave it as a blank because I do not have any image I will say background color this background color I can just use white after that height I can just say 800 pixels after that background position background position I want to use Center then background repeat background repeat I want no repeat foreign size okay let's see if there is an effect in my okay I see it's now in the middle better now inputs canvas we have to basically take that here we should talk about call input okay in this input I say font size font size may be optional I can make it but let me say font size 100 percent then text align Center then padding I want to say 5 pixels and seven pixels okay looks better now well here after that I can use canvas in this canvas I want to see the background color I just say white after that border radius for the radius I can say 20 pixels then Shadow if I want to use it so I just say box shadow box Shadow I can say three pixels 5 pixels and 6 pixels and the color is check awesome so I can see here uh the logic is there so Shadow you can easily see how it is been using and that's it and this div I can say div Dot relative position absolute top here I'm saying using 760 pixels left 120 pixels that's it so this is where exactly a program now when I say start okay so there may be some error here the thing cannot set a property or call on click null so this we can just check this into this game start dot on click let's check anyways we just try to fix that issue in a while but anyways we have our created CSS and now going forward we'll be implementing rest of the logic within my code okay everyone so we have changed some names here because there was some value was mismatched so we have basically changed those values with your properties and now when I try to relaunch my application by uh this index.html file so now in my index.html file when I try to add so it's just as usual same let me say start and here you can see game start when I go up you see like it's starting right now okay isn't this an amazing game right now friends okay that is the same game what you used to play it earlier okay where you can just change the direction go up and you can see the score Channel being placed here that's it so this is where exactly the look and feel of your game has been taken and you can just increase the speed suppose if you just put a value called what zero by default set whatever value you want to take it with a start now you can see based on that the speed can be justified and the example can be developed okay you can see the start button is disabled because right now the user is still going on unless the user game is finished this one is not going to work right so like that you can see that automatically this will be position there's no it's called food that is how we have used it by example on called app.js you can see we are using this example name called food create food you can create food of the specific interval time this will be automatically created and the snake will eat and increase the size of the code okay that's it and now the CSS has been given if you want to add certain image certainly you can add it otherwise this is the first scheme which we can see how it is running and giving you the better example and with that we've come to the end of this video I hope you had fun building these applications if you have any doubts or Paris let us know in the comment section below thank you for watching keep learning and stay tuned for more from Simply on

Channel: Simplilearn

Views: 99,824

Keywords: javascript project, javascript projects for practice, javascript project tutorial, javascript projects advanced, javascript projects with source code, javascript project tutorial for beginners, javascript projects for beginners, javascript demo project, javascript programming for beginners, javascript programming course, javascript tutorial, javascript tutorial for beginners, simplilearn, javascript full course, javascript practice exercises for beginners, javascript practice

Id: aWYZUoUo7V8

Length: 225min 55sec (13555 seconds)

Published: Sun Feb 12 2023