Unknown

hey everyone 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 we have decided to basically develop very interesting project in javascript that is known as calculator application like you've seen earlier some projects like in tic-tac-toe you talk about snake game you talk about 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 will be creating a new folder now into the

name called calculator app and in this calculator app once again we need some new files which is called index dot html and we also need one more that is called app.css and another one that is called app.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 this template and here i have a god body with me let's start with the first tag here that is called h1 and this h1 we are giving the name called

calculator calculator so that will be my h1 heading after that we will start working with the div tag now within this div i would have to create a lot many classes i may not have lot many css classes but we can give some classes here so we can say class equal to container okay so within this div tag we're going to create a table now because i want to organize it so starting with the table within this table tr tag and within this tr tag i need a td now in this td i need few

things call call spam equal to 3 another value and here i want to offer the text box input type equal to text okay input text id equal to give the name called result that will be the final outcome while pressing all the different buttons id equal to result and class equal to screen remember i haven't created those css classes but but we're giving some names but later on we can utilize it while creating the css classes table data is getting closed let's get started with another td now insert this td we need another text box

input type equal to text and here in this input text sorry i would like to better say button because i'll be having buttons okay input up equal to button value equal to c and on click equal to i may not have any function right now but yes i can create a function but let me give some domain name here i'm saying clear screen okay so that will be the function will get called and after that class equal to clear yeah so this is my button tag after this our td tag is getting closed after the

td tag the table row is 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 row i'm going to create one more td so let's go ahead and create another td here and inside this td i'll be having another button we get created so i'll just say this is my another button now input equal to button value equal to one on click equal to i'll be calling another function called display okay and inside this we're giving the value call 1 okay

and class equal to member plus equal to number and here after the td tag is getting closed okay now you have to start another td tag here okay like that we have to keep on creating the multiple buttons so let me copy and paste another table data now here again value equal to 2 on click to display give the value call 2 and class equal to what number like that i'll keep on creating multiple buttons but first check how it actually looks like now i can see the buttons like in c one two three but

yes i'm gonna 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 and paste it again i have to create the button like in 3 4 something like that so after this two we're giving the value called three yeah i'll get the value of three so val equal to two value equal to three display three and then afterwards just giving the value call forward slash and here also we're gonna keep the value called forward slash

and here class equal to operator operator after that you reduce the value 4 and then followed by 567 so here we give four four five five six six after six we're giving call minus [Music] okay once again it will be what type of operator operator okay after this minus we'll be talking about call 7 then we have to have eight okay nine okay after that we're giving call plus and display plus plus equal to operator operator okay so here you can see the table data is getting closed and here the table is also getting closed

and after the stable row you can start working 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 giving the option called decimal which is value equal to dot and here we give the value called decimal okay now display zero so after giving this dot you basically take what the value zero which we haven't put now we'll be talking about value called zero so here the decimal value we have given it td is getting close let me have the other

one zero zero so like that we have to keep this now after that will be once again taking this this time rather than giving this 0 we'll be using this call as a button and value equal to equal or click equal to solve okay and then this song will not be passing anything it will write 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 we will be using val equal to multiplication display

plastic and here we'll be using operator okay so table data is getting close table is getting close table is also getting closed here okay so your div tag is also getting closed here okay that's it okay so that's the only thing which we wanted to make let me try to refresh and check awesome so we have got all those necessary calculator behavior which we wanted to reveal okay now our next statement will be once we're giving this c then we have a column one two three and then forward slash followed by four five six will

come down okay so let me check whether we have used 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 six equal to number okay so we're almost set now so we are having this look and feel in this we are 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

will 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 to three forward slash i really want to bring four five six to the next and then seven eight nine and again forward still 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 tr i also want to start another tr here okay so that i can put them into the another level now so under this tr i can use this td now so after this minus after four five six minus once again i would like to start another table over here okay so that it let's go to the next row so here after td we're closing this dr and starting another tier okay starting another tier after that we

talk about seven eight nine okay plus see here talking about seven eight nine 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 eight is missing right now so here seven we copy this equal to eight eight yeah that looks better now so now they are basically completely organized so the moment i expect my application

so we have a call dot here then zero then equal to and then multiplication okay so it looks better now now i just would like to perform the overall look and feel 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 the css friend now in css front how to start first we will go back to my code and here in my css we'll start working with font family but before font fabric i would like to start

with the body part now body background color i'm using called t that looks nice okay so i will be using this app.css in my html to see the look how it has been appeared right now so in my index.html file on the top under my head section link style sheet okay now see it looks better now going forward in my css you want to use some h1 color tool so here we would like to use the h1 texture line center color white margin drop margin top would like to use 50 pixels this for h1 let's

check perfect so it is now coming in between next statement will be called screen so we say screen so in this screen we use the background color background color gray and after that border sorry border solid black and two pixels after that color white font size medium next width we're using this hundred percent then we talk about cursor will be same what are the default cursor is okay then padding we would like to save 10 pixels and then margin save auto then margin bottom that i'll be using 10 pixels so in the proper alignment 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 call input okay input type equal to button for input type equal to button background color change to what right or else i can say let's walk okay and when the button is active what i want let me copy and put a blue button and here i say active and this color should be orange red like this you can see now

