Creating a weather app using HTML and JS

This will be blog post #1 of a new series where I will showcase a new project that I have created either from a tutorial or a work project.

To create a web app that shows the weather I used HTML, JavaScript and Bootstrap. I used JavaScript to connect a weather API, and AJAX to output the object properties to the front end.

I used a const variable to declare the api url.

I then used AJAX to use the objects from url. For this app, I used the location name, temperature, wind speed, the weather description. For the temperature, I had to convert it from Kelvin to Celsius. I could have used a formula to convert it to Farenheit, but in the UK we commonly use Celcius to measure the temperature.

The wind speed is another value that I had to convert in order to get the miles-per-hour value (MPH).

"use strict"

const url = "http://api.openweathermap.org/data/2.5/weather?q=Northampton,uk&appid=14c293857fefc5bfc79ee7cbe354ee57";

$.ajax({
    url: url, 
    success: function (result){
        console.log(result);
        console.log(result.name);


        let kelvinToCelsius = Math.round(result.main.temp -273.15);
        let windSpeed = Math.round(result.wind.speed /.44704);

        $("#location").text(result.name);
        $("#temp").text(kelvinToCelsius);
        $("#windid").text(windSpeed);
        $("#skycond").text(result.weather[0].description);

    }
})

And this is it, the final output. I could of course add some additional colour, and graphics.

Additionally, with the url I could have made it dynamic instead of using static values in the URL. I could also get additional values from the API object to pass to the front end.