Open Weather API - Show the Local Weather Project

by CodingTutorials360

4.9K2910

Intro: Open Weather API - Show the Local Weather Project

YouTube.com/CodingTutorials360

A great 9 part series for coders with little to no experience in using APIs using jQuery. By the end of the series you will:

  • Understand how to call an API using getJSON()
  • How to retrieve a user's geo-location
  • How to call the Open Weather API while using the user's geo-location
  • Basic CSS and HTML

STEP 1: Show the Local Weather Project Part 1 : FreeCodeCamp.com


In this first video we go over several basic concepts:

  • What data can we get by using the Open Weather API?
  • What is and how to use an API key?
  • How to make an API call using jQuery?
  • How the getJSON() function works?

STEP 2: Show the Local Weather Project Part 2: FreeCodeCamp.com


In this 2nd video we will be going over:

  • How to get the user's geo-location(longitude and latitude)?

STEP 3: Show the Local Weather Project Part 3: FreeCodeCamp.com


In this 3rd video we will show:

  • How to concatenate a string?
  • How to get the weather information from a user's geo-location?

STEP 4: Show the Local Weather Project Part 4: FreeCodeCamp.com


In the 4th video we will:

  • Retrieve the local weather temperature in Kelvin.
  • Convert Kelvin temperature to Fahrenheit.
  • Convert Kelvin temperature to Celsius.

STEP 5: Show the Local Weather Project Part 5: FreeCodeCamp.com


In this 5th video we will:

  • Be targeting html with jQuery to change the values with our API data.
  • Display the city of user from the Open Weather API.
  • Display the weather type of the user from the Open Weather API.
  • Display the temperature using Open Weather API.
  • Display the wind speed using Open Weather API.

STEP 6: Show the Local Weather Project Part 6: FreeCodeCamp.com


In this 6th video we will learn:

  • How to use jQuery function click()?
  • How to toggle between Fahrenheit and Celsius?

STEP 7: Show the Local Weather Project Part 7: FreeCodeCamp.com


In this section we will:

  • Use BootStrap to center text. unstyle lists, appear to be buttons, etc.
  • Add a background image via CSS and start organizing our application.

STEP 8: Show the Local Weather Project Part 8: FreeCodeCamp.com


In part 8 we will:

  • Truncate our temperature variables using toFixed().
  • Display Celsius and Fahrenheit degree using their HTML entity.

STEP 9: Show the Local Weather Project Part 9: FreeCodeCamp.com


In part 9 we will:

  • Format the wind speed and change into MPH.
  • Logic to switch between backgrounds based on what the local temperature is.

STEP 10:

9 Comments

RyanT76 7 years ago

I've actually already completed this before, but it's really nice watching some go through the steps so seamless (I struggled). Great video.

PawełP23 8 years ago

Hi, you can write down on the gitter: thanks @paprzytula :)

PawełP23 8 years ago

Because I voted for you (and subscribed). And saying thanks @username on gitter gives "brownie points" (it keeps streak on freecodecamp). Gitter is the chat with button "Help" on every fcc challenge. However i can keep my streak by doing some simple challenges, don't bother yourself. Good luck!

jasonc250 8 years ago

okay I voted. You owe me a cookie! ;)

CodingTutorials360 8 years ago

Thanks man. I don;t see it on the list of projects for the contest though?

DIY Hacks and How Tos 8 years ago

Some times it takes a while to show up in the feed. But it is there now.