how it is basically looking like it okay active the color will be like this okay i'll be talking about operators operator should behave different so i'm saying dot operator in this operator we say background color background color orange okay then padding i want five pixels okay then i want color that should be black after this i'm using call border sorry that border i'm using this called solid and then black after this i'm using 100 then height height is 40 pixels then cursive it has to be pointed okay that's it let's check perfect so they should

turn back to what to your orange color and you can see the moment you take my cursor on the returns to white perfect and now those were type number i also want to change them so for number for number i want to save the same option i want 5 pixels then i need height of type 40 pixels then i say color it looks i want to say called black then border border we want solid black into excess solid black two pixels then width let's check awesome so they looks nice now we're left with few other

type of options i can dot and equal to okay that i'm talking about quite decimal or decimal i need to have a different options with me 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 padding five pixels color black border solid okay black two pixels with hundred percent height forty pixels five cursor pointer perfect okay looks nice but i have changed the color to light blue now now i talk about clear okay now come back and say clear okay in

this color background color is changed to light salmon line segment padding 5 pixels color black border same width 100 height 40 pixels fine so cursor pointer file margin auto and margin bottom merging bottom differences let's check perfect not looks beautiful okay now here after giving these details we're talking about called equal part dot equal so for dot equal also i'm just copying the same so we recall background color id color just change to lightly lightly and after this since it is equal so we say padding five pixels is okay color black fine border fine with

hundred percent height forty pixels color and cursor pointers just i don't need to for dottie code and i want for container container in this container width i want 40 percent white okay now here padding is 15 pixels so display block so first of all width you see display block which we're taking margin okay in merchandising to pixels auto okay now align cells go to center okay border radius border radius which is say 10 pixels okay now using box shadow box shadow 5 pixels black and ready so these are details i have it now okay we

have it background color we are taking it now align cell display block border radius padding and then writing 15 pixels we've given audi i don't need to give it again margin okay fine box shadow let's try awesome so it's looking beautiful now okay so this we're exactly my application works like that and table when we talk about everything with 100 okay that's it super so it's now giving me the proper look of how my application should be here 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 display block okay margin okay and uh border radius and uh fine so i think we're all good now so that's it so we will try and implement the javascript part well every now so our css file is ready our html is ready it's time to just go ahead and talk about my final question that is called gs part where i want to basically perform some calculators now here i just say function display function display which takes val as in parameter and say dot get element by id here i'm saying

result okay dot value okay plus equal to whatever we are adding it just you basically try to apply calculation on the top of that okay there is a function after that we have another functions available here called function solve here in the solve we just use the value called let x equal to get element by id result okay dot value sorry dot value and say connect y equal to perform the calculations for the will be using one function called libra and type axis and parameter now the next statement will be again document dot get a

runway id result dot value equal to y okay now later on i'll try to use another function here function clear screen and here we say document. get it in by id here we say result dot value equal to like that so clear screen song 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 get closed so here script equal to app.js that's it okay let's try to execute now here two you can see the values

i will say plus six equal to eight absolutely i say c let's clear the screen 6 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 feel will look like in of this template beautification and here last video for gs which is smaller logic but really meaningful okay hello everyone and welcome to the

another very exciting project for our development in javascript that is known as call weather pro it is in the 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 going to 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 weatherproof now once again compared to the previous project what we

have seen these projects were working more kind of static in nature where like you talk about snake game you talk about tick tock toe 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 say 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 uh once again for developing a presentation part we'll be using html for formatting part we'll 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 dot html apparently i just want one more that is called app.css and another

file we need it and that is called your js file so you're saying app dot gs5 so total number of three files are available to us so i'll start working with an html now and here we'll 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 stylesheet 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 diagonal with my div tag i say class equal to i can just create a class which later on i can offer a different size of or different type of style so we can say container so we're saying dip class equal to container now within a div tag we

would like to use another dev tag which is a nested one so this step will have another class called class equal to app hyphen title i have hyphen title in the same div tag we can use this a 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 sub properties like id equal to

search second type equal to text next placeholder equal to enter the city next autocomplete i'm saying autocomplete off 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 and accordingly i can display the

records right in your application so for that i really need some of the div tags once again or i can display the details of this particular city so i'm just having this only text box let me go and go back and check how it looks so i have a call enter the city so here i'll be picking up the city and somewhere down the line i have to display the records so after this div 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 div class class equal to temperature value temperature hyphen value okay so div plus equal to temperature hyphen value inside this i'll be using paragraph tag and here in my paragraph i'll say iphone and this degree centigrade or whatever you want to display it here and we'll use a spandex within 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 day of tag and inside my tip tag i can

define the temperature description okay so we can sit down class equal to 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 inside 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 which i have downloaded from the internet just to bring more beautiful experience towards my application development well this is another background image which is called bg.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 call font face so to make this font face we are using this statement name call here at the rate font face and i like to use font family font family i'm using 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 ttf okay that is called bold.ttf that is the file which is there with me next

thing so for every location i want to use the font family font hyphen family i want to use same monster 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 steel blue then i need height i'll say 500 pixels next your background position 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 they can see like the background looks awesome now now next thing we required a container so we are saying dot container container we say width width 50 next background color which is using white next we need it is your ally itself that will be center display will be block margin so in margin we can say 100 pixels after that border radius border radius we're saying 10 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 called container now okay looks awesome now so this is where exactly the details will be okay now after this css container we have used we can talk about called title you can say hyphen title inside this we will say width will be 100 then height will be 150 pixels then border radius 10 pixels 10 pixels then we need display 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 justify content which is center then flex direction would be column so this option we're using for our tool name called what app hyphen title okay so here in my index.html file we have called div class equal to what our hyphen title equal to weather info let's check okay so this is another we have used that is 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 tab title space p 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 you can see it looks better comparatively paragraph so once again in my paragraph i will be having texture line center padding i want 15 pixels then i need margin margin would be zero and auto followed by font size font size this i'm

