|
1 | 1 | # Homework Week 7 |
2 | 2 |
|
3 | | -## Step 1: Map, filter, reduce, and => |
| 3 | +## Why should i even do this homework? |
| 4 | +Working with json and api's is the way modern **javascript application's communicate with servers**. That can be either getting some data but also updating or creating new data. |
4 | 5 |
|
5 | | -1. Say you would like to write a program that doubles the odd numbers in an array and throws away the even number. |
| 6 | +It is how autocomplete can receive suggestions for a search query and how infinite scroll can keep loading new posts. |
6 | 7 |
|
7 | | - Your solution could be something like this: |
8 | | - ```js |
9 | | - let numbers = [1, 2, 3, 4]; |
10 | | - let newNumbers = []; |
| 8 | +## Create your own json file |
| 9 | +Create your own json file with something that **interests you**. Maybe that could be computers, pets, music etc. |
11 | 10 |
|
12 | | - for(let i = 0; i < numbers.length; i++) { |
13 | | - if(numbers[i] % 2 !== 0) { |
14 | | - newNumbers[i] = numbers[i] * 2; |
15 | | - } |
16 | | - } |
| 11 | +Remember to validate the json using a tool like fx this: https://jsonlint.com/ |
17 | 12 |
|
18 | | - console.log("The doubled numbers are", newNumbers); // [2, 6] |
| 13 | +## Find a cool api |
| 14 | +Find a cool api and **explain how it works** and what kind of **json data** the api responds with. Is it an array, an object, a string. How is the data structure. Is it fx an array of objects or how is it structured. |
19 | 15 |
|
20 | | - ``` |
| 16 | +There are a few examples of apis here: |
| 17 | +https://github.com/toddmotto/public-apis |
21 | 18 |
|
22 | | - rewrite the above program using `map` and `filter` don't forget to use `=>` |
| 19 | +## Weather app |
| 20 | +Lets create a **weather app** that based on a **users location** can find the relevant weather for that user. |
23 | 21 |
|
24 | | -2. Using [this json file](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json) as the source, build a function which does the following: |
| 22 | +### Sign up for api key |
| 23 | +Go to https://openweathermap.org/appid and **sign up for an api key**. This key we will use for getting access to the weather api. |
25 | 24 |
|
26 | | - 1. Give each movie a `tag`: Good (>= 7), Average (>= 4 and < 7), Bad (< 4) based on the ratings. |
27 | | - 1. Calculate the average rating of all the movies. |
28 | | - 1. Count the total number of Good, Average and Bad movies. |
29 | | - 1. Count he number of movies containing the following keywords: `["The", "dog", "who", "is", "not", "a", "man"]`. Can you make sure the search is case insensitive? |
30 | | - 1. Count the number of movies made between 1980-1989 (including both the years). |
| 25 | +### First call to the weather api |
| 26 | +We are going to be using the current weather api: https://openweathermap.org/current |
31 | 27 |
|
32 | | -## Step 2: Continuing with the previous exercise |
| 28 | +To get some data from the api go to https://api.openweathermap.org/data/2.5/weather?q=copenhagen&appid=YOUR_APP_ID, where `YOUR_APP_ID` is substituted with the key you signed up for in the first step. |
33 | 29 |
|
34 | | -- Add map, filter, reduce to your existing app to build an application that loads data from github, filters out based on certain value, map->reduces to a data object and render that object to the dom (using map again). |
35 | | -- For example you can try to use map, filter and reduce to show the most and the least forked repositories, watched repositories. And the total number of forks for all repo's. Also you can work with the data provided about the amount of commits or contributers. |
36 | | -- Add a readme to your repo explaining what your app does and how to use your app. Here's a [template](https://gist.github.com/jxson/1784669) and here you can see how to make [your readme awesome](https://gist.github.com/rrgayhart/91bba7bb39ea60136e5c). |
| 30 | +If you go to the [above url](https://api.openweathermap.org/data/2.5/weather?q=copenhagen&appid=YOUR_APP_ID) and see some weather json data then congrats 🎉. |
37 | 31 |
|
38 | | -## Step 3: **Some freeCodeCamp challenges:** |
| 32 | +If not, try and **read the error 💻** and see if you can figure out what went wrong. Or ask in the slack group :) |
39 | 33 |
|
40 | | -1. [Comparisons with the Logical And Operator](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/) |
| 34 | +### Fetch weather data from a city |
| 35 | +Create a javascript file and an html file and import the javascript file in the html file. |
41 | 36 |
|
42 | | -2. [Record Collection](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/record-collection/) |
| 37 | +**Fetch weather json data** from the api using a city a user has specified: Add an **input element** and **a button** to the html. When the button is clicked, get the text from the input (which should be a city name) and fetch the relevant weather data from that city. |
43 | 38 |
|
44 | | -3. [Iterate over Arrays with map](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array) |
| 39 | +Remember to show some **loading text**. What if a user **writes nothing in the input?** |
45 | 40 |
|
46 | | -## Step 4: Hand in Homework: |
| 41 | +### Display the data |
| 42 | +Find some relevant data to show. That could fx be city name, average temperature, how cloudy it is, weather icon etc. |
| 43 | + |
| 44 | +You decide how the data should be displayed. You could maybe be inspired by googling for "weather app ui". |
| 45 | + |
| 46 | +### Your feature here |
| 47 | +Now its your time to **come up with a feature**. No matter how big or small. |
| 48 | + |
| 49 | +### Use my current position *optional* |
| 50 | +Investigate the [geo location api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). Add a button to your page, clicking this button will **get the users current position**. Use that position to fetch weather data. |
| 51 | + |
| 52 | +Hint: We have to change the weather api url, so we are not using city but position. Look into the documentation! |
| 53 | + |
| 54 | +### Save my location *optional* |
| 55 | +Imagine if a user did not have to either write a city or click the get my position button, but could just save the location. Lets do that! |
| 56 | + |
| 57 | +When a user has gotten a location through either the input element or the geo location api, save that location using [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). Localstorage is a **way to save data** even when you close the browser. |
| 58 | + |
| 59 | +Now when loading the page and there is a city in the localstorage, use that to get the current weather. |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +## Giphy api |
| 64 | +Create a site where a **user can search for any word**. When searching a word the application will **find a gif** using the **searched word** using the giphy api: https://developers.giphy.com/docs/ |
| 65 | +Here is how it is going to work: The user can write some text indicating the gif he is looking for, click a button and then a gif will be found (using the searched word) and the gif will be displayed to the user. |
| 66 | + |
| 67 | +Try break this problem into **smaller problems** and write down how you are going to solve the problem **BEFORE you start coding.** |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +## Feedback giving time! |
| 72 | +Find a student to give feedback using this site: https://hyf-peer-review.herokuapp.com/ |
| 73 | +The feedback should be given after the homework has been handed in preferably latest two days after. |
| 74 | + |
| 75 | +To help you get started we have created some ressources about giving feedback. Find them here: https://github.com/HackYourFuture-CPH/curriculum/tree/master/review |
| 76 | + |
| 77 | +## Hand in Homework: |
47 | 78 | Go over your homework one last time: |
48 | 79 |
|
49 | 80 | - Does every file run without errors and with the correct results? |
|
0 commit comments