Open Weather API - Show the Local Weather Project

Published

Introduction: 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:

Share

    Recommendations

    • Planter Challenge

      Planter Challenge
    • Clocks Contest

      Clocks Contest
    • Woodworking Contest

      Woodworking Contest
    user

    We have a be nice policy.
    Please be positive and constructive.

    Tips

    Questions

    9 Comments

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

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

    2 replies

    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!

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

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