saying is called 1.2 yeah this position then color we'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 code to what search so here in my app.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

5 pixels height that i'm looking forward for 20 pixels then border radius i'm looking for four five pixels then outline that's called none there is say border okay in this bottle what we can say three pixels let's place solid okay and once again that's what let's check so this is actually the text box so once again search you use display block margin lift auto margin right auto width 5 pixels width padding sorry one thing i said padding should be 5 pixels width should be 40 percent that's why it is smaller but it will be 40

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 now in 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 and we are saying 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 we are saying color color is basically red okay else if you want to give maroon into the model and after this the next property we are taking is called font size one size we are taking is called 1.2 am followed by margin margin we are taking is zero after that text align center adding 10 pixels zero so this is for notification p and then the weather container okay in my weather container i will say width 100 percent sorry yeah with 100 height i'd be giving

260 pixels or up to you 250 pixels if you want background color this background color we are giving is called once again white and followed by margin top 20 pixels 20 pixels this is for weather container now for the weather icon whether hyphen icon i am saying width is 100 and height 128 pixels just to give in a better look now the next thing we are using dot weather icon icon space img here we can display none and uh sorry display node none it's another block display block and margin giving zero space auto therefore i

can and location icon if i want to give then location hyphen icon this location icon i can save with same width height so width i'm giving is 100 then height i'm giving 40 pixels and then we give this option called padding then type pixels so it's for location icon now followed by location icon we are also giving call location icon img okay dot location hyphen icon space img here we are giving the value called display block display block width we're giving is called 32 pixels and then we're looking forward for margin margin would be 10

pixels and auto then cursor so cursor will be pointed for sure and then we required padding padding looking forward for 5 pixels followed by border border we are looking forward for steel glue steel blue solid and 2 pixels then border radius radius we're looking forward for 10 pixels and followed by your color 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 temperature values so we say dot temperature hyphen value okay this temperature hyper value we can give it is hundred percent and height making school 60 pixels okay this is for temperature value let me copy this again and i'm giving this temperature value space paragraph here i'm gonna give padding 0 margin 0 then color which color you're looking forward for we can just say dark grey 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 another one we're

giving this call 293 okay two five one 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 b 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 a temperature value span here dot temperature value span space span and here remove the additional dot now within this span say color once again same and font size this is for span

and in the same temperature description paragraph you can use it dot temperature iphone description description space b so this will be having the padding of 8 pixels then margin 0 followed by color same color the one which we have used it earlier after this color just a texture line center font size 1.2 this is for temperature description okay last which is available for your location so let me give the location now dot location is space b here we can say margin 0 then padding 0 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 value called 0.8 okay and last which is really left with call div in that relative here position i will be using absolute top from top i'm using 600 pixels okay and right i'm using 120 pixels that's it okay so all set so you can see now here we have to basically offer the details how my pictures will be taken attack so this is what my css now will 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 is half the battle what if you could do that for free visit skillup 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 tip classical temperature value okay if you just check carefully we have used this temperature and there we have used temperature hyphen value but before that we would like

to use some other properties too okay after this autocomplete equal to off we want to use uh another div class okay before my previous date tag is closed here so here after this we would like to use another div tag div here in my dip i'll say class 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 the blank okay now here the div tag is getting

closed okay now there's another div tag is getting closed here so two div tags are closed after that we'll be using another div class for notification here class equal to notification dev class equal to notification and this step tag is getting close right here okay now another div for the weather condition another div tag and here we say class equal to weather hyphen condition whether hyphen what a condition or i can say whether iphone container whichever so i can say weather hyper container under this weather container i like to use another tip for weather icon

tip for class equal to weather hyphen icon 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 raising call temperature value after the first f tag is closed you see like temperature value we have used after that the paragraph tag and the temperature hyphen description b after the p that the div tag is getting close okay

and after this we're using tab class equal to location so we want to use div class equal to location and within this location we want to use one more paragraph tag [Music] with this after this paragraph exists close this tip tag this tip tag another tip tag three div tags are closed that's it and at the last before my body tag is closed i would like to use script 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 display only when i don't

find the weather and the location anymore so broken field is absolutely good and now i'll start working on my javascript friend okay so let's go ahead and start writing our javascript code so in this javascript code first of all i need few things first thing what i need is call individual elements or individual properties of my application i need cost icon element i can element equal to document dot query selector and i'll be using the name call dot weather hyphen icon okay now copy this now we will call icon element we can say location icon

called location icon here we are saying dot location hyphen icon now next i need is called temp element we are using the property call dot temperature hyphen value space p next we're looking forward for desc element which is called description here we're giving temperature hyphen description hyphen temperature description space got then location element okay we need location element and we use dot location space b next we need notification element notification element and here we 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 is 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 given the name called search which is the name or id of my text box let city equal to blank next we're gonna keep 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 elements here we are saying input the variable dot add event listener the variable what we're talking about which even list might be talking about key up key 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 send if what is the condition event dot key code equal to 13 okay then that means number 13 is basically the enter see the key code means for 13

