Weather project: some info

Based on a “Juan Londoño’s” GitHub repo, that uses a Weather API to get the temperature and other variables giving a city:

https://github.com/jc721/WeatherApp

You can see his code, but you will have to do this project starting from empty files ;D

This is a free-style project, show the information as you want!

Weather project: some info

Now you know that you can access to a lot of public APIs to get information.

Check this website to see a list of public APIs you can work with: https://public-apis.xyz/

Some are free, and others have different plans in which you have to pay.

An example of weather API is www.weatherbit.io, this API has a plan for free and other plans for companies, like Google Maps: https://www.weatherbit.io/pricing

Weather project: some info

In case you have problems creating account, or one day you make more than 500 calls you can use this one:

2d84c821e1ab4563b168e4d981912515

This API has a free plan with restricted access (500 calls a day), you can Sign Up in the free plan to get a key to use the API, you will receive an email with the key you will need to get the data:

​

​

Weather project: some info

https://www.weatherbit.io/api/weather-current

To get the information of the current weather, the APIs have a link with explanations for each endpoint, you will need to use this one:

Step 1: Show the current temperature of a city

1. Create a new repository in your personal account in GitHub, and add an HTML and a JS file (to do this the fastest way is to create the repository using Github website, then clone it to your computer and start gitting as in a normal repository)
2. Get the current weather from Weatherbit.io giving latitude and longitude from your favourite city, look that when you receive the response from the server, how can you read the temperature (https://api.weatherbit.io/v2.0/current?lat=41.41&lon=2.19&key=94732983488740c7ac18361880e08e1d) Tip: the result is in an array
3. Draw the result in the DOM, temperature and the image using a new function named “render()”

​

​

​

​

4. Put the fetch inside a function with the name “get”

​

​

5. Fetch sometimes could not work, APIs could send you an error message

To know if fetch works or not, use a catch(error) as explained here:

​

​

Manage errors is very important in coding, if you don’t understand errors. Do a console.log() in the catch to understand the error getting the complete message

​

A difference between a good and a bad developers, is that the good ones always manage all the possible errors!

​

​

​

​

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Step 2: make this project public with Github.io

1. To publish you repository into a public URL go to GitHub.com and go into the repo you want to publish http://github.com/your-username/your-repository-name, find the settings icon in the top right corner.
2. Find the section named "Github Pages" and select "master branch" in source, then hit "Save".
3. Wait a few minutes, then refresh the page and come back to the Github Pages section. You should see a green bar saying "Your site is published at http://github.com/your-username/your-repository-name". Click the link, verify that your website is there, then share it with your CYF class!

https://carlossanchezheil1984.github.io/myfirstproject/

Step 3: Refactor the code to show n cities

• Write an array with different cities, given their latitude and longitude, ask to the API the current weather for each one
• Create a Form to add new cities in the array and show the same information
• Make an input as a filter, that will only show the cities that contains the letters in the input (if I write “Bar” will show only Barcelona)

​

const cities = [];

cities.push({

name: "Barcelona",

latitude: 41.41,

longitude: 2.19,

});

cities.push({

name: "Madrid",

latitude: 40.41,

longitude: -3.70,

});

​

Step 4: Add a map to show your cities locations

• Draw a map using the API given by Mapbox. Check here how to add a marker

https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/

• Add a marker for each city of the array
• Example of a student: https://kossa21.github.io/weather-project/

​

​

​

​

Step 5: Start your portfolio of projects

Now you know how to publish your projects with github.io, we can create an Index to link all of them, so you can have in the same page, access to all your projects

​

You can use this link to put it in the CV or to send it to recruiters.

​

Link the Weather project and other projects you would like to share, in the React module you could also publish your code following this instructions: LINK

​

​

To create the public portfolio in github.io:

​

In your Github account just create a new repo with the name: yourusername.github.io, and add a index.html file:

Check the result:

https://carlossanchezheil1984.github.io/

And the repo:

https://github.com/carlossanchezheil1984/carlossanchezheil1984.github.io

​

Example of a student:

https://kristiinacwalina.github.io/

​

​