Chingu-FCC-Speedrun-Challenge Day 2 — Show the Local Weather

I chose the ‘Local Weather App’ as the second project in the frontend stack.

I had already done this project before on codepen. But I redid it. This time I decided to do the design work with pure CSS without any frameworks. I also changed the API from openweathermap to www.apixu.com. More details about it later.

Stage 1: Styling the Display using CSS and HTML

1. Background: Webgradients provides nice gradients for the background. I picked one of them. But I spent quite some time on making the gradient background cover the entire page for all screen sizes and preventing the repeated gradients. Now, there are lots of ways to do it and my way is might not be the most efficient. If anybody knows a better way please drop in a comment.

body{
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

2. Layout: I have been hearing a lot about CSS flexbox and its advantages. So I tried using the flexbox to display the weather details as a 2 column display at the center of the page. It was pretty simple. .weather-info is the container div with 2 sub divs, corresponding to 2 columns. One to display the location info and the other to display the weather info. To display a container at the center of the page using flexbox:

.weather-info{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

3. Font and Icons: Lastly, I chose free fonts from google fonts and free icon for the location marker from fontawesome. The weather icons were available from the www.apixu.com API.

Stage 2: Getting data from API — Javascript and jQuery

There are 3 important components in this app:

1. Get the location of the user
2. Get the data from API
3. Display temperature and weather

I wrote 3 functions for the 3 components.

1. The getLoc function: To get the location of the user, I used the navigator.geolocation. There are some disadvantages to this: It works only for https, it is not accurate and it is slow. http://ipinfo.io/ can be used to work on http sites such as codepen. But it is not secure and not accurate either. For my current purpose, I did not dig further and stuck with geolocation.
2. The weatherInfo function — FCC suggests using openweathermap API but it requires API key, which makes it complicated for public hosting purposes. I used a free API from www.apixu.com (thanks to Tan Moy) and jQuery’s getJSON method to get the data from the API. The data is then passed to the display function :

//Inside weatherInfo
$.getJSON(url,function(data){
        renderData(data,cel);
}

3. The renderData function — This function displays the location details and the weather conditions. The temperature toggles between F and C when the user clicks. The weather icon messes up my layout a bit. But I did not spend much time on correcting it.

Here is how it looks finally:

Final App

Notes for myself:

1. Continue working on flexbox and grid layouts.

2. From next project onwards, use vanilla JS instead of jQuery.

My repo for the Local Weather project can be found here

Local Weather App is live here