13 represent the enter keyword so even dot key code equal to what 13 so we are saying event dot preview default why we're using this because i do not want my page to be get refreshed just to avoid this we're using this and after that we are saying city equal to input dot value now you'll be using this another function because i do not have function created otherwise i have to call the function name called get search weather and be passing this as a parameter so we're going to get search whether i do not have

this function i yet to create this and pass it here as a what city and we say console.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 weather equal to const weather equal to curly braces after that we are saying weather dot temperature equal to this and which temperature conditions you want i'm saying unit of type what celsius i wanted a celsius put it in a double quotes okay so

next statement will be getting the details in kelvin i'm saying cost kelvin equal to value of the kelvin is about 273 and after that con 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 openweathermap.org this is a 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 openmethodmap.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 api key with me so i'll go here it'll ask me for the registration so i already signed up so if you're not you need 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 key

equal to to paste my key here okay after this paste in 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 called geolocation i'm saying if geolocation okay in navigator navigator as you know there's a browser object model element so here we are using navigator okay navigator dot geolocation dot get current position in which i'll be passing the first parameter name 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 am using this statement name called notification element you see this 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 yours 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 position it will i'll be taking position as a parameter and take latitude latitude equal to position dot chords chord for coordinate star latitude like that longitude equal to what position dot cords 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 seen i'll be having it defined below but as of

now we are just saying get weather and in which this we are passing latitude and longitude that's it so we have this function name called what set position in which will be passing all the values okay at the same time i will be using one more function here that is called function not function in fact i would like to use location icon the one which i've defined on the top part add event listener which even listener i am saying one click second function which take even doesn't 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 once again you'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 is 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 error as in sorry just take error is in parameter now 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 error 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 get 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 get search weather 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 weathermap.org slash data slash 2 point sorry 2.5 that is a version slash okay question mark i have to take the city dynamically so i'm saying weather question mark q equal to here we're using what city and we're using ampersand app id equal to the one app id we have used it already okay what is that that key so that is the key which you've already written so that app id we are passing it right over here okay q equal to

ct and i have id 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 called what fetch okay so if you just check this fetch it is basically a take request info and give you the what a promise response so return type will be the promise type in this fetch i'll 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 using json now and return what data so it'll be returning data back to me now if it is successful then what then i'm saying dot then once again it is chaining again function again data's in parameters now in this case we'll be getting lot of things i'm saying whether okay dot temperature it's a predefined dot value equal to i'm using what math dot floor inside this we are passing what data dot main dot temp it is a predefined property we

are receiving it now hyphen kelvin whatever the kelvin value is basically we are taking score 273 on the top minus kelvin followed by another property or weather dot description weather dot description equal to we're using data dot weather zero position because it contains a lot of data but i will be taking what description out of that then whether 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 dot 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 weather this function i had 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 i'm 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 called function getweather okay it takes two parameter one is called what latitude and thing is called longitude so we have two things called latitude and longitude and here i'm using this property called what led api equal to

once again if you remember i have used this statement i'll just copy the same and pass it 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 feather question mark here i will not be using q i'm using what led equal to latitude okay and we're using and hello n equal to we're using longitude okay and app id 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 whether that temperature method flow says country dot 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 whether okay dot icon id okay dot png okay so that we are basically putting it here dot png and after that it is 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 template 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 side the one which i told you okay and use spam span okay next we're using call talk element so we have that sorry dsc element we have got dec element dot inner html equal to weather dot description and last but not least location element dot in your html equal to what i'll be using once again 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 you can see awesome beautifully it is showing you the conditions it's saying smoke 28 degree centigrade and then on let me put another city here i'm going to say called awesome your application is working perfectly fine and 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 one very special game for you in javascript and 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 very 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 tech tacto 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.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 div 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 uh sorry i'm gonna just use those classes but we'll create it later on so just go ahead and create those so we're saying div okay so now this point onwards is my first div 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 tim 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-toe game after this div class yeah 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 called player one label 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 call type equal to

text number one second placeholder equal to enter name next name equal to player1 next we want id equal to layer 1 and then any class if i want to apply 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 div 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 player 2. so we have this two players with me

and after this div tag i'll offer the submit button now input typically submit start game now the form tag is closed here dev tag is also closed so you want the div tag to be closed or before that it's up to you now so here we have a called div class whichever we have taken so if you want you can basically put it later or before whatever so we will basically form that with this 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 that it is really working fine so here yeah we have this option called enter name in the name after the stick tag tool so yeah so here the details we have taken input applicable text and input typically text okay so two values we are taking now and accordingly we will go ahead now finally after the form tag we would like to start with working with the tape 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 div and inside this tip i would like to use one more tip type okay and here we want to use one more div tag so inside this div we will be using one more div tag so in this div we can just give the value called data id equal to zero id equal to zero it's just the value we are passing it div data equal to zero the div tag is getting closed fine so that's how we want it now so here the first div

tag is closed like that we can create another data id so 0 1 2 total number of 3 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 one two three options we have it now okay like that i can keep on creating the others also to three four five so zero one two three four five total number of five we have created one more i would like

to create it down 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 that's it and if you want to create a some clear mode or button that you can basically offer it a little later on but here we can use one more div and here we say dew dip classical relative and within this step tag 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 div type

