Display temperature on website javascript ?

Display temperature on website javascript ?

We’re going to create a weaver app using javascript let’s not go under fresh our page so here the page wants to know my location if I click on block then my application here will show users an ideal location and there’s no wither informations now a file fresh again and allowed this page to know my location my application here was send a request to the API and after it receives that data from the API it will show them to the user the first thing going to show is an icon then temperature and Celsius then the weather description and finally the location now if I hover over the temperature you can see that at the gives a feeling that’s clickable if I click this will convert the temperature too far on height and if I click again this will go back to Celsius now this is an easy to build application the only difficult someone can find build on this application is how to send and receive data from the API but trust me it’s really simple so I will go now and see the logic behind our application and then we can go and type in the code so let’s go so like I said before I’m not going directly to open my text editor and type in the code instead I will go and discuss the logic behind it first now for the files were going to need to build this application .

I like this the font then the icons created by Ashley then a JavaScript file called a pledge as an index dot HTML and a stylet CSS to style our application for the style we’re not going to talk about it in this tutorial for the HTML part we’re going to create a basic HTML file inside the head we’re going to create a title then we’re going to link our font and our style that says his files then inside our body tag we’re going to create a container then inside a dev with the class up title then a dev with the class notification this will be useful to show any message error to the user and then a we the container inside the way the container we have an image or an icon the icon here when we have no weather data we’re going to show the unknown that PNG image then the temperature value here are when we have a no weather data we’re going to show just a dash then the temperature description and finally location then before the closing body tag we’re going to link our up the JS file so now to display the weather to the user or what we need to do is to change the inner HTML of these elements you javascript so to change that we need first to select those elements and to select those elements we have a lot of methods one of them is using the query selector method which takes in the class name of the element we need to select and then we’ll set that against and so for example for the notification elements I’m gonna say document that query selector and that element it has discuss name notification the same for the way the icon the same for the temperature value the same for the temperature description just here I will select the paragraph inside as elements and then same for the location enemy now for the weather data so before we show the data or the weather to the user we need to store the data somewhere the best place to do that is an object so I’m gonna say Const with it and inside we have some properties like the temperature the temperature here is also an object that has these two properties the the value of the temperature and the unit then here I have a description then an icon ID and then a city and then a country so these are the properties are our weather information so we don’t have to define these properties by hand instead we will get all these informations from the API now to display the weather I said you just need to change the inner HTML of every element so like the icon element the temperature element description element and the location element so I’m going to just change their inner HTML for example for the icon element I’m gonna just go and say image search equal the icons folder a /then dot PNG so what changes is just the icon ID here to access the icon ID we’re going to say whether the icon ID the way there is our object and the property is the icon ID so simple by the way this is a template lateral this is not the same code this is a back there so for example the within the icon ID will be 0 1 D 0 1 and 0 1 2 G etcetera and also here we have 0 1 D so these stands for day and 0 1 and for night so these are the same icon the only difference is this one is shown in the day and this one is shown at night now for the temperature I’m gonna say within the temperature that value then the degree sign and also the unit for example this will return 29 degrees Celsius for the description element I will just say whether the description so for example this will turn clear sky now for the location I’m gonna say the city then a comma a space and then the country so for example London a comma then a space then Great Britain now this code here I won’t just use it for one time but instead I will use it again and again so it’s better to put this inside a function so the function is called display weather so whenever I call this function here I will update this elements or the NRH demo of these elements now when we get the temperature from the API its in Celsius it’s actually in Kelvin so we need to do some kind of a conversion so to convert the temperature from Kelvin to Celsius we need to subtract 273 from whatever we get from the API and also when the user clicks as you saw in the preview when the user clicks on the temperature if it was in saucers we convert it to Fahrenheit and if it’s in Fahrenheit we go back to Celsius so first we need to know how to convert the temperature from Celsius to Fahrenheit if we go and ask Google phone that he won’t give you a formula here so in general here is our temperature in Celsius we need to multiply it by 9/5 and then add to it 32 this is how we convert from Celsius to Fahrenheit then as we are going to use this minterms we’re going to need to put this inside the function called Celsius to Fahrenheit which takes in the temperature parameter here and then return the volume in Fahrenheit now how can we do this using code so how do we know that the user clicked on our temperature element so this temperature element here we’re gonna add to it an event listener which isn’t click so whenever the user clicks on this temperature element we will run this function what this function here does is check so we first need to check if the temperature unit is in Celsius then we need to convert the temperature value to Fahrenheit else here if the temperature unit is in Fahrenheit we need to go back to Celsius so I will go and use the function we created before which is Celsius to Fahrenheit it will taken that picture value which is sold inside our with an object then we said this to a variable called Fahrenheit now before changing the value here to phone height we need to use the math that floor method why here for example when will convert the temperature from Celsius to Fahrenheit we might get a number like this so we don’t need to show the numbers after the dot here so using method floor we will get just an integer so we need our phone hide here to be just an integer and after that we can go and change our temperature element innerhtml so I’m going to say here the Fahrenheit variable then the degree sign and the F for the unit and don’t forget to change the weather the temperature that unit to the new unit which is Fahrenheit and here else it means when the with the temperature that unit it’s in Fahrenheit .

