Project: Show the Local Weather

The past couple of weeks my primary focus has been on completing the Intermediate projects for freeCodeCamp’s Front End Developer Certification.

First up was the Build a Random Quote Machine project, which you can read more about here.

This time around the challenge was to create an app that would show the local weather.

Project Requirements

The goal of this project is to allow the user to see the weather in their local area. The user should also see a different icon or background image based on the weather they are experiencing. Last but not least, the user should be able to toggle between Celsius and Fahrenheit.

You can learn more about the rules for this project in this video.

Making a Plan

I touched on this in my last blog post, but I think one of the most important steps when working on a project is outlining the look and functionality of the app before you begin working on it.

Based on the user stories and example project for the assignment, I usually have a pretty good idea of how I want things to look. Then I fine tune that idea by looking at other people’s take on the project.

Once I decide how I want the project to look, I make a sketch of my idea and add some notes. There are plenty of tools you can use for this but I prefer good old fashion pen and paper.

I am no artist, as this sketch for my weather app clearly shows.

Even though I have a clear image in my head of how the project should look, I can’t draw so I write out short descriptions instead. I also make a list of any functionality I want to include.

Having a clear idea of what I want to do helps keep me focused when working on a project. It also gives me a clear end goal, which is important for me because I have a tendency to want to over polish.

Mobile First

I guess I am a designer at heart because the first thing I figure out is how the project is going to look, not how it is going to work.

Don’t get me wrong, I know exactly what I want the project to do before I start working on it. I just don’t spend a lot of time worrying about how it is going to do it. While I usually have some ideas, I leave the specifics until later.

Maybe it is because it is the easiest part but I tend to start with the HTML and CSS and then work my way to JavaScript and site functionality.

Since mobile first is such a focus right now, I like to set the viewable area on my CodePen to 320 pixels.

Pixel width example from Local Weather project

That is the width of an old iPhone, which makes it a good example of a smaller screen size.

Once I have my display area set, I start working on the HTML and CSS based on this smaller screen.

Since I wanted a nice vertical layout of content for my weather app, I used Flexbox to create a single container div. I set the flex-direction to column and justify-content to center.

Within that container div, I added a header to include the title of “Local Weather” and a div with a class of “display” to hold the data. I gave each of these a background color and added a background image to the page.

Once I had things looking the way I wanted, I started enlarging the screen and adding media queries as needed to maintain the look of the site.

Remember media queries should be dictated by the look of the content, not preconceived breakpoints based on common screen sizes.

I forgot to take screenshots while I worked, but here is a rough idea of what my project looked like after I finished the HTML and CSS.

An early example of my Local Weather project

(The toggle button was added as the project evolved but you get the idea.)

In hindsight, I wish I would have stopped after I had the base layout set for the small screen.

Several things evolved over the course of the project and the layout and styling had to be tweaked as a result. This resulted in some extra work as the extra media queries had to be tweaked as well.

API and Geolocation

Even though the freeCodeCamp lessons before these projects cover JSON and APIs, I don’t think they do a very good job of explaining them.

That meant it was time to use the famous Read-Search-Ask method that is such a vital programming skill.

Fortunately, in the world we live in today you can also add “watch” to that research list.

I picked up information from a lot of different sources, as well as some good old fashion trial and error, but these videos from CodeWithNick were especially helpful.

Weather Dependant Background

There are a lot of resources out there when it comes to figuring how to access the API and the functions necessary to return the weather. One thing that isn’t as well covered is how to change the background of the site based on the current weather.

Figuring this one out, more or less on my own, made me pretty happy.

I had already created a variable called “currentIcon” that was used along with another variable (“iconSrc”) to display an icon for the current weather (this is covered in the above series of videos).

I used an if/else statement to compare the value of currentIcon to the different possible weather icons. The background image and color would then change based on what currentIcon was equal to.

Here is a look at that code:

Code to change Local Weather project background based on weather

You just need to know all the different icon codes, which can be found here under Icon List.

In hindsight, I think there might be a simpler way to do this, perhaps with a switch statement, but I am more comfortable with if/else statements so I went with that.

Challenges

The hardest part of this project was actually figuring out the toggle switch.

It wasn’t the toggle function itself that gave me trouble, it was the actual toggle button.

Originally I used a link attached to the Fahrenheit/Celsius text to allow the user to switch between the two but I wanted something nicer.

I could have gone with a basic button, which would have been a lot easier, but I really wanted a toggle. Eventually, I figured it out thanks in large part to this Pen.

Another issue involved the Flexbox container.

I wanted the high and low temperature to display horizontally on larger screens but there didn’t seem to be a way to have two different flex-directions within the same container.

When I tried creating two different containers it affected the display div in ways that I wasn’t happy with.

I was able to get the two temperatures to display horizontally using a span element but again that affected the layout in ways that I didn’t like.

In the end, I decided to leave them displaying vertically.

The only other issue I had turned up after the fact.

Once I shared the project with my friends to test I found out that the geolocation isn’t quite right, in particular on mobile devices. It is only a difference of a few miles but it is still bothersome.

There wasn’t much I could do about it since the issue is with the geolocation detection tool and not my particular app. I thought about trying to find a different method of detecting the user location but this is the method that fCC recommends so I stuck with it.

See for Yourself

Click here to see a freestanding version of the app. You can check out the CodePen version of the project complete with code here or you can find the GitHub repository here.

Leave me a note in the comments section or hit me up on Twitter if you have any feedback. Don’t forget to share a link to your work if you have also completed this project.

Sharing is caring!

Author: Lee

Hi, my name is Lee and I am a 40-something who recently made the decision to become a self-taught programmer. This site was set up to chronicle that journey and my experiences along the way. Feel free to contact me with any comments, questions, or suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *

13 − twelve =