and inside this another tip okay and under this i'm gonna create a button okay and in this button we'll be having some value okay we can secure the volume called replay this button is created and now we can create a clear board spam and here is a clear board that's it okay so here it's 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 and feel 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 the javascript with my code so here i can see here a 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 cheat answer so i just say link real quick style sheet into the name

called css though i haven't created what i'm giving it okay that's it so we have taken this html into our 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're going to 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 called app which i'm gonna create it shortly now here first of all let me try to create a game board i'm saying let gameboard 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 nine okay so that's how we're going to create it now okay now this is all empty right now after that we're going to create let turn this new variable equal to zero what this is it keep tracking if x or zero player its turn like which player turns it to b so just it is trying to mention it i'm saying let winner equal to false okay now let's go and create the player so create player how are you going to create a player we say const player equal to what we'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 let here x equal to player with the empty value and again player y equal to there is an empty value now let's try to initialize the app okay initialize now inside this initializer app we're going to create a new function function app and inside this we're going to create a variable likewise 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 hyphen 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 let me just give the name called player form okay next we are saying add player 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 players are added we are saying let replay replay button equal to once again document sorry document dot get element

by id or rather i will say document.query selector document dot query selector replay type btl okay just 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 board reset board that we are basically passing that 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 and right nut slides to add the plates so this is how we've initialized after

that let's add let's how to basically add the players here we have to just define the function add players okay so take event as a parameter and say event dot prevent prevent default this present default will try to prevent the default uh you know behavior which is submitting to we get avoided and now here we say if this dot player one so we just define the property called player one if this dot player one dot what value okay is blank okay or just start play two sorry let's start player 2 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 must enter name for each field the user has to add the values and after that return okay now the next thing is like we would like to select the players in this inside this by saying cost layer form container again const play from controller container equal to document dot query selector talk about the query selector here we will just pass the value call enter icon okay now we say cost board main equal to document dot

once again query selector for underscore main okay after that player form container dot class list dot class list dot add here we're given the name forward height container all right iphone container and after that you just say board board dot class list dot remove height hyphen container okay so we basically taken that and after this what i will do i'll just say player x dot name equal to this dot player 1 dot value ok this for player x copy this player y two and after that that's it so we have done it now so we'll

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 return 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 it will say return turn just variable okay percentile 2 we're just adding it with this zero okay if it is

then x turn i'm telling you okay or else so we're adding like the current player who says the current tail right now well after this adding the return current player we're gonna add another function that is known as call return the current player 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 resize squares and here we're gonna save this option equal

window dot add event listener now we have a call option called resize here and the second parameter what we are parsing is called on resize okay on resize now let's try to add it after this we are writing this function called function on resize that is a functioning for me the one which we 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 cell okay and then we're using another option called what let cell height equal to all cells with

the position okay dot of set width or set width after that we are saying all cells dot for each here we are passing cell [Music] after that we are using cell dot style dot height equal to now he'll be using this backtick and uses dollar sign and say cell height and that too 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 board so how we gonna build our board now for this we are saying function build

port 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 call 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 after that we are calling add self 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 leave those for a time being let's go back and create another functions now so we just want to write another event with self click event for play to attempt to make move so here we're trying to say cell click event for player 2 attempt to make move now this function 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 give it as a

parameter and here we are saying console.log say now let's go back and try to check 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 cell to add token now here we are typing document dot query selector and here you know using backtick i'm using this value called 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 sell to add token dot once again if cell to add token dot inner html equal to blank then what next so cell to add token dot inner html equal to blank then what issue 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 cell to add 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 taken 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 current player okay is x then we'll be using this option called cell see we have this property option available called sent to add tokens using cell to add token okay dot text content equal to current player okay and we say game

mode the one which you have created pass in this game mode this value call current cell and in this correct cell value will be equal to x okay else we can say send 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 for is winner to check whether the user is winner or not so we are saying is winner okay and after that

we are saying turn 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 leave it as a full time name 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 [Music] so here we say if the condition is turn greater than

seven alert again over okay we can say give over else we can say our type okay well after that we are saying winner function is winner now what we will check is we'll check const winning sequences winning sequences and here sorry here we are having this array and having the different conditions associated we say 0 1 2 probability we are checking it and then i just copy it well missing 0 1 2 and here is saying 3 4 5 6 7 8 and 0 3 6 again 0 3 6 and once again 1 4 7

4 7 and next we have a call two five eight eight then we are checking the value zero for it eight and one more last option we'll put is called two four six six so these conditions we are adding it now after this array we can say varying sequences start for each and give the name call winning compose winning compost and inside this varying compounds we are giving let cell 1 equal to varying combos position 0 then that copy and paste three times cell two cell three and here we get the writer called what one

two three values we're giving it and after that we're checking the condition let's say if and here the conditions you're checking what exactly that would be for the game board we're saying game board set one current player sorry current player ampersand time percent come down game board cell 2 i just want to copy this the same line and paste it multiple times now here we're checking the condition for cell 2 and cell 3 and cell 3 and after that we're starting the position so after that we're starting the position call [Music] by cutting this condition

called consense const sense and then equal to document dot get element by or sorry document or query selector query selector all and here let's select the position dot okay then after that we will be using cells dot for each cell and inside is what we are passing they 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 if condition we're saying if cell id now we're talking about call cell id triple

