Introduction
In this article, you will learn how to create a temperature appliction and location in JavaScript.
Step 1
First open a Sublime Text editor,
- Open start -> Sublime Text Editor.
- Go to file -> File -> New File
- Name of File -> Weather app.html.
Step 2
Note that in the below sample, I have inserted CSS styles inside the <style> tag. You will create CSS styles for the notification and temperature value font sizes in the below code,
Step 3
Here you will use some JavaScript along with HTML code. Just follow the steps to see how to create this temperature application.
- const iconElement = document.querySelector(".weather-icon");
- const tempElement = document.querySelector(".temperature-value p");
- const descElement = document.querySelector(".temperature-description p");
- const locationElement = document.querySelector(".location p");
- const notificationElement = document.querySelector(".notification");
-
-
- const weather = {};
-
- weather.temperature = {
- unit : "celsius"
- }
-
- const KELVIN = 273;
-
- const key = "82005d27a116c2880c8f0fcb866998a0";
-
- if('geolocation' in navigator){
- navigator.geolocation.getCurrentPosition(setPosition, showError);
- }else{
- notificationElement.style.display = "block";
- notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
- }
-
- function setPosition(position){
- let latitude = position.coords.latitude;
- let longitude = position.coords.longitude;
-
- getWeather(latitude, longitude);
- }
-
- function showError(error){
- notificationElement.style.display = "block";
- notificationElement.innerHTML = `<p> ${error.message} </p>`;
- }
-
- function getWeather(latitude, longitude){
- let api = `http:
-
- fetch(api)
- .then(function(response){
- let data = response.json();
- return data;
- })
- .then(function(data){
- weather.temperature.value = Math.floor(data.main.temp - KELVIN);
- weather.description = data.weather[0].description;
- weather.iconId = data.weather[0].icon;
- weather.city = data.name;
- weather.country = data.sys.country;
- })
- .then(function(){
- displayWeather();
- });
- }
-
- function displayWeather(){
- iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
- tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
- descElement.innerHTML = weather.description;
- locationElement.innerHTML = `${weather.city}, ${weather.country}`;
- }
-
-
- function celsiusToFahrenheit(temperature){
- return (temperature * 9/5) + 32;
- }
-
- tempElement.addEventListener("click", function(){
- if(weather.temperature.value === undefined) return;
-
- if(weather.temperature.unit == "celsius"){
- let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
- fahrenheit = Math.floor(fahrenheit);
-
- tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
- weather.temperature.unit = "fahrenheit";
- }else{
- tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
- weather.temperature.unit = "celsius"
- }
- });
Step 4
The Html 5 code below shows how to complete the code for the weather application.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Weather App JavaScript</title>
- <link rel="stylesheet" href="font/Rimouski.css">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
-
- <div class="container">
-
- <h1 style="background-color: blue;">PRABAKARAN ACT</h1><br>
- <div class="app-title">
-
-
- <p>Weather</p>
- </div>
- <div class="notification"> </div>
- <div class="weather-container">
- <div class="weather-icon">
- <img src="icons/unknown.png" alt="">
- </div>
- <div class="temperature-value">
- <p>- °<span>C</span></p>
- </div>
- <div class="temperature-description">
- <p> - </p>
- </div>
- <div class="location">
- <p>-</p>
- </div>
- </div>
- </div>
-
- <script src="app.js"></script>
- </body>
- </html>
Output
Right-click on the text window, and a dialog box appears, select->open a new browser,
Summary
Hope you found this article interesting. We have created a weather application using JavaScript. Thanks for reading.