Here I will just go and change or update the temperature element innerhtml to the temperature that value which is already installed and wither object because you have to know that we didn’t change this value here so this value here is always in Celsius and then I forget again to change the unit to Celsius because we changed it here in Farha and then now this code might look walk in but it’s not because let’s say if we didn’t get any data from the API in this case our temperature value here is undefined so if the user clicks on the temperature element here this will return an error undefined for example so to prevent that from happening we need to check first if the temperature that value is undefined we say return so this return here will prevent this code from running so this code will run only if the temperature that value is really defined now to get the weather data from the API am i use the city ID or the name and also by zip code and also by geographic coordinates in our case we’re gonna use the geographic coordinates when which means we need to know the user’s location before going and search now what is the user’s location when interest now every geolocation services are available in the user’s device so here after we check if the geolocation servers available then we will use a method called get current position the get current position here takes in three callbacks the first one is set position and the other two ones are not important near optional the set position here is a callback that takes in one argument which is position position here is the only arguments this callback here takes in the position here is a is an object which has these properties the properties that are important for us are latitude and longitude so to get to these properties when need to say position that covers that longitude and then position that converts that longitude and then here the second callback which is optional is error so this callback here also takes in one argument arrow the arrow here is also like position is also an object this object here has two properties the first one is the idea of the error and the second one is the message the message is what we want here so we need to show this message to the user now in terms of code we said we first need to check if the geolocation services are available so we will say F geolocation in Navigator and so if this is true means the user’s Navigator has a geolocation services if this is true then we need to get the current position of the user so we’re going to enter say navigator dot geo location that get you in position then we will call the two functions which are set position and show error but F the geolocation services are not available then we must show a notification to the user inside our notification element so we’re going just to change the inner HTML of our notification element to this message so I’m gonna say browser doesn’t support geolocation but when the application start in my style that says his file which you didn’t see the notification element display property is set on man so this is not visible to the user unless there is an error so here I must say first notification element that star the display equals block so I have to make this visible first and then for the function set position here this will get the latitude and the longitude of the user set them to two variables and these two variables will be arguments for a function called get weather which we will talk about in a minute then the function show this will show error inside our notification element so first I have to set the display property to block and then show the error or changing the NRH demo to the error that message so now that we know the user’s location from where we can get the weather informations so here we need a provider you can go and search on google for a provider in this tutorial I’m gonna be using open with a map so when I created an account go and get a look at the documentation they said if you want to get their way the information you’re gonna be using this link so this link here has two variables here this one for the latitude and this one for the longitude now if you don’t have the application ID this won’t work for you so when you create an account on open with the map they will give you a key what you’re gonna put here so without this key here you can get the weather information from the API I’m not telling you to go and create an account there you can just use this key which will you find in our JavaScript file which you will download from the repo now we need to send a request to the API and when we get the response how can we handle a response so first I will go and k2 constants the first one is Kelvin which is 273 this one will help us the conversion from Kelvin to Celsius and then the key C so this is the key you’ll find inside your JavaScript file now inside I’ll get wither function so if you remember they get where the function is being called and from inside the set position so once we get the latitude and longitude of the user we call this function here so we’ll go and create the link first so I’m gonna say let API call our link so this is the latitude and the longitude and this is the key then to send the request I’m gonna be using the fetch so I’m gonna fetch the API so after finishing the fetch then you will get a response so after this finished fetching the API you will get a response this response here is in JSON so you must first pass what you get from the API so I’m gonna use that JSON method the hair and then it will say return the data now the data here now is an object but after this is complete then you can walk with the data you can walk with the object let’s take a look on the object so inside the object data we have this properties for example the temperature so if you want to get this value here all you need to do is say data dot main dot temp and then you will get the temperature if you want to get the name of the city you will need to say data dot name only for example to get the country you’ll need to say data that says that country from the way the hair we need to say data that weather here the weather here is an array so I’m going to use the index 0 so I’m going to say data that we there with index 0 that description to get a description with an X 0 that icon to get to get the idea of the icon the these are the properties we’re gonna need so inside my function here I will go and say the data that made the temperature to get the temperature value and set it to our value property here but before we do that we need to do the conversion so we need to subtract the Kelvin here and we need to make sure that the value is set to our temperature value here is an integer so I’m going to be using math that floor then I will get the description then the icon ID and then the name of the city and last or finally the name of the country after we update our wither or after we set the properties of our wither object here then we will display there wither to the user the display wither here or with does is just update enter HTML of our element now this is the last thing about the logic behind the code now you need to go and open your text editor but first before you go and type in the code go to repose and find the weather up the JavaScript repo then download the files download them as a zip file then you will open your zip file and copy just the Stossel template so now that I copied my start template I will link yeah I will name it with the app and then I will open it using my text so inside the fathers are going to find are these the starlet says is file then indexed at age 2 mo the upper GS the icons and the font so let’s go and create the index first let’s run a preview or live preview of our document then allocate the very basic HTML code add a new title and then link in the font and linking the started CSS file then I will create a container for the application then add in an app title which is a way there then notification so when there is an issue with our app then with our container which has this elements the with the icon when we didn’t get yet the way the data we showed unknown image or icon did the temperature value I’m going to just say – here and also temperature description also – and finally the location of the user then I need to link my script of the GS now let’s go inside the up the J’s file and the first thing .