equal to cell 1 or saline cell to or salary equal to so three okay and in that case we can use cell dot class list dot add and give the name called board just give the class name winner so here we'll be giving the winner and a part of that we can use the other conditions too 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 correct player we can use the current player text the new variable we are creating it current player text document dot rather than saying get element by id we can say query selector and in this query selector we'll be giving the value by saying dot board the value which we are giving it here and that query value selector you given this let me try to put it in a parenthesis like this okay now here we just check if

current player x then what then in this case we can say current player what are the value we are using current text dot inner html equal to now we can define the value whichever you want to operate we just use a condition called okay so we are saying congratulations okay and here you see 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 called winner equal to true and after that if you want to apply remove that function we haven't written we'll be talking about little later on and just say return true again so your function is ready now and later on we can just check the condition if filler if winner or you can say check if time and return false that's it now in our continuation to this example we're gonna develop another function which the name is called change board header names so let's continue by defining the new function called function change change board header names

so this change board header names will be the new function for us and here they 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 say let player text equal to document dot query selector in this will be getting the details like dot board and here we're gonna give the name called player and hyphen turn player hyphen turn 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 will say current player dot inner html equal to now here we have to just use the same option called backtext because i want to go multilines that's the benefit of this backtick and here we say in our inner html span class equal to name hyphen hyphen style close this and here we want to use the statement now this value we want to write it with name attributes so it is getting close and here we are saying dollar

with this player x dot name and then close the span tag and we say you are up like this and after that we say div class equal to which is gonna 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 div tag so dip tag is closed that's it and now after this line what next we have this called else condition else what else here we say current layer text dot inner html inner html equal to after this

we gonna write the span class equal to here we say name hyphen hyphen same option we're going to use it so in this condition so winner conditions so let me try to copy the same rather than copying it again and again i'll just copy the whole text expand class equal to name hyphen iphone style player rather than saying x you can use file you are up you are winner okay so here it's getting closed well after this what we could do create another function called reset port 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 and the same game board what we have used 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 keyboard let me copy this yeah with the same condition okay give me equal to this after that line we will say let sell to add token cell to add token equal to document dot query selector all here in this i'll be using another

class called letter now cell 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 we would like to say board okay underscore underscore cell winner so these classes we had to create because these changes classes were just using this but we haven't created we'll be using it 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 winner equal to false we just define another variable define it current player text current player text equal to document dot query selector all yeah document query select all so here we're gonna use the name called board define player hyphen hyphen turn after that current player current player text current player 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

player x dot name okay just everything is same no change at all okay now here after that we're gonna write one more function called function add cell click listener that means when i will be adding or clicking something to my cell 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 board cell and here once again we say cell stop for each dot for each and here we say cell dot add event listener which event i want to listen

click and the second parameter will be handler on call make move okay and this function which we have created called add cell 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 cell click listener remove cell click listener now here we say let all cells equal to document dot selector all let's pass board cell and now we say all sets dot for each cell and here we say cell 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.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 modding 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 so it's really needed it so if you want you can have it otherwise leave this background because it's by default going to 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 okay 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 so first select div dot relative inside this data alternative is first say call position position we are saying absolute next is stop from

the top i'm just making 760 pixels next right right is saying 120 pixels next after this we are saying height container height dot container or sorry hide hyphen container here in hide hyphen container we will display display colon none well after that we have to use the header point header inside this header 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 am selecting called permanent marker permanent permanent marker

okay next class we are talking about call interplayer that's called dot enter hyphen players now an inter hyphen player for the sake color will once again we can use another clear but we can just use white or any color you want or you can just use hash okay margin margin we are giving it's called zero auto width we're looking forward for 80 next texture line center position relative now next we're going forward for input field in this input field we just say border border two pixels solid and black next outline outline none i do not

want any outline to be there next padding i can take four pixels eight pixels four pixels eight pixels now margin we are saying 0 0 10 pixels okay and finally for pixels after this margin 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 two pixels solid right or any other color which you want to use it next how you want your submit button to be so i'm saying dot submit hyphen btn border two

pixels solid and black adding 8 pixels and again 8 pixels font size 80 pixels now with 250 pixels followed by border radius 5 pixels next your margin from top let's take 10 pixels after that background color let's take white only 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 btn colon active and two options we are taking followed by condition outline outline then next border we're talking about 2 pixels solid and the color red okay so that's

the one and uh after that we like to use over dot submit hyphen button colon over what you want change the background color to what white you can use white smoke well here we like to use a dot board here we'd like to use player hyphen so these are the classes we were using in our javascript we remember and here we say color color we're using once again right or you can use this white smoke whichever you want so well later on text align center margin 10 pixels 0 and 10 pixels height 54 pixels okay

so these are the properties initially we have taken okay so after this turn let's go and start another classes here i'm saying dot name hyphen hyphen style and here we are saying color red and then font size 22 pixels well now coming back to the another properties now we're talking about a next important called border container called board container dot boat container here we define width which is 40 pixels we are taking or sorry 40 percent we can rather take after that background colors that we can say coded blue okay next margin we're taking is

0 and auto after that font size font size we are taking 0 next border bottle we are taking two pixels then solid and then black followed by box shadow you remember this worksheet is one of the very very season three popular property here we're defining three pixels three pixels three pixels zero pixels and rgb we can talk about call 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 100 percent okay divided by three this calculation after this the next property will be display 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 font family this formula can use permanent permanent marker okay now next option a part of this we have a call your board circle board cell no spelling wrong this has to be d yeah for cellular let's make background color red okay

