Coders Packet

Weather application using pure HTML5, CSS3, and Javascript

By Imran Wahid

This is a web application( using pure HTML5, CSS3, and Javascript )that is able to fetch weather details of a location entered by the user.

Basically, this web application works on API. The user needs to enter any location name in the search box.

const searchbox = document.querySelector('.search-box');
searchbox.addEventListener('keypress', setQuery);

When the user hits the enter button after filling the search box with a valid location, the above code starts to function. It calls the 'setQuery' function which is responsible for fetching the data from the server. The 'setQuery' function is 

const setQuery = (evt) => {
    if (evt.keyCode == 13) {
        getResults(searchbox.value);
        console.log(searchbox.value);
    }
}

In case the user enters an invalid location name in the search box then JSON data( that is fetched using the API) will have the value of its's 'cod' property as 404. So from there, we can simply display through the HTML page that we couldn't find any perfect match for the entered location.

It takes the location value as a query and triggers the 'getResults' function. The function is 

const getResults = (query) => {
    fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(weather => {
            return weather.json();
        }).then(displayResults);
}

So this function forms the total URL based on the location value.

The URL is formed according to the above structure in the 'getResults' function.

So it fetches the weather details as data in JSON format. After that, we are basically selecting only certain relevant data such as country name, city name, temperature, and the weather condition from the JSON data. In order to show the current date and time following function is used 

const dateBuilder = (now) => 
{
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    let days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    let day=days[now.getDay()];
    let month=months[now.getMonth()];
    let date=now.getDate();
    let year=now.getFullYear();
    return `${day},${date} ${month},${year}`;
}

The above function generates the current date and time. After we have got all the relevant information about the current weather condition of the location we are simply filling in div elements. 

This is a container that contains several div elements and from the class names of the div elements, we can easily identify what data they are going to contain.  For example, the div with the class name 'city' is going to contain the city name. We are filling the div elements with the selected data from the JSON data with the help of dom manipulation (dom:- document object model). Then we are simply serving the details through an HTML page to the user.

So this was the working procedure of the application how it shows the current weather details to the user.

This is the GitHub link to my project 

https://github.com/ImranWahidCoder/weather-app

Download project

Reviews Report

Submitted by Imran Wahid (Imu2018)

Download packets of source code on Coders Packet