We’re going to do is to select our elements so we’re going to select the icon element using the query selector which takes in the name of the class name same thing for the temperature and description and for location also and finally for the notification element now we’ll create our wither object and I will define the temperature unit which is Celsius and now some constants like the Kelvin for the conversion and also the API key which is here so you’re just gonna copy it from there no need for an account so now we need to check if the users browser supports geolocation services so I’m going to say F geolocation and navigator if that’s true then we will need to get the current position of the user to callbacks state position and show error now else if the geolocation services are not available we need to show an error to the user so first we say set the display to block and then we change the enter HTML to a paragraph which has text browser doesn’t support geolocation and now we need to set the users position with God so here that we create the faction set position which takes in one and only one parameter so we’ll get the latitude and the longitude to that we will call the function get wither which takes in both the latitude and the longitude now we need to show the arrow if there is any so I’m going to say function show arrow which takes in one parameter then I’m gonna use these lines here and I will change the notification element in a H demo to arrow that message now let’s check that I will first try and allow the page to know my location so here we don’t see any error but if I go and block the page from knowing my location here we can see an error a message error now let’s create our function get wither so function whether we first create the link using the latitude and the longitude of the user so here the latitude and longitude and finally the application ID are the key need to check this if this works so I’m gonna log this to my console we’re gonna refresh first I will need to allow the patient on my location I open my console I will click on the link and yes it works we just get the weather information from the API now let’s go back to our text editor here I will use fetch to fetch the API and then after we we get a response we need to pass that response now data here is an object then function then the inside the function data we will just go and update our with the object properties so here for the value of the temperature when it first to convert it to Celsius because it’s in Kelvin and then a used man that floor so we make sure that it is an integer now for the weather description and here for the weather icon ID and then for the city and finally the country now after up our weather object now we can display the weather to the user so I’m gonna call the function display with which I didn’t create yet so now let’s go and create the display weather function so our function here just change the inner HTML of our elements so the icon element is equal to is an image or any inner HTML is an image they all have the same extension PNG now the temperature element is equal to the temperature value and then the degree sign and then the unit C for Celsius now the temperature description or the with the description and now the location so here I’m gonna show the city first then a comma a space and then the country let’s check that I’m go and refresh oh I have a problem here so I can’t see the description and the location so display cannot set prop the inner of no so description element here is not defined what I’m gonna go and check if this is the right class name I’m just gonna go and copy this Save and if i refresh I still get an arrow here it’s not it’s showing the icon ID so here for a wheeler that description .

Here I need to say description not icon okay now it’s walking now if I go and hover over the temperature value you can see as clickable but when I click nothing’s happened because we didn’t do the conversion yet first we need to create the function Celsius to Fahrenheit which takes in the temperature and Celsius then simply it returns the temperature times nine divided by five plus 32 and that’s how we get the temperature in Fahrenheit now when the user clicks on the temperature element here we need to add an event listener which is unclick and this will fire this function first we need to check if the temperature value is defined it’s not if it’s not defined but don’t do the conversion if it’s defined then we need to check if the unit is Celsius if it’s n so sheís then we need to change it or convert it to Fahrenheit and here to make sure that our volume here is an integer we’ll use the math that floor method after that we’ll go and change the volume or the inner HTML of our temperature element so I’m going to say Fahrenheit and then we need to make sure that we change the unit to the new unit which is found height and here I’m just gonna go and set or change the innerhtml and change the unit to Celsius so if I go and click now you can see that we convert it to Fahrenheit if I click back it goes to Celsius so that’s good now let’s try and change the location so for example if I change the location and refresh you can get the width of that exact location or City so this is the end of this tutorial I hope I can see you in the next one if you have any ideas for projects you can build with JavaScript please put them in the comments below so see you guys in the next article and forget to subscribe hit the like button and comment

Leave a Reply

Your email address will not be published. Required fields are marked *