and later on just use letter now in this letter we just give the color combination so color will be white next position relative top fifty percent next transform translate y to minus 50 after that font family we are making it once again permanent marker let me 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 for this winner container what i would rather

suggest is you can use dot reset texture line center margin that is for reset and now reset hidden inside this reset heading we will set display name display none okay after this the replay button it's yeah i'm going to talk about replay button dot replay hyphen vta and here with we make it to 25 okay and followed by padding 10 pixels we take it from here and 20 pixels border this bottle we are taking is called 2 pixels followed by solid okay and black color now later on border radius border radius we're taking 5 pixels

later on outline i'm saying none after this outline we say letter spacing now this letter spacing would be again 0 after that text transform this text form value we are talking about called 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 are taking three pixels followed by background color this you are taking white as usual so this is for your replay button okay now in a similar line we can also have call dot replay iphone btn colon hover followed by dot

replay hyphen active now apply the common style outline we are making it null then color we are making is called white then background color will be black okay and when it comes to the congratulations so we'll be using this dot 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 will 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 am saying with 50 50 percent so this is what my css 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 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 dot 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 dot com slash oh spelling wrong 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 equal to 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.html5 well it pretty much look like in basic nothing else has started when we talk about call 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 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 part tip h1 class equal to header tic tac toe then we have a call div we have a call body under this we have a call another div tag so just imagine how many type of classes are available one we have called tip 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 css classes which we had that is called inter player player form player container label 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 now let's go back and try to reveal how it looks like awesome so it looks like pretty nice tic-tac-toe is a game 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 game awesome so now you can see it is saying

a 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 the first example of how the tic tac door game is used so it is a classical example of css javascript and html together so this time we gonna talk about our next very interesting feature that is called dealing with another example that is called snake game so staying keep is one of the very very powerful example which i'm going to 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 game we need

some new folders first folder i'm going to create it inside this that is called images and within this snake games i'm going to create few new files that is called index dot 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 the snake game for us from where we need to start and we have called index.html file and here i will i think you will create our basic html syntax and here i would like to include our script tag 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 gamespeed and followed by value equal to we can give the value called 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 one 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 these values after that i can give some bricks so two bricks we are giving it and start working with the div diagonal and in this div 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 is a canvas and after this canvas we will that tip tag is closed here after the div tag i can use another tab type div here i can say class equal to i may not have any class written but i can say

class equal to related so later on if i want to apply any css style i can certainly apply and after that i can offer the images okay so i may not have any images right now so i just leave this image playing right now okay and this script src i'll load it only before my body get 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 line 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 amp.js and here onwards we will use some of the properties okay which i want to initialize it so using var game start equal to none initialized second game speed equal to next game area equal to null game area context equal to null then game area width game area width equal to

zero that is in integer value game area height game area equal to zero again then solve it cell width equal to 0 play score equal to 0 again next snake equal to null next snake food equal to null next snake direction equal to null snake speed or else i can say speed size speed size equal to zero next we have called 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 you're in 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 call hash game start let me put it in double quotes okay start now game speed now these 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 [Music] game speed now here once again i take another point game area i say game game area here you have to give the value called game area okay so these values we have taken now we'll be talking about called game media context give me the context equal to game area dot get context okay and in this game context we will be using what type of context 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 solve it we're initializing with 20 next game area dot width okay so game area dot width equal to game area width and then we define k media dot height dot equal to game area right 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 am saying this start this dot disabled equal to true so i want 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 direction equal to right in the right direction then speed size the value also the variable which you define so speed size equal to because it will be accepting the value from the text boxes or from the drop down so it certainly will be string type so we have to use power sent so we're using this option called power sent and here we are using game speed dot [Music] value okay so we are using this value gain 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 we 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 using speed size missing equal to nine we basically initialize to what nine here we say else if speed size is zero we say speed size sorry speed size equal to one that means if it is less than zero i'll be making it minimum to one if it is greater than nine i'll be making it to nine maximum and that's it okay so after this else if condition is getting closed we are seeing speed size equal to one 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 cell wait that means how far it can go so it will 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 perform any logic whichever i would like to make it okay so here after that snake.push value has been given here i will be creating one more function here that is known as call create food okay so here we are saying create food so create food will be the function for me now you might be thinking where this function is but this function will be declared soon within your application but here first we are saying the function called clear interval clear interval with the timer [Music] okay whatever the timer will

be passing it and after that this clearing treble 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 call create food is a function we are calling after that we are calling this clear interval cleaner will be just like in a typical function which is there using this option called create game area so [Music] 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 called 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 saying set interval this function is knotted 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 create interval will be passing any parameters which we are passionate about as a timer here and here we are calling this call create food so here after that we'll be calling this function called create food so let's go and say function create food in this function create food let's go and write a logic here and what logic we want to write it in a create food we say snake food snake food equal to and here in our curling bases we use

two direction x and y we say in x we say math dot around and inside this we say math dot random after this math.random function we have to just take this calculation and check the another parameter called game area width game area width minus cell width the one which you are passing it and here after that we'll be performing the calculation by saying solve it okay so this is for our x coordinate similarly we would like to use for my y coordinate also now math or round round dot number game area 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 create4 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's called control function

control okay after that we are going to write one more function called function right score 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 right score is done now we say create square create square this is another function and finally we'll have a call change direction function change change direction so that's it so these many functions we wanted to create it here in our system well we know very well that we have taken this call create food

