Creating a weather app using HTML and JS

Weather app in 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 = ",uk&appid=14c293857fefc5bfc79ee7cbe354ee57";

    url: url, 
    success: function (result){

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



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.

Leave a Reply

Your email address will not be published.

Enter Captcha Here :