10 HTML CSS JavaScript projects (HTML5, CSS3, vanilla JavaScript) [2023]

Welcome to our comprehensive course on learning HTML CSS and JavaScript where you'll gain the skills you need to build modern and responsive web applications by creating fun and engaging projects our course is designed to provide you with hands-on experience teaching you how to code web applications from scratch using the latest web Technologies HTML5 css3 and vanilla JavaScript this way you'll fully understand each concept and be able to practice your newly acquired skills without resorting to copy pasting no prior knowledge of HTML CSS or JavaScript is required as we will guide you through each syntax and explain every step in detail our course is suitable for both beginners and experienced programmers if you are new to coding or want to brush up on your skills our course is perfect for you we believe that learning should be fun and engaging which is why we've created a set of modern super cool and engaging projects that you'll build throughout the course each project is independently created from scratch and you can choose which ones to work on based on your interests our course includes separate videos for each technology so you can easily learn and focus on the areas that interest you the most for example if you're primarily interested in JavaScript you can skip the HTML and CSS sections and dive right into the JavaScript videos to help you practice and review the projects you'll be building we've included a valuable resource the 100 JS projects website this website features both the source code and live demos of all the projects covered in this course serving as an excellent reference point that will help you compare your work with the final website I'm Serhant and I'm a web developer with over 16 years of experience throughout the course I'll be your guide answering any questions you may have and providing valuable feedback to help you become a proficient web developer are you ready to dive into the exciting world of web development join us today and start building super amazing websites welcome back to another project in this project we are going to create a weather app as you can see from the final version of the project we have an input and a button saying get weather if we write down in name of the city that we want to check the weather for example I write down London when we click on the get weather or press enter we are going to get the data related to this city including the icon related to the for example the forecast of the weather which can be cloudy sunny or Etc we get the temperature and we also get the description overcast clouds in particular for the London and then we get some other data like the the temperature for Fields like humanity is speed and the wind speed for example we can test for another city like Sydney so as you can see the Sydney the city's temperature is 25 degrees Celsius and also the other things are I've added to this project is the error handling for example if you write down a city that is not existed for example you make some a spelling mistake and click the get weather you get an error saying an error happened please try again later so we're gonna use JavaScript to First fetch data from an open Weather API to get the data related to the cities and then we're going to uh check if the data is okay we're gonna show it otherwise we're gonna pass an error saying that an error occurred so we're going to learn how to try and catch and fetch data and catch the error in the next section we're going to start working on the projects HTML file so see you in the next section all right let's start our project I have put the final version here for our comparison as you can see we have a weather app with the input for the city and the button here the first things we need to do to create this application in this section is to create an HTML file so we need to go and open the visual studio code this is my favorite text editor but you you are free to use any text editor you are familiar with and here we click on the file to create a new folder I would like to create the project in my desktop so I I'm gonna click on desktop here I create a new folder and I call it weather app which is the name of our application so weather Dash app we press enter and here we can click on the select folder to select the folder this is going to create a new open a new Visual Studio code let me close the previous the extra one here so this is good now our project is in this folder whether Dash app then now it's completely empty but we can start creating our HTML file by clicking on this icon to create a new file or you can right click and click on new file to create a new file and we call it index dot HTML and here we can close the welcome tab as well we have the HTML file now but it is completely empty but we can use an exclamation mark like this to get a boilerplate suggestion from image abbreviations as you can see we are getting this suggestion by just clicking on the yeah exclamation mark so as you can see now we have the boilerplate which includes the dog time at the top which uh actually tells the browser which version of HTML the code is written in for example if you wanna because we are using HTML5 we just need to leave HTML here inside the tag then everything else is covered by an HTML tag and here the link attribute defines the language of the page and as we are using English we're going to keep it en but you can change it based on your local language and the language that you're gonna use inside your website inside the HTML tag we have two tags which includes the hit tag and the body tag the hit tags contains the metadata metadata and the title the first metadata tag is for the chart set attribute which sets the characteristics of the website utf-8 is recommended by HTML5 because it nearly contains all the characters and symbols so the users that are using our website won't have any problem seeing the symbols and characters in our website because this one nearly contains all of them then we have an uh compatibility metadata tag which is for users who are still using Internet Explorer so this is going to tell the browser to use the recent rendering engine for the Microsoft Edge for the Internet Explorer browsers and the next metadata tag is viewport metadata tag which sets the width of the screen to be the devices with for example the if you're looking at the website by your mobile you're gonna see a different width in in the website while you're using different device like it desktop laptop or tablet and here we see the initial scale level which is the initial zoom level of the browser and it is said to be 100 percent and you can change it for example to 80 percent or anything you prefer and here we see the title of the page which is going to be appeared on the top of the tab section of the browser so which is said to be document so let's see this one inside the browser so we can use the extension a live server [Music] if you haven't installed I highly recommend you install this extension live server when you have this one you see it go live under here inside your Visual Studio code if you press on that this is going to automatically open the this page inside the browser and it is going to refresh this page based on the changes you do inside your application and you need to actually activate the auto save in your Visual Studio to see the changes after you do your changes in your in your coding and see it here as you can see the title is document now we can change the this one by changing this title I'm going to change it to the name of our project which is weather app and now if you check the title it's it is changed to weather app so let's bring this one our website to the right side and before going doing that I'm gonna show you what we are doing what we are gonna do here inside the final version so we're gonna have a container here let me search for something for example I searched for London I press get weather it is shown the result here I'm going to show you and break it down so we have a container so let me change the color you can see it better so we have a div with a class of container that is covering everything inside our application then we have a title an H1 tag here at the top then we have a form which includes two inputs here one is the London the input here and also we have a button so and this is a form and after that we have a div another div there is another div here which is covering the icon so let me show you here so this is the icon section then we have the temperature and then we have the description and finally we have another div for the details which includes the different details like a what feels like humanity and wind speed so we're gonna do exactly structure our HTML file based on these divs so we have a div with a class of container here and then we have the title form and then we have another div which includes four other divs one two three and four and the last one is going to have three more divs inside it so let's start doing that let's bring the our website to the right side so we can see the changes in real time and let's bring the visual studio code on the left side so we can see everything and we close this section we don't need it for now so inside the body section we're gonna if whatever we add inside the body section we're gonna see inside the browser so I'm gonna add a div with the class of container we just need to write Dot and we just write down container and this is going to suggest some abbreviation as well which is a div for the class of container and here inside this div we're going to have an H1 tag saying weather app okay now you see the changes here and then we're going to have a form so we just write a form there's we don't need an action for the form and for the form we're going to have two inputs one with the type of text and one with the type of submit because when we want to click on this button get whether you want to submit the form and also we have this input with the type of text but the inputs it's going to be by default when we press enter after writing down something is going to submit the form as well so that's why we are using input so the first input has the type of text so you can write down input clone text to create that one and this is going to have an ID of City input so for adding the ID you you can add a hashtag here or pound sign and you just write down the name of the ID you want to add for example CT Dash inputs so if you press enter this is going to create an input for you with the type of text with the idea of City input we don't need a name for that one but we're going to have a placeholder the placeholder is it takes that is going to be shown if the input is empty so we're gonna just write down for example n is enter City okay like this so after this input we're going to have our button so I'm going to create an input with a class of submits because when we press on this input we're going to submit it and then also we want to have some value for that one so first we press enter and the value for this one is going to be get weather okay as you can see this is kind of button now we can add a button here but for adding the functionality to the button we need to add some events listener or something like that but when you add input with the type of submit when you click on it this is going to submit the form as you can see we are refreshing a page okay so we have the form here now it's time to add the results section the weather data so after the form I'm going to add another div this time we just want to add an ID as you can see we are getting some suggestion here which is coming from the extension core pilot get up Copilot but uh it is not free but it gives you some suggestion for beginners I don't recommend you use this extension because it's better to remember the basics of the HTML CSS and JavaScript before using so I'm gonna deactive this one for now so we don't get any results from there so I'm gonna just add an ID of better data so you just write down a pound sign whether data and this is going to create a div for you with the idea of whether data and here inside this one we're going to have the icon we're going to have the temperature description and also the details but for now I want to add some hard-coded data so when in the next section when we are using CSS we can simply install our projects but we're going to delete them when we are using JavaScript because we want to create this data dynamically using using JavaScript later so now after that we're going to create a div with the class of icon so we just write down DOT icon and inside this icon we're going to have an image for now this source of the image now we're gonna hard code some icon from the open API openweathermap.org so the address for this one is HTTP clone 2 forward slash open weather map dot org and forward slash IMG forward slash WN forward slash zero one D which is the image for the Sun and Dot PNG so let's verification page uh let's see that if we put it correctly open weather map dot org forward slash image forward slash w n and now we can see the sun icon and for the alternative text we're going to have weather icon so if the image is not going to be shown we see this alternative text inside the text for example if we we just make it for example this URL is broken we see the weather icon instead okay so we have the IMG here we have the image now we're gonna have the temperature so I'm gonna create a div with the class of temperature and inside that I'm gonna just hard code some values for example 22 uh centigrade so we need to add some we just write down 22c for now we need to add a degree as well we can have the degree symbol for example you can just in Google research degree celsius symbol to copy if you search on the Google you can just copy it from here and then you can just paste it here okay if you don't have it inside you can you cannot find it okay so we have the tool any the two degrees Centigrade hard-coded as I mentioned before we're going to get these data dynamically using JavaScript and open API a website so after this step you're going to have another div for the description so I'm gonna just add description here and for the con for having something inside we just write down Sunny for now after that we're going to have another div for the details so the class for this one is going to say details and finally inside this step we're going to have three more divs we just right there we don't need a class for this one and then this the first one is just say fails like we can just say tune you copy this one this is going to be for example 23 and let's add another div which is going to say Humanity because 40 percent and the last one is going to be another div just saying wind speed and this is going to be for example five meter per second so we have hard-coded some data here you can see if I zoom it a little bit now we have completed the HTML part of the project so we can use these hard-coded data so in the next section we can just install our projects like the final version using CSS so see you in the next section for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to solve the project using CSS and we make it similar to the final version with the container with the Box shadow we're gonna Design This input and the button and also we make it similar to this and which is a modern design the first things we need to do is to create a CSS file inside the visual studio code I'm going to open the Explorer section using Ctrl shift e or you can just go to view and open the Explorer section counter shift e and here we can create a new file and we just call it a style dot CSS so this is a folder sorry let's delete this we need to create a file so we just call it install.css as you can see this is it is completely empty but first before using the CSS you need to add a link to the CSS file within the HTML file so we need to come back to index.html and inside the hit tag just after the title you can add a link tag you just write down link and you can click on the third Auto suggestion the one with the CSS which is going to create a relationship between the HTML file and this style sheet which is the solid CSS and here the destination of the file the address href is installed at CSS because both files are located at the same directory so you just we just say install.css so now we can use the solid CSS in our project so the first things are you I usually do is to start a styling the body section of the project I'm gonna create some background color sum we're gonna change the margin and also the fonts family so we just need to Target the body section we just say body we add a set of curly braces the first things we need to do is to remove the default margin which is gonna help us to easily achieve our styling so I'm gonna set the margin to zero and this is going to reset the default margin for us and then we can use some fonts for our alt text inside the website the font I want to use is called Mont serif so we just write down mod font family and we're gonna search for month serve if there is no in this suggestion you can just put a string and just write down month sir it and if this font is not available so you you need to have some backup font as well so I want to use sense serif if this one is not available so this is going to check first for your for the user if it has this font it is going to use it otherwise it's going to use the second one so now after that I want to change the background color I want to sit a light gray background color so we just need to have a hash or hashtag or pound sign and we just write down F7 F7 F7 which is a kind of a light gray color so let's test and see our website as you can see the background color is not white anymore let's bring this one to the right side so you can see the changes in real time let's bring the vs code on the left side and let's close the explore section so we have more space here so we have the background color and we have finished is styling the body section we have removed the margin and we don't have any space here without this this actually margin zero you're gonna have some a space here as you can see okay so after that we're going to install the container inside the HTML file we have a div with a class of container which is covering everything else we're gonna Target this one because it is a class we can just Target that one inside CSS using Dot container so we just add a DOT with the name of the uh container with the name of the class so simply we can Target that div with a class of container so let's change the background color so we can see the changes easier so we set the white background color for this container I'm gonna use if if if which is which it stands for the white as you can see now the container has a different color here and after that I want to add some box Shadow for that so this is going to add some Shadow effect to The Container so I'm gonna just use box shadow which has four parameters for us to set zero for the x-axis and then we have 0 for the y-axis and then we're gonna have 20 pixels blurness so this is going to blur at the top and bottom you can see that the shadow but the shadow is quite dark I want it to be lighter so you can just set the color using rgba which is stands for red green blue and Alpha which is going to create a color from red green blue and also values Alpha means the opacity so rgba has four parameters first we set the red blue and green I think it was red blue and green and then we set it to be zero which gives us the black color and then we just set the 0.2 for the opacity which is 20 percent opacity so you can see the nicer Shadow here you're gonna have some margin at the top margin is a space we can add so we're gonna add some space at the top outside the container which is going to be 50 pixels so this is going to push it a little bit down and we can set everything and bring everything to the center using text align Center this is going to bring that everything to the center like this I want to add some margin to the left and right as well so we just set it margin for the up and down I want to set it to be zero in the in a big screen as you can see the container is completely covered everything but I want to have it as some Maximum width so we just add a Max Dash width actually to set it to be 600 pixels so this is going to have a maximum of 600 pixels which is going to have this kind of width but this is actually bring this one to the left side but we want it to be in the center what we do here is to set the margin up and down zero but we can use Auto to bring it to the center for the X and Y so here this is the top and bottom this is for the left and right so for the left and right we make it auto margins this is going to create some margin and in the mobile size we're gonna just connect it to the wall that is fine the other things I wanted to add is some border radius we want to add a rounded Corners to The Container so we just add a border Dash radius this one we just want to add some five pixels so this is going to add some border here the rounded Corner as you can see let's decrease the size again so after that we're going to have so I think that's it for the container part we don't need to do anything else or we can add some padding as well so we we're gonna bring it more down so we're gonna add padding padding is going to add a space inside the container as you can see the text is just connected to the top so we can just add 20 pixels for the padding which is going to bring it exactly push them a little bit inside so this marching top is not working because we have a margin here whatever comes first has the if comes next actually later has the priority if you bring up this margin this is going to have the margin top important so this is going to apply this margin top as well otherwise this is going to apply the next one which is margin 0 Auto all right so now we have the space at the top here you can see this is aligned very well the next things we need to style is this form we have here so after the container I'm going to Target the form because the form is just a tag it doesn't have any class or ID we can just simply write down form to Target that so I want to use the flex pass for the layout so we're going to change the display to flex this is going to bring these two next to each other so now we have this actually form it is flex they are next to each other but when we have a smaller screen we want to have it on top of each other so we're gonna have some uh media query to fix that one later but for now we just set the display to flex we can bring everything to the center now using Justified content Center for bringing the children horizontally in the center so we Center the children horizontally and also we can Center the children vertically using align item Center so in the x-axis justify content work for the y-axis the Align items to just bring them next to each other and Center them because later we want to change the size of the button so this is going to be in a different position so we're going to Center them using these two lines of code and then I wanted to add some margin at the bottom of 20 this is going to add some space at the bottom of the four so we have a style the form now it's time to install the inputs separately so how we target the input because both of the inputs have the same tag name so if we just write down for example form input we're going to Target and decide both of them similarly but there is a way as you can see the type of this input is text the type of the other one is submit we can simply Target these two inputs separately we just say form and then we're going to Target the first input which has the type of text so we're going to write down like this this is going to Target that this is should this should be equal sign and then now whatever is styling we add this is going to be applied in the first input which has the type of text so now I want to add some padding which is going to add the padding in the old size 10 pixels which is going to push as you can see now now as you can see the size of the inputs are different for example if you don't have the Align item Center as you can see it's different this is going to install the other one too so it is necessary to have this make them align and centralize them vertically and after the padding we're going to remove the border of the input we just use border 10 pixels sorry we're gonna remove it so we're gonna say border noun so this most for most of the modern website they don't use border and also they don't use this art line so when we click on it you see a line around it so we're going to remove that one as well using outline none two so now when we click on it we don't see the line around the input after that I want to add some border uh I want to add some font actually change the font size so I'm going to increase the size of the font using font size to 18 pixels which is going to increase the size and whatever we write here it's bigger now and we set the width of this input to be 60 percent so we have completed the styling the input section the with the type of text now we can just install the button here which has which is a input which is an input with a type of submit so we can Target that one let's first save this one and then we can just say form with we want to Target the input with a type of submit and this is going to be first thing first I want to change the background color to be zero zero zero seven BFF sorry PSS which is kind kind of blue color and then we set the color of the text in a white color which is FSF then we can remove the Border using border none and finally we can just add some padding so we can add some space around the text so in the top and bottom I want to have 10 pixels and for the left and right I want to have 20 pixels and let's add some border radius so we add some uh Corner a rounded corner so we just say border Dash radius and we're gonna set this one to be for example five pixels okay so you can see the round around that corner here and let's set the font size for the submit button text as well which is going to be font font Dash size so I will have to bring this one a little bit off to see the suggestion font size is going to be 18. pixels so we make it bigger we set the cursor to be pointer which is going to change the cursor to pointer on Hover so we just for example we just say cursor to be pointer when we hover over it we see a pointing hand and we set the odds line to be known as well so this is going to help when we click on it this is not going to show an outline and so that's it but when we hover over it I want to change the color of it so we can easily Target that one we just say form input with the type of submit and we're going to Target the hover effect so we're going to add a colon and just say hover and here we can just change the background color to be different color which is zero zero sixty two and CC so now when we hover already see a darker color but this is a kind of fast changing we can just add some transition here inside this form we can just add a transition and we're gonna have the transition to the background color bitter point three seconds and with the ease effect so now when we hover over it you see it the color change is a kind of smooth not suddenly so that was it for this input sections the form section and we're gonna make them actually on top of each other in the mobile size but we're gonna do the responsiveness at the end so just we install the other parts like this icon or other parts and later we're going to make them responsive so let's target this icon if we look at the HTML file the icon is a div with the class of icar so we can Target that one we just say dot icon and this is going to I want to change the image size so we can Target the image inside so we just say dot icon image and this is going to we're gonna set the width to be 100 pixels we set the height to be 100 pixels as well we're gonna set a margin we're gonna bring it to the center but we don't need this actually is inside the center and if the icon is different for example it's a bit different for example this one is completely rounded but some of them are different for example here this is just a cloud so we're gonna add some background for example background size I want to make it contain if for example this one is a bit different side this is going to zoom the level to fit it within the container so actually this one should be inside this icon and I think that that is fine the contain and then we just change the background repeat this is going to prevent the repeating of the pay image we just set it to be no repeat and then we're gonna change the background position to be in the center both horizontally and vertically so when we have a different icons you can see the effects but for the sun icon we don't see the effect much so that was it for the icon the next one things you want to style is this temperature so you can Target that div with the class of temperature we just say dot temperature I think it's okay Tim preacher and we just make it bigger by changing its font size to be for example 48 pixels and then we want to make it bold so we just change the font wait to be bold and also we can just change the margin for this one so we add a margin 20 pixels up and bottom and then zero for the left and right I think it looks it looks nice let's see the final version yeah we have the similar one and then after that we're going to Target the description which is this sunny word so this is going to be dot description the things I want to do first I want to change the font size to be for example 24 pixels and let's add some margin at the bottom of 20 pixels this one it looks okay and finally we're gonna have these three sections first thing first I wanna install the div that is surrounding them which is the div with a class of details and then we're going to Target the divs inside it so first we target that one we just say details we want to bring them next to each other we just say display Flex and then we want to Center them like we just say justify content Center to centers and horizontally and we can use align item Center to Center them vertically and then we can use flex wrap wrap this is going to allow the children which is these three divs to wrap onto a new line if needed for example if there is no space here for example they're gonna go to the next line so this is going to make them responsive uh you cannot see it yet let me install this one or in the final version maybe you can see for example if you zoom a little bit you can see now we have two div on on the first line and one did in the next one if we Zoom more you see they are on top of each other so this is the flex wrap so this is going to automatically make this one responsive for us so in a different size we see that on top of each other or next to each other so let's say install the div we can Target them you simply using this technique so we just say detail dot details and we want to Target all the divs here so we're gonna add this sign a great sign greater than sign and then we just say div this is going to Target all the divs inside this details and then we're going to have a padding of 20 pixels so which is going to add some padding inside the div so now we can see it see them differently and let's change their background color so you can see the changes better so the changes the background color is F1 F1 F1 which is kind of similar to the background color we have for the website and then also we want to add some a space between them which we can achieve with changing the margin 10 pixels we as you can see this one didn't just go to the end a space we can just change the flex to 1 which is going to use the remaining available space for the div so now they came to next to each other if they Zoom it they see that these two are next to each other they have the space they fill out the space and also this one is filling the space too this is gonna nice design okay so this is the flex one this is going to use the remaining available space for each div and then we're going to add some border radius 5 pixels which is going to add some rounded corner for them and then we can just use text align Center so so we bring the text inside them exactly in the center and finally we can sit some mean height I want to just set the mean height to be 4 5 pixels so at least there it kind of be in the same position especially when we have a bigger screen they have the same size for the height and after that we're going to Center everything inside I think that is not necessary for them because they are already in the center okay looks fine now we want to just the the things we want to do we want to just add some a styling for the for example this uh I think that is fine for everything that we have done is completely okay now we want to add some other things like media query we want to bring these inputs on top of each other in the mobile size so now we can just Target them we just want to change the size we just write down media here we just say for the sizes less than 768 pixels we just say Max width of 768 pixels do the following so now this is for the mobile size so max width not Max width okay now we want to Target the form first we just say change the flex Direction instead of row to column so bring them on top of each other if the size is less than 768 pixels so after that they're gonna be next to each other like this but they are not actually in a good position we're gonna change the other things as well for example I want this input to cover all the page so we can Target that input using form the input with the type of text and this one should be equal and we're gonna set the width to be 100 percent so this is going to come here and also I want to have some margin at a bottom of 10 pixels so we're gonna have some space between them this way too so now after this size we're going to see them next to each other okay this is the way you can make a responsive website using media query the flexbox actually helps you to make a responsive website like this one too so let's check everything so everything looks okay so that was it for creating and creating the CSS file and styling the project in the next section we're going to add the functionality so for example we can just write down the name of the city get the weather show it here the we get the dynamic result and we're gonna fill these things using JavaScript so see in the next section for the JavaScript part of the project thank you all right in the last section we have completed the CSS part of the project in this section we're going to work on the functionality and create the JavaScript file of the project the first thing we need to do is to create a JavaScript file inside the visual studio code we can open the Explorer section using Contour shift e and here you can clear create a new file and we can call it index or script.js before using the Javascript file we need to add a link to the this file inside the HTML file so just after just before the end of the body section we need to add it because we need the website to be loaded first in the browser and then we can add functionality to it because otherwise we cannot read the elements inside the JavaScript so we need to here add a script tag here you can see script app with SRC and for the source as both files are located at the same directory we just need to have index .js for the SRC this is going to add the Javascript file here and read that file so now we can just start creating the JavaScript file as we are using the open Weather API we need to first get our API key from the open weather map API so we need to go to their website register and get our API key it is totally free for the developers and they give you some free tiers so the things you need to do is to go to weather open weather open we just search open weather map and in the search results we need to go to open weather .map.org current weather and forecasts open weather map and then you can check their API here so we just accept their cookie they can and then here you need to sign in with your Gmail or any email account you need to make a account if you don't have an account you need to create it otherwise you can just sign in with your account let me quickly sign in with my account as you can see I have signed in with my account so here you can click on this Arrow icon and just click uh to see your API Keys here you click on the my API keys and then here you can see your API keys I have already created some API key for myself before but if you want to create a new one you just put the name of the API key for a sample you just say weather app or weather or whatever you just write down something and generate it and this is going to generate you a new API key you need to activate it but you have to wait few minutes until this one get activated so if you just now use it probably doesn't work so you need to wait at least I think half an hour and then test your application so I'm gonna use my one of my old API keys so I'm sure they're working now so I'm going to copy this one come back to visually Studio code and here I'm gonna create a new constant called API key I just equal it to and put it inside the setup code and put it here now we can use it in our application so we need to get some of the elements inside the HTML including this weather data we need to manipulate all the information here and substitute it with the one that we have we were gonna create and get from the API so I'm going to bring this one the reader data so let's first bring this element here as we know the ID it's very simple we just want to put a name for it we just call it weather it should be camel case Radio Data we can just say whether data element and this is going to be equal to document we're gonna Target all the document and you can use the method called get element by ID and here we're gonna add the ID that we have which is weather data now they have access to this element and we got it and brought it inside the JavaScript the next element that we need is that input this input we want to have the data inside this input City input because we want to get the information inside the input and based on this information we're gonna request for the API for example if the city is London we're gonna request for land so let's copy this ID as well and this we bring it here so I'm going to call this city input element and this is going to be equal to document this is very similar dig document Dot get element by ID and the ID is going to be City inputs all right so now we have the available data element the CT input element the next things we need to have is this form because we want to add an event listener to this form so anytime we submit the form we want to trigger a function if you want to take your function which is going to get the data from the API so the form doesn't have any ID or class we can directly Target that one using a method called query selector so we're just gonna create another constant we call it form element and this is going to be equal to document because we want to Target all the document inside the browser and then we can use the method called query selector and the query we want to select is the form so we need to add a code and we just say four okay now we have the things we need the first things we need to do is to add the event listener to this form so we're gonna trigger a function based on that so it's very simple we need to add a method called add event listener which is going to be trigger or it's going to trigger a function when this form is submitted so I'm going to show you how to do it so first we need to Target that form element and then we just added add event listener and this one the the event we want to listen is submit so we just write down submit here and when the submit happens we want to uh trigger a function so we're gonna create an arrow function here and this function is going to get the event event what is event whatever inside the form submission happened it it's we get the data here using this event for example all the inputs for example the this input we can get the value of this input further you write down here using for example event uh for example event Dot it comes with the information for example but if the for example event comes from the inputs you can get the value the things you get from here is some for example you can use for preventing this submission so when you for submit the form here for example when you submit a form you can see the page is ref refreshing this is the default behavior of the form it's gonna refresh the page but we want we don't want the page to be refreshed so we can prevent this one easily using event Dot prevent default so we're gonna use this method now when we submit you see there is no refresh in the page so now what we want to do is to get the information inside this form as I mentioned before we can just get it we have the input element we can Target its value and get that one so we create a constant we call it for example City value and this is going to be equal to the city input element that we got and we're going to Target its value okay so we got this value let me show you inside the console log so we're going to cancel log this CT value so now for example if I go to the website I open the console using F12 and here you just go to console and for example whatever I write down here for example I just say landed when I click on get better you see the London is logging is being logged inside the console whatever I write down it's going to be there so we have access to the information of the input now we can use this input this city value we pass it to a function and then from the function we're going to fetch the data from the API so I'm going to call a function here and I'm gonna call it for example git weather data and gonna pass this city value so I'm gonna but we need to create this function because this function is not existed yet so we create a function called get whether data which is going to get this city value which is coming from here and then this is going to do some some things for us for example we can get the information from the API or Etc so for uh fetching from the API the best way to do it is to use a try and catch method try and catch method actually acts as the information from the API if they request is correct is going to get the data if the data doesn't come in any situation we we can understand it by catching the error that's why we use try and cash so we can just write down try cash a statement we get the suggestion this is going to try to get the data from the API and then the cache the error if possible error happens for example the API is not working or the city we write down is is not it does not exist so we we can't easily understand it by caching the error now we want to create a request to the open Weather API to get the weather data for for example a specific City so what we do here is to create a constant and we're just going to call it response and this is going to be fetch the data from the API but as we need to wait the results counts and then we go to the next line so we're going to use a weight here whatever it does it's going to wait until the response come and then goes to the next line and doesn't prevent the code to to read the next line so and then we're gonna use a fetch method and we're going to use backtake here backtick is the one that is located on the top of the Tab Key on Windows and we're gonna create this uh API request because this is going to be dynamic based on the city we need to have a backtick to write down a dynamic URL so we're gonna write down the URL which is https claw two forward slash API dots open weather map.org so it's gonna say open weather map dot org and then we're gonna add forward slash this is going to uh you have to be careful for the URL if you make a mistake you're gonna get an error so data forward slash two point five which is the version of the API and then we're just gonna say whether and then we add a question mark because we want to add the query the query is going to be Q and the queue is going to be the city so you need to add a dollar sign because we want to have a variable here and the variable we want to use is City value so we add the city value here to the query each time it would be different for example London Sydney or any City you search so you're going to put it inside the queue now and then after that we need to pass the API ID which is good we got from here so you need to add a dollar uh and sign the first one you need a question mark after that any parameter you add to the URL should start with the and sign and then you just say API ID let's start a app ID app ID equal and then you're gonna add the another variable using dollar sign as set of curly braces and this one is going to be API key and finally we can just say they use the units for example another and and then for the units I want to use metric metric is going to give you the centigrade instead of Fahrenheit if and then so now this is completed as we are using a weight and a weight I said the reason is because we are fetching data we need to wait for the response comp and then go to the next line as we are using as a weight we cannot use a normal function we need to use a synchronous function so you need to just say sync function so this is going to work asynchronous function is a function that has some delay in some lights using a weight so after getting the response first we check first we check if the response is okay or you can say like that if the response is not okay there is the meaning of okay means if the response brings back the not error any error for example 404 error if the chair we check the response from the API is not okay if it's not okay we're gonna throw an error through a new error error is a function from the JavaScript and then this is going to be Network response was not okay so we're going to pass this error so if the response is not okay we're gonna pass uh send this error this is going to show inside your console and then this is the format it comes the response we want to parse this one to Json that we can use it this is not a usable information we need to pass this one from the API as a Json so it'd be what we do here is we create another constant and we call it data and this is going to be equal to a weight because we need to wait until the response converted to Json so we just say raise a response Dot Json and we need to pass the parenthesis to call this function call this method so this is going to convert the response to data now we can just we can just get the data and show it for example I can now cancel log data so let's go back to visual studio code and we are in the console let's refresh the page now we just write down London press get whether as you can see we got the data which includes as you can see first the card is 200 I mean it means that the response is okay 200 means okay 404 is an error okay this is kind of basic you slowly you understand what is error what is okay as you can see the city name is London and now we have some information here which we can get from inside this weather and the weather inside the weather we're gonna get the description which is overcast clouds we get the icon if you remember the icon was Sun before but this one can be cloudy or anything else the main is cloud and also we have the wind information the speed the degree and we can use this information to fill out this here for example we can get the Centigrades let me find the centigrade so the centigrade or the temperature is going to be inside the data uh here Main and here you can see the temperature which is 5.6 62. centigrade so if you try for a different city for example I try Sydney this is going to gives you another data with a different for example the Sydney weather is different now it's a broken cloud and this is the icon that is giving us and also for the temperature the temperature is 23 Centigrade So Max and mean we can get the pressure humidity and the 66 percent feels like 24. so all this information that we need to fill our website it's available inside the response so now I want to show you how to replace these things with this information so we can simply fill them so we got the data here now the time is to fill our website with this one for example we first we create a constant we call it temperature for example and this is going to be equal to data dot main as I mentioned as I show you this was inside the main and Dot temp but this is like a 26 point something but I don't want this format we can make it rounded using emit here we just use the round method and we put this one inside this and this is going to for example if it's 24 2.1 it's going to be 22. okay so after the temperature I think I made a mistake for the temperature it's this is a yeah term preacher okay and after that we're gonna have the description so we just write down description it can be anything this is just a name description this is going to be equal to data we get and this is inside the weather and it's inside the first array because it's it's an array we need to Target the first one we want this one information this is inside the description and finally we're gonna get the icon which is going to be data this is similar data that whether first array first element of the array and then this is going to be icon so and then we're gonna have the details for example if what feels like the humanity and the wind speed so we're going to create another constant but this constant is going to be an array so we create a constant and we call it details and this is going to be equal to an array and this array is going to be dynamic so I'm gonna add some backtick here and then we just say fields like and this is going to be equal to a dollar sign because we want to add a variable here and we get the data feels like I can copy this one and then I want to make it rounded too because this is the kind of temperature too but instead of temp we're gonna get the feels underline like okay after that the next element of this array is going to be Humanity so we add the backtick we just say humidity humidity which is going to be equal to I think we can get this one here we put in the dollar sign curly braces and this is going to be data Main and it's inside the humidity okay and the last element is going to be let me copy this one the last element is going to be the wind is speed which is going to be data that main uh it's not main data that the wind dots speed so I have shown you that how to see this data and we know which one is which one so now we have temperature description icon and details now we can fill the our website with this information so we need to Target that whether data better data element which is here this weather data element has many things inside it it has for example the icon we can Target this with a class of Icon and then we replace it with this image and then we can just Target the temperature replace this one target this one and then finally we target this details and then fill it with these details that we have here so what we do here we just start uh Target that Twitter data element and then we can use the query selector to Target that class here for example we want to Target this class disk icon we can simply just say dot query selector and here we're gonna select that one using dot because this is a class we need to add a DOT and we just say icon and this is going to get that element now we want to substitute the inside with an image tag we can use a method called inner HTML so this is going to change the HTML inside this element and this is going to be equal to because this is dynamic we need to add a backtick and we just create that image so I'm gonna we can simply copy this image tag here and put it here and let's just change it so we have the image tag which is which has the source HTTP openweathermap.org forward slash image WN but this is going to be dynamic 0 1 d so instead of 0 1D we're gonna add a dollar sign a set of curly braces and this is going to be the icon that we get here this icon so I'm going to copy this one put it here and the alternative is okay so now uh maybe we can see the results now so the icon is now Sun let's change this one to London and we get the weather and now the icon is cloud okay see the icon is dynamic now let's try another city for example with with search for there's something easy like a Paris so as you can see the Paris is now night and sunny all right now uh it's Moon actually I don't know okay so we have created this image tag Dynamic the next things we want to do is the temperature that is very similar things we need to do we can just copy this one better element.query and instead of this icon we just have to say temperature and when we get this element now we want to change the text inside instead of saying inner HTML we can just say text content because we want to change the content of this we just say text content and this is going to be equal to that temperature we make a dynamic we create a variable here which is going to be this temperature we're going to copy this one put it here so the temperature but the at the end we want to add this uh Centigrade so we can copy this Centigrade here so now we have the temperature centigrade so let's see what we get for example London is going to be cloudy so let's try again let's refresh the page London get the weather okay there's some problem here I think so we got this one weather data that query selector we didn't close this here okay now we try again London it's cloudy and six degree centigrade okay it's working let's continue and fill other parts which is this description first so for the description it's very similar let's copy this one and the query selector we want to Target is description so I'm going to copy the this description word here so you know that's uh the targeting here and then the this description temperature and Etc and we're gonna change its uh text content also dot text content is going to be equal to the description so now if we search again for London this is going to show us the description as well and the final things we want to do is to completely get and replace all these three so this is a little bit different because we have an array we want to substitute we need to map through this array and add it one by one the first procedure is similar we need to get the use the query selector and Target the details and then here we want to change its inner HTML with this detail but we want to one by one put this information inside a div as you can see from the HTML each of them is inside a div so we're gonna create we want to Loop through that details using the map method which is going to gives us each detail each element so we're gonna get each element and this is going to be equal to the create a backtick and this is going to be a div so let me copy here so first I just copy one of these days and put it here and then instead of this same feels like 23 we're gonna fill this one with this detail that we get this detail each detail we get so now we get each detail and we put it inside the inner HTML so let's try this we just say London get as you can see we got it but as you can see we have some problem here like a comma because there we have added that one we need to join them too we need to join them because this is just a separate and added by comma so after this after creating this mapping through that we can join these three by just the nothing in between there because they were joined by the comma we can just join them with nothing so now if you test again we just say Sydney and get the weather as you can see it works very well feels like 24 humanity is 67 5 and the three point but we don't see that actually okay for the humanity here at the top you just add the percentage here so you can get the percentage and for the wind we can just add the space here and then we just say meter per second okay now probably it works better so let's for example test the London again okay 73 percent and then also we get the meter per second so everything works well but when we come to the website we still see this a hard code coded data so we can simply get rid of them we just go to the HTML file everything inside this app a weather app we can just get rid of them but I want to keep it for your reference so I just want to comment this one using Ctrl forward slash so now when we come to the website it is completely empty but if you search for a city this is going to okay let's see oh no sorry we shouldn't actually comment all of them we comment the things inside for example this image we can just delete this words and actually we can comment all these things inside so I think this is gonna work so now we just say London and then get better so as you can see we get the result correctly but now there is a another thing if for example if you write down something that doesn't exist we don't get in any results but we don't know what happens here for example if we write down the name not correctly for example you just say London doesn't gives you the result but we don't know what happened so anytime an error happened we want to show them inside the this here as I mentioned here we are using try and cash we know that what an error happened so instead of just showing the previous result we can just uh replace them and we just give a description saying that for example an error happened please try again so in the arrow section we're going to Target that weather data Air element again we're gonna first Target all these things so I'm gonna copy all of them actually this is easier so I'm gonna copy all these things including icon temperature description and everything here so I'm gonna clean this one in case of error we don't want to show it an icon so we're gonna just say just make this one an empty a string and no temperature we just say empty string okay description no description and detail is going to be empty as well not empty for the detail we just want to say uh so detail is okay empty but for the description we're just gonna say and error happened you just say please try again later so now instead of just getting not for example if you search for London we have the result but if you for example make a mistake of a name you can see an error happen please try again later so that person who is using the website knows okay there's something wrong and they're gonna fix it okay so even for example we just click for the empty we don't get the result but if you just write down the correct one we get the results here so that was it for these projects I hope you enjoyed and learned many things we have work how to fetch data from an open API open Weather API and uh we have learned how to use try and catch to first get the data and also we handle the errors using the cache here and I hope you enjoyed and learned many things see you in the next project welcome back to another project in this project we are going to create an image search app as you can see from the final version of the project we have an input here with with a search button we can search for the images that we want for example I search for cat when I press enter this is going to show me the images related to cat as you can see they all of them they have description and they can if you click on here this is going to open the image inside the unsplash.com so you can download this image and see more data from that and also we have a show more button here at the bottom so when we click on this button this is going to fetch more image each time so up to thousand time you can click on this show more button and get more images so all the images are unique and you don't you never get a repetitive image I also the page is completely responsive you can see that we have two columns in the tablet size in the mobile size we have one column and they're on top of each other the input and the search button are on top of each other we have two and then we have three in the bigger size and so we're going to learn how to work with the unsplash API and we get the data based on the search that we do here so it can be anything for example you can search dog as well so and it's very fast website so as you can see the results are instant and we're gonna we're going to use a modern design using CSS in the next section we're going to start creating the HTML part of the project so see in the next section all right let's start our project as you can see I have put the final version here for our comparison and this compare our website with the final version and also I I'm gonna show you a preview of the website as well the first things we need to do is to create an HTML file to start with and we see we create the HTML tags and later in the following sections we're going to work on the CSS and JavaScript parts of the project so let's open the visual studio code I'm going to use Visual Studio code but you're free to use any text editor that you are familiar with we can close the gates the welcome Tab and inside the file menu we can open the folder and here we can create a new folder and start working on the project I would like to create a project in my desktop so I go to my desktop and create a new folder and I set the name of the folder to be the name of our project which is image search app image Dash Dash search Dash app and as you have created the folder you can click on the select folder this is going to open the folder inside the visual studio code as you can see here the folder is open it is completely empty but we can create our files now let's close the welcome tab again and here we click on the this icon to create a new file and we just call the file index Dot HTML maybe press enter it is completely empty but we can use an exclamation mark to create a boilerplate for our projects so you just need to write down an exclamation mark the image abbreviation is going to suggest you some boilerplate so now we have our boilerplate which includes the dock type which is HTML and HTML stands for htmus 5 actually in HTML5 we just write down HTML inside the dark type which shows the browser which version of HTML we are using the next tag is the HTML tag which covers both of the head and the body section the length attribute here sits the language of the page and as we're creating a page in English we just write down en here after that we have a hip tag which covers the metadata tag and also the title tag the first metadata tank sets the charted attribute and utf-8 is recommended by HTML5 which because it is almost covers all the syntaxes all the characters and symbols that you can see inside the browser so the users won't have any problems seeing our website because we are using utf-8 the next metadata tag tells the Internet Explorer browser to use the most recent rendering engine which is Microsoft age so this is just for the my users from the Internet Explorer the next one is just a viewport metadata tag which sets the width of this screen to devices with for example if we have a Mobile screen the width of the screen would be smaller then we are using the tablet screen so the users won't have any problem in any devices and then we have the initial zoom level of the browser which is said to be 100 percent finally we see the title of the website which is now document let's open the browser and we can see the title if you have installed the live server extension you can see this icon here at the bottom of the Visual Studio code you can simply click on that and this is going to open the live server X live server and which is going to create a server for us on Port 5000 and 500 and as you can see the title is document but we can simply change the document the title here for example I just say uh image search app so now if you check the browser the title is image search app so what we want to do here we want to create a website like this so I'm going to break down the website so what we have here is an H1 tag saying image search app at the top then we have a form which includes a an input and also a button so we need to add the H1 tag a form inside the form we have input and button then we have a div which is covering all the results and these result is going to be a bunch of images and each image at the bottom of the image we're going to have an anchor tag explaining the image and when we click on this anchor tag is going to open the image inside the unsplash website in a full size so you can just download and do kind of these things so we're gonna add so each image here includes the kind of text and also a link and finally after that we have a button here saying show more which we when we click we're gonna see more results okay this is going to fetch more data so now let's create this one and see it inside our website I'm going to bring the website the browser on the right side and our Visual Studio code on the left side so you can you can see the changes in real time let's close this part so we can have more space so inside the body section we're gonna start with the H1 tag so we're going to have an H1 tag saying the title of the website which is image search app so we can see it see it here and after the H1 tag we are going to have more things so let's make just disable this extension so after the H1 tank we're going to have a form and we don't need action for this form and inside the four we're going to have an input which is going to have the type of text and also this input is going to have an ID of search input because we need this ID to track the changes inside the JavaScript and I'll also I think you're gonna see it now let's refresh the page now you can see the input here for the placeholder we we're going to show a text when the input is empty so we're going to add a placeholder and this placeholder is going to say search for images dot dot dot like this after the input you're going to have a button and for the button I'm going to add an ID we can do it by pound sign we just say search dash button and this is going to say search okay looks fine and after the form we're going to see the search results so as I mentioned before we have a div here that is covering all the images it's covering all the images and each image has its own div as well which includes the image and the and the explanation of the image so we're going to have a diff here so let's create a div with a class of search results so we just write down dot dash results this is going to create a div for us with the search result this is just an empty div and after that inside this one we're going to have another div but this time instead of saying search results we want to say search results singular so we just says search or you can call it anything for example card or anything similar to this one as long as you understand what is that it's fine so this is a singular search result and inside this div we're going to have the image and the anchor tag so the image for now we're going to create just get some random image from unsplash.com but later we're going to just change the source of it based on the search result but for now we just want to make some images because we need to have something here to a style it using CSS in the next section so I'm going to go to unsplash .com for example we can get this image by just uh so you can search any image here in the search for example you can search for nature and this just bring you some images I just choose for example the first image you just right click and click on copy image address and just put the paste it inside the source and for alternative you just said image for now so let's see what have so we have this image and then this is huge but we're gonna install it using CSS Zone after the image we're going to have that anchor tag which is going to open it in in another page so we're gonna change the target to blank so the target is going to Black when they use the target blank this is going to open when you click on the link it is going to open it in another page so for example for this image if you go inside this image it has a URL you can copy the URL and paste it inside the anchor tag for example and you just add a text inside the anchor tag for example we just write down the explanation of this which is I think it's gonna available somewhere let me open this doesn't have any explanation so we will just write down something here for example we just say an image of a page and inside our website we see the anchor tag here at the bottom so let me I don't know you can see it or not here at the bottom you see an image of a beach when we click on it this is going to open this page in a different uh in a new tab so this is this is going to keep our website because we are using the target blank and we just set the relationship no opener no riff referrer so this is going to and this is for search engine optimization you just different types of Click you set so we have this image as I want to install it here using CSS so we're gonna have at least three Ms so when in different sizes we see different number of images as you can see for example in a mobile size you see one and then we just see two and then three so I'm gonna at least have three images the things we can do we just we can just copy this search result div for example two more times using alt shift and we're done one two so inside our website we're going to have one two three image but we can just change the images as well but it's not necessary because this is just a temporary hard-coded images in the JavaScript part we're going to show the images based on our image search okay so that was it for the oh it's sorry it's not completed yet we need to add this show more button too so after this we're going to go outside the div and we just go and create a button this one is going to have an ID of show more show more button so we can Target it easily using uh JavaScript or css and then we just say show more that's it so probably we can see it in our website but just here at the bottom so just bear with me in the next section we are going to use CSS and we're going to mix our websites like the one in the final version make it more beautiful and with the modern design so see in the next section for the HTML as for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to install the project using CSS the first thing we need to do is to create a CSS file inside our Visual Studio code let me increase the size and we just open the Explorer section using Contour shift e or you can just go to the view and click on Explorer and here we're going to create another file and just we just call it a style dot CSS and we need to add a link to this file within the HTML files in order to use it so inside the HTML file after the title tag we're going to add a link tag we just write down link and we click on the third Auto suggestion the one with this CSS and here we're going to create a relationship between the HTML file and the CSS style sheet and the destination of the file the href is installed CSS because both files are located at the same directory so now we can use the CSS in our file inside our website so the first things I want to add and install is the body section I just want to change the background color font family font size and light height so I'm gonna add we just write down body and we open a set of curly braces and we we're going to Target the body which is the whole website I just want to change the background color to be a light gray and the hashtag code the pound code for that one is F9 F9 F9 so let's see it inside the website so now the background color is different let's bring the website to the right side so we can see the changes in real time I'm going to use the start and arrow right and left to create this kind of Windows in inside the windows so to for those who want to know how do I bring the this one to the right side after the background color I want to change the font family I want to change the family this is the font family of the text inside the body to be Ariel so we're going to choose the Ariel and if the annual is not available we're gonna use these two fonts and the next one next things I want to do we want to set the line height to be 1.6 which is going to add some space between then I'll also we want to remove them default margin and we set it to b0 so we don't have any space between the elements and the browsers wall so after the body section we're going to style this H1 tag so inside the HTML we see that inside the body that we have now styled then we have an H1 tag saying image search app so here we can Target that one by just targeting the H1 tag we're going to open the set of curly braces and here we just for example I change the font size to be for example 36 pixels okay and after that we're going to bring it to this uh so we want to make it bold so I'm gonna I'll just want to change the font weight to be bold which is going to make it thick and let's bring it to the center using text align Center so bring it to the center like this it's very simple to do it and then we can add some margin at the top some space at the top so we bring it a little bit down using you just say 40 pixels so all right so that's enough space and we can add some space at the bottom as well we just say margin bottom of 60. pixels okay so that's enough for the H1 tag after that we're going to Target the form so the form actually doesn't have any ID or class you can add it but you can simply Target the form here we just say form because it's just a tag you just say form and we open a set of curly braces what I want to do is I want to change the display to flex so these items we can Center them easily when you make a display Flags everything comes next to each other so let's see let's we have so this is kind of look messy now but let's just change the justify content Center to bring everything to the center horizontally and align item Center to bring everything to the center vertically probably now we can see the button here so I feel we actually put the put the HTML tag in a wrong order so this div it should be outside the form not inside the form so this div with the class of search result which is gonna cut this one and put it outside the form and actually you know this button the show more button should be outside the form too so I made a mistake here sorry about that so after that after this there we're going to add the button so the form we have the form here after that they have a div with this class of search result after that we have the button with the idea of show more button so this way you can see the input and the button at the top and then you see the images and finally you see the button so you just fix this one and then you can get the same result for the is styling so let's continue styling now so after this adding the justify content and align items Center to bring everything to the center we're going to we want to add some margin at a border of 60 percent or 60 pixels so you're going to set up some space and after that we're going to Target this input and the search search input and the search button so in the file in the HTML this one has the so this one should be search input actually not search ID so I'm going to fix this one too so the first input has the idea of search input and the button has the idea of search button so we can Target them because they have an ID we can add the pound sign here and then we just say search input and then we're going to open a set of curly braces I want to set the width of this one to be 60 percent so it's going to be longer and we just set the maximum width to be 400 pixel this is going to limit it when we have a bigger screen like a 400 pixel and let's keep continue let's add some padding I want to add a padding 10 pixel up and bottom so we just say 10 pixels here for up and bottom and 20 pixels for left and right and this is me this is going to make it a little bigger let's remove the border so we want to have a modern design modern design doesn't have border usually so we just set the border to be none but instead we're going to have box shadow which is cooler so we're going to have a box shadow we're going to have zero pixels for the horizontal Shadow 0 pixel for vertical Shadow we have five pixels for blurreness and we can set the color to be rgba which is stands for red green blue and Alpha and for the red green and blue we're going to set it to be zero because this one gives us a black color for the answer value I'm gonna set it to be 0.2 which is 20 transparency so you can see the shadow like that now and then we're going to have a border radius border radius is going to create a rounded corner for us and we set it to be for example uh five pixels that's enough and finally we're going to have some we can set the font size to be 18 pixels so make it sorry 18 so make it a little bit bigger and for the color I want to have the this color 333 which is kind of uh light dark like black is it like a gray dark gray so we have the button as we have the input now ready looks okay so we have just sit some width Max width padding and border after that we're going to Target this search button so I'm gonna bring this one at the top and here we're gonna Target this search button as you can see inside the HTML this button has the ID of has an idea of search button so we can just Target it using a pound sign and now we can simply Target this button first I want to add some padding to it to be similar size of the input we have 10 pixel for top and bottom and 20 pixels for left and right we set the background color to be this color which is kind of green color for CA if 50 and then we're going to set the color of the text to be white we're going to remove the Border similar to we have done for the input we just set the border to be none we'll remove the Border but we can just change the font size similar to the input we make it 18 pixels this is going to make the button exactly the same size of the this input and then we're gonna have some box Shadow too the Box Shadows it should be similar we're going to create the same zero for X and Y axis 5 pixel for blurness and also the rgba which is going to be black with 20 percent transparency and finally we're going to have the cursor to be pointer when we hover over it we see a pointing hand we want to have some border radius as well so the Border radius we're gonna have five pixels here okay and also we're going to have some hover effect when we hover over it we want to change the background color to a different color so in order to do that we can just say search Dash button we target the hover by just adding a clone saying hover and this is going to we're going to change the background color for example we set it to be 3 [Music] 3 e 8 e 4 1. which is a darker uh green color but you see the changes very fast we can add a transition here we add a transition to the background color I guess copy this so I'll type it so we we add the transition to the background color for point point three seconds with ease in and out effect so which is going to create kind of this effect so this is for the button and the input now the what we want to do is to style this image the results section but before doing that I want to just decrease the size of the image first because this is kind of big so we cannot see the changes and so I want to Target the image first the image is inside this div with a class of search results so we can Target that one we just add the dot for the class targeting the class we just say search result and then we just Target all the images inside here and then we just set the width to be different so we just set the width to be 100 percent so this is going to force the image to be 100 but we set the height to be 200 pixels which is make the image looks like this but as you can see the image is kind of scratched in order to prevent this one this third distorting it's a as aspect ratio we can just set the object fit to be cover so this is going to prevent the image to be scratched but uh it's okay we're gonna make the three images in columns first so now the images looks fine but we're gonna Target the div that is covering the both of them the search result this here so this one at the top because it's a class we just say dot search result and we're going to Target that one so the things we want to do here we want to set the display to flex so bring everything next to each other like this but we're gonna have a different things for example in Mobile size we're going to have one tablet we want to have two and in The Bigs screen we want to have three so we're gonna change this width as you can see this is a hundred percent but in the mobile size is 100 in tablet it's 45 percent and it's in in the big size we're going to have 30 percent okay so we're gonna have a different thinks here but first we just want to just I want to check this phone is a class okay this is class two so we have targeted that when we change the display to flex we can change the flex wrap to be wrap so when we actually we have a smaller side they are going to go on top of each other like this So based on the size of the screen we're going to have different number of images inside using Flex wrap wrap and we can just use justify content and we can say a space between to add some space between them for example like this they're not gonna connect to each other and then we can just use a maximal width that we're gonna have a maximum width of 1200 pixels so in the big screen we're gonna limit it we don't we just limited to 2200 pixels they are not just connected to the wall and for bringing them to the center we can just set the margin to zero for the top and bottom and Auto for the left and right which is going to bring them exactly in the center like this so see the in the different size we have actually you can increase that thousand two hundred for more but I think that is a fine for now let's keep continue so we have Target the search result now we're gonna Target the search results singular here so each of them we're going to install each of them so I'm gonna copy this after this we're going to Target that I just put everything in order so you know which one comes first we just style this image because we want to make them smaller for easier styling for the M search result as you can see it's connected to the bottom one so I'm gonna add some merging at the bottom of 60 pixels so we have some space between them and then we set the width to be 30 percent this 30 percent is just for the biggest screen like this we made it 30 so they're gonna cover more spaces but in the others places like the tablet and mobile size we're gonna have the different width so diff width this width is 30 percent but in the different sizes I'm going to show you how to do it using media query so we're gonna see in a more beautiful design and then we're gonna have some border radius of 5 pixels so after this you cannot see the Border radius yet because we have to add some box Shadow here so we create a box shadow the Box Shadow is going to be zero zero for the X and Y axis 5 per 5 pixel for blurness and finally we have some rgba which is black with 20 transparency now you can see it and we just need to some of these borders sarborio radius is under the if I zoom it you can see it better you can see that this image is covering that border radius so we can just simply use overflow hidden to hide the extra image now you can see it like this so that was it for this one and also we want to set the height of this one as well to uh I think the height is fine for the result section yeah because we have added the height before for the image so we don't need to have the height here so the next things I want to add is this we have just created this result the image we have is styled already but when we hover over the image like the final version I want to sum scale effect as you can see when we hover over this container we see the image zoom in a little bit so I'm gonna Target that search result div it's hover effect and then I just wanna add the image uh these things I want to just use transform to change its side so we just say transform use this scale and then we can increase the size of the scale for example five percent like this so you can see the change but it's very it's very fast change we need to add some transition so we can just inside the image that we have here we can add some transition which is going to add some animation and the transition we want to add is going to be on top of the transform because we want to just apply the transition to this transform this is going to be 0.3 second and with the ease in and out effect so now you can see it's it's much better so after the image we're going to install this anchor tag here so we can Target that one we just said search result and then we apply all the anchor tags so first thing first I wanna just change its padding add some padding to it and that's it depending to be 10 pixels so we add some space for it I want to change the display to block and this is going to all of them goes inside that as you can see they came inside the same column and after that you can just change the color let me delete this the color is going to be dark gray which is 333 and let's remove this underline so we just make a text decoration let me bring this one up so text decoration is going to be none okay let's see it inside the big size it looks okay we can make it uppercase or something like that so you can actually work on it make it your own styling so for example for uh we can just add too many transaction things for I think you can add okay that's it I think that's fine let's move on and go to the next part so when we hover over this container I want this actually anchor tag has some background color it became a little bit gray so when we hover over the search result div like this so we add some hover so all the anchor attack inside is going to have a background color of we can just make a light gray the simplest way is to create an rgba for example 20 20 is a bit High we can make it uh one percent it's a bit lighter and also it's we can add some transition too to make it uh subtle and smooth so we just add a transition here on top of the background background color so I'm gonna copy this and we just 0.3 seconds and with the ease in and out effects okay this is very changes similar to this image so that's very nice you can see it in a bigger size okay looks okay but we just have to let me remove the zoom level so you can see it's like that so when we click on here it's going to open the image inside the unsplash so let's move on and install this button for the button if you remember for the button we have added an idea of show more button so I'm going to copy this ID the name of ID and we can Target that one using a pound sign show more button and now let's just change the background color to be I want to set it to be blue so #double zero eight c b a this color let's remove the Border by setting the border to be none and let's change its color to be white and after that you're going to add some padding in the XX in the top and bottom to be 10 pixels and 20 pixels for left and right so as you can see here we can bring it to the center using text align Center let's see so we have to change the display to inline block so now we can see so yeah for bring it to the center probably we don't need actually that one we can just use margin zero Auto let's see why it doesn't work so we have to say text along Center we bring it to the center let's remove this display block okay so text align Center we have set the margin to Center the button horizontally but it didn't work so let's wait to see here still it's on the left side let's see that we have here the button show more okay four bring it to the center we just need to add a display block which is going to make this one complete in a block or to takes all this space and when you use margin 0 Auto is going to add the same amount of margin to the left and right and text align Center actually bring this show more in the center of the button then we want to add some border radius which is going to be 5 pixels it's I it's going to add some Corner rounded corner and I think here we gonna add some merging at the top and butter so we can just set the margin here top and bottom 20 pixels so you're going to add some space for the pixel would be better okay I think 20 is okay that's fine and then we can set the cursor to be pointed so when we hover over it we see a pointing hand and finally we're going to have some hover effect so when we hover over it we want to see a different color so we just Target that button again show more button but we're gonna Target its hover effect which is going to change the background color to be Pawn sign 007 B5 77 B5 so double seven okay now this one when we hover over we see a different color and we can add a transition here to have a smooth change so we're gonna have a transition on background color with the zero point three second and is in and out effect so this is going to be similar to this okay so we have completed the website the ad added the show more and this one now we want to make it responsive we want to have three here but when we have a mobiles mobile size or tablet size we want to have two or one column so what we do here we added media query first we're gonna Target the tablet size so we just are going to add media query screen and we're gonna set another condition we just say if the maximum maximum width for the maximum width less than 700 1608 pixels to the following which is we're going to Target search result and we set the width to be instead of remember we set the width to be 30 percent here search result but for this size under this one we're gonna set it to be 45 percent which is going to have some some of the this size so for the tablet size we're going to have it like this but as you can see they just connected to the wall we can fix this one let me just add some uh merging in the right and left for the search results here that is covering all of the as you can see the margin was zero for the left and right for the rift and life is Auto but we can add some padding instead so we're gonna have some padding for example 10 pixels this is going to push it a little bit in size of it we're going to have some space here okay so in the tablet size we have two next to each other we can add this padding more look we can make it 20 even looks better so for the size less than that for the mobile size so let me copy this one using alt shift Arrow done and instead of 768 for this one we're going to Target sizes 480 and less so instead of 45 percent I'm gonna add this one to 100 percent so the size of the smaller like this size we're gonna have a hundred percent of this this screen so I'm gonna show you if you open the the div tools and go here in the mobile and choose for example iPhone 12 Pro you can see in the mobile size we have only one page we have one image okay so now we have one image the other things I want to do for this form I want it to input and search to be on top of each other so we're gonna Target that one too so we're gonna Target the form and we change the flex Direction Dash direction to instead of row to be column so they're going to be on top of each other like this but here they don't have any space so I'm gonna Target that search input I want to add some margin I want to add some margin bottom of 20 pixels so we have some space between there and also we can make this input to be 100 of the screen so it's you can just say wait to be 100 percent see so 100 is bit too much for example you can just set it to be 85 for example okay now this one looks okay we have this search we can make this button to be bigger as well if you want to work on it you can work yourself and looks fine for the tablet size let's mix this one responsive so for the mobile we have like this for the tablet size we have two next to each other for the mobile size we have only one and for the big size we have three next to each other so that was it for styling our project using CSS in the next section we're going to create this result dynamically like the one in this final version for example if you hear search for a search term for example I search for dog this is going to show me all the dog pictures and we can click here on show more and this is going to show more results here Kate said okay all right so in the next section we're working we're going to work on the functionality of the websites using JavaScript so see in the next section all right in the last section we have completed the CSS part of the project in this section we're going to work on the JavaScript part and add more functionality to the website we want to search something on the this input well and when we press enter or click on this search button we're going to fetch data from the an API which is called unsplash API and we're going to show the results here based on the search term so unsplash actually is a free website that gives you some images but in order to get the API in we need to sign in in their website it's free for demo applications which needs less than 50 requests per hour so it is free so we need to go to unsplash.com and search and get our API key so let's go to Google and search for unsplash in the search results we need to go to onsplash.com and we need to sign up to the application I have already created an account as you can see my picture here you just it's completely free you can just sign up and when you sign in you just click on this hamburger icon on the right side and here click on the developer forward slash API so as you can see they have a they show you how to use their API and how many requests they have their months and simple Integrations and Etc here you just need to go to your apps here in this menu and click on your apps and as you can see I have already created four apps demo apps are free to create and takes no time but for the production apps you need to submit your application they're gonna check and review it and you can get up to 5 000 requests per hour so here let's click on the new application to create a new application you need to just check everything here there are terms of service read all of them and then accept it terms and create your application I'm just gonna call it image search uh app description anything you can say you just say this app can search the images from unsplash API okay we just click on create application and as you can see the application is created and here you can just get your access key so we need to get this one the first one access key not the second one so you need to just copy this one and put it inside your JavaScript file but we haven't created our Javascript file yet so we need to go back to visual studio code and we open the Explorer section and we can create our Javascript file by clicking on this new file and we just can call it anything like app.js script.js or I always call it index dot Js and before using the JavaScript file we need to add a script tag inside the HTML file in order to be able to use it script script file script tag should be at the end of the body section because all the page should be loaded first and then we can have access to the elements inside the JavaScript and manipulate the data or replace some data that we need so here you just need to add your script tag so we just write down for example SC and we can click on the second author suggestion the one with the SRC SRC is this address of the Javascript file and as both files are located at the same directory you just need to write down index.js here now we can just start working on our Javascript file first thing first I want to create that a constant called ER access key and this is going to be equal to the the access key that we have copied we haven't copied it yet so we go back and we just copy this to clipboard and we paste it here so now we have our access key so the next things we need to do is to get the elements we need from the HTML file and bring it here so we can manipulate these elements or we can have access to that so what we need to have is we need this form because when it's the form is submitted we want to know and do some things here so we want to get the elements of the form the next things we need is this input we want to know what is inside this input and what keyboard is written inside the input the third things we need to know is this div because we want to change everything inside this div and add our the images that is coming from the API so we're going to have access to div this div as well and finally we want to have access to this button because we want to know when the person is clicking on this button so it's very simple to have these things for the form because the form doesn't have any ID or class we can have access to this form using a method called query selector so we can just create a constant here and we just call it form element and we just make this one equal to we need to tap the document because we want to Target all the document and check if there is anything called form there and we can use the method called query selector and the the selector name is form so I'm gonna put it inside a set of code and we just write form here after that you want to Target that input the input has the ID of search inputs so I'm going to copy this search input text and we just create a new constant and we call it search input element and this is going to be equal to document because we want to Target all the document and this time because we are targeting an ID we can use a method called get elements by ID and we just open a set of brackets and here we just paste the ID that we have copied the next things we need to get is the search result div the search result div actually it's here and it has a class of search result in order to get a term in order to get a something an element with the class we can use Query selector as well but ins instead we can tap to the class name so we just call this one search results search results element and this is going to be equal to document we want to Target the document and we just say a query selector and this is going to be equal to the ID but for ID sorry class we need to add a Dots here because it's a class we need to select it by adding a DOT at the beginning of the name so we got that element as well and the final element is the button saying show more so what was the name of it so this button has the idea of show more button so I'm going to copy this and here we just name this one show more as you can see we're using camel case naming convention and showmos button and this is going to be equal to document Dot because it's an ID we can use get element by ID and here we just write down the name of the ID which is show more button all right so we have all the elements now we can have we can just manipulate them or have access to their data the first things we need to do is to add an event listener to the form so when the form is submitted you want to trigger a function so this form we're going to add an add event listener method the methods we want to Target we wanna uh what events you want to listen we want to listen to events called submit so when the form is submitted we want to trigger a function let's create a function so we want to trigger a function and this function is going to first thing first we want to get the event so this is the things events happen after the form is submitted what we want to do is first we prevent the default behavior of the submission I just want to first show you that this event listener is working so let's first console log for example we just say say the form the term submitted I think submitted I think has two yeah 2T probably okay after let's go and check now if we open the console using F12 here and if we write down something and we press search let's refresh the page first as you can see we have the the console log but we cannot see it because we console log submitted but because this is refreshing the page this is not going to stay so before submission we're going to stop the default behavior of submission which is refreshing the page and we just we can do events that prevent default to prevent the sub refreshing the page now if we submit the form we can see the term submitted inside the browser inside the console but instead of submission we want to search for the image so we want to create a function called search image and we want to call this function or search images that makes more sense and let's make create a create this function here usually I create the functions after the bringing the elements so this is the best place we just put all the functions here so we're gonna call the functions search images okay so this is going to call this function and we need to create the function and the things the function does is just make a request to the API key and we get the data from the API but what we need here we need this term whatever we write down here inside this input we want to have access to that one too so based on this information inside the input we want to submit so we can get this this input data and I just want to call it input data and this is going to be equal to first we need to create it and make it an empty so we just create a because this is a variable and this is going to change we need instead of constant we need to create a lit lit is just a variable that can be have multiple change inside after for example we just write first is empty and then it gets the value here but constant the value of constant cannot be changed through through your app uh code so now we have the this one we just call it input data first we set it to be an empty string okay and here we just want to get the data from the search input element dot value so we want to get the value inside the this input so let's console log and see if we can get it so now we cancel log input data now let's refresh the page okay so we are getting an error which I don't think it's related to us because these images we are getting is not available all right so I've connected to the internet now let's refresh the page now we can see the we don't have any error this error actually is not related to the application I have just have some extension this makes these error is not related to us and here now for example I search something like nice when I press enter you see the term nicer logged inside the console let's search for something else for example dog we can see dog so now we have access to the input and now we can just request to the API and get the results related to that search term so the the URL that we use for the API is going to be dynamic because we want to have a different value for it and also we want to pass this axis key as well so we're going to create a constant and we call it URL and this is going to be dynamic so we need to add backticks instead of the code this is quotes this is a backtake so for using a dynamic URL you need to have back this which is located on top of the Tab Key inside the keyboard so here we just write down the URL which is https you need to add a clone to forward slash API Dot unsplash .com forward slash search forward slash photos and then we add a question mark because we want to have our first query the query we want to use is page because we want to get the first page first and then we when we click on show more we want to have the second page third page so this is going to be valuable as well so we're going to use dollar sign instead of curly braces to have the valuable page but page we haven't defined it yet so here we I'm gonna just create another variable called page which is going to be equal to 1 first and then we're going to increase it when we click on show more button so after page let's add our next parameter by adding an end sign so first you add question mark after that you just need to add amp ampersand sorry and sign or whatever we call it and then this is going to be query the next one is query and this is going to be equal to this is dynamic as well and whatever we have here this input data we put here this is our query it can be dog cat or anything you search and after that we have the access key which we're gonna call it client underline a ID so these are very important actually the same things you write down because if you write down something else it doesn't work this is the way you ask for the API and this is going to be equal to the access key that we have got from the us we copy it and put it here we got it from the unsplash API so three variables we have here the page the input data and access key so we got a request for the page one first and then by pressing on show more we're going to increase this page I'm going to show you how to do it and now we we got the URL so let me console log the URL you see that we are doing it correctly or not so URL let's check the browser now for example if you search for dog and click on search or press enter we get this URL which is api.unsplash.com forward slash search for slash photo page one Corey's dog and the client ID is this one is our access key and if you click on here this is going to gives us the data based on the search term dog and if you don't see it like this you need to install an extension on Chrome called Json formatter so install this one to see it like that and you you probably if you don't have that extension you see it like this okay this is going to parse it as you can see we get the total result which is 10 000 we have 10 000 pages and for the result we get the first 10. okay the first thing we get if each of them has an ID so let me close this each of them has an ID created ad with height color blur and we have the URL so if you check the first one for example if you click here you see the page the dog's picture you can have a full one regular a small size so this is going to be a smaller size so if you want to make an application you you for example you need only the thumbnail you just get the thumb so which is the small one so and also very small I think it's this one you can that is a different format all right so and also we have the links so when we click on the link you go to this uh page related to this an image all right so for the result you get 10 items as you can see here let me I cannot zoom it here but let me show that I cannot zoom it here so you can have the 10 items here so we need to show these 10 items in our inside our application but the things we get here is not we just get the risk we need to now fetch the data to get it now I just paste it inside the URL the the browser actually fetched the data for us and converts it to Json and show it for us what we do here we we want to just do this process in our application we need to uh get the response so we just write down response equal to we need to add a weight here if it is going to wait until the result comes from the API and then goes to the next line of the code so we're gonna use the method called Fetch and we want to switch this URL and as we are using a weight as you can see we are getting an error because when you are using a weight you need to change the function to asynchronous so what the event does when you reach the code reached to this line and until the result comes wait and doesn't go to the next line so this is going to prevent an error happening inside our application then we need to parse it and convert the data to a Json file so we need to create another constant and we call it data which is going to be equal to response Dot and we convert it to Json by a method from the JavaScript using Json so now we can simply console log this so we just log this data so now if you come back our application and search for for example dog we get the first as you can see we got the URL and we got back the promise actually oh sorry we need to add a weight here as well because this one takes time to do it if you don't add a weight here this is you don't get the results you just get the promise so now let's try again we just do dog and now it gives us the result we we are we want the result with the 10 items each of them is a different image with the URL color and everything else so we have the description here we have the height we have all the information we need to fill these cards okay so it was successful so now what we do here first we just check if the page the number of page is equal to one we want to set whatever inside this search results elements we want to make this one inside this whatever the HTML is we want to make it empty so we just write down for example the dog we're gonna make this one empty first we want to make it empty but based on the result we want to fill it again if the page is equal to one and why we want to set it to one because first someone searched we want to sit see the first result and then when we press on the show more button we want to see the next one and here too you wanna set the page to be one when we submit the four so when we submit the form we want to set the page to be one and then we wanna get the results so after this so as I mentioned we got the data about the 10 data there is is inside the something called result so we're gonna create another variable constant called results and this is going to be equal to data dot results which is an array of 10 results so if we now cancel log results we should just get these 10 items so I'm going to open the X console using F12 if you for example search for cat we're going to get the only the 10 results not the extra data okay and also we can see this short button we want we don't want to see this show more button first and when we come to the website but when we search and see the first result we want to see it so what we do we go to install.css and this button show more button here we style it first we set the display to none okay now we don't see the button but um in the where is it inside the index.js we create a statement and we just say if the page number is greater than greater than zero greater than one sorry the first result comes if the page is this greater than one we want to see the show more button so let's see so we just get we just say show more button dot a style we want to change its Style dot display you want to set this one to block instead so let's see so first we shouldn't see the by the show more button but when we actually get the result and show it we want to increase the number of this page but now it's a imagine that is just less okay so now we want to manipulate this div based on this result so let's delete this console log so let's do it now we want to create a div so we're going to create a div and we call it image wrapper and this is going to be equal to document dot we want to create an element using Create element method and the elements we want to create is a div okay this div is going to have the search result and this one should have two P's okay so we want to create this div the div with the class of result because we want to finally delete all these things and create it by JavaScript so we're going to create a div with a class of search results so first we have this Stave and we create this tip and then we're gonna add a class list and the class list is going to have the name search Dash result so when we create this one and add this class name we want to add it to our this this search results element okay so once we have created we want to create an image inside it so we're going to create another constant and we call it image and this is going to be equal to document Dot create element again and this element is going to be an image this image is has it has the SRC which is the address of the image SRC which is going to be that one that we get from the result but we here we get the 10 results we cannot set the image SRC to 10. we can we need to set it to each one so we need to Loop through these results using a method called map we just map through this result and we get each result singular and this is going to and then we do we need to do all these things inside here so we're gonna create a div here we gonna add the class list of search results to this div and then we're going to create an image the SRC is going to be result Dot urls dot we want to get the small image so we just write down a small if you remember via console log it has many as many like a spec ratios like a raw as big a small we we get this small one and then the image alternative text is going to be result Dot Alt underline description okay and so we created the image we created first a div search result and then we have created the image now we want to create this anchor tag so the anchor tag we want to call it for example we I just create a constant and just call it image link and this is going to be equal to document we want to create this one so we just use document dot create element and the elements we want to create is Anchor tag we just write a here so for this one the we're gonna have the href Target and text content so if we change its href first and this is going to be equal to results dots links as I'm shown you before the links and inside it we have HTML then we have image link Target as we want to open it in a new window so we we have to set the target to underline blank which is going to open it inside a new page and finally we have the image link Dot text content which is the content inside the anchor tag and which is going to be equal to results we can use this alt description but you can use something else as well so let me console log and check again let me console log the results so let's search something for example dog so each of them now we are constantly logging each result they have alt description we can use that is the one way but they have a description too black POG with the greatest one and this one is Toshi wearing a snake the description is actually more beautiful so the next one I'll see is this but actually this the alt description makes more sense than the description this one for example say happy women's day is not related to dog at all okay the next one yeah and the description is not related to the image so let's uh instead of that instead of the description we're going to have this image link Dot text content and we set it to be equal to this alternative description which is inside result dot alternative description okay now we have created three things the wrap image and image link now we want to just put them now we have just created them now we want to append them to the existing one so the image this div that we have created image wrapper we want to put the image and the image link inside that so we're going to say dot append child we want to First append the image and then we wanna let's copy this one and then we want to append the image link as well so we're gonna append these two it means add them inside this div this image and anchor lag like here we have image and anchor tag inside this div so we we have to append these two inside this div and then we're gonna append this image wrapper inside the upper one so we want to append this div inside the search results we have the search result we have imported the search results here and it's called search results element so we just say search results element and we want to append a child to it which is image wrapper this one now we should see the results for example if we search for dog as you can see all the images and the description is added uh very fast to here for example we just search for cat we see the cat okay so that was so simple so we have created this image the link we have created a div we put the image and the link inside the div and then we put this div all this div inside the another div called search results okay so that was for this one now after this one we want to add a page number so we want to increase the page number one so the page number first is one and then we want to increase it to two here so now if you search for dog the page number is going to be 2 after that so let's refresh the page for example cat but we don't see this button again so let me see oh it's we haven't saved this one yet so if you search for dog now now we should see the show more button but we haven't we cannot see it yet let's cancel log this page we check the number here so let's search again for dog and we check the console using F12 as you can see the page number is 2 actually now if you refresh the page and wait and then we just search for cat and this is two but we have an error the search images the block is not defined okay so that's a problem we need to put this block inside the we make it a string actually because this is not a variable now if we search again for cat which the page is two and then we can see the show more Button as well so that is working but we want to have the functionality to the add the functionality this show more button so here at the end when we have added the add events listener to the form we want to add the event listen at the events listener add event listener to the button so we just say show more button the show more button here that we have let's call this one show more button elements actually and then we just say show more button element dot add event listener and the event we want to listen to it is click actually not submit so when we click on this button we wanna trigger a function and this function is just going to call the search images function that we have created at the top and when we call this one we're gonna do actually call this function again and we're gonna actually if because the page is now two We're Not Gonna clean this one so we're gonna add the data to it and here actually we need to change the show more button to show more button elements in order to to it to work okay so let's test this one now we just search for dog we get the dog the page is two here inside the console when we clicked on show more we get more results and the page number is three click more we get more results with the page numbers four and so on you can just for I think thousands times we can click on show more so we can just limit it as well here we just say page more than one and less than thousand we can just if you want you can fix this one too but I'm I'm not sure someone gonna click on this thousand times okay so yeah let's a little bit clean this one let's delete some console log that we have let's slit this console log URL let's delete this console log page and inside the HTML we're gonna delete everything inside the search result or we just for your reference I'm gonna just skip them and just make them a comment using Contour forward slash now the page is completely empty when we come to first time and when we search something for example cat dog or nice we get the results and we have the show more you can see here right so that was it for creating our image search app based on the unsplash API I hope you enjoyed and learned many things so seal in the next project welcome back to another project in this project we are going to create a basic calculator as you can see from the final version of the project we have a modern designed calculator with the numbers operators the equal sign and the C clear button so we can just write down our arithmetic equations an expression we just write down for example 45 Plus 42 and we get the results we can just multiply them to another number so and also we can clear this screen so this is very simple calculator we're going to use some a building functions of JavaScript called a well to evaluate the expression inside the input we're going to learn how to add an events listener to these buttons using for Loop and we're going to learn how to design this one with a modern a styling using CSS as you can see we have some hovering effect and also we have some Shadow effect inside and outside some elements in the next section we're going to start with the HTML part of the project so see in the next section all right let's start our project I have put the final version here for our comparison so we can just compare our design with our with the one that is already completed so as you can see we can just use this design and the first things we want to do is to create the HTML part of the project so we just need to have these numbers these letters and this equals sign and also we want to create a div here that is covering all of them and find and then we are we also need to add some input here so what we want to do here first we want to create an HTML file so first we go and open our Visual Studio code I would like to use Visual Studio code as my text editor but you can create anything you want you can create it in any text editorial that you are familiar with so first thing first you just click on file and go to Open folder so we're gonna create a new folder for our projects I want to create it inside my desktop so let's create a new folder and we're gonna call the name of the projects and set the and name of the folder to be basic calculator so I'm going to write down basic calculator here basic Dash calculator and after creating the folder we're going to click on the select folder to select this folder and this is going to open the visual studio code again but the X in the Explorer section we see that the basic calculated folder is open and we can just create our files here so all the files goes inside this folder let's close the welcome Tab and here we just create a new file by clicking on this file new file or you can do it by just right click and click on new file we just need to call our HTML file if the extension should be HTML but the name can be anything but we just call it indexed it HTML so this file is now empty but we can use an exclamation mark to have a boilerplate so when you have an exclamation marker the emit abbreviation is going to suggest you this boilerplate which gives you the first template for your website including a title so just click on the first author suggestion and this is going to have our boilerplate which includes the diet stock type doctypes tells the browser which version of HTML we are using we write down here HTML if you're using HTML5 you need to just write down HTML here after that we have the HTML tag which includes the head tag and the body tag the length attribute here defines the language of the page and tells the browser which language the page is written in our cases English and after that we have the hit tag which sets the metadata tags and the title tag the first metadata Tag sets the charged attribute which is utf-8 in our case YouTube 8 is recommended by HTML5 which because it nearly contains all the characters and symbols and the users of our website won't have any problem seeing their website and reading our contents the main the next metadata data tag is for the compatibility and especially is for Internet Explorer users so it tells the Internet Explorer to use the recent rendering engine which is Edge so Microsoft Edge is not supporting Internet Explorer anymore so the Internet Internet Explorer is going to use the mark the Microsoft Edge engine instead then we have the viewport metadata tag which sets the width of the screen to devices with so what that means is uh when you have a user which is using for example a mobile phone the width of the browser is going to be smaller than the another user is using the desktop or laptop screen which is a bigger screen so this is going to gonna automatically adjust the width of the browser then we have the initial scale which is initial zoom level of the browser and here it is said to be 100 percent by we can just set it to be 1 which is equal to 100 percent and then we have the title tag which is going to set the title of the browser so now let's open the our website inside the browser so we can see that this title where I'm going to use an extension called live server which is going to create a server for us so if you have this extension you're gonna see this go live here at the bottom so we can click on this button and this is going to open the website inside a server called 5000 500 with the port 5500 and the page is open index.html and the title is document here at the top you can see it is document but we can change the title here to the name of our project which is the basic calculator and when we change this one this Pro this extension is going to automatically change the everything inside the website which is now you can see this is basic calculator so what we want to do here like the final version we're going to have a div here input and and some buttons okay so let me show you here so we we're going to have one container here which is a which is a div with a class of for example calculator then we have a input then we have another div with the class of buttons let me show you with the different color so this step is the with the class of buttons and we're gonna have these buttons inside this calculator each of them is a button and they have a different class for example the number has the class of Number the operator has a class of operator then we have equals and finally we have the clear so let's do this one let's bring the website to the right side so we can see the changes in real time then let's bring the visual studio code on the left side using the window and the left arrow button let's close the Explorer section and here inside the body section we're going to create our HTML tags the first one is I mentioned it's a div with the class of calculator so we just write down Dot calculator so when you write down DOT calculator this is going to suggest you the a div with the class of calculator if you press enter you can accept this suggestion now we have that div and then inside the div we're going to have an input so we're going to have an input the type of the input is text and we're going to have an ID for that bond which is going to be resolved because we want to later Target this one using JavaScript so we need this ID and also we can what I want to do here I want to make this one read only so when this one is read only what it does the read-only should be outside is it so this is a result and outside we have read only read-only makes this one just a display you cannot type anything inside this if you don't have read-only you can type inside the inputs so we want to prevent typing inside the input we just write down read only here because we want to have just right down here using the keyboards okay so after that we're going to have a div inside this we're going to have a div with the class of buttons which all the buttons is going to be inside this div so the first button is going to have the class of clear and which is going to have the letter c and this one should be a button not the div so I'm going to create a button for it so as you can see we have the button now next things we need is a button these are actually the order of buttons is important to have the same structure so we have C we have forward slash for the division then we have for the multiplication we have star uh we should just do it like this it goes this way okay even after six we see the equal and then one two three zero and the decimal point so the order should be like that so in order to achieve the same result so this button is going to have a class of operator and this is going to be forward slash for division we're going to have two more operators so I'm going to copy this one using alt shift Arrow done the second one is the multiplication sign the star sign and then we have minus okay after that we're going to have the 7 8 and 9 which would be a button with a class of the number and just the number seven and then we can copy this one two more times using alt shift Arrow done and then this is going to be eight and this is going to be 9. okay after that we have the plus sign which is a operator as well so we're just gonna add a button with a class of operator and this is going to be the equal sign then we have four five uh sorry this one is plus sign because after nine we have Plus then we have three more button numbers so we're going to have a button with a class of number again so number this is going to be four copy let's copy this one and let's just say 5 and this is six after that we have the equal sign which is the a button with a class of operator again so for the equal we don't say operator we say equals okay and then this is going to be equal and finally we have numbers one two three and zero as you can see here one two three and zero so we just will have to create another button with a class of number and this is going to be one let's copy this one three more times so one two three and finally zero and after that we're going to have another button but this time with the class of decimal and this is going to be a DOT a period okay so we have just created our HTML file with our buttons divs and Etc so but the style is completely male Justice HTML pure HTML we're going to create this amazing and beautiful modern design using CSS in the next section so in the next section we're going to work on the a styling part of the project using CSS so see in the next section all right in the last section we have completed the HTML part of the project we have we just created these buttons the numbers the equals the clear sign and in this section we're going to create and install our project using as CSS if you look at the final version you can see that we have kind of modern design with some Shadow effect for the input but inside for the buttons we have also some hover effect some transition and also we have some Shadow effect as well so we're going to create and achieve this one using CSS so first things we need to do is to create a CSS file so we again we need to go to visual studio code and we can just open the Explorer's checks section using counter shift e and here we just create a new file and we just name the file a style dot CSS and before using the CSS file we need to add a link to the CSS file inside the HTML file here at the top so after the title we're going to have a link tag so the link tag is going to be just we just write link and then we click on this third author suggestion the one with the CSS this is going to automatically create the link tag for us for this file a stylus CSS and here href is just the address of the this file because both files are inside a same directory which is the basic calculator so for the address we just need to have a solid CSS and this is just a relationship between the HTML and the style sheet here so now we can start styling our project using CSS the things I want to do first is just the first I wanna some basic styling add to everything here you just add a star sign what I want to do is to change the Box sizing to border box what this one does is by sitting box sitting this border box is going to ensure that the padding and the borders that borders that we have we add to the elements will be included in the total size if you don't have this one we're going to have problem styling our inputs so later I'm going to show you if you don't have that one but what happens to our styling and also we want to remove the just the basic margin of the page and we set it to be zero in this case we're going to remove the margin around the elements so let's bring this one to the right side so you can see the changes simultaneously and here we can just close the Explorer section so we have more space after this basic styling we're going to start with the calculator div which which we have here the div that is covering everything we're going to style that one we just can Target that one but just writings on dots calculator because this is a class we're going we can simply Target this class using dot calculator inside the CSS so what I want to do is first I want to change the background color to be a light gray color which is with this code F2 F2 F2 as you can see the color is a bit different now then we're going to have some padding so this is going to push everything inside we just sit set the padding to be 20 pixels and then we're going to have some margin first we want to set the maximum width to be 400 pixels which is going to as you can see limit the size to be 400 pixel but we want to Center this we want to bring this one to the center here so what we do here it's very simple we just change the margin the top and bottom to zero but we add Auto to left and right which is going to make it equal margin to the left and right for us so which which we are going to which can be centered easily here so after the merging and bring this container to the center let's add some border to it so what border we want to add is going to be a solid border which is just the line and then it's going to be one pixels and the color for that one is going to be CCC which is a darker gray than the background color and we want to add some box Shadow as well the Box what bell what box Shadow does is we want to just have zero for the x-axis Shadow 2 pixels for the y-axis so you see the y-axis we have Shadow 5 pixel for blurriness of The Shadow and then we want to have some RGB a because we don't want to have a dark color we want to have some rgba is a combination of colors which is which is red green and blue Alpha so we're going to set these values and this is going to gives us a color and also is a transparency level the opacity level so zero zero zero zero for the black color and 0.3 for opacity so rgpa nuts RPG rgpa this is correct so red green blue Alpha so we have now a beautiful Shadow effect and also we want to have some border radius we want to make the corners to be rounded so which is going to be more beautiful so we're gonna have some border radius and this is going to be for example five pixels so you should see the Border radius here if I zoom it and that's it for the calculator so we just wanna the another thing so I want to add is the margin top so we're going to add some space at the top but this is going to be 30 or 40 pixels that would be enough so that's it for the calculator container now we want to install this inputs here we can Target the input by its ID because it has the idea of result we can Target that one here by using a pawn sign and we just say result and just open a set of curly braces and here what I want to do is to set the width to be 100 percent like this and this adds some padding of 10 pixels so it's gonna have more space inside and let's change the font size to be 24 pixels it's it's going to make the size of the text to be bigger but we don't see anything because we haven't applied the JavaScript which is going to get all these buttons and show it here and we want to remove the Border we set the border to be none but instead of the Border we want to have some shadow effects so it's going to be like it has a shadow but the shadow is going to be inside not outside so we add some box Shadow similar to here actually we can use the same color so I'm going to copy this one so we get the zero for the x-axis two week pixels for the y-axis 5 pixel for blurness and this color but this as you can see the shadow is outside but I want the shadow to be inside so you just add here inset as you can see now the shadow went inside that's going to just show like depth for our styling and also we can add some border radius of 5 pixels which is going to have some uh Corner border for the design so that's it for the input section and I want to show you if you don't have that box sizing what happens so if you remove the Box sizing as you can see the input is going to be the padding is going to be applied extra for the so this box sizing was very important for styling something like the input so let's bring back the Box sizing for the Box so and let's continue a styling now the buttons so first thing first we wanna Target this div which is a covering all the buttons they did with the class of buttons so here we just say dot buttons we open a set of curly braces and here I want to use the display grid so we make this one great what the display grid does so it's going to make a great for us first it's just a great with the each button print to a one row completely but we're gonna design it in a different way we want to change the display sorry the grid template columns we want to repeat it four times and this is going to be 1 if r so one if R what is the meaning of one FR I'm going to explain you here so this one this total grid template columns repeat for one error is a scissors property that sits the size of the each column in a grid container so in this case in our case the repeat for one FR value creates a grid with four equal size columns as you can see we have four equal columns and what if R means here if our units it stands for fractional unit and is used to divide the available space so whatever available space we have here it is going to be for us so it's going to is calculate the available space and it's going to create four columns based on this available space for us so with this one we are going to have a great container this great con this grade is going to divide into four equal size columns which is what we want for our calculator layout so all right so now we want to have some a space between the buttons so we're going to have a grid Gap let me find it so we just say grid Dash Gap which is going to be equal to 10 pixels you're going to have some 10 pixel between the gaps okay and also we want to add some margin at the top for 20 pixels okay so it looks better than before but we're gonna install each button separately first we're gonna install the button all of all the buttons and then we're gonna have some special buttons like the clear or and Etc so we're gonna have a different color for for example the equal but just first install each of them so we gotta Target this button so the button is the tag is button so we can simply Target that one without any dots or Pawn sign we just write down button so this is going to Target all the buttons and let's add some padding to the button of 10 pixels and let's change the font size to be 24 pixels to make them bigger let's remove the Border so this is the things we wanted to remove the Border but we want to add some box shadow so this is a trick we do to make a beautiful design to remove the Border but instead we add box shadow the same system to sorry Z for the horizontal onset uh offset two pixels for vertical offset five pixels for blurness radius and then we have rgba of zero zero zero for black color and thirty percent transparency which is going to give us this design let's add some border radius of 5 pixels so it we're going to be consistent in all design let's set the cursor to be pointer so when we hover over the button we see a pointing hand and let's make this one with it uh I wanna just what I want to do is to create a hover effect in the final version when we hover over it we see a different color so how we achieve this one it's just we add a button and we just say hover and we can just change the background color to be discolor DDD which is a darker gray color but this is going to change the color very fast so in order to prevent that one we're gonna choose the transition on the background color so back around Dash color and then the transition the duration is going to be 3.3 seconds and with the ease effect so this is going to change it a little bit more smooth so that's it for creating and styling all the buttons now we want to set a individually Target each button the first things I want to apply is the clear button the clear button has the class of clear so we can Target that one using Dot clear this is going to open a set of curly braces we just change the background color to be if if 41 36 which is kind of red color for the color of the text we're gonna use the white color which is ffs okay this is similar to the final version I see okay the equal sign is bigger so we're gonna fix it soon next we want to apply the and install the numbers so the numbers had the class of numbers so we just write down number here as you can see inside the index.html that all the numbers as the class of numbers so we can Target all of them using DOT number so background color for them is different they are going to be if if 41 36 if sorry if if sorry this one going to be white if if so that was for the clear and so we're gonna have a white color for the buttons so for actually the decimal is similar to that one so so for decimal actually maybe we don't need to have a different class uh we can just we can just say dot name number and Dot decimal so we can just Target both of them and on also we want to have we want to change the color of the text to be 333 which is kind of dark gray and then we want to apply the operators we just say dot operator because more all of the operators like here minus division they have the class of operator so we can simply install them we want to change the background color to be fifth so let me check 0074 D nine which is a blue color and the color of the text is white which is FFF so finally we wanna install the equal sign the equal was equals so in the equal sign has the class of equals we target that one the background color is going to be green which is uh zero one FF 70 the grid row because we want to have this one to to be extended in three rows so what we do here we just write down grid Dash row and then we just say a span so just this expand this one for three rows this is going to expand it so three rows as you can see it's very simple to work with the display grid for design something like a calculator then we have the color which is white color FSF so that's it that's it for the styling of the our calculator and this is going to be actually responsive as well we have mobile size and our big size we have the same design as you can see it has its nice in different zoom level we can actually have this this side so that was it for creating and styling our projects using CSS in the next section we're going to add the functionality to the project using JavaScript you're going to have some add event listener to this each of these buttons so which we're gonna get all this information and we're gonna trigger a function which is going to calculate the result and show it here at the top and also we're going to add some clearing effect here using this C button so this is going to be very simple but we're going to use a new method from JavaScript called this is a for calculating we're going to use a function called a valve so I don't think most of the calculator I see on the internet they just calculated manual manually themselves but there is a new JavaScript method for calculating operations which I'm gonna show you in the next section so see you in the next section for the JavaScript part of the project thank you all right in the last section we have completed the CSS section of our project we have installed a project like this in this section we're going to add more functionality to our project using JavaScript we're going to add the functionality of calculating the numbers multiplication division and Etc so the first things we need to do is to create a JavaScript file inside our project so when you come back to visual studio code and simply we open the explore section using Ctrl shift e and here on the left side in the Explorer section which is in our projects folder basic calculator we're going to create another file and we're going to call it for example script.js or index.js or the most common naming convention is index.js or script edges or some people they call it app.js it's totally up to you so I'm going to call it index.js and like this the things we did for this installer CSS we need to add a link to this file within the HTML code so we need to come back to HTML file this time instead of adding it to the head section we need to edit at the end of the body section because we need all these elements to be loaded first inside the browser and then we can have access to them using JavaScript so we need to add the JavaScript at the end of the browser at the end of the body section so we're gonna call it we just write down SC and we click on the second order suggestion the one with the SRC this is a script tag which is going to connect us to the and any scripts like a JavaScript file and SRC here is the destination of the file and for us because both files are located at the same directory the SRC would be index.js which is the name of the file and that is enough for the destination of the file now we can use the JavaScript in our projects the first things we need to do is to bring the elements inside the JavaScript so we can have access to them so add some functionality there for example these buttons we want to add the air and add event listener to each of them using JavaScript so we need to have access to this div with the class of buttons so we can add actually individually and add event listener to all of them but there is a simpler way for example we can make it for Loop inside this div and we can simply just Target each of them inside here so what we do here is uh we can select all the elements with the with the tag of button for example here inside the index.js we just create a constant and we call it buttons blue plural button just we just say buttons elements we want to get all of them so we can Target the document because we want to check all the document all the browser and then we can use the query selector all because we want to select everything with the tag of button okay so now if we for example console.log buttons elements and copy this and put it here and if we just open the calls console using F12 and then if you refresh the page we can see that we got all the buttons here which is 17 node list so we get all the 17 buttons as you can see this is just we have 10 numbers Plus four operators 14. and 15 is 16. now it's 11 numbers so 70 because we need to include decimal as well so we have all the buttons now we can have access to them so each of them as you can see some of them they have a class of clear some of them they have a class of operator so what we do here we add an event listener to each of them so let's delete this console log and instead I'm going to create a for Loop the fourth loop we're gonna create a variable called I which is going to start from 0 and then this I is going to continue until the end of the buttons which is 17 but we can just say buttons elements dots length so we get the length of this button LMS which is 17. so this one should be less than this so buttons element that is correct and we want to add this one actually should be a semicolon and then you get another semicolon and then we just say increase the I each time only one so we just say I plus plus so I it starts from 0 goes one two three until the length of these buttons which is 17 so it's it starts from 0 goes to 16 so totally we have 17 iteration so let's start from zero goes until 16 and we have totally 17 iteration and in each iteration we want to add to each button and events listener so we just Target this buttons elements we want to Target each of them so we just say we added sit off if we add a bracket and then we just add I we got the I element which can be 0 1 2 until 16. so and then we're gonna add an event listener using add events listener method the event listener we want to add is Click so each each time a person click we want to trigger a function so we're going to create a function here so each time someone click on a button we want to trigger a function and then we want to sit to get the value of the button for example what we want to do here is for example if we console log button this button element I Dot text content the text which is inside it for example in index.html the text inside the clear button is c for this one is a a division and then multiplication and that's seven eight so now we're gonna console log that so let's open the console again we go to console here so now each time I click on a button for example I click on zero we get zero because we are getting the text content of that button so 2 3 we can get the equal sign plus minus all of them are working even the C we get so we have the value of them we have the value of them so instead of console logging I'm gonna set this one equal to and just call it button value equal to this so we have the button value and then we're gonna add some condition we just say if the button value is equal for example to C just call a function called clear for example results so each time someone press and C call this function but we have to create this function so we're going to create a function and the function's name is going to be clear result for now we just just create the function so we don't get an error but later we're going to add the functionality inside the function so let's continue and complete this if a statement the other condition I want to add we just say else if else if so another condition is if the buttons value is equal to equal sides equal if this one happens call another function which is calculate calculate results let's create the function here again so we don't get an error so let's create the function and we call it calculate result and just keep continue for the if a statement the next one is otherwise so it can be a number okay otherwise can be 0 1 2 or decimal in this case just add this result at this value this buttons value to the to the display so we want to show it inside the display here and also we want to append it there so we're going to call it this function append value and we're going to pass this button value and let's create this function as well here so we're going to create another function called append value okay so we have these three conditions if the value is C we're gonna clear the result if it is equal we're going to calculate the result otherwise we want to append the value so so first we start with the append value so the append value we're gonna get the value the button value here we're gonna get it as an input of the function because we are passing it here we get it as an input and this time we need to have access to these inputs so we can write it inside the input so if we look at the index.html the input is just a an input tag with an ID of results we can Target this one using this ID so at the top we're gonna Target and get that element and bring bring it here so I'm going to call this one input field element and this is going to be equal to document we want to Target all the browser and then we can use the method called git element by ID and the idea of this input was result so the the ID is is result so we can simply Target that on just writing down result so now we have access to this one inside the append value we want to a Target that result uh what's what we call it result field sorry input field element and then we're gonna set the value of this button value of this input equal to this button value we get but we don't want to make it equal to this one we want to add the new value to the previous one so what we do here we add a plus equal size so for example this value is 2 and the next value is 3 this is going to be 2 3. so I'm going to show you now inside our application if you just write down one we see one here so 1 is going to stay here and then when we press 2 2 is going to be added to the one so one two so otherwise if you just write down equal this is going to be 4 if you write down 5 it is going to be replaced by the four six three so in order to keep the previous one we get we add the plus sign so this is kind of similar to we just say equal this value plus this so this is a shortcut for this one this is going to work this similar way I said one five two so I'm gonna just copy this one and then I show you the buffed way so plus equal and then I'm gonna just comment this one for your reference so you know that this is similar to this okay so now we have the value the input field value what we want to do is to when we click on the plus sign we wanna evaluate we want to calculate the results so inside the calculate result function we're going to use we want to instead we want to just say that input field element dot value we want to replace this one with something called evaluate evaluate is a function is a built-in function of JavaScript that evaluates a string as if it's like a JavaScript code for example if we evaluate for example two multiply by 5 and if we come back here and we press equal we get 10. so we get the result of this uh uh like a we just get the result of this string whatever it is for example this one plus one we get 11 okay so what we want to calculate is this input field value whatever is inside the input we want to evaluate it and show it inside this input field value so for example we just write 45 Plus for example 5 if we click on now equal we get 50 instead all right so and then for example now we have the 50 multiply to 5 for example we get 250. so this equal sign is going to evaluate whatever inside is this so evaluate is actually can be used to evaluate a arithmetic expression entered by the user and return the result so I give you an example two so now you understand the evaluate some people they want to create the calculator I saw online that they calculate each of them separately for example they add a condition they said if the express if this operator is multiplication you multiply it just just a nonsense too many if they add but they can simply use a well to evaluate the whatever inside this so this was the trick I show you and the final things is left is this C button when we click on the C button we want to clear this input so inside the clear results we're going to just set this input field element dot value we want to set this one to an empty string so we want to set it to an empty string so for example if we now have something we press C we completely remove it so now we calculate something we see the result and then we can just simply clear that so that was a very simple calculator this is very simple you can add parenthesis for example if you have parenthesis you you can have more complex things and you can add it for example deleting the last letter so that is the last number that is very simple too for example we write down 45 we can delete only five but we added another button we add a function and instead of adding that button value we want to remove the last button value so you can just do that one as your practice and you can share it with me as well so that was it for our projects creating a simple and basic calculator I hope you enjoyed and learned many things so if you have learned the function eval we have learned how to add an event listener to a bunch of buttons using for Loop and how to clear calculate and append a value so see you in the next section for another project welcome back to another project in this project we are going to create a stopwatch as you can see from the final version of the project we have a timer at the top and three buttons a start a stop and reset so when we click on start the type is going to start we're going to show the milliseconds seconds minutes and hours and when we press on a stop this is going to stop the timer using a method in JavaScript called set interval and we clear that method using clear interval then we have another button called reset which is going to set the timer to zero so we can start from zero and also if we press stop and we press start again it's going to continue the time from the previous elapsed type so we're going to firstly install these projects using CSS with this design and hovering effect as you can see from the buttons and then we're going to use JavaScript to get the time of the browser set the elapsed time and also we're going to manipulate this content and replace it with the time that we are calculating and also we're going to have these three functionality of a start a stop and reset using JavaScript in the next section we're going to start with the HTML parts of the project so see in the next section all right let's start our project so I have put the final version here for our comparison as you can see we have this time here and three buttons and we're going to design the HTML part of this in this section the first thing we need to do is to create an HTML file so I'm going to go to my desktop and then I'm going to open my visual studio code this is the text editor I'm going to use but you're free to use any text editor that you are familiar with after closing the welcome tab you can just go to the file and click on open folder and here we can click create a new folder for our project and we can start creating the files inside inside this folder I would like to create the folder in my desktop so I go to my desktop here and here we can create a new folder and we can call the folder the name of our project which is stopwatch so now we have the folder we can click on the select folder to select this folder and this is going to be the default folder of the visual studio go and here you can see inside the Explorer section that the folder a stopwatch is being opened and we can start creating our files here inside this folder so let's close a welcome tab again and here we can click on this icon to create a new file or we can right click and click on new file and here we can just name the file index dot HTML and because we can press enter now the file is created it is completely empty but we can use an exclamation mark to get an HTML boilerplate which is suggesting by emit abbreviation as you can see here in the preview of the boilerplate so if we can press tab or enter or even click on this first Auto suggestion to get this boilerplate so let me explain this one real quick if you this is your first project so we have a doctype here which is which tells the browser which version of HTML we are using as we are using the latest version the HTML file we can just leave HTML here and after that we have an HTML tag which is covering both of the head and the body section the link attribute inside the opening tag of the HTML sets the language of the page and tells the browser the which language is the page is written in and in our case the language is English so we just write down here en then we have the head tag which includes the metadata tag and the title tag the first metadata tag defines the charted attributes and tells the browser to use utf-8 utf-8 is recommended by HTML5 because it nearly contains all the characters and symbols and the person who is using our website won't have any problem seeing the content inside our website and can see all the characters and symbols the the next one is the compatibility metadata tag which tells the Internet Explorer browser to use the most recent rendering engine which is Microsoft Edge so this is just for the users who are still using Internet Explorer then we have the viewport metadata data tag which sets the width of the screen to devices with so if you're using for example the mobile screen your width of the screen would be a smaller than when you're using for example the tablet so this is always check your width device width and set it to be the width of the browser so this in this way you you're gonna pass the for example the SEO of the Google the your website would be mobile friendly as well of course you have to work more on the mobile friendly section but this is an essential part of the making a mobile friendly website and then we have the initial zoom level of the browser which is 100 percent by default and we just set it to be one per 100 of the zoom level the next tag is the title tag which is the title of the page let's check it inside the browser I have an extension called live server so if you you haven't installed it you just go to your ex extension part using Contour shift X you can search for the live server extension and install this extension if you have this one you're gonna have this go live at the bottom of your page so when you click on it this is going to open your where website inside the browser your default browser my default browser is Chrome and the title as you can see it's document and here we go we can just change the document title and we set it to the name of our project which is stop watch so now if you check the browser we can see that the title is changed to a stopwatch now we can just add other things so as you can see from the final version we have two parts in our website the first one is going to be a div with the numbers inside it and then we have another div which includes three a simple buttons one two three and this is they're going to be next to each other okay and then we bring the visual studio code on the left side so we put the browser on the right side and this one and the left side is let's close the Explorer section so we have more space here and let's start creating these two sections inside our website and we should put it inside the body section as I mentioned first we have a div with the number inside it so I'm going to add a div with the ID of we can just say it for example timer as you can see I just write down a pound sign with timer and the image abbreviation suggested me a div with the idea of timer so now if I press on Tab I get the div with the IDF timer this is a shortcut for creating a div so later on we can use this ID to Target this div and manipulate it using JavaScript so we're gonna have a dynamic just time for example so inside this div I'm gonna have this just the time now this is hard coded as you can see I have a zoom level of 3000 so you can see it better but actually this is this much small but later we're going to a style it using CSS so I'm going to keep it open uh zoomed so you can see it better after that we're going to have another div with it with the ID of buttons so I just add a hashtag or Pawn signed with the name buttons and you can see the suggestion here and when we press enter or tab you get this div with the ID of buttons and here we're going to have three buttons the first button is going to be a start button so I'm gonna add an ID of a start so I just write down button hashtag start so we get a button with the idea of start and the text inside this one is going to be a start as you can see the button is created so the next button is for the stop one so this is going to have the idea of a stop and the text inside it would be stopped so the next one is a button with the ID of reset so we're gonna create the reset button let's add this okay so we have now three buttons so let me remove the zoom level so you can see we have three buttons it starts stop so let's make this stop uppercase two so we have start stop and reset but the siling is just a pure HTML in the next section we're going to work on the CSS and make it like this with the pink color and with the hover effect and you can see that we have it disabled when we have disabled we have different styling okay so in the next section we're going to work on the CSS part and in the following section we're going to work on the JavaScript part of the project so see you in the next section for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to work on the CSS part I'm going to install this project like the one in the final version we're going to bring them exactly in the center and the pink color some Shadow facts and also this kind of hovering effect for the buttons so the first things we need to do is to create a CSS file inside our project I'm going to open ex the Explorer section using Contour shift e and here we can click on this icon to create a new file and we're gonna call it a style dot CSS and before using this file we need to add a file we need to add a link to this HTML file to this file so we can just can have a connection between the HTML file and the CSS file the way we do that is to add a link tag after the title we just write down here link and we click on the third Auto suggestion the one with the CSS so this is going to create a relationship between the HTML file and the CSS file and we just write down in the HF which is which is the address of the file a solid CSS because both files are located at the same directory I'm going to close this one so now we can use the style the CSS so let's start with the body section so let's install the body section so inside the HTML we have the body tank which is covering everything and then we have the this div and the other one so the body section let's change first the background color so the background color I'm gonna use a color with the code F 0 f 0 f 0 which is kind of a dark gray color and like light gray color and then let's change the font of the website by just setting the font family to be Poppins and then if this font is not available we can just use send serve so first is they're going to use this font if this one is not available for this person's browser they're gonna use sensors which is the most common one and most of the browsers and understand this full fonts and then as I want to bring them in the center all of them I'm going to change the display to flex so they're gonna be next to each other first but we can change the flex Direction to column so we put them on top of each other now we can use justify content to bring them to the center firstly horizontally because you should see it justify content Center and for for this one as we wanted to be working because we have a full extraction column we need to set the height of the or mean height of the screen to be 100 of the viewport height so whatever the height of the screen is they're going to be yeah calculated with any zoom level you can see they're going to be in the center so we have now a big zoom level so now they're in the center and you can see this actually uh they call it a scroll you can see the score if you want to remove this scroll you can just remove the extra content by just saying overflow hidden so this is going to remove this scroll then for bringing it to the center that was vertically this for the horizontally we can just set the Align items Center so this is going to bring them in the center like this okay now we have completed the body section the next things we want to style is the this timer so for the timer if you remember we have added the ID of timer so we can Target this day by just saying hashtag timer if we target that ID and now what I want to do is to change the font size let's remove the zoom level so we can see now this is the actual size of the website now I want to change the font size to be seven times of the normal size so 7 Rem so the normal size of the screen the normal pixels is 16 pixels but if you use this 7 Rem in seven times of the 16 pixels if the default a font level is 16. because this is a default one but you can change the size of the font in the setting of the browser but whatever the setting is we're gonna multiply it to seven to show it so this is the for the big size for the mobile size I want to style it later using media query for making a responsive so this is going to be smaller later but for now we just leave it like that and then the next things I want to change is the font weight I want to set the font weight to be uh the thickness of the font to be 700 so make it thicker let's add some text shadow text Shadow is going to add a shadow to this one so file this one works is we just added two pixels Shadow for the x-axis you cannot see it because the both the Shadow and the color of the text is black so let's actually change the color of the text first so you can see the changes in a better way I want to make the color to be this color F9 26 72 this pink color now we can shoot we should see the text Shadow better so we have the text Shadow 2 pixels in the x-axis two pixels in the y-axis and the color of the Shadow I want it to be f8 A5 C2 so we can't see it yet and we have to fix this one this one should be two pixels not two x as you can see now we have a shadow pink shadow so if I zoom more you see it better we have a shadow but this color is less pinky than the other one this is a lighter and this is darker so it's the beautiful shadow Okay so and then what I want to do I want to add a width for this one I'm gonna tell you later why I'm adding a width if I first show you in the final version when we start you can see that this number is changing if we don't add the width this is going to move too much because the length of the uh length is always changing because the each number has different width for example one is a smaller than two so we're gonna set a width for this one to always keep this one at the same position the width I want to add is 600 pixels and then we want to bring everything to the center using text align Center and also we want to add some margin of 40 pixels for top and bottom and Auto for the left and right to always keep everything to the center so as you can see here so you don't see it completely in the center I tell you the reason for that but let's keep continue and install these buttons first so for the buttons we're going to the first Target this div with the ID of buttons so we're gonna bring them we want to change the display to flex or the buttons and then we bring them to the center using justify content Center they're already in the center but just in case if the size of the screen is bigger they're gonna be when the buttons are bigger Sometimes they come to the left side so we just add the justify content Center here for this reason and then we're going to Target this buttons button here all of that so we're gonna Target the button tab we just say button so this is going to Target all the buttons let's change the background color to be this color I'm going to show you F9 f926 72 the same color of this and then we can change the color of the text to be White because it takes White let's remove the Border by just saying border and none and let's CH increase the size by font size 2 REM this time so make them bigger and let's uh make the font to be font weights to be bold so they're gonna have the a bold text I had thicker ticks and then we can add some padding also 1.5 REM for the top and bottom and four REM for the left and right so as you can see the buttons are bigger now so let's add some margin so they they have some space between them this is going to be one REM as you can see now you cannot see it in the mobile size properly because we're going to style it for the mobile size separately and then we want to add some border radius so we want to make the Corners Corners to be rounded so we I want to add some 30 pixels border so we're gonna make it rounded 30 pixels and then we want to set the cursor to be pointer so when we hover over it we see a pointing hand like this and finally we're going to have some box shadow box Shadow we want to add some Shadow effect to this one so two pixels for the x-axis two pixels for the y-axis and 10 pixels for blurreness and the color is going to be dark so we're going to use rgba which is a red green blue and Alpha for the red I'm going to set 0 0 0 for red green and blue and for the alpha which is the transparency is a point uh 3 which is 30 transparency you can see the shadow now and then when we hover over the button so for the button when we hover over it will mean when we have a mouse over it we want to have different background color so the background color is going to be if 44 58 3 so it's a lighter pink and then what we want to do we want to change the box shadow it this is going to be two pixels two pixels and 10 pixels the same values but the rgba is going to be different instead of 30 percent I'm gonna make 50 percent so this is going to be darker when we hover over it but this is going to happen very fast so we can just add a transition to make it like a a smoother so we just add a trend position of for example but we we had a transaction transition to to the everything and then we set it to be 0.2 second so this is going to have a transition for the color and the shadow effect okay that was it for the button section now we what we want to do is to when we have a disabled button we want to have a different call in the final version as you can see if it's stop this so when we the button is disabled it has a different color we can do that by just saying button we add a bracket and then we just say disabled disabled and then we just change the opacity to be 50 percent and then we set the cursor to be default instead of the pointer so now we don't have any disabled if I added disabled to one of them for example the a stop one we just say disabled now as you can see the mouse is different and then has a opacity of 50 percent okay so let's remove this disabled for now so after this one we're going to make it responsive we're going to add a media query and then for the media query we just and we just say if the size if the max width is equal to 800 pixels or more or less for example the max width is this one we're going to have a different styling for the timer for example we want the font size to be 4 REM instead of 7 Rem so this is going to be smaller as you can see and then the width is going to be 350 pixels instead and then for the button for the all the button I want to change the font size to be 1.5 and then padding also one Ren at 2ria as you can see the buttons got smaller in the mobile size we can see that so I'm going to show you so when we pass the 800 pixels now this is just less than 800 after 800 they get bigger like this so we have a trigger point of 800 pixels here after that less than 800 pixels we have this extra stylings okay this is you the way you make a responsive website okay so that was it for the CSS part of the project in the next section we're going to add the functionality of a start a stop and reset buttons and we're going to work on the functionality and make it like a final version so it has like a start stop reset so in the next section we're going to work on the JavaScript part of the project so see you in the next section all right in the last section we have completed the CSS part of the project in this section we're going to work on the functionalities by adding the Javascript file first things we need to do is to create a Javascript file so I'm going to open the a Explorer section using Ctrl shift e and here we can just click on this icon to create a new file and I'm gonna call this we can call it for example app.js index.js and so I'm just gonna call it index.js and we need to add a link to this file inside the HTML file as well so we go to the index.html and just add the end of the body section we add a script tag we just choose the second author suggestion the one with the S or C and the the destination would be index.js because both files are located at the same directory so the address would be index.js and the reason we put this script tag at the end of the body section because we need the browser to actually load all the elements first and then call the JavaScript otherwise we don't have access to these buttons or this timer to manipulate so we always have to add the in its script tag at the end or if you add it at the top you need to proterize it to to be loaded at the end okay so now we just have the script tag at the end now we can use the JavaScript file so let's close this section and we go to index.js the first things we need to do is to get the reference to this timer and the buttons so we need to bring them here so as you as you have remember now we have this timer with the idea of time there and then we have the buttons the start start and reset with these IDs so we can bring them here I can create a constant for example I call it timer element and this is going to be equal to the document dot get element by ID timer as you can see we I'm getting this suggestion behalf I have a GitHub co-pilot but I I recommend you don't use it for if you're a beginner because uh it's it's a it's good to learn the basics first and then use this kind of extra AI assistant so I'm gonna stop it for suggestion we have used the get element by ID method which is going to Target the element with the ID and the ID it was timer so we have added timer here after that we're going to bring the other elements let's create another constant this one is going to be the start button element and this is going to be equal to documents dot get element by ID and the ID for this one is just a stop here you can see this is a stop stop sorry this is a start so we need to add the start here for the other ones I'm just gonna copy this one two more times and then I just change the name it starts here to for example stop uh you can use Ctrl D to select both of the start and then you just say stop okay you can do this for this one as well you just mark it use Ctrl D to both both of them and then we just say for example reset okay now we have access to all these four items now we can manipulate them the first things I want to do I'll add some events listener to this button so for example if you click on this start we're going to trigger a function called a start timer and then a stop timer reset timer so we're going to have to Target that once we just say start button element we add an event listener we just say add event listener the event we want to add is Click because when we click on it we want to trigger a function and the function we want to call is going to be a start timer but we need to create this function here so I'm going to create a in a function I call it a start timer and this is going to be just for now we just console log start so if we open the console using F12 inside the browser we just say F12 and let me bring this one at the bottom so if you go to console here if we press on the start we see the start here okay so we're gonna we are calling this function which is console logging is start and let's do the same things for the stop and reset timer so I'm going to copy this one using alt shift Arrow done two times for the start please lose control D to use the start and then make this one and stop the next one is going to be reset okay and then we're going to create two more uh functions the this one is going to be a stop and this one is going to be reset so now if I click on start I see start stop oh I have to change this one too so this one is going to be a stop and this one is going to be reset okay start reset so yeah we are calling the correct functioner now we can just create a variable for having a reference and track the time the time that is passed and also the time intervals so we if you look at the final version when we press on the start the time starts so we have a start tile but a start time is different when we click now on the start the start time is as four second and 94 milliseconds but when it's reset the start time is zero so we have to define the elapsed time as well the time that is passed so we can track both of them so we we're going to create two variables at the top using lid and I just call the variable for example a start time and this is going to be 0 by default then we have another one called elapsed Style which is going to be zero as well and then we have the another variable called time intervals which is going to calculate these times every for example 10 seconds using a function called set intervals so I'm going to call this one timer interval so this one we don't need to have any initial value so when we press on the start we want to firstly Define the start type so we just say start time a star type should be calculated based on the time of your browser so we can get using date dot now and as I mentioned before sometimes it's zero because first is zero but if I want to start again you should be subtracted from the elapsed time so this is a lab step so its start time should be date now minus elapsed type so let's time can be zero if this one is completely from beginning or someone comes in the website but if the timer is already started the lapse time should be calculated and be tracked so now we have the start time now we should use we've defined a time interval and this is going to be equal to set interval which is a function built-in function from JavaScript which is going to call a function every for example 10 milliseconds so this is one millisecond 10 and if you want one second this is this one because we want to show the milliseconds the best way is 10 milliseconds but you can use one millisecond but it's not necessary to actually increase the computation time of your browser and makes your website slow so 10 is better so this is going to call this function every 10 seconds so now so we call this function and we're going to update the elapsed type every 10 milliseconds so elapsed time is going to be equal to date dot now which we can get from the browser minus the time of the start so whatever the time start is we do subtract from the date now and this is going to be elapsed time now that we calculated this one we need to update the this value here this zero so we can simply update that using a method called text content so we just said timer element which is we have defined here we got it from the uh our HTML so we are updating this part so we're going to just say text content we want to change its content and we set it to be for now we just say elapsed time I want to show you what happens so let's close the console so now if we let me decrease the size if you press start then it should let's refresh the page as you can see now it's updating every 10 milliseconds and showing the elapsed time so this elapsed style is based on milliseconds now but we want to show the hours minutes seconds and milliseconds not only the and then we have to refresh the page to stop it okay so we are getting the elapsed time now we are showing it inside the timer element but now instead of just elapsed time we need to format this time so we need to format this so I'm going to create another function called format type so and then I'm gonna call this function a rapid around this elapsed time and this one is going to get this elapsed time as the input and then we want to just update this one and format it to hours minutes and Etc so we're going to create another variable here so we just create a cons ENT and we call it ours oh first we get the milliseconds that's fine so we just say Millie we start from milliseconds so milliseconds because that's the easiest one this is going to be equal to whatever is the elapsed time is we we keep the remainder of this one the by 1000 so we divided this elapsed sign by 1000 and then we just keep the remainder okay and this one should be divided by 10. and this is going to be milliseconds and then we need to return first we need to just make the rounded by just because this is the mathematical equation so it's going to be not rounded so we can just say math.floor to make it rounded and then we can just return milliseconds for now let's see what we get here so when we start we see the milliseconds uh we didn't floor it completely this is still this is only millisecond but still we have one digit here so I'm gonna fix this one because we have to math floor all of them not only the first part so I'm gonna wrap everything here so now if we start we just see the milliseconds now okay but milliseconds as you can see it starts from one and then we don't see the zero at the beginning so we want it to be like the final version here we should we want to see that uh this uh time zero when we have like a zero one zero two so this is going to be more clean so we can just add a condition we just say if the millisecond is more than nine if this condition satisfied just the pretense milliseconds otherwise just add in one zero at the beginning of the milliseconds like this so now we should see a zero at the beginning when it's small okay we have just got the millisecond let's continue get the hours minutes and seconds as well so let's do the seconds this is going to be similar the second is going to be uh let me copy this one so we just change this one we have to floor it as well and then this is going to be elapsed time the remainder of the elapsed eye of the trial divided by thousand multiply to 60. we have to add 60 to get the seconds and then we divide it by thousand not ten so this is going to gives us the seconds and then we need to return it here as well so I'm gonna wrap the written uh let's bring this one down so this is a milliseconds and then we just add some Dots here between the millisecond and second and then at the top let's close this one we add the condition too we just say if the seconds exist if the seconds is not zero then if the seconds is greater than 9 then just return the seconds otherwise that is at the zero at the beginning of the second okay but if the seconds is zero this one is just if this one isn't not zero add a zero at the beginning if it's zero just return zero double zero seconds is different so let's check it now we we are just saying I think both milliseconds let's see so the seconds uh okay this one actually this parenthesis shouldn't be here let's check so it should be divided by thousand multiplied to sixty and then divided by thousand let's remove this prefixes here Let's test okay I miss the parenthesis here I think this now it's working so this is second now milliseconds working too okay now let's do the minutes so the minutes is going to be similar we just need to add 6C to the second so I'm just copying seconds I change it to minutes minutes that and you here and then this is going to be divided by a thousand multiplied to 60 and then we need to add another 60 and another 60 here the Thousand multiply to 60. and then we need to show it at the top so this is going to be similar too so I'm going to copy this one put it at the top instead of dot I want to have a clone here just change this second two minutes okay Let's test this one too so we see here we have to wait 60 seconds this one until it goes so until this won't pass I'm gonna create the hours as well this is similar so I'm gonna copy this and this is going to be ours so the hours is just the time we don't need any remainder we just said time elapsed time divided by 1000 multiplied to 60 multiplied to 60. and we just need to remove this parenthesis we don't need that parenthesis okay that's no yes okay that's fine that is ours and let's add it at the top so this is going to be I'm going to just choose it using Ctrl d I just change it to hours okay so milliseconds has Double D so I'm going to fix this okay so now it's working so that's that I think that's that's working because I know the logic I've tested it before and the other things we want to do so let me explain it again so we have calculated the milliseconds seconds minutes and hours based on the elapsed time and then we have just formatted them and add zero to at the beginning if they are less than nine if there are zero we just add double zero and now the when we created this in a start time what we do when we press is start I want to disable this start button so here at the end of this function at start time I'm gonna Target the start button and then I wanna disable it so we just say dot disable is going to be equal to true and then what I want to do I want to make the stop one false so if the stop one is already disabled I want to enable it so now when we press on the start we cannot press on the start again it's disabled so let's do complete the stop function as well so in the stop function what we do is to clear the interval so interval is working here time interval is working every 10 seconds we need to stop that there is a function in in JavaScript called clear interval so we need to call this function and this is going to just clear the timer internal variable that we have created at the top so now if we Press Start and then we press the stop this is going to stop the timer by clearing the time interval and what we want to do we want to enable the start button here we want to just say a start button dot disabled I just can't I just can copy these two but we have to do the opposite so we have to enable the start button so I'm gonna make the disable false and I want to disable this stop button by just setting the disable to true so now we have this start button is disabled when we press on stop this is going to disable this stop button and enable this stuff now we can start again as you can see it's working so let's Now work on the reset button for the reset button we have to do the an extra things we have to clear the interval let's copy this so we need to clear the entire wall we need to make the start button enabled and the other things we want to do is to set the elapsed time to zero and also we want to so if this one we press reset uh let's see stop reset timer it makes it this zero if you start it starts from zero as you can see it's reseted and it starts from zero but we want this one to be shown zero as well so we have to just change the timer element that text content to be zero so we just say zero zero zero so when we start we can stop it we can press on the reset to completely reset set the elapsed time to zero and show the zero at the timer as well okay let's review what we have done so for the start time we have calculated start time based on the date in the current time of the browser using this dot now and then we have declared a set interval which is going to call this function here every 10 milliseconds which is going to update the elapsed time and also the content inside this element then we set the button to true the disable it and also we enable the stop button we have format the time based on the elapsed time and also we have a stop the timer using this function we clear the interval we set the button disable it we enable the start button and disable the stop button and finally we have reset the timer by just calling the clear interval and also set the elapsed time to zero and the text content to this string all right so that was it for our project I hope you enjoyed and learned many things see you in the next project welcome back to another project in this project we're going to create a rock paper scissors game as you can see from the final version of the project we have three choices to choose rock paper and scissor and if we click for example on the Rock symbol we're going to see the result which is in this case is a tie and as you can see the scores are still the same for us it's zero and the computer is zero if you choose another choice it's still we get there is tie now we lost the game and as you can see the rock beats the scissor because the computer Choice was rock and our choice was scissor so we lost the game and the computer game and and a score of one so if you keep continue playing this this time V1 and then rock beats scissors so because the choice of us was rock and the choice of the computer was scissor so we're going to firstly create the projects using HTML and then we're going to style it using CSS with this modern design and then we're going to use JavaScript to randomly create some choices for computer and then compare it with the choice of us by tracking the our choice and the computer and compare them we can just print some text here and also we're going to track the numbers and the scores of the user and the computer here at the bottom so in the next section we're going to start with the HTML parts of the project so see you in the next section welcome back to the project in this section we're going to create the HTML part of the project as you can see I have put the final version here for our comparison as you can see we have a title we have three kind of emojis for rock paper and scissors and also we have the scores so we need to create an H1 tag for the title we have a paragraph here and also we have a div with three buttons and finally we have the scores at a bottom so first things we need to do is to create an HTML file so I'm going to create the project in my desktop so I'm going to go to my desktop and I'm going to create a new folder I'm gonna call the folder the name of the project which is Rock paper and scissors we just say rock paper and scissors game and when we create the folder we can just right click on it and click on open with code which is which is going to open it with Visual Studio code so I'm I'm gonna use Visual Studio code that is my favorite uh text editor but your of course free to use any text editor that you are familiar with then we have now Visual Studio code with the rock paper and scissors folder open on it inside the Explorer section and here now we can create a new file and we can call this file index dot HTML so we have created the file now it's completely empty but we can use an exclamation mark to create an HTML boilerplate so if you write down exclamation mark and just click on the first Auto suggestion do you get and HTML boilerplate which is which includes a dark type the HTML tag and the body head and body sections let me explain this one real quick if you're this is your first project here doctype tells the browser which version of the HTML we are working on as we are using HTML5 we just need to have HTML here to tell the browser that we are using HTML5 then we have the HTML tag which is covering both of the head and the body section the length attribute here defines the language of the page and in our case the language is said to be English by just setting e in and we have the hit tag which includes the metadata tags and also the title tag the first metadata tag defines the Char set attribute and ucf8 is recommended by a steel or 5 because it nearly contains all the characters and symbols for example the users come to website I want to see these symbols these fonts they won't have any problem sees these characters and symbols because the YouTube is is most common one then we have the compatibility metadata tag for the Internet Explorer browsers which tells the Internet Explorer browser to use the most recent rendering engine which is Microsoft Edge after that we have the viewport meta data tag which sets the width of the screen width of the browser to width of the devices screen for example if you have a Mobile screen watching the website you're gonna have a smaller screen than the person is watching a tablet or desktop computer here we have the initial skill which is initial zoom level of the browser which is 100 in our case by setting the default value to 1. finally we have the title which is document and we can see the title inside the browser if you open the browser I'm going to use the annex can extension called live server so if you have installed this otherwise you just go to your extension using Ctrl shift X and just search for live server and here you can just find this extension I have already installed you can install this one which is going to create a server local server server for you and if you have installed this one you can use this button here go live or you can right click and use open with live server which is going to open your website inside the browser and it's this is going to refresh this website each time you save the browser if you have already set the auto save for your a website for your views Visual Studio code we have now the document as our title inside the website let's change this title to the name of our project which is a rock paper scissors game now if you look at our website you can see that the title is changed to rock paper scissors game so let's bring the website on the right side by using where the start key in Windows and write Arrow Arrow right key and we can bring the visual studio code on the left side so we can see the changes in real time after that we can just add our H1 tag with the name of our project so you can see it inside the website Rock paper scissor okay so now we have the title as you can see after the title we're gonna have a paragraph saying choose your move then we have we're going to have three buttons so I'm gonna put the three buttons here just uh as you can see we have three buttons rock paper and scissors so as I want to bring them next to each other not on top of each other that's why I put them inside a div and then we got set the div with a class of buttons and then here I'm gonna press enter budget for creating this there with the class of buttons you just need to write down dots buttons and press enter and here we can just have our first button and then as you can see I'm getting a suggestion from GitHub co-pilot get up coupon is not free if you want to use GitHub copilot you need to pay 10 per month but if you are a student you can have this extension for free which is going to suggest you some codes based on your uh based on your previous codes and the codes online so you can just search GitHub co-pilot so I have already installed it I think yes not this a GitHub kill pilot it is a AI pair programmer which is going which is using GPT for suggesting a real time in your internet in your Visual Studio code but if you don't want to use it it's totally up to you you can just type whatever you want here so I'm gonna get the suggestion here three buttons rock paper and scissors the each button has an ID the first one is rock paper and scissors but instead of just the ticks Rock I want to use the something called HTML entities HTML entities it's like some symbols you can use inside your website but they have some codes so you have to write down for example for rock you have to write down M and Pawn sign X 1 if 44A as you can see we can just get the let me Zoom you can see the rock symbol emoji for the paper we have this Emoji which is and a pound it can be lowercase it doesn't matter one if five nine zero and then you you need to add a semicolon at the end too okay for the scissors and I use and pound sign X 2 7 0 C and this okay so now we have the three emojis by just writing down this HTML entities if you don't know which symbol you use you just search online HTML entities for example for uh Rock hand symbol of papers hand symbol or something like that you can find plenty of website that is showing you this simples you can copy paste okay after creating these buttons we're going to have a paragraph here showing the results I'm just gonna create a paragraph with the class written ID of result which is just we can just say for now hard-coded you one and then after that you're gonna have another paragraph with the idea of this core is course inside this one you're going to have you're going to say your your score okay you can just say your score and then this ID I want to set it to be for example your player score or the user score after that we're going to have the computer score and then we have this expand with the idea of computer score so we're going to use this ID to Target this span using JavaScript and then we're going to dynamically change this score from zero for example to one two three but for now we just say hard coded these values because we want to use CSS in the next section to style this uh HTML tags and text so as you can see we just have a paragraph with the idea of scores and then we're going to have this paragraph your score zero and computer score zero and then we have three buttons and the H1 tag and a paragraph saying choose your move so that was it for the HTML part of the project in the next section we're going to work on the CSS part of the project and install it like this modern design using CSS so see you in the next section foreign in the last section we have completed the HTML part of the project in this section we're going to work on the CSS part and install the project like the one in the final version with the background color and also we're going to have some background colors for the Emojis we're going to bring everything to the center and Etc so the first things we need to do is to create an H2 a we need to create a CSS file we need to open the Explorer section and we just create a new file and we call it a style dot CSS and we need to add a link for this file inside the HTML file we can just go let's close this one you need to add it at the inside the hit tag you just need to add a link tag you just write down link and click on the third Auto suggestion the one with the CSS and here the href would be installed at CSS because both files are located at the same directory the destination would be solid CSS and this is the relationship between the HTML file and this Excel sheet it's cell.css so now we can use the slc.css for our project the first of the the first part of the project we want to Target is the body section so inside the HTML we have a body section that is covering all the project so I'm gonna Target that body tag we're just writing body and then we want to do some you know for example I want to change the background color the color I want to use is kind of a light gray which has the number f 1 f 1 F1 you can see this color after that we're going to have a fonts family I want to change the font of the text using font family the font I want to use is Ariel let's add the semicolon here we forgot the semicolon so I'm going to use the this font is a Arial and if the Arial is not or aerial is not available the sense surf is going to be used inside the project I want to remove the the false margin and padding for the project as well so this is going to connect this one to the wall as you can see we have removed the default margin so we have finished with the body section now we're gonna work on the H1 tag this tag so we're going to Target this H1 tag so what I want to do is actually set the font size to be you can just choose 2 REM 2 REM means two times of the default value of the REM is the default value of the font size which is a 16 pixels so we get the double of that let me resume remove the zoom level so you can see the changes in a real way and then I want to bring this one to the center using text align Center and let's add some padding at the top of 100 pixels so it's going to push it a little bit down after the H1 tag we're going to Target this paragraph the first paragraph choose your move and also I want to Target the other paragraphs too so I'm going to just choose if P tag and let's change the font size we could we get this suggestion that is okay we we're gonna set this font side to 1.2 REM we want to bring it to the center using text align Center and after that I'm gonna have some margin at the bottom of for example just a 0.5 REM which is 8 pixels which which is going to add some space between them so everything looks okay but I'm gonna just style this button first so first we target this div with the class of buttons we're gonna bring the items in the center so we're going to use a button we're gonna Target the div with the class of buttons so we just write down the dot buttons because this is a class we added dots at the beginning so the display is going to be Flex justify content Center we don't need this margin bottom here so justify content Center is going to bring everything to the center as you can see horizontally display Flex is going to just in order to use justify content Center you need to change the display to flex after that we're going to Target the button each person so because we want to Target the button and then we can just say button we target the div button sorry the tag button I want to remove the border so I set the border to be none let's change the color sorry we don't need to change the color we don't we just want to change the font size to be 3 REM so we make them bigger let's add some margin uh top and bottom zero left and right to be 0.5 REM which is going to add some space between them and then we'll have some padding of a 0.5 REM you cannot see the padding but when we add the background color you can see the padding clearly so now and then when I hover over them I want to see the cursor to be pointer so I'm going to change the cursor to be pointer so when we hover over them we see a pointing hand so let's so let's add some job background so you can see the changes more for now I just I want to add some background color for example this color now I want to just change the Border radius to be 5 pixels which is going to make it rounded in the corner and then when we hover over these buttons so we can just Target this hover with the pseudo class of sorry we just Target these buttons with a pseudo class of hover so when we hover over this button I want to change the opacity to be for example 80 or 70 percent so when we hover over them we see a they are like a lighter color so it's kind of hovering effect and then this hovering effect is super fast I want to add some transition so it looks like a smoother so I'm going to add a transition to all 0.3 seconds with ease in and ease on effect so when we just you see the transition here when we hover over there so now let's we can just remove the background color I want to choose a background different background color for each of that for example I want to Target the Rock one and let's see what's we just want to change the background color it's gonna red it is fine and then we will Target the paper this one looks okay too but I want to use the blue color which is 21 96 F 3 and then we're going to have the scissors with the green color that's the size so as you can see we are getting suggestion from GitHub co-pilot before I have decided to not teach with Dakota co-pilot but as the AI Advance every day I think it's essential to know how to use AI to code faster so you can just use code GitHub copilot or any other AI assistant to code faster but I think it's essential to understand each code for example what this one does and why we just put use for example pound site for example we had this ID of the rock we have used this Pawn sign or the hashtag for the targeting The Rock so these things you need to understand but for coding faster you can use this assistance and finally we're going to just install this player a user score and a computer score I want to make the user score color to be for example green and the computer to be red so we can just Target that one using the pawn sign we just say user score and then we can just so we just change the color let's see what color suggestion we get we get blue that is fine and then we get the computer score which is red that's fine so that's uh that's that was it for creating our final version as you can see in the next section we're going to work on the functionality using JavaScript as you can see now we are choosing the different things we see it for example this one is tiger and then our score is going to be recorded here as you can see your score the computer score is different and you can see it so in the next section we are going to okay I think our design is okay in the next section we're going to work on the JavaScript part of the project to add functionality like the event listener to the buttons and then we're gonna calculate who won the game and also we want to create some random variables which is going to create the computer decision on the rock paper and scissors and based on these decisions we're going to compare our decision I mean the user's decision and the computer decision and then finally we decide who won the game and then we store the game inside here so see in the next section for the JavaScript part of the project all right in the last section we have completed the CSS part of the project in this section we're going to work on the JavaScript part and add more functionalities to the project the first things we need to do is to create the JavaScript file inside our folder so we need to open the Explorer section using Ctrl shift e and here we can just create a new file and I'm going to call the file index dot JS but you can call it for example script.js after JS it's totally up to you and similar to the one we have done for the CSS file we need to add a link to this Javascript file inside the JavaScript inside the HTML file so but instead of just putting it inside the hit section we can we have to put it at the end of the body section because we need this file to be loaded and then we just called the Javascript file and add the functionality otherwise the JavaScript cannot have access to these elements so the script check we have and then the the file name is index.js in my case and as are they are on the same directory we just need to write down index.js inside the SRC so now we can use the in index.js inside our projects so first things we need to do is to bring these buttons here we need to have access to these buttons so the buttons they have the tag of button so we can Target that one using a method called query selector all so we just create a constant and we call it buttons elements or we can just say button I'll just say buttons and then we just use and we just Target the document which means all the browser and then we use Query selector all to select everything with the tag of the button here so now we have access to the button now we can just add an event listener to the bottom so when we click on it we can just call a function or do some other stuff so we just say buttons and we add we can use for each method to Target each button as you can see from the suggestion and then we can add an events listener so we get each button here for after using the forage gives you each button and then you can add an event listener to each button the events listener we want to use is Click so when we click on the button we're gonna trigger a function so for example here we have console log you clicked me so and then also where I want to show the which button we have clicked so we just say button because we have the button ID and then the ID is Rock so we can Target that one we just say button dot ID but this is should be this should be outside this okay so let's see let's open the console using F12 let's bring the console on the bottom here now we have the console let's now let me bring this one a little bit after okay let's clean the console if I click on this rock symbol and it's refresh the page when I click on the Rock we should see the rock being console log so we are we are getting an error Let's see we I think we have missed some parenthesis here okay I think I yes we need to add a parenthesis here so now if I click on the Rock I get you got you clicked me rock if I click on the just a hand sign we just say you got you click me paper and then scissors so we have access to this IDs now but instead of just console logging I want to create a function and compare this ID with the one that the computer choose so the first I want to create a function that is going to create the let's create a function which is gonna call computer play as you can see we get the suggestion so computer play what he does we have some choices rock paper and scissors inside this array and we put it inside this constant called choices we want to use a random choice we use a method called random to create a number between 0 and 1. and then we're gonna multiply this one to the the length of this array which is now uh three okay but the array it starts from 0 1 2 okay so this is going to click create some number between 0 1 and two and then we get this number and we put it inside this array as a choice for example if the number is calculated one we get paper if it's two we get uh scissors and if we choose a zero we get rock so this is going to return that spot return the choice and then here the math.floor actually because the random number is between 0 and 1 and it can be zero it can be zero point one zero point two but we wanna just make it rounded to the floor using maths dot floor so now we we can calculate the player the computer we can just create and we can just get this choice and put it here for example I want to cancel log and this is our choice the first one we can just call it user choice and then we can just console log computer Choice as well and then we can just call this function so now if I click on the rock so let's refresh the page when I click on the rock user choice is Rock the computer choice is pepper paper so each time we get a random computer Choice and then we can choose for example I choose the this scissor so you user choice is scissor and the computer one is Rock so now we have this system but we have to compare this one and decide who wins the game okay so instead of just console logging I want to create another function I just want to create a function a color function called play round and this function is going to pass two things the one the choice that we have and also the choice of the computer so play around and let's make it a camel case so now we need to create this function so I'm going to create this function play around which is going to get the player selection and the computer selection and also you can see from the suggestion let me just paste the suggestion but I just choose tab to accept the copilot suggestion as you can see if the player selection and the computer selection is equal for example I use Rock the computer a choice was wrought it's going to return it's a tie but if the player is Rock and the computer is scissor or the player's paper paper and the computer is Rock and then if the player selection scissors and the computer series selection is paper this is going to return you win and this is going to show the player selection which is a rock for example we just say rock beats for example this scissor otherwise we're just gonna say you lose and the computer selection which is for example scissor is going to beat the player scissors uh player selection which is for example anything for example now let's see and what we get here so now we get to player play around so we got the both of the input so we pass this input button ID and the computer play so when we just pass this one and we get it here inside this function we use these two inputs to calculate who wins the game and we're gonna return this text you win you lose or it's a tie so now I think we can let me console log this one so after the player let's console log I think they we can uh with set this one to something like a result and then we can just cancel log results so let's see if I choose this rock so we're getting an error log is not defined okay we are we are returning uh and it should be fine let me refresh the page okay so I choose the paper and then I lost paper beats Rock because the choice of the computer was rock my choice was paper so I lost the game if I choose the scissor as if I choose this paper this time I lost two because the computer oh sorry that was my my choice Rock was my choice paper was computer Choice look I lost the game so I want to win one time so this is a tie two times tie I lost I'm not gonna win okay I won so I choose the scissor and scissor beats paper so computer Choice was paper so now we are getting this result and we are console logging the results but I'm the I'm I don't want to cancel log the result I want to instead and change this U1 which is hard coded for now here this result with this results section so we're going to after this after the playground we calculate this one we return everything here now instead of console logging we got the result I wanna just add I want to bring that this ID the result this paragraph and change it here so I'm gonna bring this paragraph I just want to call it a result element and this is going to be we can just Target that one using query selector and then we just Target this result this is one way the other way is use the get element by ID method and then we can just pass the ID which is result now we have this result element now we can just change its value we just say result element dot text content we set it to be this result text content is going to change the content inside that value so now if I choose for example Rock I lost the game because the computer Choice was paper so Paper Bits Rock so I choose again it's a tie this one tie tie and then now again I lost so as you can see it's working and showing the result here but we are not tracking the score here a score is always zero for the user and the computer so we're gonna track the score as well so we have just returned something here but we haven't calculated else actually the the score of the player so I'm gonna create two variables here using let the variable the first one is player score and then the other one is computer score and then we want to update these things each time each of them win the game for example here we are returning just the it's a Time but we want to change the value of the score as well for example here it's a tie so the score is not going to change but this side this side we're going to increase the player Score 1 the plus plus means increase one for example it's a one we it's going to be two if it's two it's going to be three so plus plus is going to add a number to this variable and then if the we lose we're going to increase the computer score and also we need to uh just now we are updating these scores when we update this this course we want to update these numbers here as well so we need to bring this elements the first element is user score the other one is computer score so I'm gonna bring these two here as well so I'm going to create a constant this is going to be the player score element which the ID is players go as the player score is actually it's called user score here so I'm gonna just change this one to user score and then for the computer score we have this get element ID that we have we are targeting this ID of the computer score so now we have these two elements now we can just change their value so here when we increase the size if I think here we can change we just say player play a score the text content is going to be this player score and then here we're gonna update the computer score so let's try text content is going to change the text inside this element and we're going to set it to this computer score so let's try so I lost again the so computer gained one score so you see the computer is one so let me Zoom this so now I I want so scissors bit paper paper and then this score is one for me its tie doesn't have any change as long as you're tight so I won again as you can see it's going and keep continue changing these values so you can keep track of your gaming scores here all right so and then if the new person comes or if you want to just just see and start a new game you just need to refresh the page and this course with will be zero and as you can see now the hard-coded value is still here you want we can remove that one inside here so I'm gonna remove this one so there will be no as nothing here except when we press we see the use lose and then we just change see the changes inside the game all right so that was it for the creating this project using JavaScript HTML CSS and JavaScript in this section we you have learned how to get the elements using these methods query selector all for all of the buttons get element by ID by for targeting the IDS we have just created two variables to track the changes inside the player and the computer score we have added an event listener to each buttons using add event listener method and then we have called a function called play round by passing the the our choice and the computer Choice which is going to can be calculated here also we have the we have created the playground function which is going to get the our choice and the computer Choice compare them and return the the value of time on lost or win and then we have updated this computer score and the player score by changing their takes content all right so that was it for the JavaScript pipe I hope you enjoyed and learn many things let me know your opinion about using GitHub co-pilots to make the process of creating these projects faster and also I have saved time to teach these projects you let me know if you want to me to use it or completely type everything from scratch so see you in the next project welcome back to another project in this project we are going to create a Pomodoro Timer as you can see from the final version of the project we have a timer at the middle and three buttons start a stop and reset if we click on the start this is going to start the timer backward from 25 minutes and when we click on this stop this is going to stop the timer we can start it again by clicking on the start and also we can reset it by clicking on the reset button and also we're going to have an alert when the timer is up so the Pomodoro Timer is useful for people who wants to study after 25 minutes they can have some rest so this module concept is for creating a timer for people who wants to work and focus on a job for 25 minutes so in these projects we're going to firstly learn how to style it using CSS and also we're going to learn how to add event listener to the buttons using JavaScript and how to create a timer using set interval method of JavaScript in the next section we're going to start with the HTML part of the project so see in the next section all right let's start our project in this section we're going to create the HTML parts of the project and also I have put the final version here for our comparison as you can see we have the title we have a timer at the middle and also three buttons so we're going to create these elements using HTML first and then we're going to style them using CSS and finally we're going to add some functionalities to them using JavaScript the first things we need to do is to create a folder and also we're going to open that folder inside the visual studio code so let me go to my desktop I create a folder here in my desktop I'm going to call this folder the name of our project which is Toro timer so once you create the folder you can just right click and click on open with code which is going to open it with Visual Studio code and the default folder for you is going to be powder timer and you can just create your files here to use it for your website so you're going to create the first file which is index dot HTML let's close the welcome tab and here we can just now close this section to have more space then we can use an exclamation mark to create an HTML5 boilerplate so we just can click on the first Auto suggestion the one that is showing the exclamation mark and now we have our HTML5 boilerplate which includes the doctor doctype tag at the top of the code which is telling the browser which version of HTML we are using and as we are using HTML5 we just need to have HTML here after that they have the HTML tag and inside here we have the Lang attribute which sits the language of the page for the browser which is uh where as we are using English we just set it to be e n which stands for English then we have the hit type which is inside this HTML tag then we have the metadata tags and also the title tag the first metadata tag sits The Trusted attribute and we set it to be utf-8 which is recommended by HTML5 this chart set attribute the newly contains all the characters and symbols so the users won't have any problem seeing the characters and symbols of the website if you use ucf8 then we have the compatibility metadata tag which sets the Internet Explorer tells the Internet Explorer to use the most recent rendering engine which is 8. then we have the viewport metadata tag which sets the width of the screen to devices with so the browser is going to adjust Itself by the device's size for example if you're using mobile screen and looking at the Bro website inside any browsers you see that the width is smaller than when you are using for example a tablet or a desktop computer and here initial scale is the initial zoom level of the browser which is said to be 100 percent by setting it to B1 and finally we have the title tag which sets the title of the page so we can just check that one by clicking on the live server extension here as you can see the go live if you have installed let's check the if you open the extensions using counter shift X you have to install This Server this one live server you can just search here live server and here you can just find this live server and you can just install it after installation you can just click on this button here to open the server and open this website inside the browser so let's just click on the go live this is going to open this one inside the our default browser which in my case is Chrome so the title is document let's change the title to the name of the project which is promo Doro timer and then we can just let's bring this one to the left side and the browser on the right side so you can see the changes in real time let's decrease the size of the browser so inside the body we're going to start and add our containers hit tags headers hitting tags and buttons for example here I'm gonna add a div with a class of container which is going to cover all the websites and for just creating a div with a class of containers you just have to write down DOT container and then here you can just add the H1 tag with the class of title and here we just write down the name of the project pomodoro timer we see it here let's increase the size so as you can see we have the this title inside the website now after the title we're going to have a paragraph with the class of timer and also with the ID of timer so for the ID we add hashtag for the entire class we add dots so this is going to gives us a class and ID class we usually use for styling and ID for tagging dancing targeting them using JavaScript later on so here I just want to hard code now 25 minutes after the paragraph we're going to have our buttons so I'm gonna put all the buttons inside they have button wrapper so I'm going to create a div with a class of button wrapper inside this div we're going to have three buttons the first one has the ID of a start and it's just gonna say a start we can see it here let me Zoom this a little bit you can see it better and then after that we're going to have another button with the idea of a stop and which is going to say just a stop and finally we're going to have another button with the idea of resets so now we have all the elements we need to create our website in the next section we're going to start styling this website using CSS and make it like the final version we bring everything to the center we create these buttons with different colors and also we make some that detects bigger so see in the next section for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to solve the project using CSS so if you look at the final version here you can see that we have our container in the center we have different colors with the buttons and also we have a bigger text in the center so the first things we need to do is to create an a CSS file inside our project so let me open the Explorer section using Ctrl shift e and here we can create a new file we just call it a style dot CSS and before a styling and using the CSS file we need to add a link to this file within the HTML code so inside the index.html we need to add a link at the inside the head tag after the title tag we just add the link we just write down link and then we can click on the third Auto suggestion the one with the CSS so this is going to create a relationship between the style sheet and this HTML file and the destination address is stall .css because both files are located at the same directory now we can start starting our project using CSS the first things I want to do is to Target this div with a class of container so the the div with the class of container we can Target this one we just use Dot container because it's a class we just targeted using Dot and then I want to change remove the margin let's just say marching zero for the top and bottom and Auto for the left and right so the auto is going to bring it to the center but because it doesn't have a width still we cannot see see the merging Auto so we're gonna set the maximum width to 400 pixels this is going to set the width and then in this case it's going to set the maximum width to 400 and bring it to the center and then what I want to do is to we can bring the text inside this container to the center using text align Center so this is going to bring everything to the center inside the container then let's add some padding of 20 pixels which is going to add some space inside the element inside the container around the elements and also we want to change the font family to robot Roboto and if this font is not available I want to use send serif instead okay so the font is looking good after the container we're gonna Target this title the title was the nh1 tag with the class of title so here I'm gonna add that class so let's change the font size to be 36 pixels so which makes it bigger and then adds some margin at the bottom of 10 pixels which is going to have some space between the title and the next things and then let's set the color of the title to be this color to C 3 e50 which is kind of dark Gray very dark gray so after that we're going to Target this timer so the timer is a paragraph with the class of timer so we can Target that one here using Dot timer so let's change the font size to be 72 pixels so we have the zoom here let's remove the zoom so you can see the real sizes and then let's change the color of this the same as the color of the title now we have the buttons as you can see there are in the center and everything looks okay but we want to Target the button because the button here we can Target this tag using button so button okay so we have the button I want to change this button size and make it bigger so we change the font size to be 18 pixels we add some padding in the top and bottom of 10 pixels and 20 pixels for the left and right let's add some margin of 10 pixels so they have some space between them let's change the color of the text to be white so you cannot see it now but I want to change the color of these buttons to green red and gray so we're gonna see it later clearly so let's for now we just add some background color so you can see it better I just choose the same background color black but I'm gonna remove this background color later so let's remove the Border so we just say border none and then we set the Border radius to be four pixels this is going to make the buttons around it so this is going to have some rounded corner and then let's add some let's make the cursor to be pointer so when we hover over the buttons we see a pointing hand okay the mouse cursor is going to change to PO pointer and then let's so I think that's it for the button let's target each let's add some hover effect or let's just Target each button so the button each of them has an ID of a start a stop and reset we can Target that one using Pawn sign for example start so to Target this start button let's change the background color to be 2 7 a e 60 okay and then let's also make this text to be uppercase so we just use ticks transform uppercase so make the text uppercase and when we hover over them over the buttons we just say button hover through the class we use so when we hover over them I want to change the opacity to be 70 percent so it becomes like this so you know that something happened and also we want to add some transition as you can see this is very fast I want to add some transition to opacity and then just 0.3 seconds with ease and in and easing and out effect now as you can see it's kind of more nice and then let's target the other buttons so we just say stop button for example the let's change the background color to be C 0 39 B which is kind of C 0 39 2B which is a red color and then finally we're gonna Target this reset button we change the background color to be kind of great color so it's going to be seven if eight C 80. okay and then now we can just remove this background color here so let's remove the zoom level so we have a stylish like this okay so that was it for the CSS part of the project in the next section we're going to work on the JavaScript part and we're going to add some functionality as you can see from the final version when we press on the start as you can see the timer is going to count down from 25 minutes and then we go and then when we reach to the zero we're going to have some alert saying the time's up and then we can stop the timer and also we can reset the time so see in the next section for the JavaScript part of the project all right in the last section we have completed this CSS part of the project in this section we're going to add functionality to the projects using JavaScript so the first things we need to do is to create a JavaScript file inside our a folder that we have created let me open the Explorer section using Contour shift e and here we can just create a new file and we call it for example index.js and before using it we need to add a link to this file within the HTML file and the link file the if you remember for install.css we have added in the head section but for JavaScript we have we should add it at the end of the body section because we need all these elements to be loaded first in the browser and then we can add the functionality using JavaScript so here we can just add a script tag we just write down SC and we can click on the second Auto suggestion the one with the SRC and the SRC which is the source address is index.js because both files are located at the same directory now we can use JavaScript in our projects what we want to do first is to bring these elements these three buttons and also this timer because we want to change the value of the timeline and also we want to add some events listener to these buttons so let's bring these elements inside the JavaScript we just create a constant and we call it uh start element and we set it to be equal to because we want to Target the browser we just say document dots get element by ID because this is the it has the ID of a start so we just inside the parenthesis we just say start okay so we can do the same things for the Stop and reset button and also the timer so I've just copied this one using alt shift Arrow done three more times the second one I want to change this start to stop I can just use Ctrl D to choose both of them and then I just say stop and then here use Ctrl d make it reset and this one is going to be timer so we have access to this timer it start a stop and reset let's add the event listener to the three buttons so we just add the start element we add an event listener the events listener we want to add is click because when we click on the button we want to trigger a function I'm going to call the function uh a start timer let's remove this so start timer I'm going to call the function a start timer and then let's create the function at the top so we create a function and we call it start timer and for now we just console log as starts okay so now if you open the console using F12 let's clear the console and then let me decrease the size so if I click on start so before that you have to refresh the page if we click on a start we see a start in the console okay so let's do the same things for the other buttons and stop and reset so I'm going to copy this one using alt shift Arrow done and also let's copy this function two more times so this starts is going to be stopped these two is going to be a stop this one should be stopped two and this one should be reset reset preset this one too I could so now if we check the console if we click on start we see start a stop and reset as you can see if you're constantly logging these three terms based on the based on the button that we have we are clicking now just we have created this we want to install or start working on the start timer function so instead of console logging we want to create an interval so every one minute every one second we wanna update a timer okay so we want to create an interval I'm going to call it interval and then we have to just Define it at the top by a variable called interval and then we set this interval to a function called sit interval which is a built-in JavaScript function which is going to trigger a function every they're gonna trigger this function every for example this is one millisecond but we want to call this one every one second which is 1000 milliseconds so every thousand milliseconds we are going to trigger this function so for example here we're gonna trigger the function we just cancel log for example we just can't select something like a timer and then let's clean the now we just call this function we as you can see every second we are calling this time and you see the timer six seven eight nine so this console log is getting triggered every one second but instead of doing that we're going to update this timer so let's create a variable at the top first and we call this variable time left so we just create a variable called time left and for now I just want to set it to be 1500 means 25 minutes okay this is based on seconds so 1500 seconds is equal to 25 minutes now that we have create this one so this is second but we want to convert this one to minutes and seconds so I'm gonna create a function here I'm gonna call it update function I'll debate timer for example and this one is going to create the minutes seconds from the time left so we just say let's minute minutes and this minute is going to be equal to math dot floor because we want to set it at set that one to be rounded to the lower so retains a greatest integer less or equal to its numeric Arguments for example if you have 2.1 is going to be 2 okay or two points so floor is going to do that so we want to just whatever time left is for example is whatever time timed left is we want to divide this one to 60 and this is going to be minutes and then the seconds is different the seconds is equal to time left whatever you divide to 60 the remainder is going to be second so the first one is minute whatever the remainder is is seconds this is the remainder side it means time left divided by 60 whatever the remainder would be this for okay now we have the minutes and seconds we want to create it exactly like this time but first me first let me show it inside the timer so we have the timer element we want to change its inner HTML to equal to a formatted type which we are going to create here the formatted time let's create the formatted type so the formatted time is equal to minutes Plus this one this sign and then seconds okay so let's seconds we are getting all right we have to add a plus here too okay so now we have this formatted time now we need to call this function to update timer here in that inside this function every one second so here I'm gonna call this update timer so if you now press on a start this is going to update the timer to this one but we want to decrease the time every one second so we want to decrease the time left we just add double minus to each time decrease it one second so if I now press start this is going to decrease from top to bottom every one second but uh I just want to show you some problem we have here for example if we time instead of just this thousand five hundred we make it for example 120 second if we start now you can see it's 1 58 57 but I want to show 0 1 instead of one so it's going to be formatted so there is a method to we can use in JavaScript it's called pad start but first we need to convert this one to a string so we need to make a template here like this and the backtake here is it's located over the Tab Key this is this this one allows us to have a variable inside here so I'm gonna add a variable using dollar sign and a curly braces so what we do first we convert this one to a string because this is a number and then after converting it to a string we want to add some zero using pad start which is going to add I want to say just make it two digits and then if this first digit is not existed make it zero or even if it's not existed we just make a zero for example if I start now this one is zero one instead of one okay so now let's do the same things for the seconds so then I have the so let's remove this plaster because we are making a variable we don't need to have that spawn and then we we want to add another variable for seconds first we convert the seconds to a string by using two string and then we want to use a pad start for two digits we want to add zero okay so let's start now we have some extra things we don't need this one and scroll let's start now as you can see zero one fifty Seven and then if this one decrease too for example if we have for example 6 72nd let's start this one you can see zero zero eight zero seven zero six and then if this one finished the minute is going to be double zero because we need two digits with zero so this is the way you format your numbers using JavaScript okay so now it's working uh lastly let's just bring this one and let's leave it there let's I want to make it 10 seconds because I want to show you an alert so each time this time finish I wanna create an alert so here after the update timer I just say if the time left is equal to zero let's make alert saying time times up our time is up okay now let's try it so it starts from 10 seconds and even the 10 seconds finish we want to see an alert saying time's up you can see the alert times up and if you press OK you see the time is still going and as you can see it's going backward so we need to clear the interval as well so we need to clear interval and which interval we want to clear is this interval that we have okay now let's try it again so after 10 seconds it's going this is going to create an alert and then set the time to zero so we can so we clear this one and then if we start again okay it's going to backward again so uh we need to set the time again after the alerts is we set the alert to okay so we can here we just set the time left we set it to be again to for example 1500. so let's try again now we have 10 seconds when it's finished this is going to clear after the k clear the interval and if you start again it's going to start from 25 but let's work on the Stop and the reset button so when we click on a stop timer we want to share clear the interval too so we just say clear interval and then we're gonna clear the interval so when we start when we press stop it's going it is going to stop the timer at 7 and if you start again this is going to continue so this is for the stop timer for the reset timer we want to clear it and also we want to set the time left to the 1500 which is 25 minutes and also we want to update timer and also we can call the update timer here after the time left as well so now if we create press on start it starts from 10 seconds we can stop it we can reset as you can see goes to the 25 here we can start it again now let's set the time left to 2500 so this is 225 let's stick increase the size so now if you press start it's going to start from 25 to 0 and when we reach the zero we get an alert we can stop it start again and also we can reset the timer all right so that was it for creating this Polo Duro timer using HTML CSS and JavaScript we also have learned how to bring the data the elements inside the JavaScript how to create an interval and update the timer based on the minutes and seconds and how to format them using pad start at the zero if the timer is less than 9 or even it's zero and finally we'll if we have learned how to clear the interval using stop and the reset timer so that was it for the projects I hope to you learn many things see you in the next project welcome back to another project in this project we are going to create a dice roll simulator as you can see from the final version of the project we have a dice at the middle and we have a button saying roll dice if you click on this button this is going to create an animation first and then create a random dies and show it here in the middle and also we we have added this roll dice inside this list the history list so let's do it again this time we got five and we have added to the list as well so as you can see we have just installed this one using CSS with the modern design and also we have use JavaScript to add an events listener to this button which is going to create and simulate a dice roll by creating a random number and also we're going to save these numbers inside an array and show it here in the history of the roll dice so in the next section we're going to firstly start with the HTML part of the project and then we're going to work on the CSS and after that we're going to work and add functionality this to this project using JavaScript so see you in the next section all right let's start our project in this section we're going to work on the HTML part of the project as you can see I have put the final version here for our comparison as you can see we have to add a heading a roller die sphere and also we have a button for rolling the dice and finally we have the roll history so we're going to save this one here in the history so the first things we need to do is to create an HTML file so I'm going to create a project in my desktop so I'm going to create a folder here so I'm going to create a new folder I'm going to call this folder the name of our project which is dice roll simulator and once you create this folder you can just right click and click on open with code this is going to open it inside the visual studio code otherwise you can just come to the visual studio code and just click on the open and click on that folder that you have created by clicking on the open folder so now the visual studio code is uh having this dice roll simulator folder as a default folder now we can create a new file here by clicking on this icon and just recall that file index.html and now we have the HTML file but it is completely empty let me close this but now we can use an exclamation mark to have an HTML boilerplate as you can see from the image abbreviation we get this suggestion by just writing down an exclamation mark and then when you click on the first author suggestion you get the HTML5 boilerplate so let me explain this one a real quick is if this is to your first project so we have here doctype which tells the browser which version of HTML we are using as we are using HTML5 we just need to have HTML here and after that we have an HTML tag which covers the hit and the body section the link attribute here inside the opening tag of the HTML sets the language of the page and tell the browser which language the page is written in and in our case is English and then we have the hit tag which covers three metadata tags and also a title tag the first metadata Tag sets the charge set attribute which tells the browser to use utf-8 and YouTube face is recommended by HTML5 because it nearly contains all the characters and symbols of the pro the users inside our website won't have any problem seeing the characters or symbols or unicodes that we have we are using and then we have the compatibility metability metadata tag which tells the Internet Explorer browser to use the most recent rendering engine which is Edge then we have the viewport metadata tag which tells the browser to set the width of this screen to devices with for example if you're using mobile screen the device the width is going to be a smaller so you can have a responsive website by setting this metadata tag and it's necessary to have a responsive Behavior and then finally we have the initial zoom level of the browser which is 100 percent then we have set the title to be document this is the title of the page and let me show you the title if you have installed the live server extension in your Visual Studio code you have this button go live so you can click on go live and this is going to open the website inside the default browser which in our case is Google Chrome as you can see we have the document here as our title and then we can just change this title to the name of the project which is dice three simulator so now if you check the browser the title is going to be dice roll simulator so now let's say bring the website to the right side and then the visual studio code on the left side so you can see the changes in real time because we have we are using the live server extension anything we write here we're gonna see in real time on the right side so inside the body section we're going to have an H1 tag saying dice roll simulator so after just a few seconds and auto saving the project you can see the dice roll simulator heading inside the website and after this H1 tag we're going to have the div with the class of dice and also with the idea of twice so for adding the class you just need to have dots and for the ID you just need to write down a pawn sign and then you get the auto suggestion of from emit abbreviation a div with the class of dice and an ID of dice if you press enter you get that div now inside this div I'm gonna add this uh icon which is the dice face one so for in order to find this they have some unicode if you search on Google let me search for you so we just say for example dice unicode twice unicode there are plenty of websites showing you the Unicode characters of this you can just go for example this compare compart.com as you can see we have for example Unicode for this uh five so for the HTML entity the code is this so just if you copy this code for example you just put it inside your this div this is going to show the five dice so you don't need to just get the icon you just need to have this kind of HTML unities and if you want for example for the this is for die phase five you can just copy this and search for Dives phase one for example and then you just click here and then get the code from here okay so let's continue so let's remove this zoom level so the icon is here but we cannot see it yet but later you using the CSS we're going to increase the size of these things and make them more beautiful then we have a button the button has an ID of rolled button and inside the button we're gonna say roll dice so you can see the button here and after the button we're going to have the history like the here we have the history I'm gonna just create a UL unordered list with the idea of roll Dash history so we're going to use this ID or classes to later using CSS or JavaScript to manipulate the website and style it so we have the URL with the idea of parole history and then we have an Li here I just want to hard code some Li for example the first one we just want to say rule one and then we just have it and spin this expand is going to have that for example this uh this code here and then we can just have another one for example row two and we just for example get the five one so we have one and five this is just hard coded because we want to style this one using CSS in the next section we need some data here to style it but later we're going to create this one using JavaScript so if we roll more Dice and then we can just see the history here for example like the one here so you see that each time you you see it new history data and edit here so that was it for the HTML part of the project in the next section we're going to work on the CSS and make the website as beautiful as the final version as you can see here we have a hover effect for the button and we have this title and also we have this style located back Shadow effect for this role histories so see in the next section for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to install the project like the one in the final version using CSS the first thing we need to do is to install the and create a new CSS file inside our Explorer section so I have to open the Explorer section using Ctrl shift e and here inside the Explorer section inside our folder which is called dice lore simulator you just create a new file and we call it a style dot CSS and before using this file we need to add a link to this file within the HTML code so we need to come back to the index.html and then just after the title tag inside the hit section we need to add a link to the CSS file as you can see from getting this suggestion you just can write down link and then click on the third Auto suggestion the one with the CSS let me turn off my GitHub co-pilot all right so now we have a link which is a relationship between the HTML file and the cell sheet install the CSS and here the solid CSS the address of this file and as both files are located at the same directory we just need to have a solid CSS here now we can start styling our project Here and Now I want to start with the body section so which is covering everything I want to change the font family to open sense should be capital [Music] so open sensors do like this and if the open sense is not available we're gonna say use this send serif instead so this is a backup font after that I want to bring everything to the center using text align Center like this and then let's remove the default margin of the page and we set it to be zero so we can install it better so we have completed the body section let's move on and go to this H1 tag saying dice roll simulator so we just Target that one using H1 and open a set of curly braces and here we just change the font size first to change the size of the font as we set it to be 3 REM which is three times of the base sizing and mostly it's the default sizing is 16 pixels but it depends on how you set your browser if I remove the zoom level which is 200 percent now this is the size that we have created by creating three Ren and then I want to add some margin at the top of 2 REM so we bring it a little bit down from the top and after the H1 tag I want to Target this dice here this div with the class of dice which is having this dice here so let's target this one because this is a class we can just say dots dice and let's just change the font size to be seven REM so we make it bigger then let's add some margin of 5 pixels here so you add some space around this dice I'm gonna add the animation later as you can see from the final version when we change the dice some animation happens but if you don't have the ability to change the dice we cannot see the animation so I'm gonna after creating the JavaScript I want to come back and create that animation I'm going to teach you how to create a cool animation like this so let's move on and let's go to the next section which is the button so we target the button we just say button so the button we want to have the background color for that the background color I want to add is this code 40 seven a five C four which is kind of bluish color and then let's change the color of the text to be white you can just simply write down white or hashtag FFF would be similar and then let's change the font size to be one and a half REM and then let's add some padding so padding in the top and bottom I just write down one I am and for the left and right we just write down about 2 REM like this and then we can just uh border remove the Border here because I don't want this black color around it instead I want to add some uh so you just remove the border for now we add some border radius we make it rounded in the corners by just adding a border radius we set it to be one REM like this and set to the cursor to be pointed so when we hover over it we see a pointing hand and yeah that was it for this creating this let's add some transition effect and hovering effect for it so we when we hover over the button we just add the pseudo class over we just change the background color to be different which is 2 e 8 b a s and then we can add some transition so when we hover over it we don't see it suddenly so we can add a transition on background color fit 0.3 seconds and ease effect so you can see now the changing is a little bit slower so after that we're going to Target this UL here this UL with the idea of role history we can just Target the UL let's remove these dots so we just have to Target the list Style to be one half REM so this is the our list style should be none so you remove that dot and then we add remove the padding we just say padding zero so if they come in the center when you remove the list style you need to set the padding to zero and at least set some for margin of 2 REM so we add some space around it and we set the maximum width of that to be 600 pixels and we set the margin of left and rights to be Auto so we bring them exactly in the center okay so now you were so at this one this one is less necessary we can just set this one to two REM for top and bottom okay now if you just Target the LI the list each list so we target the Li we set the font size first to one and a half REM so make it bigger we add some heading of 0.5 REM arging of 0.5 REM padding the space inside and margin is this the space outside the element and then we have some background color if two if two F2 which is kind of gray color we add some border radius we make it rounded in the corner and then we set this one to 0.5 REM we also want to add some box Shadow so we can see it better the Box Shadow is going to have a e0 for the x-axis two pixels for the Y once offset 2 pixels for the blurness and then we can have some RG PA color which is a red green and blue color for the red I just set it to be zero green zero below zero so this is going to gives us a black color for the alpha which is the transparency I just set it to be 0.3 percent transparent as you can see it's a beautiful now box shadow and then we wanted to set the display to flex so I want the rule one to be in the left on the left side and this icon on the right side so I set the display to flex and then I want to set the justify content to be a space between so add a space between the two elements and finally we can use align item Center to bring them to the center vertically like this inside the container and then finally I want to make this uh icon this dice symbol to be bigger so we can Target that one this is Spam here so we just Target that one we just say l i s pen now we set the font size to V3 REM and then we just set some margin on the right side of one are here okay it looks fine let's make it bigger so as you can see it has some Maximum width of 600 so it never gets bigger than that the button looks good and also this dice looks fine all right so that was it for the CSS part of the project I hope you enjoyed and learned many things in the next section we're going to work on the functionality and we make it like the final version so each time we add we click on the roll dice we get the new roll dice randomly and then add it inside our list here so see in the next section for the JavaScript part of the project all right in the last section we have completed the CSS part of the project we have installed the project now it's time to add functionality the project using JavaScript the first thing we need to do is to create a JavaScript file inside our Visual Studio code so here I'm going to open the Explorer section using Ctrl shift e and here we can click on this icon to create a new file I'm gonna call the file index.js similar to the one we did for the installer CSS we have we have to add a link to this file within the HTML code but the link should be at the end of the body section as we need the file the HTML to be loaded first and then we need to add the the functionality to it so we need to add a script act here we just write down SC and we can click on the second of the suggestion the one with the SRC and the address for this script tag would be index .js as both files are located at the same directory so let's close this and let's start adding some functionality the first things I want to do is to add the animation so when I in the final version when we click on this rows dice we have animation so we want to add this well first we want to add an event listener to this button which is going to trigger an animation so let's bring this one to the right side and he this one to the left side so now what we want to do we go to uh index.html so what we want to add some add events listener to this button with the idea of roll button so when we click on it something happens so first thing first we want to bring this button to the JavaScript so we're going to create a constant called button element and this is going to be equal to document let me stop the co-pilot so we just Target the document because we want to Target all the browser and then we can use git element by ID method to Target the ID that we have here which is the roll button you can copy this and then paste it inside here now we have access to the button let's add the event listener to it so we just say button element dot add event listener and the event we want to add is Click because when we want to click we want to trigger something so what we want to do we want to create a function here so this function is going to be triggered once we click on it for example if our console log something here for example clicked and now if you open the console using F12 let's bring this phone down so now if I click on the button you see the clicked is logged inside the console but instead of clicking I want to add an image an animation to this element to this dice elements here so first we need to add the animation inside the CSS so if you remember inside a dice you didn't add any animation but we have to create an animation here and we need to name an animation so I'm going to create an animation class we just call it roll Dash animation and this one is going to have an animation nay which is going to be row and now we create this animation with keyframe so we add a keyframe this keyframe is going to be the name of that we have created here row and it starts from 0 to 100 percent for the zero percent we're going to have a transform which is going to have some change inside the like in the x-axis in the y-axis but we want to rotate it in y axis so we just say rotate y first we start with zero degree and we four is rotate X we start from 0 degree 2 then when we reach to the hundred percent we want to have the transform but this time instead of zero degree we want to have 720 degree in both sides y-axis and x-axis we're gonna have these two so we have this animation now we want to add it to the device now so to the dice we want to have some animation duration for one second but we want this one to be infinite so we want to just say any animation fill mode to be forwards which is going to be infinite but in JavaScript we want to remove this animation after a few seconds so I'm gonna show you how to do it so now we have this animation inside the CSS let's add it using JavaScript so inside the JavaScript we have to add that animation this is very simple we just need to bring this dice element inside the HTML we know that the dice element it's a it's a div with the idea of dice so we can bring it here at the top we create a constant call it dice element and this is going to be equal to similar to the above like a document dot get element by ID and the ID is called dice so now we have these elements we just can add that animation to it by using dot class list dot add this is going to add that class list which was Role animation roll dot dash animation so basically we have added this role animation class to this element now so if you now press this button we see the animation okay but this is only working one time so we want to add this and after a few one second we want to remove that so we can just add a set timeout here which is going to trigger this function after one second which is 1000 milliseconds and this function is going to we just copy this one and instead of add we want to remove it so we just say remove after one second we're going to remove that so if I click it's going to remove it and then we can just click again click again click again as you can see now we have the animation in our dice but we want to just randomly change this dice so we're gonna call it function after removing this called Lane dice and we need to create this function here at the top so we create a function called role dice so this is how we do it we create a random number between one and six each time and then we're going to based on this number we're going to show different dice phase so this is just a five for example if the next number is 4 we're going to show the die phase 4. so first we create this random number so we create we just call it we create a constant we call it a role result which is going to be we just create a random number first this is going to create a random number between 1 and 0. but we can multiply this one to 60 so sorry six so which is going to be from 0 and six but we don't want the numbers like 0.2 or 0.3 or 1.5 we want to uh rounded number so we can just cover this one inside apprentices and then just use a method called math dot floor so this is going to create a number between 0 and 5 actually so this is going to create a because floor is going to bring it to the bottom now we just need to add 1 to it to create the number between 1 and 6. this is the one way the other way was we use math.cl so this is going to create one two six so math dot floor is going to round it to the lower number and then we just need to add 1 to it to create a random number between 1 and 6. so we can console log now the role result so let's see if we click on this we're going to see a number then now we got two next time we get three four five it's going to be always between 1 and 6. okay so we are creating this number now we want to based on this number change the dice face so I'm going to create another constant called dice face which is going to call a function called get dice face and we want to pass this number rolled resolved so let's create this function we create a function here called get dice face which is going to get this number and based on this number is going to change a return that that face that dice face so we need to create a switch here I want to show you how to use the switch so this switch is going to get an input and based on the input we're going to have an output so here we have the switch in case the number is one this is going to return the one which is here if you remember we we need to have the Unicode so for the phase one let's search here so die phase five let's search for dive phase one so the Unicode for this one is this for HTML I'm going to return this okay and in case of 2 they're going to return two so I'm going to paste the so let's search for the days die phase two okay so we just need to keep going create this until six so for the K in case we have three we're going to return the dice tree so let's search for dice three I'm gonna use my control V ICE 3 so let's continue for the case for we're going to return K4 is this one so two more left case five we're going to return dice face five are finally let's for the case six we're going to return the sixth one so I'm gonna just search for the six okay so this is a the six and for the default you need to add a default if you want to use a switch so any other cases we're going to return just an empty string okay so this is how the way the switch works so based on the input we're going to return an output so it can be one to six and we return different faces here so now we have this one now we we have the dice face so if I console log dice face here so each time we roll a dice we we return a dice face instead of number now as you can see okay so we got this dice face now we want to change this this dice element takes content to dye's face so we just say dice element Dot text content you want to change it to these dice face so now if I change this one we see this number okay but we want to see the actually the the I think we need to instead of this one we use inner HTML so let's check okay now we see the die face so the insert text content you use inner HTML so each time we see a different dice okay so we have done this part but we haven't completed this history yet because the history is always the same so we need to change the history and save the each dice roll so I'm going to create a constant a create a variable here called history list and this is going to be an empty array and we go to update this empty array each time we click on this one and we're going to add the information we have so each time we change the inner HTML of this one we're going to update the history list so we just say history list we're going to add the new one by just saying dot push and we add this rule results okay which is which can be 1 2 3 or anything like that and then we can just updates create a function called update roll history okay now let's create this function so we're going to create a function called update history so the function name is update history update for all history I put it here so update history is going to first thing first make this one completely empty so we're going to have this role history first so this role history we need to bring it inside the JavaScript which is which includes all the lists so here at the top I'm gonna bring that one using a constant and we call that one roll history element and this is going to be equal to document.getelement by ID and the ID for this one is way Dash history so first thing first we're going to empty that one so here inside this function we're going to say row history element dot inner HTML is going to be empty first so each time we click we're going to empty this one first okay and then we're going to fill it with the all everything we have inside the history list which is going to save here each time okay so we create a for Loop we just create a for Loop we create a variable called I here which is going to start from 0 and this is going to continue until the this history list length for example it can be one we can be two three and Etc and then we're going to increase this I one each time for this Loop and for this loop we're going to create the list item so we're going to create this list item here in each Loop so we're going to say list item which is going to be equal to we we can create it using a method called create element so we just Target the document and then we just say create element and the elements we want to create is Li which is the list now we have created we want to change the inner HTML of it so we just say list item dot inner HTML and this is going to be dynamic so we need to add a backtick backtick is located on the tab key it's not the single quote actually okay it's back take so we're gonna say roll we want to say roll one roll two but the roll one and roll two is going to be based on this I okay because I starts from zero we need to add one to it so we just create a variable we just say I plus 1 because I starts from zero now we want to start from one and after that we're going to have a spam and inside this is span we're going to have that this face which we can get from creating getting from this git dice face so we're going to create another variable we just say get we call this get dice face function and we're going to pass this we have the the number here history list we have saved all the numbers inside the history list by just passing the role result so we're gonna just say history list but we want the number I for example the first one second one the third one we pass this I and then we get the face and then show it inside this spam so we're gonna create close this expand now so add the closing tag here now we have created the list item so we need to add it to the role history so we we just made the role history empty now we can just add this element to it by just using append child so a pen child is going to add this element so we add this element to role history Elements which is this element here we have a we have this element here we have added appended these trials to this element so now we've done it we've done it using JavaScript so if I click now we see that the first now we have two if if I click again we can we can see the next one is added to the list now the third one this just we can keep going see the each one and then the number is updated here as well using the raw number and uh the other thing is when we refresh the page first we see these two we can just delete these two now or we just say comment it using Ctrl Ctrl forward slash so now we don't see any list but when we click on the roll dice we see the first one second one and third one so what we do here I'm gonna explain again we just created an empty array called history list each time we create a random number we're going to add that number to this variable inside its array by using dot push and then we're going to create the elements Li element here based on that number and add it as a child to the unordered list item so that was it for the JavaScript part of the project I hope you enjoyed and learned many things in these projects we have work on the some diff difficult task like updating the history creating an animation and how to add and use the a paint child to add some element to it another element so I hope you enjoyed and learned many things see you in the next project welcome back to another project in this project we're going to create a recipe book application as you can see from the final version of the project we have a page containing different recipes which we are going to get from an API a recipe API which is free to use but we need to get an API key I'm going to teach you how to get an API key from this free API and each time here when we refresh the page we get different recipes with different ingredients and also we have here a link to go to that website in the next section we're going to work on the HTML Port of the project so see you in the next section all right welcome back in this section we're going to create our HTML file as you can see I have put the final version here for our comparison and we can just compare the final version and create it create the HTML Parts in this section the first thing we need to do is to create an HTML file and open it inside the visual studio code so I'm going to open the go to my desktop create a new folder here I'm going to call the folder the name of our project which is recipe book app and we just right click on it and click on open with code which is which is going to open it with Visual Studio code now here we can close the welcome Tab and then as you can see we have the folder being open inside the visual studio code so now we can start creating our files here so I'm gonna click here on this icon I'm gonna click create a new file called index.html and here we can see that we have an MTH HTML file but we can just use an exclamation mark as you can see to get the image abbreviation so this suggestion you can get uh if you have the image abbreviation enabled in your Visual Studio code which is enabled by default so I'm gonna click here to accept the auto suggestion now we have this HTML file so we have doctype which is the type of the document we are working on and tells the browser which version of HTML we are working as we are using HTML5 we have HTML here then we have after that we have an HTML tag which has the language in the opening tag and it sits to be English and tells the browser the language of the website is English then we have the head tag which has three metadata tags the first one is sets charted attribute youtube8 YouTube phase is recommended by HTML5 because it nearly contains all the characters and symbols then we have the this metadata tag which sells the Internet Explorer browser to use the most recent rendering engine which is Edge then we have the viewport metadata tag which sets the width of the browser's browser to the device's screens with and finally we have the initial zoom level of the browser which is set to be 100 and then we have the title of the browser which is document so let's open the our website by using the live server extension if you haven't installed the live service extension you can find it inside extensions by searching live server and this is the extension I'm using live server you can just click on it and install it and then after installation you can have this icon here go live and if you click on it this is going to open it inside your default browser which is in my cases Google Chrome so now we have the website open and the title is document let's bring the website on the right side and the coding on the left side so we can see the changes in real time so the first things I want to add inside the body section I want to add a header tag and inside the header I'm going to have an H1 tag saying recipe deep f all uppercase and like capitalize as you can see we we are seeing the changes in real time because using you're using that extension and also where I'm using something called GitHub copilot which is gonna suggest you code it's not free you have to pay ten dollars per month but it's free for students to use this is the extension I'm talking if you open here you can just search GitHub Copilot so this extension if you install this one this is going to suggest you with AI as you can see when you write down they give you a suggestion if you press tab you're gonna accept the suggestion this is this is going to help you to code faster and we this is going to save us some time in inside our coding tutorial so I'm going to type faster the codes well I'm gonna explain them all so now we're going to have a container I'm going to have a David class of container we just say container so for having a div for the class of container you just need to write down DOT container and here inside the container I'm gonna have a UL tag with the idea of recipe item sorry recipe list and then inside this one we're going to have a list so in my case I'm gonna have a list with the class of recipe item okay and then inside the list as you can see we got the list we're going to have a an image tag and for now we're going to hard code some images for our recipes which is I'm going to get from https clone forward slash is spawn A spoonic Healer bonacular .com let me check that if I didn't make any spelling mistake so that sounds good.com forward slash recipe images forward slash for example we just put some random number one two three four five and then just say Dash 312 multiply by just adding it x 2 3 1 dot jpg so you can see the image now it's just a random image I just can change this render for example I just change this 4 to 2 we get a different image okay so now we have the image and the alternative will for this one is going to be recipe number one okay so I'm going to do the hard-coded image first and then we're going to just use JavaScript to randomly get these information from the espionicular API and show it each time uh 10 10 of these recipes so for now I'm gonna hard code it because we want to install it later using CSS we need some data and then I want to have some h2 tag saying recipe one after that we're going to have a paragraph and inside this paragraph we're going to have a strong tag a strong tag is actually makes it kind of bold so I'm gonna say ingredients okay ingredients as you can see and then double clone and after that we're going to have our ingredients after the strong tag which is going to be ingredient for example ingredient one two three like this so later is going to be real ingredient like the final version you see ingredients one ingredients are real ingredients and a real title but now we just hard code something so we can style it using CSS after that we're going to have an anchor tag which is not going anywhere now but inside is going to say review recipe okay so that's it for the first item we can just copy this one two more times and then just change the things using alt shift Arrow done I can copy it two more times and just change the images for example the uh this is the first one the second one is going to just change this number to something else you get a different image recipe two recipe two and ingredients can be the same and then for the third one we get the different number to get a different image recipe three recipe three and then that's it so we have now three samples for our HTML tag so we can start assigning this one in the next section using CSS and then we may we make it like the final version responsive and then looks like this so I'm going to work we're going to work on the CSS in the next section we make the website responsive like this so see in the next section for the CSS part of the project all right in the last section we have completed the HTML part of the project in this section we're going to work on the CSS and install the project like the one in the final version we're going to have a header with a different background color and also we have items different items with the Box Shadow which each item has a different length like ingredients is longer then we have an image and on the left side and also we have a hovering effect for the button the first things we need to do is to create a CSS file inside our project so we go back to our code and we can open the Explorer section using Contour shift e and here we can click on this icon to create a new file and we can call it a style dot CFS the file is created but it is completely empty and also before using it we need to add a link to this file within the HTML code so we need to come back to HTML file and at the top under the title tag we need to add a link tag and the link tag is going to be a relationship between the HTML file and the style the CSS and the href attribute is the address of the file and in this case it's installed at CSS because their files are located at the same directory so now we can start styling our project let's bring the visual Studio's code on the left side and our website on the right side so we can call it and see it on the real time first we start with the body section I want to remove the default margin and let's create set the margin to zero and also padding to zero because we have a default margin and padding now let's change the font family I want the font family to be Ariel but if the aerial is not available we want to use send serif should be aerial okay as you can see the font is changed and we can just use it like that after the body section we're going to work on the header if you look at the final version you can see that we have a header and inside the header we have H1 tag so we just Target the header first and we change the background color now let's accept these things actually these are these suggestions are coming from GitHub Copilot as you can see we got this suggestion and they brought it in the center and also add some padding of 20 pixels around the element and bring it to the center using text align Center but let's change the background color to zero C 2 4 61. and after the header we just let's target the H1 tag I want to make the max width sorry the margin I want to set the margin to zero and also I want to set the font size to 36 pixels okay so this one looks okay now let's just install this container we have a container in the HTML file that is covering everything there is a container here as you can see which if you look at the final version it has a maximum width so it never goes more than that also it's different has a different behavior in different sizes so now we just Target that container here we just say dots container and the one of the things I want to do the margin is fine I want to make the margin 0 and left and right to be Auto and also I want to set the max width to be 1200 pixels so this way it's always going to be in the Middle with this much size in the left and right and then let's add some padding of 20 pixels so push everything inside for 20 pixels after that we're going to Target the recipe list this one UL tag it has an ID let's see yeah it has an ID we can add a class name too you can add a class of recipe list so we can Target this one using dot residue list and this is going to first thing first I want to remove the list Style because we have a DOT here as you can see dot dot dot if you want to set it to be none so we remove these dots and we set the margin and padding to zero so we don't have any space around it and now let's install the Li inside it this Li which is the recipe item so we can Target the recipe item recipe Dash item so what we want to do here we want to set the display to flex so bring everything next to each other like this and then we want to bring them to the center using align item Center this is going to bring them in the center vertically and then we want to add a space between them so we just say justify content a space between and let's add some margin at the bottom margin bottom this is going to be 20 pixels and then let's add some box shadow the Box Shadow we want to add some Shadow effect 0 for the x x 2 pixels for the Y set 5 pixels for blurness and we use rgba to have some Shadow effect like this rgba stands for red green blue and Alpha so for the red we said 0 0 for green for blue zero and we just set 20 percent uh transparency for the black color because zero zero zero gives us black and then we just add this kind of Shadow now we can now we have the shadow let's add some border radius for example 5 pixels and in order to see the effects of the Border radius in the corners we can just remove the Overflow and we just set the Overflow to Hidden as you can see now the image has the corner as well okay so that was it for the recipe item now we want to install the image inside it so we just say recipe item image as you can see we got the suggestion so we're gonna make the image a smaller instead of 100 I want to make it 150 and then object thick cover is going to make a stretch the image so you can be always at this same aspect ratio and after that we're going to install this h2 tag the recipe one recipe two so we're going to just Target the recipe item H2 and here we're going to remove the margin this is fine so margin 0 we set the font size to be 20 pixels and then we add some 10 pixels padding so as you can see and also we want to set the mean width to sorry mean width minimum width to be 200 pixels so add some space you know in case we have a longer recipe name and then we're going to Target the paragraphs that we have so it's just a DOT recipe item paragraph so we remove the margin we said something as you can see 10 pixels padding we set the font size to be 16 we don't need it because 16 is the default font size and the color is this color uh we can remove the color too but it looks good too we can just keep the color okay and then the finally we want to Target the anchor type this tag the button so let's accept the suggestions see there and what we can do with that so the background color is good we have a color of white we have some padding 10 pixels and 20 pixels for the left and right instead of this we can just add a minimal width so we can just say minimum width and we set this Stone to be for example 150 pixels and we set the padding of 10 pixels as well it looks like that and uh we have used the text decoration none to remove some underline effect text ref which make it the uppercase we set the font side to be 14 and also we have added a transition on the background color that we haven't applied here so we need to add the hover effect so hover effect is going to change the color of this background for example we make it a different color of one e 3 7 99 which is a brighter color and also the the color is already white we don't need it this transition is going to add some smooth effect on this changing color okay so now we have this one it looks like this in the big size but we want to make this one responsive on this smaller size this was for the largest screen now we want to Target the a smaller size so we need to add a middle query which is going to Target the size is like the less than 768 pixels and for the recipe item we want to change the flex direction to column or we can just change the Flex wrap to wrap this is going to bring everything based on the size on top of each other as you can see so the bigger size we have they go on top of each other but we can use the Phoenix Direction column this is going to bring everything on top of each other no matter of the size of the screen it's up to you you can use different methods I think we have an extra remove it so after the recipe item let's target the image we want to set the image the width to be hundred percent and height to be I set it to be Auto actually it's nicer it's bigger and then we set some margin bottom of 10 pixels okay then after the image we're going to set the h2 tag we set the font size to be 20 pixels padding of 0 and this adds some margin at the bottom of 10 pixels finally let's style the paragraph which is going to have margin bottom of 10 pixels then font size to be 14 pixels and the anchor tag is going to have a width of 100 so that this one is going to be 100 percent and in order to bring this text to the center and we can just we can remove the margin butter and then we can use ticks align Center to bring the text in the center like this but for the for example title we can just set the text align instead of Center we just say a start let's see I think it's already a start but it has some weird heading actually let's see the final version so yeah let's get apply this one to The Container too so for the container I want to set the max width to be 90 percent okay so this is going to add some 10 percent left and right the reason you see these recipes because the title actually it has the because it's a small title it looks like this if you the title is a real title you can see it completely come to the left side so let's con complete this website using JavaScript if we see any problem with the CSS we can come back and fix it but for now this one looks good then this is a small size the big size looks like this as you can see the transition between the small and big size okay so that was it for styling the project using CSS we have a style at first for the big size and then for the mobile size we have added a media query and set it the maximum width to be 768 pixels and then based on that we have just a style everything based on the mobile size that we prefer so that was it for the CSS section in the next section we're going to work on the JavaScript part and we're going to fetch data from an API called I think it's called espany nucular something like that I'm I'm going to teach you how to get the API key from this website and get the information and show it inside the website based on that I'm gonna and and then this is going to be random and each time you refresh the page you sit and you get different element and also you're gonna learn how to create an element how to add the element to another element using JavaScript so see in the next section for the JavaScript part of the project all right in the last section we have completed the CSS part of the project in this section we're going to work on the JavaScript part and add functionality to the website and get the real data instead of these hard-coded values that we have created inside the index.html file so the first thing we need to do is to create a Javascript file inside our project so we go back to visual studio code and we can open the Explorer section using Ctrl shift e and here we can just create a new file and we call it index .js and we need to add a link to this file within the HTML code so we need to come back to index.html and just at the end of the body tag we need to add a script tag with the address of index.js because both files are located at the same three same directory we have put the SRC index.js and also we have put it in script tag at the end of the body tag because we need all elements of the HTML to be loaded first and then we add functionality to them so the first things we need to do is to create and initialize a function so we're going to create a function and we call it init and we're going to call this function here so once the person come to the website this is going to trigger this function and this is going to fetch new data from the API so here we're going to create a constant and we call it recipe recipes and this is going to be equal to weight because we want to wait for the result and then show it so we just say get recipes we create a call a function called get recipes and as we are using a weight we need to change this function to asynchronous which means that this part is going to be weighted and then we go to the next slide and then now we have to create this function which is going to be asynchronous as well because we need to use asynx here too so a synchronous function called get recipes which is going to get the information from the API so what's the API view we want to use it there is a website called spoonicular spool necular you just search a spoonicular on the Google and in the search results you see a website called espunicular and this is a food API and resid API we need to sign up for the API to get the API key so I'm just gonna go and start now just create an email enter your email I'm going to enter my email create a password for it and then by checking the their terms of service we can just sign up so we now we got sign up to this website we can just go to and uh we need to confirm our email so we go to Gmail I think came here to the promotion you just click here to confirm your account so the now it's confirmed I just need to put my email again and go to the website okay so after logging in we go to our dashboard as you can see and then here we see that we have our profile here and then we can get our API key here inside the profile so we can just generate a new one and we can click here we just copy this API key and we go back to our website and here at the top I'm gonna create a new constant calls API underline key uppercase and this is going to be equal to that API key that we have copied we just need to put it inside a double quote now we can just fetch the data from this API we just say const response we create a response constant response and this is going to be equal to a weight because we need to wait for the result and we need to use a method called Fetch and inside this fish we are going to put our API URL which is going to be as follows HTTP s clone forward slash API thus is pull nicular .com forward slash recipes and then forward slash random because we want to get the random result and the number of things we want to get so you add a question mark number equals 10 we want to get 10 results and then here we can just add our API key we just add it and here first is a question mark the first query and then we have the second query which is API t which is equal to the API key that we have created at the top we can add a variable here using dollar sign and instead of curly braces and just write down API key and you need to use it back take here instead of single code this is backtick back this backtick is located on the top of the Tab Key so once you create the fetch data we can just get the data we just create a constant called data and this is going to await and we just convert this response to Json file so we can use it in our website so we just say Json Json is a method JavaScript method to convert uh a string to Json and then now we can return the response data dot response is a risk recipes so we'll we're going to get the data and the recipes is inside this array called recipes so if we now console log this recipes here so we just go here and console log recipes and then if you go to our website let's close these things we don't need them anymore and open the console using F12 let's refresh the page as you can see we got 10 results here and each of them they have kind of information we let's review what they have for example they have ingredients so we need for our ingredient part we have an image for example if I copy this image and put it here we see the image so each recipe has an image it has a source so if you go for example to disk Source this is going to get the full information about the recipe if it's weekend vegetarian and everything else you can see the uh for example this is a vegetarian and so we're gonna use this kind of information to fill our website the recipe name We're Gonna Fill the ingredients also we want to uh fill the website URL so when we click on it we go to that particular website so instead of console logging we're going to display the recipe so I'm going to create a function I call it display recipe and I'm going to pass this recipe data as an input of this function and let's create that function at the top now this function doesn't need to be asynchronous because it doesn't have any weight inside it so I'm going to create the function call it display recipes we get the input which is recipes and here we're going to create if you remember we have we have our recipe list UI which includes recipe item we want to fill this recipe list with a new list and each of them is going to be one of the recipes we get from this API so first the recipe list which we can get using a method called get element by ID so because it has ID of recipe list we can just go here and just create a constant and we call it recipe list element and this is going to be equal to document because we want to Target all the document all the browser and we use a method called get element by ID and the ID we want to get is recipe Dash list so we have this element first we make it first we make it empty so we just say recipe Place element dot enter HTML is going to be an empty string so if you go to our website now it's completely empty because it's an empty string after calling that function but we want to fill it with something else so this recipe that we get it's not only one it's 10 recipes so we can use for each method to get to get each of them so we use for each method for each method is going to gives us each recipe so this is a singular recipes recipe and then when we have each recipe we're going to create the elements the LI elements so we just say recipe item elements this is going to be equal to documents dot create this type we use create element and the elements we want to create is Li so we created like this so we we create this a line element but we want to add this class to a two the class of recipe item so what we do here we just say this element that is created let's add a class list to it we just say classlist dot add and then we add the recipe itself name as a class list and when we created this we can add it to this recipe list elements okay so here at the end we just say recipe list element dot append child and the child you want to append is this recipe item element here so this is going to add this Li with this class to this recipe list but this is completely empty we don't have anything else we have to add the image we have to add the other things as well so the first things I want to add so you can see the results is the image so after that we're going to create the recipe image element let's create it using the same method document dot create element and instead of Li we want to create IMG an image tag then we want to add the source to it if you remember in HTML we have the image and then we have the SRC it's which is the source first we hard coded a value but we want to give put it a real value which is coming from the API and each of them the recipe Dot image it has a recipe.image so now we have created this SRC we have created this image we have created its SRC let's add the also the alt value alternative text and this is just for now we just say recipe image later we can make it dynamic and then now we want to add this one to this Li we added to this Li element which is going to be added finally to the list which is a UL so let's add this recipe let's copy this and we use a pen child method sorry we have to append child to this one to this Li which is recipe item element we want to append the child of this recipe image elements so we use this recipe image element we have created that we had we have added the SRC we have added the old tag now we have added that one to the recipe item element which is the LI tag and then after that we have added the LI tag to the this UL tag so now let's see what's we see what's this error let me check uh there is a splitting mistake here recipe image element it looks okay for me that's fine let's check the website now we got the image of 10 10 of them you have added that so if you refresh the page each time we get 10 new elements okay 10 new images because keep going good at random images so we have created the image part we just can continue doing the same things for the ingredients we can do it for the title and also for the link so it is going to be very similar so I highly recommend you pause the video and do the rest of the projects yourself because you already know how to do it otherwise you just just keep watching the video I'm gonna do all of them now okay so let's create the next element which is going to be recipe title element and this is going to be document Dot create element and we're going to create an element of h2 tag so this element is going to be H2 and inside it this is going to be the we just if we want to change its inner you can just say in a text we got to change the text inside it to be recipe dot title okay and then we want to append it to so we're going to copy this one and I'll append this title as well to this a recipe item now we see the title 2 okay so we have the title we have the image and if you refresh the page each time we get a new title and image okay next we wanted to the ingredients ingredient it's a bit different because ingredients it's not one it's an array of ingredients so we need to map through the ingredients and then connect them together so we just say ingredient element ingredients element because plural and this is going to be equal to documents dot create element and the elements we want to create is a paragraph now we want to change its inner HTML so we just say recipe ingredient in e l dot inner HTML is going to be equal to 2 because we want to make it Dynamic we add a backtick and inside the back tick we're going to have if you remember we had a strong tag for the title we just say strong big inside we're gonna say ingredient s equal let's close this drone tag and then we're going to have the dynamic variable using dollar sign and a set of curly braces and all the ingredients is inside the recipe Dot extended extended ingredients so just make sure you don't make a spelling mistake ingredients and then as I mentioned before because it's not only one ingredient we need to map through it so we just say dot map you cannot use for each method because for each method does not retain an array but map method retains an array so we get each ingredient here and each ingredient inside it is inside ingredients dot original now that we got the tree together it's an array so we can just connect them together so when we get all of them we can just connect them together using dot join but we want to join them by comma and a space so if we now we have created this element let's add it here as a child so I'm going to paste this one here too so if we refresh the page so we are getting an error probably we made some spelling mistake so I'm gonna check again so this is going to be recipe dot extended in Gray tiens so that one looks good ingredients and then we just map to it we got each ingredient and this is going to be ingredient Dot original that is fine uh and then we join them together with uh this one and also we have closed this okay so let's check the error here let's call open the console SFS the page cannot read the value on the file okay so let me remove this one for now they say the real the error is related to that one or something else that's a fish now we are getting that error I think I'm I got the I'm getting the 402 error I think it's too much request error so let me check okay so let me pause the video I changed my API key and then I'm gonna do it again because I have requested too many times so we're gonna block me for a while so it happens sometimes so you need to just change your API key or something like that all right so I have changed my API key now it's working so what we do now is going to we let's remove these comments so we can test the ingredients as well so now we are getting the ingredients too as you can see first of the solve the recipes they don't have an image so it's gonna mess up but now we have the ingredients so it's working now if it happens to you again you can create another account or you can wait for another day because they have a limit of API requests daily so you can just to try it another day but because I'm teaching now we are refresh too much it happens to me but if you do it one time never happens all right so let's keep continue I'm just gonna finish the project by adding the anchor tag to so we just create we can create another document so let's copy this so let's create the last one which is recipe a link element which is going to be equal to document.createelement and this is going to be an anchor tag and finally we have we're gonna add the href for this anchor tag which is going to be equal to recipe Dot source you URL and also we want to have the text inside it which is going to be dot inner text which is going to say View recipe okay and then we're going to add it to this item so I'm going to copy this one and put it here as a child of the item so now we have this I icon it's this button too so if you click on it this is going to show you let me find a website okay let's refresh the page I want to find a good thought to show you okay most of them is from this website for this star for example the first one the 10 minutes brownie you can just click on the on it and goat for it so the links are broken but it is gonna work anyway so it's fine so you can you can see the link actually here at the bottom each of them has a different link all right so we have created this website let's now when you could finish your uh JavaScript you can just delete it all the hard-coded values for example this from here we can remove all these lists so I'm gonna just keep it for your reference so I'm gonna just uh use Contour forward slash to comment it so now each time you come you don't see anything else you just see an ingredient okay so that was it for our project I hope you enjoyed and learned many things we have work and learn how to get grab some data from an API like the spoonicular website and also we have learned how to create an element how to add an element as a child of another element and also we have learned how to initialize a website create a function and call another function inside another one so here let's review what we have done we have got the API key and also we have created the elements here first we have created the LI element and we have added a class list to it and then we have created an image element we have added the SRC and all alternative text we have created an H2 tag a paragraph and also an anchor tag and finally we have added all of them to this recipe element recipe item and finally we have added the item to the UL which is a recipe list element and also we have learned how to fetch data using the fetch method so that was it for our project I hope you enjoyed see you in the next project thank you welcome back to another project in this project we are going to create a tip calculator as you can see from the final version of the project we have a container here with the title tip calculator then we have two inputs including the bill amount and the tip percentage for example we can choose hundred dollar bill amount and the tip percentage of 20 percent and if you click on the calculate this is going to calculate the total number of amount that the customer should pay to that store for example so as you can see we have designed this calculator tip calculator using CSS in a modern design then we have used JavaScript to get these two elements the value of these two inputs and calculate the total amount based on these inputs and also we're going to add some event listener to this button to trigger function which is going to calculate these amounts in the next section we're going to start with the HTML part of the project so see in the next section all right let's start our project in this section we're going to work on the HTML part of the project as you can see we have put the final version here for our comparison as you can see there is a container in the middle with the title tip calculator then we have two inputs one is build amount one is tip percentage and finally we have a button to calculate this the first things we need to do is to create a folder and we're going to open this folder inside the visual studio code so I'm going to create a new folder I'm going to call it the name of our project which is tip Dash calculator and once we have created this folder we can just open it inside the visual studio code by right click and click on open with code so now we have this folder as a default folder of the Explorer section of Visual Studio code as you can see tab calculator let's close the welcome Tab and here we just create a new file and we call it index .html and once we have created the HTML file now we need to just create the HTML5 boilerplate which we can achieve by just adding an exclamation mark if you have activated your emit abbreviation you you should see this suggestion and if you press on Tab you're gonna get the HTML5 boilerplate let me explain this one real quick we have here DOT type which is which tells the browser which version of HTML we are using as we are using HTML5 we just need to have HTML here in the opening tag then we have the HTML tag which covers the hit and the body section the opening a tag of the HTML has a link attribute which defines the language of the page and as we are using English which we just need to reply write down en for the language which is stands for English then we have the hit tag which covers the metadata tag and also the title tag the metadata tags the first one relates to the chart set attribute and for HTML5 utf-8 is recommended because it nearly contains all the characters and symbols then we have the compatibility metadata tag which tells the Internet Explorer browser to use the most recent rendering engine which is Edge then we have the viewport metadata tag which sets the width of the screen without the browser to devices with for example the person who is using mobile will have a smaller browser with than the person who is using desktop or tablet and here the initial skill is is the initial zoom level of the browser which is said to be 100 percent by default and after that we have the title document so let's open the visual let's open this website inside the browser using the extension that we have installed and which is called live server so if you click on this go live this is going to open it inside the visual inside the browser the default browser which is in my case Google Chrome and you can see that it is open in the port 5500 and the file is called index.html and then the title is document let's bring the website to the right side and the visual city code on the left side and let's change this title to the name of our project which is tab calculator as you can see now the title is changed to tip tag calculator after that we're going to have uh inside the body section we're going to have a container which is going to cover everything so I'm going to add a div with a class of container by just writing down DOT container and if you press enter we're going to create a div with a class of container and here we're going to have an H1 tag saying tip calculator after the H1 chat as you can see we're going to have a paragraph and inside the paragraph we're going to say enter the bill amount and tip percentage to calculate the total after the paragraph we're going to have two inputs and each input is going to have a label so I'm going to add a label and this is going to be for the bill so we just say four Bill and then the name inside the label we're going to say build amount after that we're going to have a input with the type of numbers so just say type number and this input as you can see we can now change this value inside the input after that we're going to have a line break we just say br we add a line break this is should be like that and then we're going to have another label and this label is going to be for the tip which is going to say tip percentage and this is going to be number as well the input with the type of number so in order to distinguish between these inputs you know later using JavaScript I'm going to add an ID for the first one and then call it build and for the second one I'm gonna add an ID saying tip and then after the inputs this second input I'm gonna add another line break and then we're going to add the button so we're going to have a button with the ID of calculation so I'm going to add a hashtag for the ID we just say calculate and we press enter this is going to create a button with the idea of calculate and inside the button we're going to say just calculate so we see the button now after the button we're going to have another line break so I'm going to copy this and after the blood here we're going to have another label for the total say total and this is going to be an span not an input because we don't want to change its value and is this is going to just have an ID of total okay yeah that was it for the HTML tough part of the project as you can see we have just added the H1 tag here paragraph two inputs with the labels and a calculator calculate button and finally another label for total in the next section we're going to work on the CSS part of the project and we're going to style it like the one in the final version with this beautiful modern design with the Box shadow and we're gonna create these beautiful hovering effect for the button so see in the next section for the CSS part of the project all right in the last section we have completed the HTML parts of the project in this section we're going to start the project using CSS the first thing we need to do is to create a CSS file here so I'm going to create a new file here by opening the Explorer section using Ctrl shift e and here we can click on this icon to create a new file called C style dot CSS before using the CSS file we need to add a link to this file within the HTML code so we need to come back to index.html and inside the hit tag at the end of the title type we're going to add a link tag we just write down link and they click on the one with the CSS this is going to create a link tag with the relationship between the HTML file and the CSS style sheet and the address is installed CSS because the the both files are located at the same directory so now we can install our project first we start with the set the body style be just if because we want to start some inputs when you have an input you need to add this at the top of your CSS which is box sizing border box this is going to help you to style the boxes like inputs better because this is going to calculate the extra orders and the space around this input after that we're going to Target the body section and gonna change the background color to something like light gray which is fifth two F two F2 as you can see the color is changed so the CSS file is working and after that we're going to change the font family to something called hella heavy Tikka helvetica and if this font is not available I'm gonna use send serif instead okay so we have just installed the body section now we're going to start with the container this container this div with a class of container which is going to be in all sections so if you see the final version this is the container we have so for the container because it has a class of container we can Target that one using dots container we opened a set of Kelly Graces first thing first we're going to change its background color to white okay and then we're going to set a maximum width of 600 pixels as you can see it's smaller now but it's not in the center so what I want to do here is to create a margin so I'll just say margin 100 pixels top and bottom and left and right to be Auto so is this is going to have an equal margin to the left and right and if you remove the zoom level now because it has 200 level percent Zoom so if you remove it this you can see the box is this size and then we're going to have some padding which is a space inside and around the elements inside this container which is going to be 20 pixels and let's add some box shadow so let's add some Shadow effect so 0 and 0 for X and Y but 10 pixels for blurness so you can see we get the bolognes in all Direction and let's change the color of the Shadow to be our and rgba which is the red green blue and Alpha and here we set the rate to be zero green zero blue zero which is stands for black and for the alpha I'm gonna set it to be 0.2 which is 20 percent transparency as you can see the Shadow and now we're gonna change the Border radius add some border around the corners of 10 pixels okay looks fine in the mobile size we have some larging 2 that is nice and that's it for the container next things we want to style is this H1 tag which is saying tip calculator so I'm gonna go outside this container I'm gonna Target the H1 tag here and then let's add the margin top of zero we remove the margin at the top connected to the wall and we bring it to the center using text align Center that's it that's it for the what H1 the next things we want to style is the input these two inputs here so we're going to Target these two inputs by just saying input so let's add some padding padding of 10 pixels then we're going to have a border of 1 pixels solid which is going to be a line and then the color would be CCC which is a kind of gray color after that let's add some border radius and we set it to be 4 pixels so make it rounded in the corner and then let's add some margin of 10 pixels up and down and 0 for left and right and so and then I want it to be in the all Direction all the screens so I'm going to set the width to be 100 percents okay as you can see we have two beautiful inputs you can change the numbers okay and then the the next things we want to style the button is this button we're going to Target the button simply by just saying button so let's change its background color we just say background and the color I want to use is four c a f ifty and then let's change the color of the text to be white we also want to add some padding of 10 pixels let's remove the border so we set the border to be none and let's make the cursor to be pointers so when we hover over it we see a pointing hand in the mouse effect and then we're going to have some margin top and bottom 10 pixels and 0 for left and right and we set the width to be 100 percent like this so we have all I have added everything now so we can just make the text bigger for example you can just change the font size to be 18. pixels and then we can just make it uppercase for example just say it takes transform to be uppercase okay that's it for the button the other things you want to add to the button is when I hover over it I want to see the color to be different so I'm going to add a pseudo effect of our suit effect so we just say hover and for the hover effect I want to change its background color this time to 45 0 49 45 a 0 49. this color so and if you want it to be smooth you can just add a transfer transition for the background color so just copy this and then we just added 0.3 seconds bit ease effect you can see a little bit smoother okay point two would be enough and the last things we wanna install is this total the total amount and we're gonna Target that because the total is inside an experiment the idea of total we can Target that one using this ID of total we just want to change the font size to be 24 pixels and font weights to be bold and finally we set some margin top of 10 pixels okay you cannot see the ads we need to add some values here for example I just say thousand we see the value here that's bold okay so I'm gonna delete this one because late in the next section based on the input we're going to calculate the total amount using JavaScript so we're going to first thing first we want to get the value of these two inputs and then when we click on the button we're going to calculate the total amount and show it inside this span all using JavaScript so see you in the next section for the JavaScript part of the project all right in the last section we have completed the CSS part of the project in this section we're going to work on the JavaScript and add functionality to the to the project and just make it work with the inputs and show it inside the total like the one in the final version for example here if you choose thousand dollar bill with 20 percent tip the total is going to be 1200. so the first things we need to do is to create a Javascript file so I'm going to open the Explorer section using Ctrl shift e and here I'm gonna write down index.js to create a Javascript file before using the Javascript file we need to add a link to this file inside the HTML code it should be inside the body section and at the end of the body section because we all the contents need to be loaded first and then we're gonna manipulate it using JavaScript so I'm gonna add a script tag I'll just write down scn I'm going to click on the second author suggestion the one with the SRC and the SRC which is the source address is index.js because both files are at the same directory so now let's close the Explorer section the first things we need to do is to add an event listener to this button with the idea of calculate so here I'm going to bring in bringing the button I'm just gonna call it BTN element and we're going to Target that one inside the document because we want to Target all the browser and then we're gonna use a method called get element by ID I'm gonna pass the ID which is calculate now we have this element we can just add the events listener to it so we're just gonna Target this BTN element we can have and we add and add event listener to it and the events we want to listen is Click so when we click on it we want to trigger a function and we can just create the function here or we can just call the function for example we're gonna call the function a calculate total and then I'm gonna call create the function here so I'm going to create the function I'm going to call it calculate total so for now we just console log for example we're just going to log clicked so let's open the console using F12 we go to console let's clear the console and now they think if I click on calculate this is going to console log clicked because so this is working after testing the function to be working instead of just console logging we're going to get the value of this elements like Bill amounts tip percentage first we need to bring these elements so they are inside an input the first input is this input for the bill it has an ID of bill so I'm gonna go to the JavaScript and then I'm gonna create a constant and then first I want to call it build input and this is going to be equal to similar document that get element by ID but the ID is Bill a bit so we can copy this one and make it for the tip two so it's just a tip and the ID is tip so we have access to these two inputs now we can just get their value so I'm just gonna say cons bill value this is going to be equal to this bill input and we target its value so now if I console log if a console load can build value and if I open the console again using F12 I just change the value here for example I just say 2000 something if I click on calculate we can get the value of this bill here so whatever value we have for example 32 calculate we get 32 because we are constantly logging the value of the bill let's do the same things for the tip so I'm going to change this build using Ctrl d to tip so we get the value of the tip as well now we can calculate the total we just say total value is going to be equal to this formula we're just gonna multiply this build value 2 1 plus tip value divided by hundred so whatever the tip value is we divide it by 100 and we add 1 to it and then we multiply it to build value so now if we console log total value for example we have a hundred dollar bill with 20 percent tip the total is going to be 120 so let's test it so if we calculate as you can see the total value is 120 If the percentage is 10 this is going to be 110. but as you can see we are getting some weird numbers this is the JavaScript problem but we can fix this one as well because this is the base on the binary values so now instead of console logging I'm gonna bring the input as well this total at the top I'm gonna bring the total so I'm going to copy this one I want to change this to total expand and then this is going to be total so now we have access to this element so instead of just console logging we can change the total expand inner ticks to be equal to this total value okay so now if we changed for example just say 100 and we just say 20 percent the total is 120 if it's 10 this is going to be 110 but some values here so we can fix this one we just add uh a method called to fixed okay to fixed and then we just fix it to two digits maximum so I'm gonna say again hundred ten this is going to show it like this under 10 and 0 for example since if you do it for example 2.5 percent this is going to be 102.50 all right so that was it for our project I hope you enjoyed and learned many things we have learn how to bring the elements how to add an event listener to it and how to calculate the value based on the inputs and how to print the value inside the output which is our total span so see you in the next project welcome back to another project in this project we are going to create an age calculator as you can see from the final version of the project we have a container here with the title age calculator with an input of a date for example if you click on here we can choose the date of our birthday for example I choose something in in 2022 and if you click now on calculate age you can see the age is calculated based on this date and saying your age is 21 years old what we want to do next firstly we want to create the HTML part of the project and then we're going to work on the CSS and make this modern design and finally using JavaScript we're going to dynamically create this Age based on the input that the user provides so see you in the next section for the HTML part of the project all right let's start our project in this section we're going to work on the HTML part of the project I also put the final version here for our comparison so we can we know what to do in each step so the first things we need to do is to create a folder inside your computer for in my case I want to create it inside my desktop so I'm going to create a folder I'm going to call the folder the name of our project which is age calculator once you created this folder you can just right click and click on open with code to open it with your Visual Studio code and here you can close the welcome Tab and as you can see the age calculator folder is the default folder now for our Visual Studio code now we can just click here on this icon to create a new file or we can right click and click on new file and we call the file index.html so we have an empty file here we can just use an exclamation mark to have an HTML5 boilerplate so now as you can see we have doctype which tells the browser which version of HTML we are using as we are using HTML5 we just need to have HTML here then we have the HTML tag which has the Lang attribute which states the language of the page to English in our case then we have the hit tag which has the metadata tags and also the title tag the first metadata Tag sets the charts attribute and it is recommended to be utf-8 by HTML5 because UCL f8 actually contains all the characters and symbols so the users won't have any problem seeing our website characters and symbols then we have the compatibility metadata tag which spills the Internet Explorer browser to to use the most recent rendering engine which is Microsoft Edge the next metadata tag is the viewport which sets the browser's width to devices with for example if you're using mobile screen the the width of the browser would be smaller than if you're using desktop or tablet for example and here the initial scale is the initial zoom level of the browser which is said to be 100 percent then we have the title which is document in order to see this inside the browser we can use the extension live server if you haven't installed it you just open the extension using Ctrl shift X and just search for live server and this is the extension you need to install you just click on it and click on install I have already installed it so I have it in my browser then we just click here and go live to open it inside the browser this is going to open it inside it your default browser which is in my case is called Google Chrome now let's bring the website on the left the right side and the visual studio code on the left side so you can see the changes in real time you can see the title is document we can change the title now to age calculator and you can see that it's changing because I have enabled my auto save so anytime I type something this is going to and save it and here show it simultaneously inside the browser after that we're going to go inside the body section and we add a container for example in the final version we have a container here which has a pair of white background but the body is a gray so we're gonna have this container by adding a div with the class of container so if you just write down that container this is going to suggest you a div with a class of container if you press tab or enter you're gonna accept that suggestion after that we have an H1 tag saying h calculator and after that I don't know we're going to have a div with a class of form and inside is there we're going to have a label like this enter your date of birth and then we have an input and finally we have a bottle so we're going to have a label and this is going to be for the birthday and the labor is going to say enter your date of birth after the label we're going to have the inputs but the type of the input is going to be date so this is going to change the date so you can just click here and change the date as you can see this is the HTML input with the type of date and for the input you're going to have an ID of birthday and also we're gonna have a name of birthday okay so we have the input and finally we're going to have a paragraph with the idea of results which is going to show the results for us for example we just for now we just hard code your age is for example 21 years olds okay so now we have just hard coded these things but later we're going to use JavaScript to calculate the Age based on the birth birthday and then we're going to next in the next section we're going to style it and make it like the final version with the container in the center with the hovering effect for the button and also we're going to bring them on top of each other like this so that was it for the HTML parts of the project in the next section we're going to work on the CSS part so see in the next section all right in the last section we have completed the HTML part of the project in this section we're going to install the project using CSS so we're going to design it like the final version we're going to create the container and bring it to the center so the first things we need to do is to create a CSS file so I'm going to open the my Explorer section using Ctrl shift e and here we create a new file and we call it a style dot CSS before using the CSS file we need to add a link to the CSS file within the HTML code so we need to go to the Head tag and just put it somewhere in the head tag for example I put it at the end of the head tag after the title tag I just write down link and I click on the third Auto suggestion the one with the CSS which is going to give me a link sack with the relationship between the HTML file and the CSS style sheet with the address installed at CSS for the href so now we can just start styling our project using CSS first we start with the body section first I remove the dissolve margin I set it to P0 so this is going to remove the default margin then they add some padding of 20 pixels which is gonna have some space let's change the font family to Mont syrup we need to put this one at Double quote and if this font is not available we're gonna use sand serif instead so now we're going to change the background color I'm going to change the background color to a light gray which is f 7 F7 F7 so we have done with the body section now we just let's start a styling this container this divided class of containers I'm gonna just write down DOT container to Target that here inside the CSS and I just want to change the background color to white you can just write down white or FFF let's say let's add some box shadow zero zero for the X and Y and 20 pixels for the of the I think 10 pixel would be nicer 10 pixels blurness and then we can use rgba which stands for read sorry red green blue and Alpha and we can just choose zero for red blue four zero for green and blue for black color and for the alpha I just choose 0.2 which is 20 percent transparency now we can see the Box Shadow here then let's add some padding of 20 pixels to add some space inside it let's remove the zoom level so you can see the real sizing and then we're going to have if we open it now you can see this is all size I'm gonna set the maximum width to be 600 pixels which is this side and then from bringing it to the center I want to add margin of zero for top and bottom and Auto for left and right which is going to bring it to the center like this and in the small size still we have the space because we have 20 pixels padding in the body section so that's it for the container uh before we forget in the container I want to add some border radius as well so I'm going to add a border radius of 5 pixels which is going to add a rounded corner for the container after that we're going to style the H1 tag here The Heading which is saying age calculator so we just say H1 so I'm going to change the font size to be 36 pixels so I don't know what happened to here we can use text align Center to bring it to the center and then we can just remove the margin top to zero as we add some margin bottom of 20 pixels okay that was it for the H1 tag the next things we want to style is this form this div with the class of form so we can Target that one just saying dot form we can change the display to flex to bring everything first next to each other and then we can change the flex direction to column to bring them on top of each other like this and then we can use align item Center to align them and bring them to the center like that after the form we're going to Target this label we have this label here so we can Target that one here by just saying label and then we just change the font weights to be bold and we just add some margin at the bottom of 20 pixels for example or 10 pixels okay that's it for the label and now we're going to style this input here so we can Target the input by just saying input and let's add some padding of 8 pixels so we add space around that so for the Border I just want the one pixel border to be solid it means that it's just a line and then we can use the color CCC which is kind of gray color after that we're going to we can just add a border radius of for example 5 pixels to add a rounded corner and then we can just set the width to be 100 which is going to be in the all here but I can just set the maximum width to be 300 pixels it doesn't go more than 300 pixels so if it's less than tough 300 pixel it's going to be 100 if it's more than that it's going to be 300 pixels and then uh I think that's enough for this okay so after this input we're going to style the button here I don't know I have added a button or not so we missed the button actually we have to add a button here after this input we're going to have a button and the button is going to say calculate h like this so now we can just style the button by just targeting the button and let's add some background color the background color I want to add is zero zero seven B K fifth let's change the color to be whites the the text color to be white so we can see it better and then let's remove the Border we just set the border to be none and then we can just add some padding in the top and bottom of 10 pixels and left and right to be 20 pixels and then we can just sit some border radius to be 5 pixels so we make it rounded in a corner we add some margin at the top of 10 pixels and we set the cursor to be pointer so when we hover over it we see a pointing hand and then also when we hover over the buttons so we can use the pseudo class Auber so we want to have a different background color for example six six sorry zero zero sixty two CC which is kind of darker color and also we can add some transition on the background color for example I want to have a transition of 0.3 seconds bit ease effect so you can see it is smoother and like a transition on it and finally we're going to install this result here which it's a because it's a paragraph with the idea of results we can Target that one just targeting the ID of result and then we just say margin top of 20 pixels we set the font size to be 24 pixels and then the set the font weights to be bold and also we wanna that's it I think that's enough for this one so now we have done with the we can bring this one a little bit down by adding the container some uh margin top here too margin top for example 50 pixels so this this is the website they have built as you can see we have the title we have the now we have a cell the input the button and finally the result in the next section we're going to dynamically get the data from the input that we put calculate the age and then show it inside the results section using JavaScript so see the next section for the JavaScript part of the project all right in the last section we have completed the CSS part of the project in this section we're going to create and work on the JavaScript part of the project and we're going to calculate the Age based on the birthday of the person who put the information inside this input so the first things we need to do is to create a JavaScript file so I'm going to come back to visual studio code I want to open the Explorer section using Ctrl shift key and here we create a new file and we call it index dot Js and we just need to add a link to it let me close the install.css so inside the index.html we need to add a script tag which it's going to call this Javascript file and we need to add it at the end of the body section we just write down SC we accept the script tag with the SRC of index dot JS because they both files are located at the same directory the address would be the just the name of the file the reason we put it at the end is because we want all these things to be loaded first on the browser and then we call the JavaScript because otherwise we don't have access to these elements using JavaScript so now first things first we want to add and events listener to this button they calculate age so this button so we need to bring this button here so in order to bring the path in to the here we just Target the button I can add a button we can add an ID here we just say ptn for the ID and here we just create a constant we call it BTN element and this is going to be equal to document because we want to Target all the browser and then we just use git element by ID method and we pass the name of the ID that we have passed to the button which is BTN now we have access to the element we can just add the event listener to it we just add an event listener and what is this we add an event listener to it and the events we want to listen is Click and then we go we can just call it function after this we can just call the function calculate age and then we can just create the function here we just create a function we call it calculate h just for now I'm gonna console log we're just going to look clicked so now if we just bring this website to the right side and open the console using F12 and here let me clear the console and click on calculate H you see that we are console logging clicked so instead of console logging I want to calculate the Age based on the input so first things first we want to get the input information so the input here has an idea of birthday so we can bring it here similar to here we're just gonna copy this using alt shift Arrow done I want to change this BTN to using Ctrl D I want to choose both of them and then just say birthday this is going to choose this birthday the ID and then just put the constant birthday element to it now we have access to this so here first I want to just calculate the inside what we get we just say birthday value we get the value which is going to be equal to birthday element dot value let's console log this birthday value so now if I change this one for example to four of if Grill 4th of April 2023 and then we calc click on calculate H we just get this 202344 now if you choose something else you can just choose the any for example January 13 2006 you can print it here because you're constant login so we have the we have calculated the value and then if the if nothing nothing is added as a value for example if the bath birthday value is equal to an empty string we want to just alert please enter evaluate of please enter your birthday so now there is nothing here if I click calculate H there is an alert saying please enter your birthday so we are going going to prevent calculating if there is nothing here otherwise if there is something there we're gonna calculate the age we just say const age is going to be equal to we call a function called git h and then we're just gonna pass this value okay so I'm gonna create this function let's create this function get H which is going to get the birthday value so we're going to create this function it is very simple too so we're going to first thing first we want to get the current dates to date because we want to calculate we need to subtract the birthday from the current date so the content is going to be equal to new date this is the date is the Constructor method from JavaScript this is going to get the date from the browser so if I now console log here current date let's remove this if I put something here calculate age as you can see we are getting this current date which is uh even it gives us the time too 6th of April 2023 11 o'clock and then now based on this one if you for example you want to just get the year we just say get full year if you know Council law let's choose some date so we don't get an error and then let's clear the console and then we just click on calculate H we get 2023. so this same method we can use to get the year from this birthday value so if I cancel like birthday value dot get full year and then we choose something here we don't get an error so we click on calculate h uh we should oh we need to get the this is the current date we can just get the birthday sorry birthday to we need to get it because this is we need to create a new date but we need to pass instead of the date we just need to pass the birthday value now if we just get the full year by just passing birthday date dot get full year let's test this one we get 2023 birthday but if you choose for example imagine 1985 if you just click on calculate H we get 1985. okay so now we have the year of this year current date which is here dot get full year and then also we have the birthday year so now we can just subtract that one and calculate the H so we just say pronounced H is equal to current date dot get full year minus birthday date dots get full year great now if we console log h for example I choose somewhere 1975 we get 48 years old okay but this one is actually not always correct because based on the months for example if you look at the time for example now it's April 2023 when I'm recording this video if the birthday is before the April you are actually one year older than the person who who is born after the April so we need to calculate the months as well and then we know that if the person is born after the today or before today so if it's after today we have to subtract one from the person sorry before this date he needs to subtract the time so I'm going to calculate the months too so I'm gonna say cons months and this is going to be equal so we we just we just can copy this one and instead of get full year I want to use another method which is get months okay now we have the months now we create a condition here we just say if if the months is less than zero for example if something happened and the months is less than zero because this is uh this if the current date is less than the birthday date so the month is going to be less than zero or if the months is equal to zero it means for example the current date and the birthday is both April but now we have to calculate the day so so after this condition we just say if this won't happen and if the current date dots get date which is going to give us the day is less than the birthday date dot get dates so if the month is equal to zero but the day is less than that so in both conditions of less than zero or moth equals zeroed or the day is less than we're going to decrease the age by one so we can do it by just saying H minus minus so we have the H for example 24 H minus minus is going to make it 23. so now this is going to solve the problem and then after that we're going to return the age we just say return h so this is going to be output of this function get H and we get the H here inside the calculate h so now here we can console log h so let's calculate it for example let's choose for example 2020 12. January six it's 11 years old but if the this is April after April for example May uh let's see the error oh because we want to change the age we cannot use constant we need to use lit here this should be a variable okay so now uh let's do it again Let's test 2012 it was 2012 January 6 was giving us 11. now if we choose after April for example October gives us 10 10 years old so that guy is one year younger than the person who is born before the current date so we are getting a correct age but we want to show it here inside this instead of just console logging it so instead of constant logging we're gonna get this element from the HTML so we're going to get the element here because it's a paragraph with the idea of result we can just Target that one we just create a constant we call it for example the result element which is going to be equal to document dot get element by ID and the ID is result so now we can just change its text so we just say result element Dot uh enter text is going to be equal to for example we just make a dynamic we just say your age I added the backtick backtick is located on top of the tab key so we just say your age is and then we just added dollar sign to make the variable we add the age here this variable here and then another dollar sign because it can be year or years because if a person is only one year post you should say you your age is one year old but if it's more than one we should be say your age is for example two years old so I'm gonna make a condition here we just add here we just say if the age is greater than one just to say years otherwise say year and then we add the old at the end okay so if the person is born for example last year February your age is one year old if it's uh like a longer than that for example January 1990 your age is 33 years old okay so we have accomplished this one using JavaScript so let's review what we have done so we have got the only elements using the method called get element by ID we have created an event listener here for the button if we click on it we're going to call a function called calculate age and here we just get the birthday value by just sitting birthday element dot value if the value is empty we're gonna say enter your birthday otherwise we're going to call another function called get age and pass this value and we're going to calculate the Age based on the current date and the birthday we're going to calculate the age and we got a condition if the month is less than zero or or the day is less if the month is equal to zero we're going to decrease the age by one and we're going to return the age get the H here we're going to put it put this text inside the result element using inner text and we just make a condition to always write down a correct sentences all right that was it for creating this project I hope you enjoyed and learned many things see you in the next project

Channel: JavaScript King

Views: 85,208

Keywords: Web development projects using HTML CSS and JavaScript, HTML CSS JavaScript projects for beginners, Responsive web design projects using HTML CSS JS, Building web applications with HTML CSS and JavaScript, Fun HTML CSS JS projects for web development, Creative web development projects using HTML CSS and JavaScript, Vanilla JavaScript projects for front-end web development, Building modern applications with HTML CSS JS, Web design and development projects with HTML CSS and JavaScript

Id: g6v_vbqKYeU

Length: 656min 30sec (39390 seconds)

Published: Sat Apr 08 2023