grade food function is already ready now now we're going to talk about our next function called create gain area and in this great game area we are defining two locations var x direction and y direction so we say uh a snake x equal to snake the position we are taking is called zero and we are saying dot x for the x direction we are saying var snake y equal to snake position we are taking once again zero and dot y so two directions we have taken x direction and y direction now here we are starting

game area context dot fill style at the united 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 now keep the position values i'm saying 0 comma 0 comma game area bit game area width comma game area height so we are basically filling the values with color we want to use it called stock style let me take the game area context again dot stroke style stroke style equal

to now we give the other color here by saying hash okay and then the next option called same media context dot stroke react stroke react and here 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 snake direction equal to right then we say snake x

plus plus now else if elsa same let's copy this sneak direction left then what should happen here we say snake x minus minus okay so we're taking like that let me copy this again law here here we're talking about left right we set down so in this case this is snake y plus plus and in this case if it is up let me say snape y minus minus so these conditions we are taking it now now here after this else if 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 you say if snake x if snakes x -1 or snake x double equal to game area width which we have taken divided by solvent okay or we are taking this condition called snake y snake y double equal to minus one okay so we're giving this call minus one or snake white snake by equal to game area height save 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

some time back and inside this control it will take some parameters so what those parameters we can pass and we can say snake x comma snake y comma third parameter will be snake so this could be my another function okay so here we are passing the conditions just like that okay now here this is available to use 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 we are saying

clear interval because the timer will be stopped okay and using game start dot disabled equal to false and after that return that's it so this is the logic for we have written to 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 skill 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 if a snake x double equal to snake food dot x okay snake foot cortex ampersand percent snake y double equal to snake food dot y then in this case i will say var new head bar new head sorry var new head equal to here x colon snake x y colon snake boy snake x and y colon snake y these options we are taking it now after that we are using

this option called player 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 pop okay and we are saying new head dot x equal to snake x and new head dot y equal to snake y so these values are basically associating with your heads and after that we are saying snake dot unshift and shift snake dot and shift and here we are passing this option called new head

that's it and after that we'll be starting with our for loop by saying for var equal to 1 i i equal to 0 then i is less than snake dot length and snake dot length and once i plus plus okay later on we just use the option called create square and in discrete square we are passing snake snake position i dot text 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 foot let me copy this again and here rather than using

this we can say snake food dot x and snake foot dot y okay so now this values has been added into my code now let me start working with your control 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 var i equal to zero i is less than 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 ampersand time percent here we say array with a 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 true the condition okay that is for if condition else return false now that's it now we are talking about this option name called write score this right score we have to use the game area context game area

context dot font equal to here we'll be passing this situation we're saying 50 pixels 50 pixels and then cells hyphen service after that we're using call game media context again let me copy this take it again call game area context dot fill 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 2 minus

100 and then again game area with slash so this is where exactly the right score where the data will be actually written okay next we'll be having this option called create square at this great square it takes two parameters one we're talking about call x second is taking y and now here we're using this game area context same dot fill style equal to let me give the color after this we're using call same gary and text game area text dot fill react here we are saying x multiply by cell with comma y multiply by cell

width comma cell width comma cell weight 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 workkeys equal to e dot and later on we want to say if keys equal to 40 okay ampersand ampersand snake direction equal to up okay so here we say snake direction equal to tau so we are changing the directions

here okay now let me try to copy this [Music] and here we use elseif [Music] four times okay so here we talk this 30 40 and here we say 39 and followed by 38 followed by 37 39 38 27 and here we say up let's change to what left down right here we say right up left three options we have changed and last but not least here i will just use window dot on key down equal to change directions and window dot on load okay equal to initialize 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 clicking and all so you have a call start game now this start game will be calling it here okay so in start we were called snake we have called snake dot push and after that we are calling this function called what create food clear interval and here we say timer 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 write an id equal to call game area dev classic to relative and that's it and here we have a call script sr is equal 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 there only my code really look better because if there is no css it wouldn't really make good towards my application okay and i also want to have certain images but those images we will take it 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 real equal to style sheet okay hr 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 font family may be 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 and here we want to say background background image since i do not have any image so i will just leave it as a blank okay so just otherwise i have to say url and insert this url it gives some values but i leave it as a blind 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 then background size okay let's see if there's 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 just talk about call input okay in this input i say font size font size may be optional i can make it but let me just say font size 100 percent then text align center then padding i want to say 5 pixels and 7 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 order it is i can say 20 pixels then shadow if i want to use it so i just say box shadow box shadow i can say 3 pixels 5 pixels and 6 pixels and the color is black let's check awesome so i can see here [Music] the logic is there so shadow you can easily see how it has 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 i program now when i say start okay so there may be some error here then they cannot set a property of call on click null so this we can just check this into this uh gamestop.onclick let's check anyways we just try to fix that issue in while but anyways we have our created css and now going forward will be implementing the 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 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 but you can just change the direction go up and you can see the score 10 has been placed here

that's it so this is where exactly the look and feel of your game has been taken and uh you can just increase the speed suppose if you just put a value call 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 fine so like

that you can see and automatically this will be position this is what's called food that is how we have used in my example on app.js you can see we're using this example name called food create food so in create food of the specific interval time this would 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 game 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 queries let us know in the comments section below thank you for watching keep learning and stay tuned for more from cynthia you