Start out with signing up for a free Open Weather Map account, as it can take up to a few hours for the API key to be activated.
We've asked a couple of different designers to do their take on this project. It's a great practice in implementing someone else's design. You will find their designs in the design folder in the repo along with some design assets. Decide together with your coding buddy, which design you want to implement - and follow the design as closely as you can.
- One person forks the repo.
- The person forking the repo will be the owner of the repo. They now have to invite the other person as collaborators. To do that you go to the repo's Settings → Manage access → Invite a collaborator.
- One person clones the repo, and together in pairs you will layout the foundation (following Step 1 & 2, specified further down).
- Push the changes to GitHub.
- When it's time to split up and work in branches, it's also time for the other person to clone the repo.
- Work in branches, commit and push to your branch. Git cheat sheet can be found here.
- Since you're working with branches this week, you'll have to merge the branches together before handing in. Look at the Working in teams video and the cheatsheet for more information about how to work with branches.
- When you’re finished with the project, only one person (owner of the repo) needs to open a Pull Request into the Technigo repo.
- Hand in your project the usual way
For this project, we suggest that you lay out the foundation of your project together using pair programming. After that, it's time to split up and start working in branches.
Sign up for a free Open Weather Map account. Once signed in, go to "My API keys". You find that in the menu if you click your username. Copy the API Key. You can use the API Key in the APPID parameter when making calls to the openweathermap API.
For example, to get the current weather in Stockholm, you can use the URL below. Remember to replace YOUR_API_KEY with the API key you copied from your dashboard.
fd582670436692008725c351eb4985b0
https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY
The response should look something like this (this has been run through jsonlint.com to add newlines and indentation):
{
"coord": {
"lon": 18.06,
"lat": 59.33
},
"weather": [{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}],
"base": "stations",
"main": {
"temp": 6.47,
"pressure": 1007,
"humidity": 56,
"temp_min": 6,
"temp_max": 7
},
"visibility": 10000,
"wind": {
"speed": 3.6,
"deg": 200
},
"clouds": {
"all": 0
},
"dt": 1509709800,
"sys": {
"type": 1,
"id": 5420,
"message": 0.0024,
"country": "SE",
"sunrise": 1509689610,
"sunset": 1509720490
},
"id": 2673730,
"name": "Stockholm",
"cod": 200
}
As you can see, there's a bunch of useful information in there - including current temperature, wind speed, humidity, etc.
You will need to use the fetch() function in JavaScript to load the weather data into your page, and then select the values you want to inject into the DOM from the JSON which comes from the API.
Read the endpoint documentation for the current weather.
Your task is to present some data on your web app. Start with:
- the city name
- the temperature (rounded to 1 decimal place)
- and what type of weather it is (the "description" in the JSON)
Now it's time to split up and start working in GitHub branches. Decide beforehand when you should have a "feature freeze" so that you make time for merging.
Feature: Sunrise and sunset 🌅
Show the time for sunrise and sunset in a readable time format (Example: 13:00 or 1 PM). You will have to format the date from milliseconds to a readable format. Here is a useful resource for how to do this.
Feature: Weather forecast 📅
Show a forecast for the next 5 days. You can choose how to display the forecast - perhaps you want to show the min and max temperature for each day, or perhaps you want to show the temperature from the middle of the day, or the humidity, what it feels like and so on.
https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY
The API gives us the next 5 days but for every third hour. So a good idea could be to only use the weather data from the same time every day. You can filter the forecast list array to only get the info from 12:00 each day for example.
Read the endpoint documentation for the forecast.
Feature: Style it 🎨
Style it to look like one of the provided designs.
- You should fetch data from the API using
fetch()in JavaScript - All data in the sketch above should be present and fetched from the API
- The presentation of the data should be in the specified format.
- The page should work on mobile (mobile first!), tablet and desktop (Be responsive)
- Complete Step 1-2 together, and step 3 in branches
- Follow the guidelines on how to write good code
So you’ve completed the requirements? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.
Feature: Styling warm/cold 🌞❄️
Change the colours of the page based on the weather. If the weather is warm – use warm colours. If the weather is colder, use cold colours. If you really want to push your CSS muscles you can even make a background gradient.
Another alternative is to include visual indicators for the type of weather, cloudy/sunny/rainy/etc.
Feature: More cities 🏙️
Give the user the option to choose between a couple of your favourite cities, or create a searchbar where the user can search for a specific city.
Feature: Use your location 🗺️
Use the Geolocation API that is built into your browser to fetch the city that you are located in at the moment and show the weather for your location.
Feature: Add more data 💽
Explore the API and use another endpoint of the Weather API to include supplementary information.
Feature: CSS Animations
Add some CSS animations to your app, e.g. pulsating sun/raindrops.