Weather Api

Website Design | 2020

LIVE WEBSITE

PROJECT OVERVIEW

What

Weather Application that allows users to search for a city.

Why

The goal of this project was to familiarize myself with fetching data from an API and displaying the results

Who

The project was designed and coded by myself.

Tool

HTML, CSS, Javascript, API, JSON

When

Febuary 2020

PROCESS

PHASE ONE

Planning

Having this been my first time using an API, I spent a few days reading documentation on how to properly grab data from an API and display it on screen. After spending a while working with JSON and objects, the learning curve on how to use an API was not as steep as I thought it to be. Now that I had some knowledge on how to make API calls and how to display its data on the front end, I needed to find a web server that would allow me to request. After browsing around the web I landed on Open Weather Api. This API focused on sending back weather data data in your local area.

Weather App code snippet

PHASE TWO

Execution : endpoints

I wanted to add a little more personalization so I decided to have users type in the specific locations that they wanted to see. With that in mind my biggest challenge was creating the function capable of doing so. However, I realized that In order to do so I would need to concatenate the user input inside the fetch request and check to see if the city name is valid.

PHASE THREE

Code

After successfully receiving the JSON data, my next task was to sort out the information and display the most important data to the user. Having done a competitive analysis on weather apps around the web, I noticed a trend on displaying the : current temp, Highs and Lows and the weather description. Luckily , this information was also supplied in the API

Weather app endpoint response

PHASE FOUR

REFLECTION

After working with fetching an api and displaying the results I now have a greater appreciation for its usage. I found myself thinking of all the interesting possibilities that can be done with apis. In addition, coding with javascript is always a good time and gaining more experience in javascript is always something I try and strive for.

LIVE WEBSITE