├── .gitignore
├── LICENSE
├── README.md
├── module1
    ├── 01_fetch_exercise_array
    │   ├── images
    │   │   ├── daniele-levis-pelusi-311027-unsplash.jpg
    │   │   ├── guy-stevens-746794-unsplash.jpg
    │   │   └── sharon-pittaway-98257-unsplash.jpg
    │   └── index.html
    ├── 01_fetch_exercise_text
    │   ├── index.html
    │   └── poem.txt
    ├── 01_fetch_image
    │   ├── index.html
    │   └── rainbow.jpg
    ├── 02_fetch_csv
    │   ├── ZonAnn.Ts+dSST.csv
    │   ├── index.html
    │   └── testdata.csv
    ├── 02_graphing_data
    │   ├── ZonAnn.Ts+dSST.csv
    │   ├── index.html
    │   └── testdata.csv
    ├── 02_graphing_data_exercise_multiple
    │   ├── ZonAnn.Ts+dSST.csv
    │   ├── index.html
    │   └── testdata.csv
    ├── 02_graphing_data_exercise_p5
    │   ├── ZonAnn.Ts+dSST.csv
    │   ├── index.html
    │   ├── sketch.js
    │   └── testdata.csv
    ├── 03_fetch_json
    │   └── index.html
    ├── 03_mapping_iss
    │   ├── index.html
    │   └── iss200.png
    ├── 03_mapping_iss_exercise_center_map
    │   ├── index.html
    │   └── iss200.png
    ├── 03_mapping_iss_exercise_p5_mappa
    │   ├── index.html
    │   ├── iss200.png
    │   └── sketch.js
    ├── 03_mapping_iss_exercise_p5_mappa_velocity
    │   ├── index.html
    │   ├── iss200.png
    │   └── sketch.js
    ├── 03_mapping_iss_exercise_scale_altitude
    │   ├── index.html
    │   └── iss200.png
    ├── 03_mapping_iss_exercise_scale_iss
    │   ├── index.html
    │   └── iss200.png
    └── 03_where_is_the_iss
    │   ├── index.html
    │   └── iss200.png
├── module2
    ├── 01_hosting_static_files
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── 02_geolocation_api
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── 03_post_request
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── 04_saving_to_database
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── 05_querying_database
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── all.html
    │   │   └── index.html
    ├── 06_webcam
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── all.html
    │   │   └── index.html
    ├── data_selfie_app
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── index.html
    │   │   ├── logs
    │   │       ├── index.html
    │   │       └── logs.js
    │   │   ├── sketch.js
    │   │   └── style.css
    ├── exercise_01_multiple_pages
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── goodbye.html
    │   │   └── index.html
    ├── exercise_02_leaflet
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── exercise_03_button
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── exercise_04_array_button
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── exercise_05_text_file
    │   ├── database.txt
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── exercise_06_input_box
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   └── index.html
    ├── exercise_07_sorting
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── index.html
    │   │   ├── logs
    │   │       ├── index.html
    │   │       └── logs.js
    │   │   ├── sketch.js
    │   │   └── style.css
    ├── exercise_08_save_files
    │   ├── images
    │   │   ├── image_1558376232234.png
    │   │   ├── image_1558376240358.png
    │   │   ├── image_1558376266448.png
    │   │   └── image_1558376281197.png
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── index.html
    │   │   ├── logs
    │   │   │   ├── index.html
    │   │   │   └── logs.js
    │   │   ├── sketch.js
    │   │   └── style.css
    │   └── shiffman.db
    ├── exercise_09_p5_drawings
    │   ├── drawings.db
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── index.html
    │   │   ├── logs
    │   │       ├── index.html
    │   │       └── logs.js
    │   │   ├── sketch.js
    │   │   └── style.css
    └── shiffman.db
├── module3
    ├── the_weather_here
    │   ├── .env_sample
    │   ├── .gitignore
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │   │   ├── checkins
    │   │       ├── index.html
    │   │       └── logs.js
    │   │   ├── index.html
    │   │   ├── sketch.js
    │   │   └── style.css
    └── the_weather_here_exercises
    │   ├── .env_sample
    │   ├── .gitignore
    │   ├── index.js
    │   ├── package-lock.json
    │   ├── package.json
    │   └── public
    │       ├── checkins
    │           ├── index.html
    │           └── logs.js
    │       ├── index.html
    │       ├── sketch.js
    │       └── style.css
└── outline.md


/.gitignore:
--------------------------------------------------------------------------------
1 | working/
2 | node_modules/
3 | database.db
4 | *.mov


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Coding Train
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Working with Data and APIs in JavaScript
 2 | 
 3 | This document is an outline for the Coding Train playlist: ["Working with Data and APIs in JavaScript"](https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X&index=1)
 4 | 
 5 | * [Main Track on the Coding Train Website](https://thecodingtrain.com/tracks/data-and-apis-in-javascript)
 6 | * [Youtube Playlist](https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X)
 7 | 
 8 | ## Description
 9 | 
10 | This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects. The first will be client-side only and examine how to load data with `fetch()` and present on a web page. Viewers will learn about handling asynchronous events with Promises and how to render data to the DOM as well as a draw to HTML5 canvas with p5.js. The second and third project will introduce "full stack" development adding server-side programming with node.js for data persistence and API authentication.
11 | 
12 | ## Introduction
13 | 
14 | 1. Course Trailer (~1-minute overview)
15 | 2. Full introduction -- overview of topics, goals for the course
16 | 3. What do I need to know to go to tutorial 1?
17 | 
18 | ### Module 1: `fetch()` with image, CSV, JSON
19 | 
20 | #### 1a: fetch()
21 | 
22 | 1. What is `fetch()`?
23 |    - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
24 |    - Promises, async and await
25 |    - [Response - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/Response)
26 |    - `<img>` DOM element
27 | 
28 | #### 1b: Tabular Data
29 | 
30 | 1. Parsing CSV with `split()`
31 | 2. Line chart with [chart.js](https://www.chartjs.org/docs/latest/)
32 | 
33 | #### 1c: JSON Data from API
34 | 
35 | 1. load JSON data with `fetch()` and update DOM <span> element.
36 | 2. Add map to page with [Leaflet.js](https://leafletjs.com/) and place ISS location as marker.
37 | 3. Updating location continuously with `setInterval()`.
38 | 
39 | #### Objectives
40 | 
41 | 1. Learn `fetch()` for GET requests with Promises and `async`/`await`
42 |    - See loading data from local image / JSON / CSV
43 | 2. Learn to "render" data with native JS DOM manipulation
44 | 3. Discover missing pieces: no persistence, API keys not hidden
45 | 
46 | ### Module 2: The Data Selfie App
47 | 
48 | [The Data Selfie App](https://github.com/joeyklee/data-selfie-app) is a project tutorial by [@joeyklee](https://github.com/joeyklee).
49 | 
50 | #### Videos
51 | 
52 | 1. What is node, npm, and express? Setting up a server to host static pages.
53 | 2. Accessing GeoLocation with `navigator.geolocation`.
54 | 3. What is a POST? Sending data to the server.
55 | 4. What is a database? Saving data to NeDB.
56 | 5. Retrieving data from NeDB with a "RESTian" route.
57 | 6. Adding capture and images with p5.
58 | 7. Next steps/exercise?
59 | 
60 | #### Objectives
61 | 
62 | 1. Learn the basics of server-side programming with Node (and express?)
63 | 2. Learn how to save data to a database with [NedB](https://github.com/louischatriot/nedb).
64 |    - show just plain array
65 |    - show flat file
66 |    - introduce the idea of the database
67 | 3. Learn how to use `fetch()` to POST data to the server.
68 | 
69 | ### Module 3: The Weather Here
70 | 
71 | [The Weather Here](https://github.com/joeyklee/the-weather-here) is a project tutorial by [@joeyklee](https://github.com/joeyklee).
72 | 
73 | #### Objectives
74 | 
75 | 1. Learn how to use `fetch()` to grab data from APIs in node.js.
76 | 2. Learn how to store private API keys using environment variables.
77 | 3. Learn how to deploy your project using services like [Glitch](http://glitch.com) and more.
78 | 


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_array/images/daniele-levis-pelusi-311027-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/01_fetch_exercise_array/images/daniele-levis-pelusi-311027-unsplash.jpg


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_array/images/guy-stevens-746794-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/01_fetch_exercise_array/images/guy-stevens-746794-unsplash.jpg


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_array/images/sharon-pittaway-98257-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/01_fetch_exercise_array/images/sharon-pittaway-98257-unsplash.jpg


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_array/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data/APIs 1</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Fetch Rainbows</h1>
11 | 
12 |     <script>
13 |       console.log('about to fetch some rainbows');
14 |       const filenames = [
15 |         'images/daniele-levis-pelusi-311027-unsplash.jpg',
16 |         'images/guy-stevens-746794-unsplash.jpg',
17 |         'images/sharon-pittaway-98257-unsplash.jpg'
18 |       ];
19 | 
20 |       catchRainbows(filenames)
21 |         .then(response => {
22 |           console.log('yay');
23 |         })
24 |         .catch(error => {
25 |           console.log('error!');
26 |           console.error(error);
27 |         });
28 | 
29 |       async function catchRainbows(filenames) {
30 |         for (let filename of filenames) {
31 |           const response = await fetch(filename);
32 |           const blob = await response.blob();
33 |           const img = document.createElement('img');
34 |           img.src = URL.createObjectURL(blob);
35 |           img.width = '200';
36 |           document.body.append(img);
37 |         }
38 |       }
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_text/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data/APIs 1</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Fetch a Poem</h1>
11 |     <p id="poem"/>
12 |     <script>
13 |       console.log('about to fetch a poem');
14 |       catchPoem()
15 |         .then(poem => {
16 |           document.getElementById('poem').innerText = poem;
17 |           console.log('yay');
18 |         })
19 |         .catch(error => {
20 |           console.log('error!');
21 |           console.error(error);
22 |         });
23 | 
24 |       async function catchPoem() {
25 |         const response = await fetch('poem.txt');
26 |         return await response.text();
27 |       }
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/module1/01_fetch_exercise_text/poem.txt:
--------------------------------------------------------------------------------
 1 | Invitation to Love
 2 | Paul Laurence Dunbar, 1872 - 1906
 3 | 
 4 |  Come when the nights are bright with stars
 5 |    Or when the moon is mellow;
 6 | Come when the sun his golden bars
 7 |    Drops on the hay-field yellow.
 8 | Come in the twilight soft and gray,
 9 | Come in the night or come in the day,
10 | Come, O love, whene’er you may,
11 |    And you are welcome, welcome.
12 | 
13 | You are sweet, O Love, dear Love,
14 | You are soft as the nesting dove.
15 | Come to my heart and bring it rest
16 | As the bird flies home to its welcome nest.
17 | 
18 | Come when my heart is full of grief
19 |    Or when my heart is merry;
20 | Come with the falling of the leaf
21 |    Or with the redd’ning cherry.
22 | Come when the year’s first blossom blows,
23 | Come when the summer gleams and glows,
24 | Come with the winter’s drifting snows,
25 |    And you are welcome, welcome.


--------------------------------------------------------------------------------
/module1/01_fetch_image/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data/APIs 1</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Fetch a Rainbow</h1>
11 |     <img src="" id="rainbow" width="480" />
12 |     <script>
13 |       console.log('about to fetch a rainbow');
14 | 
15 |       catchRainbow()
16 |         .then(response => {
17 |           console.log('yay');
18 |         })
19 |         .catch(error => {
20 |           console.log('error!');
21 |           console.error(error);
22 |         });
23 | 
24 |       async function catchRainbow() {
25 |         const response = await fetch('rainbow.jpg');
26 |         const blob = await response.blob();
27 |         document.getElementById('rainbow').src = URL.createObjectURL(blob);
28 |       }
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/module1/01_fetch_image/rainbow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/01_fetch_image/rainbow.jpg


--------------------------------------------------------------------------------
/module1/02_fetch_csv/ZonAnn.Ts+dSST.csv:
--------------------------------------------------------------------------------
  1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
  2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
  3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60
  4 | 1882,-.11,-.21,-.01,-.28,-.07,.02,-1.49,-.27,-.08,-.09,-.05,.02,.04,.63
  5 | 1883,-.19,-.31,-.06,-.36,-.21,.01,-.35,-.59,-.22,-.24,-.17,-.01,.07,.50
  6 | 1884,-.29,-.43,-.15,-.56,-.21,-.13,-1.32,-.59,-.40,-.23,-.19,-.19,-.02,.65
  7 | 1885,-.31,-.40,-.24,-.58,-.15,-.25,-1.18,-.66,-.42,-.09,-.22,-.31,-.15,.82
  8 | 1886,-.32,-.41,-.24,-.51,-.25,-.22,-1.25,-.49,-.39,-.24,-.26,-.22,-.20,.59
  9 | 1887,-.35,-.41,-.30,-.46,-.32,-.28,-1.57,-.48,-.25,-.31,-.33,-.28,-.26,.32
 10 | 1888,-.18,-.23,-.14,-.42,.07,-.29,-1.48,-.44,-.20,.07,.08,-.32,-.23,.16
 11 | 1889,-.11,-.17,-.06,-.28,.05,-.16,-.86,-.21,-.21,.00,.10,-.16,-.15,.45
 12 | 1890,-.37,-.42,-.33,-.47,-.42,-.22,-1.29,-.55,-.25,-.34,-.50,-.18,-.27,.15
 13 | 1891,-.23,-.26,-.21,-.41,-.12,-.21,-1.28,-.29,-.31,-.03,-.21,-.18,-.24,-.15
 14 | 1892,-.27,-.37,-.16,-.40,-.30,-.08,-1.32,-.59,-.10,-.33,-.28,.02,-.22,.09
 15 | 1893,-.32,-.45,-.19,-.47,-.39,-.07,-.91,-.51,-.35,-.42,-.36,.03,-.21,-.04
 16 | 1894,-.31,-.38,-.24,-.32,-.35,-.25,-1.37,-.26,-.11,-.48,-.23,-.16,-.35,-.37
 17 | 1895,-.23,-.29,-.16,-.38,-.09,-.26,-.96,-.45,-.19,-.14,-.03,-.21,-.32,-.58
 18 | 1896,-.11,-.20,-.03,-.36,.09,-.15,-1.25,-.35,-.15,.05,.13,-.15,-.13,.26
 19 | 1897,-.12,-.17,-.07,-.34,.14,-.24,-.79,-.39,-.20,.10,.17,-.21,-.28,.41
 20 | 1898,-.28,-.29,-.28,-.32,-.27,-.27,-1.25,-.16,-.20,-.24,-.29,-.29,-.21,.38
 21 | 1899,-.19,-.21,-.16,-.21,-.16,-.20,-1.12,.00,-.13,-.20,-.12,-.18,-.22,.59
 22 | 1900,-.09,-.09,-.09,-.19,.13,-.31,-.65,-.08,-.13,.07,.19,-.30,-.29,.27
 23 | 1901,-.16,-.10,-.21,-.12,-.07,-.31,-.59,-.03,-.07,-.06,-.07,-.29,-.34,.26
 24 | 1902,-.30,-.35,-.25,-.53,-.09,-.36,-1.64,-.42,-.32,-.07,-.12,-.30,-.43,-.04
 25 | 1903,-.39,-.39,-.39,-.48,-.33,-.39,-.53,-.38,-.52,-.26,-.39,-.37,-.40,-.47
 26 | 1904,-.49,-.50,-.49,-.51,-.52,-.44,-.31,-.56,-.53,-.48,-.56,-.39,-.49,-1.29
 27 | 1905,-.29,-.31,-.26,-.39,-.15,-.36,-.20,-.18,-.59,-.17,-.13,-.34,-.37,-.31
 28 | 1906,-.23,-.23,-.23,-.23,-.22,-.23,-.41,.00,-.34,-.23,-.21,-.21,-.23,-.69
 29 | 1907,-.40,-.47,-.32,-.57,-.34,-.30,-.76,-.69,-.46,-.31,-.36,-.22,-.37,-1.17
 30 | 1908,-.43,-.46,-.42,-.47,-.46,-.35,-.45,-.50,-.46,-.43,-.50,-.29,-.48,.70
 31 | 1909,-.47,-.47,-.48,-.49,-.49,-.44,-.82,-.51,-.40,-.44,-.54,-.38,-.52,-.54
 32 | 1910,-.43,-.44,-.43,-.39,-.51,-.37,-.72,-.16,-.46,-.51,-.51,-.32,-.45,.19
 33 | 1911,-.43,-.40,-.47,-.38,-.44,-.47,-.36,-.36,-.41,-.41,-.46,-.43,-.52,.08
 34 | 1912,-.36,-.45,-.25,-.57,-.19,-.35,-.64,-.71,-.47,-.27,-.12,-.35,-.29,-1.61
 35 | 1913,-.35,-.43,-.27,-.41,-.32,-.34,-.66,-.25,-.46,-.46,-.18,-.27,-.40,-1.01
 36 | 1914,-.16,-.19,-.12,-.23,-.08,-.18,-.59,-.07,-.25,-.13,-.04,-.16,-.18,-.34
 37 | 1915,-.12,-.11,-.13,-.18,-.01,-.21,-.59,-.06,-.15,.01,-.03,-.14,-.23,-1.96
 38 | 1916,-.33,-.36,-.31,-.29,-.44,-.21,-.32,-.43,-.20,-.46,-.42,-.21,-.17,-1.02
 39 | 1917,-.44,-.54,-.35,-.41,-.65,-.18,-.65,-.37,-.39,-.72,-.58,-.22,-.09,.09
 40 | 1918,-.28,-.37,-.20,-.38,-.33,-.13,-1.19,-.16,-.29,-.35,-.30,-.06,-.22,-.25
 41 | 1919,-.27,-.33,-.20,-.40,-.20,-.22,-.85,-.44,-.27,-.22,-.18,-.15,-.32,.22
 42 | 1920,-.25,-.25,-.25,-.19,-.26,-.31,.02,-.07,-.31,-.36,-.16,-.18,-.48,-1.12
 43 | 1921,-.17,-.07,-.28,.06,-.25,-.31,-.03,.27,-.05,-.26,-.24,-.23,-.38,-.81
 44 | 1922,-.27,-.24,-.30,-.20,-.32,-.27,-.39,-.30,-.09,-.30,-.33,-.25,-.28,-.25
 45 | 1923,-.24,-.18,-.30,-.10,-.28,-.33,.13,-.03,-.22,-.29,-.27,-.26,-.41,-.52
 46 | 1924,-.25,-.14,-.35,-.09,-.24,-.42,.28,-.15,-.17,-.22,-.26,-.39,-.46,-.51
 47 | 1925,-.20,-.10,-.30,.00,-.23,-.37,-.16,.27,-.13,-.25,-.21,-.24,-.54,-.84
 48 | 1926,-.08,.05,-.20,.06,.04,-.40,.49,.26,-.19,.03,.06,-.35,-.45,-.61
 49 | 1927,-.20,-.10,-.29,-.10,-.13,-.38,-.04,-.12,-.11,-.09,-.17,-.31,-.45,-1.36
 50 | 1928,-.19,-.07,-.30,-.04,-.15,-.39,.60,-.07,-.20,-.11,-.18,-.29,-.48,-2.10
 51 | 1929,-.34,-.30,-.38,-.34,-.27,-.45,.02,-.51,-.34,-.24,-.30,-.42,-.44,-1.05
 52 | 1930,-.14,.02,-.29,.09,-.09,-.43,.44,.16,-.07,-.07,-.12,-.34,-.47,-2.57
 53 | 1931,-.10,.05,-.23,.03,.05,-.43,.41,.09,-.12,.08,.01,-.42,-.40,-.39
 54 | 1932,-.16,-.05,-.27,.05,-.19,-.34,.23,.31,-.17,-.19,-.18,-.21,-.53,-.96
 55 | 1933,-.30,-.26,-.33,-.24,-.31,-.34,-.43,-.38,-.10,-.29,-.32,-.22,-.49,-1.12
 56 | 1934,-.14,-.01,-.27,.18,-.28,-.26,.65,.41,-.10,-.28,-.28,-.16,-.38,-.54
 57 | 1935,-.20,-.09,-.32,-.02,-.21,-.38,.19,.06,-.13,-.18,-.24,-.31,-.42,-1.69
 58 | 1936,-.16,-.04,-.28,-.03,-.15,-.30,.14,.19,-.22,-.05,-.25,-.27,-.33,-.01
 59 | 1937,-.04,.12,-.20,.18,-.07,-.22,.97,.10,.01,.03,-.16,-.20,-.25,.39
 60 | 1938,-.03,.12,-.21,.34,-.26,-.10,1.09,.45,.05,-.19,-.34,-.06,-.11,-.84
 61 | 1939,-.03,.08,-.15,.23,-.16,-.13,.45,.35,.10,-.13,-.18,-.05,-.19,-1.58
 62 | 1940,.11,.17,.07,.11,.25,-.07,.86,.06,-.07,.25,.25,.03,-.20,-.03
 63 | 1941,.18,.24,.15,.02,.47,-.05,-.23,-.04,.12,.55,.40,.03,-.15,-.44
 64 | 1942,.05,.11,.00,.09,.07,-.01,.25,-.01,.10,.13,.02,.06,-.05,-.87
 65 | 1943,.07,.15,-.02,.32,-.10,.04,1.08,.29,.13,-.10,-.09,.07,.00,1.16
 66 | 1944,.21,.27,.15,.37,.19,.07,.94,.51,.12,.13,.26,.19,-.09,-.21
 67 | 1945,.09,.09,.09,.08,.18,-.02,.36,-.02,.06,.12,.23,.04,.00,-1.85
 68 | 1946,-.07,.04,-.17,.06,-.05,-.24,-.22,-.01,.19,-.01,-.09,-.22,-.24,.02
 69 | 1947,-.04,.06,-.14,.12,-.07,-.15,.85,-.12,.05,-.02,-.11,-.19,-.08,.03
 70 | 1948,-.10,-.01,-.20,.13,-.20,-.21,.07,.34,.02,-.22,-.17,-.19,-.19,-1.01
 71 | 1949,-.10,-.03,-.18,.11,-.20,-.19,.13,.17,.06,-.23,-.17,-.17,-.14,-1.28
 72 | 1950,-.18,-.17,-.20,-.09,-.29,-.12,-.01,-.32,.03,-.30,-.29,-.06,-.16,-.72
 73 | 1951,-.06,.05,-.17,.08,-.06,-.20,-.02,.03,.14,.00,-.13,-.22,-.16,-.18
 74 | 1952,.01,.06,-.03,.09,.01,-.08,.11,-.07,.19,.00,.03,-.09,-.02,-.38
 75 | 1953,.07,.23,-.08,.33,.07,-.19,.81,.36,.17,.08,.05,-.08,-.24,-1.34
 76 | 1954,-.15,-.04,-.25,.02,-.22,-.21,.51,-.21,.01,-.14,-.30,-.17,-.20,-.77
 77 | 1955,-.14,-.10,-.20,.02,-.33,-.05,-.45,-.08,.23,-.29,-.38,-.16,-.08,1.27
 78 | 1956,-.20,-.26,-.16,-.25,-.33,.00,-.29,-.47,-.09,-.28,-.37,-.13,.02,.67
 79 | 1957,.04,.04,.04,.03,.07,.01,.03,.23,-.09,.06,.09,-.09,-.01,.45
 80 | 1958,.07,.17,-.03,.11,.20,-.15,-.11,.18,.13,.27,.14,-.09,-.08,-.55
 81 | 1959,.03,.11,-.06,.15,.07,-.16,.42,.17,.04,.07,.08,-.03,-.26,-.37
 82 | 1960,-.02,.08,-.12,.09,.03,-.20,.32,-.06,.11,.07,-.01,-.10,-.07,-.79
 83 | 1961,.05,.08,.02,.18,-.03,.04,-.16,.37,.17,-.06,.01,.14,-.18,.14
 84 | 1962,.04,.15,-.08,.29,-.05,-.10,.64,.33,.15,-.04,-.05,.09,-.07,-.81
 85 | 1963,.07,.16,-.02,.17,.12,-.10,-.01,.33,.13,.14,.10,-.11,-.17,.08
 86 | 1964,-.20,-.19,-.20,-.24,-.13,-.24,-.66,-.22,-.11,-.13,-.14,-.30,-.07,-.38
 87 | 1965,-.10,-.13,-.08,-.16,-.03,-.14,-.18,-.23,-.11,-.07,.01,-.23,-.03,-.08
 88 | 1966,-.05,.00,-.09,-.12,.08,-.15,-.69,-.16,.07,.17,.00,-.23,-.14,.13
 89 | 1967,-.02,.03,-.08,.13,-.14,-.01,.46,.26,-.07,-.11,-.17,-.09,-.02,.28
 90 | 1968,-.08,-.06,-.09,-.09,-.05,-.09,-.22,-.02,-.09,-.01,-.09,-.14,.00,-.11
 91 | 1969,.07,-.01,.15,-.26,.33,.04,.05,-.59,-.16,.35,.31,.00,.13,.01
 92 | 1970,.03,-.03,.09,-.10,.07,.12,-.17,-.13,-.06,.07,.06,.10,.03,.36
 93 | 1971,-.09,-.16,-.03,-.06,-.26,.11,-.07,.00,-.11,-.30,-.22,.02,.16,.33
 94 | 1972,.01,-.18,.22,-.35,.17,.17,-.40,-.50,-.23,.05,.28,.16,-.02,.60
 95 | 1973,.16,.10,.22,.12,.18,.17,.21,.26,.01,.06,.29,.22,.07,.28
 96 | 1974,-.08,-.20,.03,-.17,-.20,.17,-.26,-.10,-.19,-.24,-.17,.22,-.09,.55
 97 | 1975,-.02,-.06,.02,.12,-.24,.15,.20,.36,-.06,-.31,-.16,.14,.14,.22
 98 | 1976,-.11,-.21,.00,-.26,-.12,.07,-.05,-.33,-.29,-.14,-.10,.11,.22,-.37
 99 | 1977,.17,.11,.23,.13,.15,.23,.21,.22,.05,.08,.23,.21,.31,.15
100 | 1978,.07,.02,.11,-.03,.08,.14,-.03,.00,-.04,.10,.07,.21,.13,-.11
101 | 1979,.16,.08,.24,-.03,.26,.22,-.56,.06,.08,.24,.27,.29,.33,-.24
102 | 1980,.27,.16,.38,.07,.29,.45,.35,.01,.01,.31,.28,.35,.37,.96
103 | 1981,.33,.39,.27,.51,.18,.35,1.34,.78,.08,.21,.16,.28,.38,.52
104 | 1982,.14,.05,.22,-.07,.27,.16,-.30,.07,-.08,.24,.30,.18,.32,-.23
105 | 1983,.31,.26,.38,.24,.43,.23,.34,.67,-.06,.29,.58,.21,.41,-.03
106 | 1984,.16,.04,.29,.03,.18,.28,.39,.08,-.11,.06,.30,.16,.32,.59
107 | 1985,.12,-.01,.25,-.03,.09,.31,.37,-.27,.00,.03,.16,.30,.45,.09
108 | 1986,.18,.13,.24,.11,.22,.21,.10,.25,.04,.16,.29,.25,.25,-.05
109 | 1987,.34,.27,.41,.08,.58,.26,-.22,.14,.13,.55,.62,.32,.25,.10
110 | 1988,.41,.38,.44,.42,.38,.44,.82,.51,.23,.32,.45,.38,.20,1.14
111 | 1989,.29,.29,.29,.43,.15,.34,.45,.67,.27,.09,.22,.36,.30,.36
112 | 1990,.44,.51,.37,.62,.36,.37,.67,.83,.47,.35,.38,.37,.37,.33
113 | 1991,.41,.41,.41,.47,.37,.41,.83,.61,.27,.32,.42,.32,.29,1.01
114 | 1992,.22,.12,.32,.08,.29,.28,-.11,.36,-.04,.20,.38,.21,.33,.41
115 | 1993,.24,.19,.29,.14,.31,.25,.69,.24,-.10,.27,.35,.27,.39,-.14
116 | 1994,.31,.36,.26,.44,.30,.20,.43,.46,.43,.25,.34,.27,.23,-.10
117 | 1995,.45,.58,.31,.71,.43,.21,1.41,.96,.33,.40,.46,.29,.15,.06
118 | 1996,.34,.28,.39,.27,.32,.43,.88,.20,.12,.30,.33,.34,.29,1.07
119 | 1997,.47,.53,.41,.55,.51,.33,.82,.89,.26,.50,.52,.42,.37,-.06
120 | 1998,.62,.73,.52,.82,.70,.34,1.04,.93,.67,.60,.79,.39,.31,.20
121 | 1999,.40,.50,.30,.73,.21,.32,.51,.83,.75,.15,.27,.47,.19,.05
122 | 2000,.40,.50,.30,.71,.24,.30,1.16,.76,.55,.19,.29,.42,.10,.32
123 | 2001,.53,.63,.43,.80,.41,.43,1.10,.81,.70,.39,.43,.57,.24,.39
124 | 2002,.62,.71,.54,.83,.58,.47,1.39,.97,.57,.54,.63,.47,.32,.81
125 | 2003,.61,.73,.49,.82,.61,.38,1.56,.95,.51,.58,.64,.44,.24,.47
126 | 2004,.53,.67,.40,.75,.54,.31,.68,.93,.67,.55,.53,.48,.23,-.11
127 | 2005,.67,.83,.51,.99,.61,.43,2.00,1.17,.55,.59,.62,.49,.19,.75
128 | 2006,.61,.78,.45,.94,.54,.38,1.62,1.05,.66,.54,.55,.51,.20,.32
129 | 2007,.64,.81,.46,1.07,.45,.45,1.90,1.30,.67,.42,.47,.49,.07,1.11
130 | 2008,.51,.64,.39,.86,.36,.37,1.37,1.02,.60,.31,.41,.53,.09,.42
131 | 2009,.63,.69,.57,.73,.67,.48,1.23,.58,.66,.64,.70,.60,.15,.79
132 | 2010,.70,.86,.53,.97,.67,.46,1.98,.85,.73,.70,.63,.63,.20,.41
133 | 2011,.58,.70,.46,.92,.35,.55,2.09,.89,.56,.37,.34,.65,.18,.97
134 | 2012,.61,.76,.47,.96,.50,.41,1.88,.88,.72,.45,.55,.56,.19,.34
135 | 2013,.64,.74,.54,.86,.56,.53,1.17,1.02,.67,.56,.55,.63,.23,.79
136 | 2014,.73,.89,.56,1.04,.65,.52,1.78,1.12,.75,.67,.62,.71,.18,.58
137 | 2015,.86,1.12,.61,1.24,.91,.40,1.66,1.44,.99,.93,.89,.73,.18,-.27
138 | 2016,.98,1.26,.71,1.50,.97,.49,3.05,1.41,1.06,.92,1.02,.66,.25,.42
139 | 2017,.90,1.11,.68,1.32,.79,.61,2.21,1.35,1.02,.81,.77,.75,.35,.68
140 | 2018,.82,.99,.66,1.19,.64,.70,1.87,1.09,1.03,.69,.59,.78,.37,1.07


--------------------------------------------------------------------------------
/module1/02_fetch_csv/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data and APIs Project 1</title>
 8 |   </head>
 9 |   <body>
10 |     Open the JavaScript Console to see the output.
11 |     <script>
12 |       // Data from: https://data.giss.nasa.gov/gistemp/
13 |       // Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
14 | 
15 |       getData()
16 | 
17 |       async function getData() {
18 |         // const response = await fetch('testdata.csv');
19 |         const response = await fetch('ZonAnn.Ts+dSST.csv');
20 |         const data = await response.text();
21 | 
22 |         const table = data.split('\n').slice(1);
23 |         table.forEach(row => {
24 |           const cols = row.split(',');
25 |           const year = cols[0]
26 |           const temp = cols[1]
27 |           console.log(year, temp)
28 |         });
29 |       }
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/module1/02_fetch_csv/testdata.csv:
--------------------------------------------------------------------------------
1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60


--------------------------------------------------------------------------------
/module1/02_graphing_data/ZonAnn.Ts+dSST.csv:
--------------------------------------------------------------------------------
  1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
  2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
  3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60
  4 | 1882,-.11,-.21,-.01,-.28,-.07,.02,-1.49,-.27,-.08,-.09,-.05,.02,.04,.63
  5 | 1883,-.19,-.31,-.06,-.36,-.21,.01,-.35,-.59,-.22,-.24,-.17,-.01,.07,.50
  6 | 1884,-.29,-.43,-.15,-.56,-.21,-.13,-1.32,-.59,-.40,-.23,-.19,-.19,-.02,.65
  7 | 1885,-.31,-.40,-.24,-.58,-.15,-.25,-1.18,-.66,-.42,-.09,-.22,-.31,-.15,.82
  8 | 1886,-.32,-.41,-.24,-.51,-.25,-.22,-1.25,-.49,-.39,-.24,-.26,-.22,-.20,.59
  9 | 1887,-.35,-.41,-.30,-.46,-.32,-.28,-1.57,-.48,-.25,-.31,-.33,-.28,-.26,.32
 10 | 1888,-.18,-.23,-.14,-.42,.07,-.29,-1.48,-.44,-.20,.07,.08,-.32,-.23,.16
 11 | 1889,-.11,-.17,-.06,-.28,.05,-.16,-.86,-.21,-.21,.00,.10,-.16,-.15,.45
 12 | 1890,-.37,-.42,-.33,-.47,-.42,-.22,-1.29,-.55,-.25,-.34,-.50,-.18,-.27,.15
 13 | 1891,-.23,-.26,-.21,-.41,-.12,-.21,-1.28,-.29,-.31,-.03,-.21,-.18,-.24,-.15
 14 | 1892,-.27,-.37,-.16,-.40,-.30,-.08,-1.32,-.59,-.10,-.33,-.28,.02,-.22,.09
 15 | 1893,-.32,-.45,-.19,-.47,-.39,-.07,-.91,-.51,-.35,-.42,-.36,.03,-.21,-.04
 16 | 1894,-.31,-.38,-.24,-.32,-.35,-.25,-1.37,-.26,-.11,-.48,-.23,-.16,-.35,-.37
 17 | 1895,-.23,-.29,-.16,-.38,-.09,-.26,-.96,-.45,-.19,-.14,-.03,-.21,-.32,-.58
 18 | 1896,-.11,-.20,-.03,-.36,.09,-.15,-1.25,-.35,-.15,.05,.13,-.15,-.13,.26
 19 | 1897,-.12,-.17,-.07,-.34,.14,-.24,-.79,-.39,-.20,.10,.17,-.21,-.28,.41
 20 | 1898,-.28,-.29,-.28,-.32,-.27,-.27,-1.25,-.16,-.20,-.24,-.29,-.29,-.21,.38
 21 | 1899,-.19,-.21,-.16,-.21,-.16,-.20,-1.12,.00,-.13,-.20,-.12,-.18,-.22,.59
 22 | 1900,-.09,-.09,-.09,-.19,.13,-.31,-.65,-.08,-.13,.07,.19,-.30,-.29,.27
 23 | 1901,-.16,-.10,-.21,-.12,-.07,-.31,-.59,-.03,-.07,-.06,-.07,-.29,-.34,.26
 24 | 1902,-.30,-.35,-.25,-.53,-.09,-.36,-1.64,-.42,-.32,-.07,-.12,-.30,-.43,-.04
 25 | 1903,-.39,-.39,-.39,-.48,-.33,-.39,-.53,-.38,-.52,-.26,-.39,-.37,-.40,-.47
 26 | 1904,-.49,-.50,-.49,-.51,-.52,-.44,-.31,-.56,-.53,-.48,-.56,-.39,-.49,-1.29
 27 | 1905,-.29,-.31,-.26,-.39,-.15,-.36,-.20,-.18,-.59,-.17,-.13,-.34,-.37,-.31
 28 | 1906,-.23,-.23,-.23,-.23,-.22,-.23,-.41,.00,-.34,-.23,-.21,-.21,-.23,-.69
 29 | 1907,-.40,-.47,-.32,-.57,-.34,-.30,-.76,-.69,-.46,-.31,-.36,-.22,-.37,-1.17
 30 | 1908,-.43,-.46,-.42,-.47,-.46,-.35,-.45,-.50,-.46,-.43,-.50,-.29,-.48,.70
 31 | 1909,-.47,-.47,-.48,-.49,-.49,-.44,-.82,-.51,-.40,-.44,-.54,-.38,-.52,-.54
 32 | 1910,-.43,-.44,-.43,-.39,-.51,-.37,-.72,-.16,-.46,-.51,-.51,-.32,-.45,.19
 33 | 1911,-.43,-.40,-.47,-.38,-.44,-.47,-.36,-.36,-.41,-.41,-.46,-.43,-.52,.08
 34 | 1912,-.36,-.45,-.25,-.57,-.19,-.35,-.64,-.71,-.47,-.27,-.12,-.35,-.29,-1.61
 35 | 1913,-.35,-.43,-.27,-.41,-.32,-.34,-.66,-.25,-.46,-.46,-.18,-.27,-.40,-1.01
 36 | 1914,-.16,-.19,-.12,-.23,-.08,-.18,-.59,-.07,-.25,-.13,-.04,-.16,-.18,-.34
 37 | 1915,-.12,-.11,-.13,-.18,-.01,-.21,-.59,-.06,-.15,.01,-.03,-.14,-.23,-1.96
 38 | 1916,-.33,-.36,-.31,-.29,-.44,-.21,-.32,-.43,-.20,-.46,-.42,-.21,-.17,-1.02
 39 | 1917,-.44,-.54,-.35,-.41,-.65,-.18,-.65,-.37,-.39,-.72,-.58,-.22,-.09,.09
 40 | 1918,-.28,-.37,-.20,-.38,-.33,-.13,-1.19,-.16,-.29,-.35,-.30,-.06,-.22,-.25
 41 | 1919,-.27,-.33,-.20,-.40,-.20,-.22,-.85,-.44,-.27,-.22,-.18,-.15,-.32,.22
 42 | 1920,-.25,-.25,-.25,-.19,-.26,-.31,.02,-.07,-.31,-.36,-.16,-.18,-.48,-1.12
 43 | 1921,-.17,-.07,-.28,.06,-.25,-.31,-.03,.27,-.05,-.26,-.24,-.23,-.38,-.81
 44 | 1922,-.27,-.24,-.30,-.20,-.32,-.27,-.39,-.30,-.09,-.30,-.33,-.25,-.28,-.25
 45 | 1923,-.24,-.18,-.30,-.10,-.28,-.33,.13,-.03,-.22,-.29,-.27,-.26,-.41,-.52
 46 | 1924,-.25,-.14,-.35,-.09,-.24,-.42,.28,-.15,-.17,-.22,-.26,-.39,-.46,-.51
 47 | 1925,-.20,-.10,-.30,.00,-.23,-.37,-.16,.27,-.13,-.25,-.21,-.24,-.54,-.84
 48 | 1926,-.08,.05,-.20,.06,.04,-.40,.49,.26,-.19,.03,.06,-.35,-.45,-.61
 49 | 1927,-.20,-.10,-.29,-.10,-.13,-.38,-.04,-.12,-.11,-.09,-.17,-.31,-.45,-1.36
 50 | 1928,-.19,-.07,-.30,-.04,-.15,-.39,.60,-.07,-.20,-.11,-.18,-.29,-.48,-2.10
 51 | 1929,-.34,-.30,-.38,-.34,-.27,-.45,.02,-.51,-.34,-.24,-.30,-.42,-.44,-1.05
 52 | 1930,-.14,.02,-.29,.09,-.09,-.43,.44,.16,-.07,-.07,-.12,-.34,-.47,-2.57
 53 | 1931,-.10,.05,-.23,.03,.05,-.43,.41,.09,-.12,.08,.01,-.42,-.40,-.39
 54 | 1932,-.16,-.05,-.27,.05,-.19,-.34,.23,.31,-.17,-.19,-.18,-.21,-.53,-.96
 55 | 1933,-.30,-.26,-.33,-.24,-.31,-.34,-.43,-.38,-.10,-.29,-.32,-.22,-.49,-1.12
 56 | 1934,-.14,-.01,-.27,.18,-.28,-.26,.65,.41,-.10,-.28,-.28,-.16,-.38,-.54
 57 | 1935,-.20,-.09,-.32,-.02,-.21,-.38,.19,.06,-.13,-.18,-.24,-.31,-.42,-1.69
 58 | 1936,-.16,-.04,-.28,-.03,-.15,-.30,.14,.19,-.22,-.05,-.25,-.27,-.33,-.01
 59 | 1937,-.04,.12,-.20,.18,-.07,-.22,.97,.10,.01,.03,-.16,-.20,-.25,.39
 60 | 1938,-.03,.12,-.21,.34,-.26,-.10,1.09,.45,.05,-.19,-.34,-.06,-.11,-.84
 61 | 1939,-.03,.08,-.15,.23,-.16,-.13,.45,.35,.10,-.13,-.18,-.05,-.19,-1.58
 62 | 1940,.11,.17,.07,.11,.25,-.07,.86,.06,-.07,.25,.25,.03,-.20,-.03
 63 | 1941,.18,.24,.15,.02,.47,-.05,-.23,-.04,.12,.55,.40,.03,-.15,-.44
 64 | 1942,.05,.11,.00,.09,.07,-.01,.25,-.01,.10,.13,.02,.06,-.05,-.87
 65 | 1943,.07,.15,-.02,.32,-.10,.04,1.08,.29,.13,-.10,-.09,.07,.00,1.16
 66 | 1944,.21,.27,.15,.37,.19,.07,.94,.51,.12,.13,.26,.19,-.09,-.21
 67 | 1945,.09,.09,.09,.08,.18,-.02,.36,-.02,.06,.12,.23,.04,.00,-1.85
 68 | 1946,-.07,.04,-.17,.06,-.05,-.24,-.22,-.01,.19,-.01,-.09,-.22,-.24,.02
 69 | 1947,-.04,.06,-.14,.12,-.07,-.15,.85,-.12,.05,-.02,-.11,-.19,-.08,.03
 70 | 1948,-.10,-.01,-.20,.13,-.20,-.21,.07,.34,.02,-.22,-.17,-.19,-.19,-1.01
 71 | 1949,-.10,-.03,-.18,.11,-.20,-.19,.13,.17,.06,-.23,-.17,-.17,-.14,-1.28
 72 | 1950,-.18,-.17,-.20,-.09,-.29,-.12,-.01,-.32,.03,-.30,-.29,-.06,-.16,-.72
 73 | 1951,-.06,.05,-.17,.08,-.06,-.20,-.02,.03,.14,.00,-.13,-.22,-.16,-.18
 74 | 1952,.01,.06,-.03,.09,.01,-.08,.11,-.07,.19,.00,.03,-.09,-.02,-.38
 75 | 1953,.07,.23,-.08,.33,.07,-.19,.81,.36,.17,.08,.05,-.08,-.24,-1.34
 76 | 1954,-.15,-.04,-.25,.02,-.22,-.21,.51,-.21,.01,-.14,-.30,-.17,-.20,-.77
 77 | 1955,-.14,-.10,-.20,.02,-.33,-.05,-.45,-.08,.23,-.29,-.38,-.16,-.08,1.27
 78 | 1956,-.20,-.26,-.16,-.25,-.33,.00,-.29,-.47,-.09,-.28,-.37,-.13,.02,.67
 79 | 1957,.04,.04,.04,.03,.07,.01,.03,.23,-.09,.06,.09,-.09,-.01,.45
 80 | 1958,.07,.17,-.03,.11,.20,-.15,-.11,.18,.13,.27,.14,-.09,-.08,-.55
 81 | 1959,.03,.11,-.06,.15,.07,-.16,.42,.17,.04,.07,.08,-.03,-.26,-.37
 82 | 1960,-.02,.08,-.12,.09,.03,-.20,.32,-.06,.11,.07,-.01,-.10,-.07,-.79
 83 | 1961,.05,.08,.02,.18,-.03,.04,-.16,.37,.17,-.06,.01,.14,-.18,.14
 84 | 1962,.04,.15,-.08,.29,-.05,-.10,.64,.33,.15,-.04,-.05,.09,-.07,-.81
 85 | 1963,.07,.16,-.02,.17,.12,-.10,-.01,.33,.13,.14,.10,-.11,-.17,.08
 86 | 1964,-.20,-.19,-.20,-.24,-.13,-.24,-.66,-.22,-.11,-.13,-.14,-.30,-.07,-.38
 87 | 1965,-.10,-.13,-.08,-.16,-.03,-.14,-.18,-.23,-.11,-.07,.01,-.23,-.03,-.08
 88 | 1966,-.05,.00,-.09,-.12,.08,-.15,-.69,-.16,.07,.17,.00,-.23,-.14,.13
 89 | 1967,-.02,.03,-.08,.13,-.14,-.01,.46,.26,-.07,-.11,-.17,-.09,-.02,.28
 90 | 1968,-.08,-.06,-.09,-.09,-.05,-.09,-.22,-.02,-.09,-.01,-.09,-.14,.00,-.11
 91 | 1969,.07,-.01,.15,-.26,.33,.04,.05,-.59,-.16,.35,.31,.00,.13,.01
 92 | 1970,.03,-.03,.09,-.10,.07,.12,-.17,-.13,-.06,.07,.06,.10,.03,.36
 93 | 1971,-.09,-.16,-.03,-.06,-.26,.11,-.07,.00,-.11,-.30,-.22,.02,.16,.33
 94 | 1972,.01,-.18,.22,-.35,.17,.17,-.40,-.50,-.23,.05,.28,.16,-.02,.60
 95 | 1973,.16,.10,.22,.12,.18,.17,.21,.26,.01,.06,.29,.22,.07,.28
 96 | 1974,-.08,-.20,.03,-.17,-.20,.17,-.26,-.10,-.19,-.24,-.17,.22,-.09,.55
 97 | 1975,-.02,-.06,.02,.12,-.24,.15,.20,.36,-.06,-.31,-.16,.14,.14,.22
 98 | 1976,-.11,-.21,.00,-.26,-.12,.07,-.05,-.33,-.29,-.14,-.10,.11,.22,-.37
 99 | 1977,.17,.11,.23,.13,.15,.23,.21,.22,.05,.08,.23,.21,.31,.15
100 | 1978,.07,.02,.11,-.03,.08,.14,-.03,.00,-.04,.10,.07,.21,.13,-.11
101 | 1979,.16,.08,.24,-.03,.26,.22,-.56,.06,.08,.24,.27,.29,.33,-.24
102 | 1980,.27,.16,.38,.07,.29,.45,.35,.01,.01,.31,.28,.35,.37,.96
103 | 1981,.33,.39,.27,.51,.18,.35,1.34,.78,.08,.21,.16,.28,.38,.52
104 | 1982,.14,.05,.22,-.07,.27,.16,-.30,.07,-.08,.24,.30,.18,.32,-.23
105 | 1983,.31,.26,.38,.24,.43,.23,.34,.67,-.06,.29,.58,.21,.41,-.03
106 | 1984,.16,.04,.29,.03,.18,.28,.39,.08,-.11,.06,.30,.16,.32,.59
107 | 1985,.12,-.01,.25,-.03,.09,.31,.37,-.27,.00,.03,.16,.30,.45,.09
108 | 1986,.18,.13,.24,.11,.22,.21,.10,.25,.04,.16,.29,.25,.25,-.05
109 | 1987,.34,.27,.41,.08,.58,.26,-.22,.14,.13,.55,.62,.32,.25,.10
110 | 1988,.41,.38,.44,.42,.38,.44,.82,.51,.23,.32,.45,.38,.20,1.14
111 | 1989,.29,.29,.29,.43,.15,.34,.45,.67,.27,.09,.22,.36,.30,.36
112 | 1990,.44,.51,.37,.62,.36,.37,.67,.83,.47,.35,.38,.37,.37,.33
113 | 1991,.41,.41,.41,.47,.37,.41,.83,.61,.27,.32,.42,.32,.29,1.01
114 | 1992,.22,.12,.32,.08,.29,.28,-.11,.36,-.04,.20,.38,.21,.33,.41
115 | 1993,.24,.19,.29,.14,.31,.25,.69,.24,-.10,.27,.35,.27,.39,-.14
116 | 1994,.31,.36,.26,.44,.30,.20,.43,.46,.43,.25,.34,.27,.23,-.10
117 | 1995,.45,.58,.31,.71,.43,.21,1.41,.96,.33,.40,.46,.29,.15,.06
118 | 1996,.34,.28,.39,.27,.32,.43,.88,.20,.12,.30,.33,.34,.29,1.07
119 | 1997,.47,.53,.41,.55,.51,.33,.82,.89,.26,.50,.52,.42,.37,-.06
120 | 1998,.62,.73,.52,.82,.70,.34,1.04,.93,.67,.60,.79,.39,.31,.20
121 | 1999,.40,.50,.30,.73,.21,.32,.51,.83,.75,.15,.27,.47,.19,.05
122 | 2000,.40,.50,.30,.71,.24,.30,1.16,.76,.55,.19,.29,.42,.10,.32
123 | 2001,.53,.63,.43,.80,.41,.43,1.10,.81,.70,.39,.43,.57,.24,.39
124 | 2002,.62,.71,.54,.83,.58,.47,1.39,.97,.57,.54,.63,.47,.32,.81
125 | 2003,.61,.73,.49,.82,.61,.38,1.56,.95,.51,.58,.64,.44,.24,.47
126 | 2004,.53,.67,.40,.75,.54,.31,.68,.93,.67,.55,.53,.48,.23,-.11
127 | 2005,.67,.83,.51,.99,.61,.43,2.00,1.17,.55,.59,.62,.49,.19,.75
128 | 2006,.61,.78,.45,.94,.54,.38,1.62,1.05,.66,.54,.55,.51,.20,.32
129 | 2007,.64,.81,.46,1.07,.45,.45,1.90,1.30,.67,.42,.47,.49,.07,1.11
130 | 2008,.51,.64,.39,.86,.36,.37,1.37,1.02,.60,.31,.41,.53,.09,.42
131 | 2009,.63,.69,.57,.73,.67,.48,1.23,.58,.66,.64,.70,.60,.15,.79
132 | 2010,.70,.86,.53,.97,.67,.46,1.98,.85,.73,.70,.63,.63,.20,.41
133 | 2011,.58,.70,.46,.92,.35,.55,2.09,.89,.56,.37,.34,.65,.18,.97
134 | 2012,.61,.76,.47,.96,.50,.41,1.88,.88,.72,.45,.55,.56,.19,.34
135 | 2013,.64,.74,.54,.86,.56,.53,1.17,1.02,.67,.56,.55,.63,.23,.79
136 | 2014,.73,.89,.56,1.04,.65,.52,1.78,1.12,.75,.67,.62,.71,.18,.58
137 | 2015,.86,1.12,.61,1.24,.91,.40,1.66,1.44,.99,.93,.89,.73,.18,-.27
138 | 2016,.98,1.26,.71,1.50,.97,.49,3.05,1.41,1.06,.92,1.02,.66,.25,.42
139 | 2017,.90,1.11,.68,1.32,.79,.61,2.21,1.35,1.02,.81,.77,.75,.35,.68
140 | 2018,.82,.99,.66,1.19,.64,.70,1.87,1.09,1.03,.69,.59,.78,.37,1.07
141 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data and APIs Project 1</title>
 8 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 9 |   </head>
10 |   <body>
11 |     <h1>Global Average Temperatures 1880-2018</h1>
12 |     <canvas id="myChart" width="400" height="200"></canvas>
13 | 
14 |     <script>
15 |       // Data from: https://data.giss.nasa.gov/gistemp/
16 |       // Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
17 | 
18 |       window.addEventListener('load', setup);
19 | 
20 |       async function setup() {
21 |         const ctx = document.getElementById('myChart').getContext('2d');
22 |         const globalTemps = await getData();
23 |         const myChart = new Chart(ctx, {
24 |           type: 'line',
25 |           data: {
26 |             labels: globalTemps.years,
27 |             datasets: [
28 |               {
29 |                 label: 'Temperature in °C',
30 |                 data: globalTemps.temps,
31 |                 fill: false,
32 |                 borderColor: 'rgba(255, 99, 132, 1)',
33 |                 backgroundColor: 'rgba(255, 99, 132, 0.5)',
34 |                 borderWidth: 1
35 |               }
36 |             ]
37 |           },
38 |           options: {}
39 |         });
40 |       }
41 | 
42 |       async function getData() {
43 |         // const response = await fetch('testdata.csv');
44 |         const response = await fetch('ZonAnn.Ts+dSST.csv');
45 |         const data = await response.text();
46 |         const years = [];
47 |         const temps = [];
48 |         const rows = data.split('\n').slice(1);
49 |         rows.forEach(row => {
50 |           const cols = row.split(',');
51 |           years.push(cols[0]);
52 |           temps.push(14 + parseFloat(cols[1]));
53 |         });
54 |         return { years, temps };
55 |       }
56 |     </script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data/testdata.csv:
--------------------------------------------------------------------------------
1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_multiple/ZonAnn.Ts+dSST.csv:
--------------------------------------------------------------------------------
  1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
  2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
  3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60
  4 | 1882,-.11,-.21,-.01,-.28,-.07,.02,-1.49,-.27,-.08,-.09,-.05,.02,.04,.63
  5 | 1883,-.19,-.31,-.06,-.36,-.21,.01,-.35,-.59,-.22,-.24,-.17,-.01,.07,.50
  6 | 1884,-.29,-.43,-.15,-.56,-.21,-.13,-1.32,-.59,-.40,-.23,-.19,-.19,-.02,.65
  7 | 1885,-.31,-.40,-.24,-.58,-.15,-.25,-1.18,-.66,-.42,-.09,-.22,-.31,-.15,.82
  8 | 1886,-.32,-.41,-.24,-.51,-.25,-.22,-1.25,-.49,-.39,-.24,-.26,-.22,-.20,.59
  9 | 1887,-.35,-.41,-.30,-.46,-.32,-.28,-1.57,-.48,-.25,-.31,-.33,-.28,-.26,.32
 10 | 1888,-.18,-.23,-.14,-.42,.07,-.29,-1.48,-.44,-.20,.07,.08,-.32,-.23,.16
 11 | 1889,-.11,-.17,-.06,-.28,.05,-.16,-.86,-.21,-.21,.00,.10,-.16,-.15,.45
 12 | 1890,-.37,-.42,-.33,-.47,-.42,-.22,-1.29,-.55,-.25,-.34,-.50,-.18,-.27,.15
 13 | 1891,-.23,-.26,-.21,-.41,-.12,-.21,-1.28,-.29,-.31,-.03,-.21,-.18,-.24,-.15
 14 | 1892,-.27,-.37,-.16,-.40,-.30,-.08,-1.32,-.59,-.10,-.33,-.28,.02,-.22,.09
 15 | 1893,-.32,-.45,-.19,-.47,-.39,-.07,-.91,-.51,-.35,-.42,-.36,.03,-.21,-.04
 16 | 1894,-.31,-.38,-.24,-.32,-.35,-.25,-1.37,-.26,-.11,-.48,-.23,-.16,-.35,-.37
 17 | 1895,-.23,-.29,-.16,-.38,-.09,-.26,-.96,-.45,-.19,-.14,-.03,-.21,-.32,-.58
 18 | 1896,-.11,-.20,-.03,-.36,.09,-.15,-1.25,-.35,-.15,.05,.13,-.15,-.13,.26
 19 | 1897,-.12,-.17,-.07,-.34,.14,-.24,-.79,-.39,-.20,.10,.17,-.21,-.28,.41
 20 | 1898,-.28,-.29,-.28,-.32,-.27,-.27,-1.25,-.16,-.20,-.24,-.29,-.29,-.21,.38
 21 | 1899,-.19,-.21,-.16,-.21,-.16,-.20,-1.12,.00,-.13,-.20,-.12,-.18,-.22,.59
 22 | 1900,-.09,-.09,-.09,-.19,.13,-.31,-.65,-.08,-.13,.07,.19,-.30,-.29,.27
 23 | 1901,-.16,-.10,-.21,-.12,-.07,-.31,-.59,-.03,-.07,-.06,-.07,-.29,-.34,.26
 24 | 1902,-.30,-.35,-.25,-.53,-.09,-.36,-1.64,-.42,-.32,-.07,-.12,-.30,-.43,-.04
 25 | 1903,-.39,-.39,-.39,-.48,-.33,-.39,-.53,-.38,-.52,-.26,-.39,-.37,-.40,-.47
 26 | 1904,-.49,-.50,-.49,-.51,-.52,-.44,-.31,-.56,-.53,-.48,-.56,-.39,-.49,-1.29
 27 | 1905,-.29,-.31,-.26,-.39,-.15,-.36,-.20,-.18,-.59,-.17,-.13,-.34,-.37,-.31
 28 | 1906,-.23,-.23,-.23,-.23,-.22,-.23,-.41,.00,-.34,-.23,-.21,-.21,-.23,-.69
 29 | 1907,-.40,-.47,-.32,-.57,-.34,-.30,-.76,-.69,-.46,-.31,-.36,-.22,-.37,-1.17
 30 | 1908,-.43,-.46,-.42,-.47,-.46,-.35,-.45,-.50,-.46,-.43,-.50,-.29,-.48,.70
 31 | 1909,-.47,-.47,-.48,-.49,-.49,-.44,-.82,-.51,-.40,-.44,-.54,-.38,-.52,-.54
 32 | 1910,-.43,-.44,-.43,-.39,-.51,-.37,-.72,-.16,-.46,-.51,-.51,-.32,-.45,.19
 33 | 1911,-.43,-.40,-.47,-.38,-.44,-.47,-.36,-.36,-.41,-.41,-.46,-.43,-.52,.08
 34 | 1912,-.36,-.45,-.25,-.57,-.19,-.35,-.64,-.71,-.47,-.27,-.12,-.35,-.29,-1.61
 35 | 1913,-.35,-.43,-.27,-.41,-.32,-.34,-.66,-.25,-.46,-.46,-.18,-.27,-.40,-1.01
 36 | 1914,-.16,-.19,-.12,-.23,-.08,-.18,-.59,-.07,-.25,-.13,-.04,-.16,-.18,-.34
 37 | 1915,-.12,-.11,-.13,-.18,-.01,-.21,-.59,-.06,-.15,.01,-.03,-.14,-.23,-1.96
 38 | 1916,-.33,-.36,-.31,-.29,-.44,-.21,-.32,-.43,-.20,-.46,-.42,-.21,-.17,-1.02
 39 | 1917,-.44,-.54,-.35,-.41,-.65,-.18,-.65,-.37,-.39,-.72,-.58,-.22,-.09,.09
 40 | 1918,-.28,-.37,-.20,-.38,-.33,-.13,-1.19,-.16,-.29,-.35,-.30,-.06,-.22,-.25
 41 | 1919,-.27,-.33,-.20,-.40,-.20,-.22,-.85,-.44,-.27,-.22,-.18,-.15,-.32,.22
 42 | 1920,-.25,-.25,-.25,-.19,-.26,-.31,.02,-.07,-.31,-.36,-.16,-.18,-.48,-1.12
 43 | 1921,-.17,-.07,-.28,.06,-.25,-.31,-.03,.27,-.05,-.26,-.24,-.23,-.38,-.81
 44 | 1922,-.27,-.24,-.30,-.20,-.32,-.27,-.39,-.30,-.09,-.30,-.33,-.25,-.28,-.25
 45 | 1923,-.24,-.18,-.30,-.10,-.28,-.33,.13,-.03,-.22,-.29,-.27,-.26,-.41,-.52
 46 | 1924,-.25,-.14,-.35,-.09,-.24,-.42,.28,-.15,-.17,-.22,-.26,-.39,-.46,-.51
 47 | 1925,-.20,-.10,-.30,.00,-.23,-.37,-.16,.27,-.13,-.25,-.21,-.24,-.54,-.84
 48 | 1926,-.08,.05,-.20,.06,.04,-.40,.49,.26,-.19,.03,.06,-.35,-.45,-.61
 49 | 1927,-.20,-.10,-.29,-.10,-.13,-.38,-.04,-.12,-.11,-.09,-.17,-.31,-.45,-1.36
 50 | 1928,-.19,-.07,-.30,-.04,-.15,-.39,.60,-.07,-.20,-.11,-.18,-.29,-.48,-2.10
 51 | 1929,-.34,-.30,-.38,-.34,-.27,-.45,.02,-.51,-.34,-.24,-.30,-.42,-.44,-1.05
 52 | 1930,-.14,.02,-.29,.09,-.09,-.43,.44,.16,-.07,-.07,-.12,-.34,-.47,-2.57
 53 | 1931,-.10,.05,-.23,.03,.05,-.43,.41,.09,-.12,.08,.01,-.42,-.40,-.39
 54 | 1932,-.16,-.05,-.27,.05,-.19,-.34,.23,.31,-.17,-.19,-.18,-.21,-.53,-.96
 55 | 1933,-.30,-.26,-.33,-.24,-.31,-.34,-.43,-.38,-.10,-.29,-.32,-.22,-.49,-1.12
 56 | 1934,-.14,-.01,-.27,.18,-.28,-.26,.65,.41,-.10,-.28,-.28,-.16,-.38,-.54
 57 | 1935,-.20,-.09,-.32,-.02,-.21,-.38,.19,.06,-.13,-.18,-.24,-.31,-.42,-1.69
 58 | 1936,-.16,-.04,-.28,-.03,-.15,-.30,.14,.19,-.22,-.05,-.25,-.27,-.33,-.01
 59 | 1937,-.04,.12,-.20,.18,-.07,-.22,.97,.10,.01,.03,-.16,-.20,-.25,.39
 60 | 1938,-.03,.12,-.21,.34,-.26,-.10,1.09,.45,.05,-.19,-.34,-.06,-.11,-.84
 61 | 1939,-.03,.08,-.15,.23,-.16,-.13,.45,.35,.10,-.13,-.18,-.05,-.19,-1.58
 62 | 1940,.11,.17,.07,.11,.25,-.07,.86,.06,-.07,.25,.25,.03,-.20,-.03
 63 | 1941,.18,.24,.15,.02,.47,-.05,-.23,-.04,.12,.55,.40,.03,-.15,-.44
 64 | 1942,.05,.11,.00,.09,.07,-.01,.25,-.01,.10,.13,.02,.06,-.05,-.87
 65 | 1943,.07,.15,-.02,.32,-.10,.04,1.08,.29,.13,-.10,-.09,.07,.00,1.16
 66 | 1944,.21,.27,.15,.37,.19,.07,.94,.51,.12,.13,.26,.19,-.09,-.21
 67 | 1945,.09,.09,.09,.08,.18,-.02,.36,-.02,.06,.12,.23,.04,.00,-1.85
 68 | 1946,-.07,.04,-.17,.06,-.05,-.24,-.22,-.01,.19,-.01,-.09,-.22,-.24,.02
 69 | 1947,-.04,.06,-.14,.12,-.07,-.15,.85,-.12,.05,-.02,-.11,-.19,-.08,.03
 70 | 1948,-.10,-.01,-.20,.13,-.20,-.21,.07,.34,.02,-.22,-.17,-.19,-.19,-1.01
 71 | 1949,-.10,-.03,-.18,.11,-.20,-.19,.13,.17,.06,-.23,-.17,-.17,-.14,-1.28
 72 | 1950,-.18,-.17,-.20,-.09,-.29,-.12,-.01,-.32,.03,-.30,-.29,-.06,-.16,-.72
 73 | 1951,-.06,.05,-.17,.08,-.06,-.20,-.02,.03,.14,.00,-.13,-.22,-.16,-.18
 74 | 1952,.01,.06,-.03,.09,.01,-.08,.11,-.07,.19,.00,.03,-.09,-.02,-.38
 75 | 1953,.07,.23,-.08,.33,.07,-.19,.81,.36,.17,.08,.05,-.08,-.24,-1.34
 76 | 1954,-.15,-.04,-.25,.02,-.22,-.21,.51,-.21,.01,-.14,-.30,-.17,-.20,-.77
 77 | 1955,-.14,-.10,-.20,.02,-.33,-.05,-.45,-.08,.23,-.29,-.38,-.16,-.08,1.27
 78 | 1956,-.20,-.26,-.16,-.25,-.33,.00,-.29,-.47,-.09,-.28,-.37,-.13,.02,.67
 79 | 1957,.04,.04,.04,.03,.07,.01,.03,.23,-.09,.06,.09,-.09,-.01,.45
 80 | 1958,.07,.17,-.03,.11,.20,-.15,-.11,.18,.13,.27,.14,-.09,-.08,-.55
 81 | 1959,.03,.11,-.06,.15,.07,-.16,.42,.17,.04,.07,.08,-.03,-.26,-.37
 82 | 1960,-.02,.08,-.12,.09,.03,-.20,.32,-.06,.11,.07,-.01,-.10,-.07,-.79
 83 | 1961,.05,.08,.02,.18,-.03,.04,-.16,.37,.17,-.06,.01,.14,-.18,.14
 84 | 1962,.04,.15,-.08,.29,-.05,-.10,.64,.33,.15,-.04,-.05,.09,-.07,-.81
 85 | 1963,.07,.16,-.02,.17,.12,-.10,-.01,.33,.13,.14,.10,-.11,-.17,.08
 86 | 1964,-.20,-.19,-.20,-.24,-.13,-.24,-.66,-.22,-.11,-.13,-.14,-.30,-.07,-.38
 87 | 1965,-.10,-.13,-.08,-.16,-.03,-.14,-.18,-.23,-.11,-.07,.01,-.23,-.03,-.08
 88 | 1966,-.05,.00,-.09,-.12,.08,-.15,-.69,-.16,.07,.17,.00,-.23,-.14,.13
 89 | 1967,-.02,.03,-.08,.13,-.14,-.01,.46,.26,-.07,-.11,-.17,-.09,-.02,.28
 90 | 1968,-.08,-.06,-.09,-.09,-.05,-.09,-.22,-.02,-.09,-.01,-.09,-.14,.00,-.11
 91 | 1969,.07,-.01,.15,-.26,.33,.04,.05,-.59,-.16,.35,.31,.00,.13,.01
 92 | 1970,.03,-.03,.09,-.10,.07,.12,-.17,-.13,-.06,.07,.06,.10,.03,.36
 93 | 1971,-.09,-.16,-.03,-.06,-.26,.11,-.07,.00,-.11,-.30,-.22,.02,.16,.33
 94 | 1972,.01,-.18,.22,-.35,.17,.17,-.40,-.50,-.23,.05,.28,.16,-.02,.60
 95 | 1973,.16,.10,.22,.12,.18,.17,.21,.26,.01,.06,.29,.22,.07,.28
 96 | 1974,-.08,-.20,.03,-.17,-.20,.17,-.26,-.10,-.19,-.24,-.17,.22,-.09,.55
 97 | 1975,-.02,-.06,.02,.12,-.24,.15,.20,.36,-.06,-.31,-.16,.14,.14,.22
 98 | 1976,-.11,-.21,.00,-.26,-.12,.07,-.05,-.33,-.29,-.14,-.10,.11,.22,-.37
 99 | 1977,.17,.11,.23,.13,.15,.23,.21,.22,.05,.08,.23,.21,.31,.15
100 | 1978,.07,.02,.11,-.03,.08,.14,-.03,.00,-.04,.10,.07,.21,.13,-.11
101 | 1979,.16,.08,.24,-.03,.26,.22,-.56,.06,.08,.24,.27,.29,.33,-.24
102 | 1980,.27,.16,.38,.07,.29,.45,.35,.01,.01,.31,.28,.35,.37,.96
103 | 1981,.33,.39,.27,.51,.18,.35,1.34,.78,.08,.21,.16,.28,.38,.52
104 | 1982,.14,.05,.22,-.07,.27,.16,-.30,.07,-.08,.24,.30,.18,.32,-.23
105 | 1983,.31,.26,.38,.24,.43,.23,.34,.67,-.06,.29,.58,.21,.41,-.03
106 | 1984,.16,.04,.29,.03,.18,.28,.39,.08,-.11,.06,.30,.16,.32,.59
107 | 1985,.12,-.01,.25,-.03,.09,.31,.37,-.27,.00,.03,.16,.30,.45,.09
108 | 1986,.18,.13,.24,.11,.22,.21,.10,.25,.04,.16,.29,.25,.25,-.05
109 | 1987,.34,.27,.41,.08,.58,.26,-.22,.14,.13,.55,.62,.32,.25,.10
110 | 1988,.41,.38,.44,.42,.38,.44,.82,.51,.23,.32,.45,.38,.20,1.14
111 | 1989,.29,.29,.29,.43,.15,.34,.45,.67,.27,.09,.22,.36,.30,.36
112 | 1990,.44,.51,.37,.62,.36,.37,.67,.83,.47,.35,.38,.37,.37,.33
113 | 1991,.41,.41,.41,.47,.37,.41,.83,.61,.27,.32,.42,.32,.29,1.01
114 | 1992,.22,.12,.32,.08,.29,.28,-.11,.36,-.04,.20,.38,.21,.33,.41
115 | 1993,.24,.19,.29,.14,.31,.25,.69,.24,-.10,.27,.35,.27,.39,-.14
116 | 1994,.31,.36,.26,.44,.30,.20,.43,.46,.43,.25,.34,.27,.23,-.10
117 | 1995,.45,.58,.31,.71,.43,.21,1.41,.96,.33,.40,.46,.29,.15,.06
118 | 1996,.34,.28,.39,.27,.32,.43,.88,.20,.12,.30,.33,.34,.29,1.07
119 | 1997,.47,.53,.41,.55,.51,.33,.82,.89,.26,.50,.52,.42,.37,-.06
120 | 1998,.62,.73,.52,.82,.70,.34,1.04,.93,.67,.60,.79,.39,.31,.20
121 | 1999,.40,.50,.30,.73,.21,.32,.51,.83,.75,.15,.27,.47,.19,.05
122 | 2000,.40,.50,.30,.71,.24,.30,1.16,.76,.55,.19,.29,.42,.10,.32
123 | 2001,.53,.63,.43,.80,.41,.43,1.10,.81,.70,.39,.43,.57,.24,.39
124 | 2002,.62,.71,.54,.83,.58,.47,1.39,.97,.57,.54,.63,.47,.32,.81
125 | 2003,.61,.73,.49,.82,.61,.38,1.56,.95,.51,.58,.64,.44,.24,.47
126 | 2004,.53,.67,.40,.75,.54,.31,.68,.93,.67,.55,.53,.48,.23,-.11
127 | 2005,.67,.83,.51,.99,.61,.43,2.00,1.17,.55,.59,.62,.49,.19,.75
128 | 2006,.61,.78,.45,.94,.54,.38,1.62,1.05,.66,.54,.55,.51,.20,.32
129 | 2007,.64,.81,.46,1.07,.45,.45,1.90,1.30,.67,.42,.47,.49,.07,1.11
130 | 2008,.51,.64,.39,.86,.36,.37,1.37,1.02,.60,.31,.41,.53,.09,.42
131 | 2009,.63,.69,.57,.73,.67,.48,1.23,.58,.66,.64,.70,.60,.15,.79
132 | 2010,.70,.86,.53,.97,.67,.46,1.98,.85,.73,.70,.63,.63,.20,.41
133 | 2011,.58,.70,.46,.92,.35,.55,2.09,.89,.56,.37,.34,.65,.18,.97
134 | 2012,.61,.76,.47,.96,.50,.41,1.88,.88,.72,.45,.55,.56,.19,.34
135 | 2013,.64,.74,.54,.86,.56,.53,1.17,1.02,.67,.56,.55,.63,.23,.79
136 | 2014,.73,.89,.56,1.04,.65,.52,1.78,1.12,.75,.67,.62,.71,.18,.58
137 | 2015,.86,1.12,.61,1.24,.91,.40,1.66,1.44,.99,.93,.89,.73,.18,-.27
138 | 2016,.98,1.26,.71,1.50,.97,.49,3.05,1.41,1.06,.92,1.02,.66,.25,.42
139 | 2017,.90,1.11,.68,1.32,.79,.61,2.21,1.35,1.02,.81,.77,.75,.35,.68
140 | 2018,.82,.99,.66,1.19,.64,.70,1.87,1.09,1.03,.69,.59,.78,.37,1.07
141 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_multiple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data and APIs Project 1</title>
 8 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 9 |   </head>
10 |   <body>
11 |     <h1>Global Average Temperatures 1880-2018</h1>
12 |     <canvas id="myChart" width="400" height="200"></canvas>
13 | 
14 |     <script>
15 |       // Data from: https://data.giss.nasa.gov/gistemp/
16 |       // Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
17 | 
18 |       window.addEventListener('load', setup);
19 | 
20 |       async function setup() {
21 |         const ctx = document.getElementById('myChart').getContext('2d');
22 |         const dataTemps = await getData();
23 |         const myChart = new Chart(ctx, {
24 |           type: 'line',
25 |           data: {
26 |             labels: dataTemps.years,
27 |             datasets: [
28 |               {
29 |                 label: 'Global Temperature in °C',
30 |                 data: dataTemps.temps,
31 |                 fill: false,
32 |                 borderColor: 'rgba(255, 99, 132, 1)',
33 |                 backgroundColor: 'rgba(255, 99, 132, 0.5)',
34 |                 borderWidth: 1
35 |               },
36 |               {
37 |                 label: 'Northern Hemisphere Temperature in °C',
38 |                 data: dataTemps.northern,
39 |                 fill: false,
40 |                 borderColor: 'rgba(99, 132, 255, 1)',
41 |                 backgroundColor: 'rgba(99, 132, 255, 0.5)',
42 |                 borderWidth: 1
43 |               },
44 |               {
45 |                 label: 'Souther Hemisphere in °C',
46 |                 data: dataTemps.southern,
47 |                 fill: false,
48 |                 borderColor: 'rgba(99, 255, 132, 1)',
49 |                 backgroundColor: 'rgba(99, 255, 132, 0.5)',
50 |                 borderWidth: 1
51 |               }
52 |             ]
53 |           },
54 |           options: {}
55 |         });
56 |       }
57 | 
58 |       async function getData() {
59 |         // const response = await fetch('testdata.csv');
60 |         const response = await fetch('ZonAnn.Ts+dSST.csv');
61 |         const data = await response.text();
62 |         const years = [];
63 |         const temps = [];
64 |         const northern = [];
65 |         const southern = [];
66 |         const rows = data.split('\n').slice(1);
67 |         rows.forEach(row => {
68 |           const cols = row.split(',');
69 |           years.push(cols[0]);
70 |           temps.push(14 + parseFloat(cols[1]));
71 |           northern.push(14 + parseFloat(cols[2]));
72 |           southern.push(14 + parseFloat(cols[3]));
73 |         });
74 |         return { years, temps, northern, southern };
75 |       }
76 |     </script>
77 |   </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_multiple/testdata.csv:
--------------------------------------------------------------------------------
1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_p5/ZonAnn.Ts+dSST.csv:
--------------------------------------------------------------------------------
  1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
  2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
  3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60
  4 | 1882,-.11,-.21,-.01,-.28,-.07,.02,-1.49,-.27,-.08,-.09,-.05,.02,.04,.63
  5 | 1883,-.19,-.31,-.06,-.36,-.21,.01,-.35,-.59,-.22,-.24,-.17,-.01,.07,.50
  6 | 1884,-.29,-.43,-.15,-.56,-.21,-.13,-1.32,-.59,-.40,-.23,-.19,-.19,-.02,.65
  7 | 1885,-.31,-.40,-.24,-.58,-.15,-.25,-1.18,-.66,-.42,-.09,-.22,-.31,-.15,.82
  8 | 1886,-.32,-.41,-.24,-.51,-.25,-.22,-1.25,-.49,-.39,-.24,-.26,-.22,-.20,.59
  9 | 1887,-.35,-.41,-.30,-.46,-.32,-.28,-1.57,-.48,-.25,-.31,-.33,-.28,-.26,.32
 10 | 1888,-.18,-.23,-.14,-.42,.07,-.29,-1.48,-.44,-.20,.07,.08,-.32,-.23,.16
 11 | 1889,-.11,-.17,-.06,-.28,.05,-.16,-.86,-.21,-.21,.00,.10,-.16,-.15,.45
 12 | 1890,-.37,-.42,-.33,-.47,-.42,-.22,-1.29,-.55,-.25,-.34,-.50,-.18,-.27,.15
 13 | 1891,-.23,-.26,-.21,-.41,-.12,-.21,-1.28,-.29,-.31,-.03,-.21,-.18,-.24,-.15
 14 | 1892,-.27,-.37,-.16,-.40,-.30,-.08,-1.32,-.59,-.10,-.33,-.28,.02,-.22,.09
 15 | 1893,-.32,-.45,-.19,-.47,-.39,-.07,-.91,-.51,-.35,-.42,-.36,.03,-.21,-.04
 16 | 1894,-.31,-.38,-.24,-.32,-.35,-.25,-1.37,-.26,-.11,-.48,-.23,-.16,-.35,-.37
 17 | 1895,-.23,-.29,-.16,-.38,-.09,-.26,-.96,-.45,-.19,-.14,-.03,-.21,-.32,-.58
 18 | 1896,-.11,-.20,-.03,-.36,.09,-.15,-1.25,-.35,-.15,.05,.13,-.15,-.13,.26
 19 | 1897,-.12,-.17,-.07,-.34,.14,-.24,-.79,-.39,-.20,.10,.17,-.21,-.28,.41
 20 | 1898,-.28,-.29,-.28,-.32,-.27,-.27,-1.25,-.16,-.20,-.24,-.29,-.29,-.21,.38
 21 | 1899,-.19,-.21,-.16,-.21,-.16,-.20,-1.12,.00,-.13,-.20,-.12,-.18,-.22,.59
 22 | 1900,-.09,-.09,-.09,-.19,.13,-.31,-.65,-.08,-.13,.07,.19,-.30,-.29,.27
 23 | 1901,-.16,-.10,-.21,-.12,-.07,-.31,-.59,-.03,-.07,-.06,-.07,-.29,-.34,.26
 24 | 1902,-.30,-.35,-.25,-.53,-.09,-.36,-1.64,-.42,-.32,-.07,-.12,-.30,-.43,-.04
 25 | 1903,-.39,-.39,-.39,-.48,-.33,-.39,-.53,-.38,-.52,-.26,-.39,-.37,-.40,-.47
 26 | 1904,-.49,-.50,-.49,-.51,-.52,-.44,-.31,-.56,-.53,-.48,-.56,-.39,-.49,-1.29
 27 | 1905,-.29,-.31,-.26,-.39,-.15,-.36,-.20,-.18,-.59,-.17,-.13,-.34,-.37,-.31
 28 | 1906,-.23,-.23,-.23,-.23,-.22,-.23,-.41,.00,-.34,-.23,-.21,-.21,-.23,-.69
 29 | 1907,-.40,-.47,-.32,-.57,-.34,-.30,-.76,-.69,-.46,-.31,-.36,-.22,-.37,-1.17
 30 | 1908,-.43,-.46,-.42,-.47,-.46,-.35,-.45,-.50,-.46,-.43,-.50,-.29,-.48,.70
 31 | 1909,-.47,-.47,-.48,-.49,-.49,-.44,-.82,-.51,-.40,-.44,-.54,-.38,-.52,-.54
 32 | 1910,-.43,-.44,-.43,-.39,-.51,-.37,-.72,-.16,-.46,-.51,-.51,-.32,-.45,.19
 33 | 1911,-.43,-.40,-.47,-.38,-.44,-.47,-.36,-.36,-.41,-.41,-.46,-.43,-.52,.08
 34 | 1912,-.36,-.45,-.25,-.57,-.19,-.35,-.64,-.71,-.47,-.27,-.12,-.35,-.29,-1.61
 35 | 1913,-.35,-.43,-.27,-.41,-.32,-.34,-.66,-.25,-.46,-.46,-.18,-.27,-.40,-1.01
 36 | 1914,-.16,-.19,-.12,-.23,-.08,-.18,-.59,-.07,-.25,-.13,-.04,-.16,-.18,-.34
 37 | 1915,-.12,-.11,-.13,-.18,-.01,-.21,-.59,-.06,-.15,.01,-.03,-.14,-.23,-1.96
 38 | 1916,-.33,-.36,-.31,-.29,-.44,-.21,-.32,-.43,-.20,-.46,-.42,-.21,-.17,-1.02
 39 | 1917,-.44,-.54,-.35,-.41,-.65,-.18,-.65,-.37,-.39,-.72,-.58,-.22,-.09,.09
 40 | 1918,-.28,-.37,-.20,-.38,-.33,-.13,-1.19,-.16,-.29,-.35,-.30,-.06,-.22,-.25
 41 | 1919,-.27,-.33,-.20,-.40,-.20,-.22,-.85,-.44,-.27,-.22,-.18,-.15,-.32,.22
 42 | 1920,-.25,-.25,-.25,-.19,-.26,-.31,.02,-.07,-.31,-.36,-.16,-.18,-.48,-1.12
 43 | 1921,-.17,-.07,-.28,.06,-.25,-.31,-.03,.27,-.05,-.26,-.24,-.23,-.38,-.81
 44 | 1922,-.27,-.24,-.30,-.20,-.32,-.27,-.39,-.30,-.09,-.30,-.33,-.25,-.28,-.25
 45 | 1923,-.24,-.18,-.30,-.10,-.28,-.33,.13,-.03,-.22,-.29,-.27,-.26,-.41,-.52
 46 | 1924,-.25,-.14,-.35,-.09,-.24,-.42,.28,-.15,-.17,-.22,-.26,-.39,-.46,-.51
 47 | 1925,-.20,-.10,-.30,.00,-.23,-.37,-.16,.27,-.13,-.25,-.21,-.24,-.54,-.84
 48 | 1926,-.08,.05,-.20,.06,.04,-.40,.49,.26,-.19,.03,.06,-.35,-.45,-.61
 49 | 1927,-.20,-.10,-.29,-.10,-.13,-.38,-.04,-.12,-.11,-.09,-.17,-.31,-.45,-1.36
 50 | 1928,-.19,-.07,-.30,-.04,-.15,-.39,.60,-.07,-.20,-.11,-.18,-.29,-.48,-2.10
 51 | 1929,-.34,-.30,-.38,-.34,-.27,-.45,.02,-.51,-.34,-.24,-.30,-.42,-.44,-1.05
 52 | 1930,-.14,.02,-.29,.09,-.09,-.43,.44,.16,-.07,-.07,-.12,-.34,-.47,-2.57
 53 | 1931,-.10,.05,-.23,.03,.05,-.43,.41,.09,-.12,.08,.01,-.42,-.40,-.39
 54 | 1932,-.16,-.05,-.27,.05,-.19,-.34,.23,.31,-.17,-.19,-.18,-.21,-.53,-.96
 55 | 1933,-.30,-.26,-.33,-.24,-.31,-.34,-.43,-.38,-.10,-.29,-.32,-.22,-.49,-1.12
 56 | 1934,-.14,-.01,-.27,.18,-.28,-.26,.65,.41,-.10,-.28,-.28,-.16,-.38,-.54
 57 | 1935,-.20,-.09,-.32,-.02,-.21,-.38,.19,.06,-.13,-.18,-.24,-.31,-.42,-1.69
 58 | 1936,-.16,-.04,-.28,-.03,-.15,-.30,.14,.19,-.22,-.05,-.25,-.27,-.33,-.01
 59 | 1937,-.04,.12,-.20,.18,-.07,-.22,.97,.10,.01,.03,-.16,-.20,-.25,.39
 60 | 1938,-.03,.12,-.21,.34,-.26,-.10,1.09,.45,.05,-.19,-.34,-.06,-.11,-.84
 61 | 1939,-.03,.08,-.15,.23,-.16,-.13,.45,.35,.10,-.13,-.18,-.05,-.19,-1.58
 62 | 1940,.11,.17,.07,.11,.25,-.07,.86,.06,-.07,.25,.25,.03,-.20,-.03
 63 | 1941,.18,.24,.15,.02,.47,-.05,-.23,-.04,.12,.55,.40,.03,-.15,-.44
 64 | 1942,.05,.11,.00,.09,.07,-.01,.25,-.01,.10,.13,.02,.06,-.05,-.87
 65 | 1943,.07,.15,-.02,.32,-.10,.04,1.08,.29,.13,-.10,-.09,.07,.00,1.16
 66 | 1944,.21,.27,.15,.37,.19,.07,.94,.51,.12,.13,.26,.19,-.09,-.21
 67 | 1945,.09,.09,.09,.08,.18,-.02,.36,-.02,.06,.12,.23,.04,.00,-1.85
 68 | 1946,-.07,.04,-.17,.06,-.05,-.24,-.22,-.01,.19,-.01,-.09,-.22,-.24,.02
 69 | 1947,-.04,.06,-.14,.12,-.07,-.15,.85,-.12,.05,-.02,-.11,-.19,-.08,.03
 70 | 1948,-.10,-.01,-.20,.13,-.20,-.21,.07,.34,.02,-.22,-.17,-.19,-.19,-1.01
 71 | 1949,-.10,-.03,-.18,.11,-.20,-.19,.13,.17,.06,-.23,-.17,-.17,-.14,-1.28
 72 | 1950,-.18,-.17,-.20,-.09,-.29,-.12,-.01,-.32,.03,-.30,-.29,-.06,-.16,-.72
 73 | 1951,-.06,.05,-.17,.08,-.06,-.20,-.02,.03,.14,.00,-.13,-.22,-.16,-.18
 74 | 1952,.01,.06,-.03,.09,.01,-.08,.11,-.07,.19,.00,.03,-.09,-.02,-.38
 75 | 1953,.07,.23,-.08,.33,.07,-.19,.81,.36,.17,.08,.05,-.08,-.24,-1.34
 76 | 1954,-.15,-.04,-.25,.02,-.22,-.21,.51,-.21,.01,-.14,-.30,-.17,-.20,-.77
 77 | 1955,-.14,-.10,-.20,.02,-.33,-.05,-.45,-.08,.23,-.29,-.38,-.16,-.08,1.27
 78 | 1956,-.20,-.26,-.16,-.25,-.33,.00,-.29,-.47,-.09,-.28,-.37,-.13,.02,.67
 79 | 1957,.04,.04,.04,.03,.07,.01,.03,.23,-.09,.06,.09,-.09,-.01,.45
 80 | 1958,.07,.17,-.03,.11,.20,-.15,-.11,.18,.13,.27,.14,-.09,-.08,-.55
 81 | 1959,.03,.11,-.06,.15,.07,-.16,.42,.17,.04,.07,.08,-.03,-.26,-.37
 82 | 1960,-.02,.08,-.12,.09,.03,-.20,.32,-.06,.11,.07,-.01,-.10,-.07,-.79
 83 | 1961,.05,.08,.02,.18,-.03,.04,-.16,.37,.17,-.06,.01,.14,-.18,.14
 84 | 1962,.04,.15,-.08,.29,-.05,-.10,.64,.33,.15,-.04,-.05,.09,-.07,-.81
 85 | 1963,.07,.16,-.02,.17,.12,-.10,-.01,.33,.13,.14,.10,-.11,-.17,.08
 86 | 1964,-.20,-.19,-.20,-.24,-.13,-.24,-.66,-.22,-.11,-.13,-.14,-.30,-.07,-.38
 87 | 1965,-.10,-.13,-.08,-.16,-.03,-.14,-.18,-.23,-.11,-.07,.01,-.23,-.03,-.08
 88 | 1966,-.05,.00,-.09,-.12,.08,-.15,-.69,-.16,.07,.17,.00,-.23,-.14,.13
 89 | 1967,-.02,.03,-.08,.13,-.14,-.01,.46,.26,-.07,-.11,-.17,-.09,-.02,.28
 90 | 1968,-.08,-.06,-.09,-.09,-.05,-.09,-.22,-.02,-.09,-.01,-.09,-.14,.00,-.11
 91 | 1969,.07,-.01,.15,-.26,.33,.04,.05,-.59,-.16,.35,.31,.00,.13,.01
 92 | 1970,.03,-.03,.09,-.10,.07,.12,-.17,-.13,-.06,.07,.06,.10,.03,.36
 93 | 1971,-.09,-.16,-.03,-.06,-.26,.11,-.07,.00,-.11,-.30,-.22,.02,.16,.33
 94 | 1972,.01,-.18,.22,-.35,.17,.17,-.40,-.50,-.23,.05,.28,.16,-.02,.60
 95 | 1973,.16,.10,.22,.12,.18,.17,.21,.26,.01,.06,.29,.22,.07,.28
 96 | 1974,-.08,-.20,.03,-.17,-.20,.17,-.26,-.10,-.19,-.24,-.17,.22,-.09,.55
 97 | 1975,-.02,-.06,.02,.12,-.24,.15,.20,.36,-.06,-.31,-.16,.14,.14,.22
 98 | 1976,-.11,-.21,.00,-.26,-.12,.07,-.05,-.33,-.29,-.14,-.10,.11,.22,-.37
 99 | 1977,.17,.11,.23,.13,.15,.23,.21,.22,.05,.08,.23,.21,.31,.15
100 | 1978,.07,.02,.11,-.03,.08,.14,-.03,.00,-.04,.10,.07,.21,.13,-.11
101 | 1979,.16,.08,.24,-.03,.26,.22,-.56,.06,.08,.24,.27,.29,.33,-.24
102 | 1980,.27,.16,.38,.07,.29,.45,.35,.01,.01,.31,.28,.35,.37,.96
103 | 1981,.33,.39,.27,.51,.18,.35,1.34,.78,.08,.21,.16,.28,.38,.52
104 | 1982,.14,.05,.22,-.07,.27,.16,-.30,.07,-.08,.24,.30,.18,.32,-.23
105 | 1983,.31,.26,.38,.24,.43,.23,.34,.67,-.06,.29,.58,.21,.41,-.03
106 | 1984,.16,.04,.29,.03,.18,.28,.39,.08,-.11,.06,.30,.16,.32,.59
107 | 1985,.12,-.01,.25,-.03,.09,.31,.37,-.27,.00,.03,.16,.30,.45,.09
108 | 1986,.18,.13,.24,.11,.22,.21,.10,.25,.04,.16,.29,.25,.25,-.05
109 | 1987,.34,.27,.41,.08,.58,.26,-.22,.14,.13,.55,.62,.32,.25,.10
110 | 1988,.41,.38,.44,.42,.38,.44,.82,.51,.23,.32,.45,.38,.20,1.14
111 | 1989,.29,.29,.29,.43,.15,.34,.45,.67,.27,.09,.22,.36,.30,.36
112 | 1990,.44,.51,.37,.62,.36,.37,.67,.83,.47,.35,.38,.37,.37,.33
113 | 1991,.41,.41,.41,.47,.37,.41,.83,.61,.27,.32,.42,.32,.29,1.01
114 | 1992,.22,.12,.32,.08,.29,.28,-.11,.36,-.04,.20,.38,.21,.33,.41
115 | 1993,.24,.19,.29,.14,.31,.25,.69,.24,-.10,.27,.35,.27,.39,-.14
116 | 1994,.31,.36,.26,.44,.30,.20,.43,.46,.43,.25,.34,.27,.23,-.10
117 | 1995,.45,.58,.31,.71,.43,.21,1.41,.96,.33,.40,.46,.29,.15,.06
118 | 1996,.34,.28,.39,.27,.32,.43,.88,.20,.12,.30,.33,.34,.29,1.07
119 | 1997,.47,.53,.41,.55,.51,.33,.82,.89,.26,.50,.52,.42,.37,-.06
120 | 1998,.62,.73,.52,.82,.70,.34,1.04,.93,.67,.60,.79,.39,.31,.20
121 | 1999,.40,.50,.30,.73,.21,.32,.51,.83,.75,.15,.27,.47,.19,.05
122 | 2000,.40,.50,.30,.71,.24,.30,1.16,.76,.55,.19,.29,.42,.10,.32
123 | 2001,.53,.63,.43,.80,.41,.43,1.10,.81,.70,.39,.43,.57,.24,.39
124 | 2002,.62,.71,.54,.83,.58,.47,1.39,.97,.57,.54,.63,.47,.32,.81
125 | 2003,.61,.73,.49,.82,.61,.38,1.56,.95,.51,.58,.64,.44,.24,.47
126 | 2004,.53,.67,.40,.75,.54,.31,.68,.93,.67,.55,.53,.48,.23,-.11
127 | 2005,.67,.83,.51,.99,.61,.43,2.00,1.17,.55,.59,.62,.49,.19,.75
128 | 2006,.61,.78,.45,.94,.54,.38,1.62,1.05,.66,.54,.55,.51,.20,.32
129 | 2007,.64,.81,.46,1.07,.45,.45,1.90,1.30,.67,.42,.47,.49,.07,1.11
130 | 2008,.51,.64,.39,.86,.36,.37,1.37,1.02,.60,.31,.41,.53,.09,.42
131 | 2009,.63,.69,.57,.73,.67,.48,1.23,.58,.66,.64,.70,.60,.15,.79
132 | 2010,.70,.86,.53,.97,.67,.46,1.98,.85,.73,.70,.63,.63,.20,.41
133 | 2011,.58,.70,.46,.92,.35,.55,2.09,.89,.56,.37,.34,.65,.18,.97
134 | 2012,.61,.76,.47,.96,.50,.41,1.88,.88,.72,.45,.55,.56,.19,.34
135 | 2013,.64,.74,.54,.86,.56,.53,1.17,1.02,.67,.56,.55,.63,.23,.79
136 | 2014,.73,.89,.56,1.04,.65,.52,1.78,1.12,.75,.67,.62,.71,.18,.58
137 | 2015,.86,1.12,.61,1.24,.91,.40,1.66,1.44,.99,.93,.89,.73,.18,-.27
138 | 2016,.98,1.26,.71,1.50,.97,.49,3.05,1.41,1.06,.92,1.02,.66,.25,.42
139 | 2017,.90,1.11,.68,1.32,.79,.61,2.21,1.35,1.02,.81,.77,.75,.35,.68
140 | 2018,.82,.99,.66,1.19,.64,.70,1.87,1.09,1.03,.69,.59,.78,.37,1.07
141 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_p5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Coding Train: Data and APIs Exercise p5 CSV</title>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
10 |   </head>
11 |   <body>
12 |     <h1>Global Average Temperatures 1880-2018</h1>
13 |     <script src="sketch.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_p5/sketch.js:
--------------------------------------------------------------------------------
 1 | // Data from: https://data.giss.nasa.gov/gistemp/
 2 | // Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
 3 | 
 4 | let table;
 5 | function preload() {
 6 |   table = loadTable('ZonAnn.Ts+dSST.csv', 'header');
 7 | }
 8 | 
 9 | function setup() {
10 |   createCanvas(600, 400);
11 |   background(0);
12 |   stroke(255);
13 |   noFill();
14 |   beginShape();
15 |   for (var i = 0; i < table.getRowCount(); i++) {
16 |     let row = table.getRow(i);
17 |     let temp = 14 + row.getNum('Glob');
18 |     let x = map(i, 0, table.getRowCount() - 1, 0, width);
19 |     let y = map(temp, 13.5, 15, height, 0);
20 |     vertex(x, y);
21 |   }
22 |   endShape();
23 | }
24 | 


--------------------------------------------------------------------------------
/module1/02_graphing_data_exercise_p5/testdata.csv:
--------------------------------------------------------------------------------
1 | Year,Glob,NHem,SHem,24N-90N,24S-24N,90S-24S,64N-90N,44N-64N,24N-44N,EQU-24N,24S-EQU,44S-24S,64S-44S,90S-64S
2 | 1880,-.18,-.31,-.06,-.38,-.17,-.01,-.97,-.47,-.25,-.21,-.13,-.04,.05,.67
3 | 1881,-.10,-.19,-.01,-.32,.05,-.07,-.91,-.46,-.14,.03,.07,-.06,-.07,.60


--------------------------------------------------------------------------------
/module1/03_fetch_json/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Fetch JSON from API</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Where is the ISS?</h1>
11 | 
12 |     <p>
13 |       latitude: <span id="lat"></span>°<br />
14 |       longitude: <span id="lon"></span>°
15 |     </p>
16 | 
17 |     <script>
18 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
19 | 
20 |       async function getISS() {
21 |         const response = await fetch(api_url);
22 |         const data = await response.json();
23 |         const { latitude, longitude } = data;
24 | 
25 |         document.getElementById('lat').textContent = latitude.toFixed(2);
26 |         document.getElementById('lon').textContent = longitude.toFixed(2);
27 |       }
28 | 
29 |       getISS();
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #issMap {
20 |         height: 180px;
21 |       }
22 |     </style>
23 | 
24 |     <title>Fetch JSON from API and map lat lon</title>
25 |   </head>
26 |   <body>
27 |     <h1>Where is the ISS?</h1>
28 | 
29 |     <p>
30 |       latitude: <span id="lat"></span>°<br />
31 |       longitude: <span id="lon"></span>°
32 |     </p>
33 | 
34 |     <div id="issMap"></div>
35 | 
36 |     <script>
37 |       // Making a map and tiles
38 |       const mymap = L.map('issMap').setView([0, 0], 1);
39 |       const attribution =
40 |         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
41 | 
42 |       const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
43 |       const tiles = L.tileLayer(tileUrl, { attribution });
44 |       tiles.addTo(mymap);
45 | 
46 |       // Making a marker with a custom icon
47 |       const issIcon = L.icon({
48 |         iconUrl: 'iss200.png',
49 |         iconSize: [50, 32],
50 |         iconAnchor: [25, 16]
51 |       });
52 |       const marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
53 | 
54 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
55 | 
56 |       async function getISS() {
57 |         const response = await fetch(api_url);
58 |         const data = await response.json();
59 |         const { latitude, longitude } = data;
60 | 
61 |         marker.setLatLng([latitude, longitude]);
62 |         document.getElementById('lat').textContent = latitude.toFixed(2);
63 |         document.getElementById('lon').textContent = longitude.toFixed(2);
64 |       }
65 | 
66 |       getISS();
67 |     </script>
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss/iss200.png


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_center_map/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #issMap {
20 |         height: 360px;
21 |       }
22 |     </style>
23 | 
24 |     <title>Fetch JSON from API and map lat lon</title>
25 |   </head>
26 |   <body>
27 |     <h1>Where is the ISS?</h1>
28 | 
29 |     <p>
30 |       latitude: <span id="lat"></span>°<br />
31 |       longitude: <span id="lon"></span>° <br />
32 |     </p>
33 | 
34 |     <div id="issMap"></div>
35 | 
36 |     <script>
37 |       // Making a map and tiles
38 |       // Setting a higher initial zoom to make effect more obvious
39 |       const mymap = L.map('issMap').setView([0, 0], 6);
40 |       const attribution =
41 |         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
42 | 
43 |       const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
44 |       const tiles = L.tileLayer(tileUrl, { attribution });
45 |       tiles.addTo(mymap);
46 | 
47 |       // Making a marker with a custom icon
48 |       const issIcon = L.icon({
49 |         iconUrl: 'iss200.png',
50 |         iconSize: [50, 32],
51 |         iconAnchor: [25, 16]
52 |       });
53 |       let marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
54 | 
55 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
56 | 
57 |       let firstTime = true;
58 | 
59 |       async function getISS() {
60 |         const response = await fetch(api_url);
61 |         const data = await response.json();
62 |         const { latitude, longitude } = data;
63 | 
64 |         // Always set the view to current lat lon and zoom!
65 |         mymap.setView([latitude, longitude], mymap.getZoom());
66 |         marker.setLatLng([latitude, longitude]);
67 | 
68 |         document.getElementById('lat').textContent = latitude.toFixed(2);
69 |         document.getElementById('lon').textContent = longitude.toFixed(2);
70 |       }
71 | 
72 |       getISS();
73 |       setInterval(getISS, 1000);
74 |     </script>
75 |   </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_center_map/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss_exercise_center_map/iss200.png


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 | 	<title>youtube_viz</title>
 9 | 
10 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
11 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
12 | 	<script src="https://cdn.jsdelivr.net/npm/mappa-mundi@0.0.4"></script>
13 | 	<script src="sketch.js"></script>
14 | 
15 | </head>
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss_exercise_p5_mappa/iss200.png


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa/sketch.js:
--------------------------------------------------------------------------------
 1 | const mappa = new Mappa("Leaflet");
 2 | let mymap;
 3 | const api_url = "https://api.wheretheiss.at/v1/satellites/25544";
 4 | 
 5 | let canvas;
 6 | let issImg;
 7 | const options = {
 8 |   lat: 0,
 9 |   lng: 0,
10 |   zoom: 1.5,
11 |   style: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
12 | };
13 | let x = 0;
14 | let y = 0;
15 | 
16 | function preload() {
17 |   issImg = loadImage("iss200.png");
18 | }
19 | 
20 | function setup() {
21 |   canvas = createCanvas(800, 600);
22 |   mymap = mappa.tileMap(options);
23 |   mymap.overlay(canvas);
24 |   getData();
25 |   setInterval(getData, 1000);
26 | }
27 | 
28 | function getData() {
29 |   loadJSON(api_url, gotData);
30 | }
31 | 
32 | function gotData(data) {
33 |   console.log(data);
34 |   const pix = mymap.latLngToPixel(data.latitude, data.longitude);
35 |   x = pix.x;
36 |   y = pix.y;
37 | }
38 | 
39 | function draw() {
40 |   clear();
41 |   image(issImg, x, y, 50, 32);
42 | }
43 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa_velocity/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 | 	<title>youtube_viz</title>
 9 | 
10 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
11 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
12 | 	<script src="https://cdn.jsdelivr.net/npm/mappa-mundi@0.0.4"></script>
13 | 	<script src="sketch.js"></script>
14 | 
15 | </head>
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa_velocity/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss_exercise_p5_mappa_velocity/iss200.png


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_p5_mappa_velocity/sketch.js:
--------------------------------------------------------------------------------
 1 | const mappa = new Mappa("Leaflet");
 2 | let mymap;
 3 | const api_url = "https://api.wheretheiss.at/v1/satellites/25544";
 4 | 
 5 | let canvas;
 6 | let issImg;
 7 | let firstTime = true;
 8 | 
 9 | let pos;
10 | let history = [];
11 | 
12 | function preload() {
13 |   issImg = loadImage("iss200.png");
14 | }
15 | 
16 | function setup() {
17 |   canvas = createCanvas(800, 600);
18 |   getData();
19 |   setInterval(getData, 1000);
20 | }
21 | 
22 | function getData() {
23 |   loadJSON(api_url, gotData);
24 | }
25 | 
26 | function gotData(data) {
27 |   if (firstTime) {
28 |     const options = {
29 |       lat: data.latitude,
30 |       lng: data.longitude,
31 |       zoom: 7,
32 |       style: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
33 |     };
34 |     mymap = mappa.tileMap(options);
35 |     mymap.overlay(canvas);
36 |     mymap.onChange(render);
37 |     firstTime = false;
38 |   }
39 |   history.push(data);
40 |   render();
41 | }
42 | 
43 | function render() {
44 |   clear();
45 | 
46 |   // Draw a path
47 |   strokeWeight(mymap.zoom());
48 |   stroke(100);
49 |   noFill();
50 |   beginShape();
51 |   for (let data of history) {
52 |     const pix = mymap.latLngToPixel(data.latitude, data.longitude);
53 |     vertex(pix.x, pix.y);
54 |   }
55 |   endShape();
56 | 
57 |   // Get the last spot is current
58 |   const current = history[history.length - 1];
59 |   const pix = mymap.latLngToPixel(current.latitude, current.longitude);
60 | 
61 |   // Get the second to last spot and extrapolate a velocity vector?
62 |   if (history.length > 1) {
63 |     const previous = history[history.length - 2];
64 |     const prevPix = mymap.latLngToPixel(previous.latitude, previous.longitude);
65 |     offset = createVector(pix.x - prevPix.x, pix.y - prevPix.y);
66 |     offset.setMag(50);
67 | 
68 |     // Renders a vector object 'v' as an arrow and a position 'loc'
69 |     push();
70 |     let arrowsize = 20;
71 |     // Translate to position to render vector
72 |     translate(pix.x, pix.y);
73 |     // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
74 |     rotate(offset.heading());
75 |     // Calculate length of vector & scale it to be bigger or smaller if necessary
76 |     let len = offset.mag();
77 |     // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
78 |     line(0, 0, len, 0);
79 |     line(len, 0, len - arrowsize, arrowsize / 2);
80 |     line(len, 0, len - arrowsize, -arrowsize / 2);
81 |     pop();
82 |   }
83 | 
84 |   imageMode(CENTER);
85 |   image(issImg, pix.x, pix.y, 50, 32);
86 | }
87 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_scale_altitude/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #issMap {
20 |         height: 360px;
21 |       }
22 |     </style>
23 | 
24 |     <title>Fetch JSON from API and map lat lon</title>
25 |   </head>
26 |   <body>
27 |     <h1>Where is the ISS?</h1>
28 | 
29 |     <p>
30 |       latitude: <span id="lat"></span>°<br />
31 |       longitude: <span id="lon"></span>° <br />
32 |       altitude: <span id="altitude"></span> miles
33 |     </p>
34 | 
35 |     <div id="issMap"></div>
36 | 
37 |     <script>
38 |       // Making a map and tiles
39 |       const mymap = L.map('issMap').setView([0, 0], 1);
40 |       const attribution =
41 |         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
42 | 
43 |       const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
44 |       const tiles = L.tileLayer(tileUrl, { attribution });
45 |       tiles.addTo(mymap);
46 | 
47 |       // Making a marker with a custom icon
48 |       const issIcon = L.icon({
49 |         iconUrl: 'iss200.png',
50 |         iconSize: [50, 32],
51 |         iconAnchor: [25, 16]
52 |       });
53 |       let marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
54 | 
55 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
56 | 
57 |       let firstTime = true;
58 | 
59 |       async function getISS() {
60 |         const response = await fetch(api_url);
61 |         const data = await response.json();
62 |         const { latitude, longitude, altitude } = data;
63 | 
64 |         const aspect = 1.5625;
65 |         const w = (altitude * aspect) / 10;
66 |         const h = altitude / 10;
67 |         issIcon.options.iconSize = [w, h];
68 |         issIcon.options.iconAnchor = [w / 2, h / 2];
69 | 
70 |         // Size not changing unless I remove and re-add marker?
71 |         // TODO: There has got to be a better way!
72 |         // mymap.removeLayer(marker);
73 |         // marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
74 | 
75 |         marker.setLatLng([latitude, longitude]);
76 | 
77 |         if (firstTime) {
78 |           mymap.setView([latitude, longitude], 2);
79 |           firstTime = false;
80 |         }
81 |         document.getElementById('lat').textContent = latitude.toFixed(2);
82 |         document.getElementById('lon').textContent = longitude.toFixed(2);
83 |         document.getElementById('altitude').textContent = altitude.toFixed(2);
84 |       }
85 | 
86 |       getISS();
87 |       setInterval(getISS, 1000);
88 |     </script>
89 |   </body>
90 | </html>
91 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_scale_altitude/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss_exercise_scale_altitude/iss200.png


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_scale_iss/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #issMap {
20 |         height: 360px;
21 |       }
22 |     </style>
23 | 
24 |     <title>Fetch JSON from API and map lat lon</title>
25 |   </head>
26 |   <body>
27 |     <h1>Where is the ISS?</h1>
28 | 
29 |     <p>
30 |       latitude: <span id="lat"></span>°<br />
31 |       longitude: <span id="lon"></span>°
32 |     </p>
33 | 
34 |     <div id="issMap"></div>
35 | 
36 |     <script>
37 |       // Making a map and tiles
38 |       const mymap = L.map('issMap').setView([0, 0], 1);
39 |       const attribution =
40 |         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
41 | 
42 |       const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
43 |       const tiles = L.tileLayer(tileUrl, { attribution });
44 |       tiles.addTo(mymap);
45 | 
46 |       // Making a marker with a custom icon
47 |       const issIcon = L.icon({
48 |         iconUrl: 'iss200.png',
49 |         iconSize: [50, 32],
50 |         iconAnchor: [25, 16]
51 |       });
52 |       let marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
53 | 
54 |       mymap.on('zoomend', function() {
55 |         const zoom = mymap.getZoom() + 1;
56 |         const w = 50 * zoom;
57 |         const h = 32 * zoom;
58 |         issIcon.options.iconSize = [w, h];
59 |         issIcon.options.iconAnchor = [w / 2, h / 2];
60 |         mymap.removeLayer(marker);
61 |         let latlng = marker.getLatLng();
62 |         marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
63 |         marker.setLatLng(latlng);
64 |       });
65 | 
66 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
67 | 
68 |       let firstTime = true;
69 | 
70 |       async function getISS() {
71 |         const response = await fetch(api_url);
72 |         const data = await response.json();
73 |         const { latitude, longitude } = data;
74 | 
75 |         marker.setLatLng([latitude, longitude]);
76 |         if (firstTime) {
77 |           mymap.setView([latitude, longitude], 2);
78 |           firstTime = false;
79 |         }
80 |         document.getElementById('lat').textContent = latitude.toFixed(2);
81 |         document.getElementById('lon').textContent = longitude.toFixed(2);
82 |       }
83 | 
84 |       getISS();
85 |       setInterval(getISS, 1000);
86 |     </script>
87 |   </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/module1/03_mapping_iss_exercise_scale_iss/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_mapping_iss_exercise_scale_iss/iss200.png


--------------------------------------------------------------------------------
/module1/03_where_is_the_iss/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=\, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #issMap {
20 |         height: 180px;
21 |       }
22 |     </style>
23 | 
24 |     <title>Fetch JSON from API and map lat lon</title>
25 |   </head>
26 |   <body>
27 |     <h1>Where is the ISS?</h1>
28 | 
29 |     <p>
30 |       latitude: <span id="lat"></span>°<br />
31 |       longitude: <span id="lon"></span>°
32 |     </p>
33 | 
34 |     <div id="issMap"></div>
35 | 
36 |     <script>
37 |       // Making a map and tiles
38 |       const mymap = L.map('issMap').setView([0, 0], 1);
39 |       const attribution =
40 |         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
41 | 
42 |       const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
43 |       const tiles = L.tileLayer(tileUrl, { attribution });
44 |       tiles.addTo(mymap);
45 | 
46 |       // Making a marker with a custom icon
47 |       const issIcon = L.icon({
48 |         iconUrl: 'iss200.png',
49 |         iconSize: [50, 32],
50 |         iconAnchor: [25, 16]
51 |       });
52 |       const marker = L.marker([0, 0], { icon: issIcon }).addTo(mymap);
53 | 
54 |       const api_url = 'https://api.wheretheiss.at/v1/satellites/25544';
55 | 
56 |       let firstTime = true;
57 | 
58 |       async function getISS() {
59 |         const response = await fetch(api_url);
60 |         const data = await response.json();
61 |         const { latitude, longitude } = data;
62 | 
63 |         marker.setLatLng([latitude, longitude]);
64 |         if (firstTime) {
65 |           mymap.setView([latitude, longitude], 2);
66 |           firstTime = false;
67 |         }
68 |         document.getElementById('lat').textContent = latitude.toFixed(2);
69 |         document.getElementById('lon').textContent = longitude.toFixed(2);
70 |       }
71 | 
72 |       getISS();
73 | 
74 |       setInterval(getISS, 1000);
75 |     </script>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/module1/03_where_is_the_iss/iss200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module1/03_where_is_the_iss/iss200.png


--------------------------------------------------------------------------------
/module2/01_hosting_static_files/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | 
3 | const app = express();
4 | app.listen(3000, () => console.log('listening at 3000'));
5 | app.use(express.static('public'));
6 | 


--------------------------------------------------------------------------------
/module2/01_hosting_static_files/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "module2_exercise1",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "accepts": {
  8 |       "version": "1.3.5",
  9 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
 10 |       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
 11 |       "requires": {
 12 |         "mime-types": "~2.1.18",
 13 |         "negotiator": "0.6.1"
 14 |       }
 15 |     },
 16 |     "array-flatten": {
 17 |       "version": "1.1.1",
 18 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 19 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 20 |     },
 21 |     "body-parser": {
 22 |       "version": "1.18.3",
 23 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
 24 |       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
 25 |       "requires": {
 26 |         "bytes": "3.0.0",
 27 |         "content-type": "~1.0.4",
 28 |         "debug": "2.6.9",
 29 |         "depd": "~1.1.2",
 30 |         "http-errors": "~1.6.3",
 31 |         "iconv-lite": "0.4.23",
 32 |         "on-finished": "~2.3.0",
 33 |         "qs": "6.5.2",
 34 |         "raw-body": "2.3.3",
 35 |         "type-is": "~1.6.16"
 36 |       }
 37 |     },
 38 |     "bytes": {
 39 |       "version": "3.0.0",
 40 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
 41 |       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
 42 |     },
 43 |     "content-disposition": {
 44 |       "version": "0.5.2",
 45 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
 46 |       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
 47 |     },
 48 |     "content-type": {
 49 |       "version": "1.0.4",
 50 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 51 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 52 |     },
 53 |     "cookie": {
 54 |       "version": "0.3.1",
 55 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
 56 |       "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
 57 |     },
 58 |     "cookie-signature": {
 59 |       "version": "1.0.6",
 60 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 61 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 62 |     },
 63 |     "debug": {
 64 |       "version": "2.6.9",
 65 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 66 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 67 |       "requires": {
 68 |         "ms": "2.0.0"
 69 |       }
 70 |     },
 71 |     "depd": {
 72 |       "version": "1.1.2",
 73 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 74 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 75 |     },
 76 |     "destroy": {
 77 |       "version": "1.0.4",
 78 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 79 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 80 |     },
 81 |     "ee-first": {
 82 |       "version": "1.1.1",
 83 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 84 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 85 |     },
 86 |     "encodeurl": {
 87 |       "version": "1.0.2",
 88 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 89 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 90 |     },
 91 |     "escape-html": {
 92 |       "version": "1.0.3",
 93 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 94 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 95 |     },
 96 |     "etag": {
 97 |       "version": "1.8.1",
 98 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 99 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
100 |     },
101 |     "express": {
102 |       "version": "4.16.4",
103 |       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
104 |       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
105 |       "requires": {
106 |         "accepts": "~1.3.5",
107 |         "array-flatten": "1.1.1",
108 |         "body-parser": "1.18.3",
109 |         "content-disposition": "0.5.2",
110 |         "content-type": "~1.0.4",
111 |         "cookie": "0.3.1",
112 |         "cookie-signature": "1.0.6",
113 |         "debug": "2.6.9",
114 |         "depd": "~1.1.2",
115 |         "encodeurl": "~1.0.2",
116 |         "escape-html": "~1.0.3",
117 |         "etag": "~1.8.1",
118 |         "finalhandler": "1.1.1",
119 |         "fresh": "0.5.2",
120 |         "merge-descriptors": "1.0.1",
121 |         "methods": "~1.1.2",
122 |         "on-finished": "~2.3.0",
123 |         "parseurl": "~1.3.2",
124 |         "path-to-regexp": "0.1.7",
125 |         "proxy-addr": "~2.0.4",
126 |         "qs": "6.5.2",
127 |         "range-parser": "~1.2.0",
128 |         "safe-buffer": "5.1.2",
129 |         "send": "0.16.2",
130 |         "serve-static": "1.13.2",
131 |         "setprototypeof": "1.1.0",
132 |         "statuses": "~1.4.0",
133 |         "type-is": "~1.6.16",
134 |         "utils-merge": "1.0.1",
135 |         "vary": "~1.1.2"
136 |       }
137 |     },
138 |     "finalhandler": {
139 |       "version": "1.1.1",
140 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
141 |       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
142 |       "requires": {
143 |         "debug": "2.6.9",
144 |         "encodeurl": "~1.0.2",
145 |         "escape-html": "~1.0.3",
146 |         "on-finished": "~2.3.0",
147 |         "parseurl": "~1.3.2",
148 |         "statuses": "~1.4.0",
149 |         "unpipe": "~1.0.0"
150 |       }
151 |     },
152 |     "forwarded": {
153 |       "version": "0.1.2",
154 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
155 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
156 |     },
157 |     "fresh": {
158 |       "version": "0.5.2",
159 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
160 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
161 |     },
162 |     "http-errors": {
163 |       "version": "1.6.3",
164 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
165 |       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
166 |       "requires": {
167 |         "depd": "~1.1.2",
168 |         "inherits": "2.0.3",
169 |         "setprototypeof": "1.1.0",
170 |         "statuses": ">= 1.4.0 < 2"
171 |       }
172 |     },
173 |     "iconv-lite": {
174 |       "version": "0.4.23",
175 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
176 |       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
177 |       "requires": {
178 |         "safer-buffer": ">= 2.1.2 < 3"
179 |       }
180 |     },
181 |     "inherits": {
182 |       "version": "2.0.3",
183 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
184 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
185 |     },
186 |     "ipaddr.js": {
187 |       "version": "1.8.0",
188 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
189 |       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
190 |     },
191 |     "media-typer": {
192 |       "version": "0.3.0",
193 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
194 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
195 |     },
196 |     "merge-descriptors": {
197 |       "version": "1.0.1",
198 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
199 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
200 |     },
201 |     "methods": {
202 |       "version": "1.1.2",
203 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
204 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
205 |     },
206 |     "mime": {
207 |       "version": "1.4.1",
208 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
209 |       "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
210 |     },
211 |     "mime-db": {
212 |       "version": "1.38.0",
213 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
214 |       "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
215 |     },
216 |     "mime-types": {
217 |       "version": "2.1.22",
218 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
219 |       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
220 |       "requires": {
221 |         "mime-db": "~1.38.0"
222 |       }
223 |     },
224 |     "ms": {
225 |       "version": "2.0.0",
226 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
227 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
228 |     },
229 |     "negotiator": {
230 |       "version": "0.6.1",
231 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
232 |       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
233 |     },
234 |     "on-finished": {
235 |       "version": "2.3.0",
236 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
237 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
238 |       "requires": {
239 |         "ee-first": "1.1.1"
240 |       }
241 |     },
242 |     "parseurl": {
243 |       "version": "1.3.2",
244 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
245 |       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
246 |     },
247 |     "path-to-regexp": {
248 |       "version": "0.1.7",
249 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
250 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
251 |     },
252 |     "proxy-addr": {
253 |       "version": "2.0.4",
254 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
255 |       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
256 |       "requires": {
257 |         "forwarded": "~0.1.2",
258 |         "ipaddr.js": "1.8.0"
259 |       }
260 |     },
261 |     "qs": {
262 |       "version": "6.5.2",
263 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
264 |       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
265 |     },
266 |     "range-parser": {
267 |       "version": "1.2.0",
268 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
269 |       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
270 |     },
271 |     "raw-body": {
272 |       "version": "2.3.3",
273 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
274 |       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
275 |       "requires": {
276 |         "bytes": "3.0.0",
277 |         "http-errors": "1.6.3",
278 |         "iconv-lite": "0.4.23",
279 |         "unpipe": "1.0.0"
280 |       }
281 |     },
282 |     "safe-buffer": {
283 |       "version": "5.1.2",
284 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
285 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
286 |     },
287 |     "safer-buffer": {
288 |       "version": "2.1.2",
289 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
290 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
291 |     },
292 |     "send": {
293 |       "version": "0.16.2",
294 |       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
295 |       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
296 |       "requires": {
297 |         "debug": "2.6.9",
298 |         "depd": "~1.1.2",
299 |         "destroy": "~1.0.4",
300 |         "encodeurl": "~1.0.2",
301 |         "escape-html": "~1.0.3",
302 |         "etag": "~1.8.1",
303 |         "fresh": "0.5.2",
304 |         "http-errors": "~1.6.2",
305 |         "mime": "1.4.1",
306 |         "ms": "2.0.0",
307 |         "on-finished": "~2.3.0",
308 |         "range-parser": "~1.2.0",
309 |         "statuses": "~1.4.0"
310 |       }
311 |     },
312 |     "serve-static": {
313 |       "version": "1.13.2",
314 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
315 |       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
316 |       "requires": {
317 |         "encodeurl": "~1.0.2",
318 |         "escape-html": "~1.0.3",
319 |         "parseurl": "~1.3.2",
320 |         "send": "0.16.2"
321 |       }
322 |     },
323 |     "setprototypeof": {
324 |       "version": "1.1.0",
325 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
326 |       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
327 |     },
328 |     "statuses": {
329 |       "version": "1.4.0",
330 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
331 |       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
332 |     },
333 |     "type-is": {
334 |       "version": "1.6.16",
335 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
336 |       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
337 |       "requires": {
338 |         "media-typer": "0.3.0",
339 |         "mime-types": "~2.1.18"
340 |       }
341 |     },
342 |     "unpipe": {
343 |       "version": "1.0.0",
344 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
345 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
346 |     },
347 |     "utils-merge": {
348 |       "version": "1.0.1",
349 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
350 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
351 |     },
352 |     "vary": {
353 |       "version": "1.1.2",
354 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
355 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
356 |     }
357 |   }
358 | }
359 | 


--------------------------------------------------------------------------------
/module2/01_hosting_static_files/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise1",
 3 |   "version": "1.0.0",
 4 |   "description": "Serving two pages.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/01_hosting_static_files/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Hello</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>Hello!</p>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/module2/02_geolocation_api/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | 
3 | const app = express();
4 | app.listen(3000, () => console.log('listening at 3000'));
5 | app.use(express.static('public'));
6 | 


--------------------------------------------------------------------------------
/module2/02_geolocation_api/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "module2_exercise1",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "accepts": {
  8 |       "version": "1.3.5",
  9 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
 10 |       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
 11 |       "requires": {
 12 |         "mime-types": "~2.1.18",
 13 |         "negotiator": "0.6.1"
 14 |       }
 15 |     },
 16 |     "array-flatten": {
 17 |       "version": "1.1.1",
 18 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 19 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 20 |     },
 21 |     "body-parser": {
 22 |       "version": "1.18.3",
 23 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
 24 |       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
 25 |       "requires": {
 26 |         "bytes": "3.0.0",
 27 |         "content-type": "~1.0.4",
 28 |         "debug": "2.6.9",
 29 |         "depd": "~1.1.2",
 30 |         "http-errors": "~1.6.3",
 31 |         "iconv-lite": "0.4.23",
 32 |         "on-finished": "~2.3.0",
 33 |         "qs": "6.5.2",
 34 |         "raw-body": "2.3.3",
 35 |         "type-is": "~1.6.16"
 36 |       }
 37 |     },
 38 |     "bytes": {
 39 |       "version": "3.0.0",
 40 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
 41 |       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
 42 |     },
 43 |     "content-disposition": {
 44 |       "version": "0.5.2",
 45 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
 46 |       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
 47 |     },
 48 |     "content-type": {
 49 |       "version": "1.0.4",
 50 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 51 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 52 |     },
 53 |     "cookie": {
 54 |       "version": "0.3.1",
 55 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
 56 |       "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
 57 |     },
 58 |     "cookie-signature": {
 59 |       "version": "1.0.6",
 60 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 61 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 62 |     },
 63 |     "debug": {
 64 |       "version": "2.6.9",
 65 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 66 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 67 |       "requires": {
 68 |         "ms": "2.0.0"
 69 |       }
 70 |     },
 71 |     "depd": {
 72 |       "version": "1.1.2",
 73 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 74 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 75 |     },
 76 |     "destroy": {
 77 |       "version": "1.0.4",
 78 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 79 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 80 |     },
 81 |     "ee-first": {
 82 |       "version": "1.1.1",
 83 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 84 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 85 |     },
 86 |     "encodeurl": {
 87 |       "version": "1.0.2",
 88 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 89 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 90 |     },
 91 |     "escape-html": {
 92 |       "version": "1.0.3",
 93 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 94 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 95 |     },
 96 |     "etag": {
 97 |       "version": "1.8.1",
 98 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 99 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
100 |     },
101 |     "express": {
102 |       "version": "4.16.4",
103 |       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
104 |       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
105 |       "requires": {
106 |         "accepts": "~1.3.5",
107 |         "array-flatten": "1.1.1",
108 |         "body-parser": "1.18.3",
109 |         "content-disposition": "0.5.2",
110 |         "content-type": "~1.0.4",
111 |         "cookie": "0.3.1",
112 |         "cookie-signature": "1.0.6",
113 |         "debug": "2.6.9",
114 |         "depd": "~1.1.2",
115 |         "encodeurl": "~1.0.2",
116 |         "escape-html": "~1.0.3",
117 |         "etag": "~1.8.1",
118 |         "finalhandler": "1.1.1",
119 |         "fresh": "0.5.2",
120 |         "merge-descriptors": "1.0.1",
121 |         "methods": "~1.1.2",
122 |         "on-finished": "~2.3.0",
123 |         "parseurl": "~1.3.2",
124 |         "path-to-regexp": "0.1.7",
125 |         "proxy-addr": "~2.0.4",
126 |         "qs": "6.5.2",
127 |         "range-parser": "~1.2.0",
128 |         "safe-buffer": "5.1.2",
129 |         "send": "0.16.2",
130 |         "serve-static": "1.13.2",
131 |         "setprototypeof": "1.1.0",
132 |         "statuses": "~1.4.0",
133 |         "type-is": "~1.6.16",
134 |         "utils-merge": "1.0.1",
135 |         "vary": "~1.1.2"
136 |       }
137 |     },
138 |     "finalhandler": {
139 |       "version": "1.1.1",
140 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
141 |       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
142 |       "requires": {
143 |         "debug": "2.6.9",
144 |         "encodeurl": "~1.0.2",
145 |         "escape-html": "~1.0.3",
146 |         "on-finished": "~2.3.0",
147 |         "parseurl": "~1.3.2",
148 |         "statuses": "~1.4.0",
149 |         "unpipe": "~1.0.0"
150 |       }
151 |     },
152 |     "forwarded": {
153 |       "version": "0.1.2",
154 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
155 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
156 |     },
157 |     "fresh": {
158 |       "version": "0.5.2",
159 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
160 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
161 |     },
162 |     "http-errors": {
163 |       "version": "1.6.3",
164 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
165 |       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
166 |       "requires": {
167 |         "depd": "~1.1.2",
168 |         "inherits": "2.0.3",
169 |         "setprototypeof": "1.1.0",
170 |         "statuses": ">= 1.4.0 < 2"
171 |       }
172 |     },
173 |     "iconv-lite": {
174 |       "version": "0.4.23",
175 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
176 |       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
177 |       "requires": {
178 |         "safer-buffer": ">= 2.1.2 < 3"
179 |       }
180 |     },
181 |     "inherits": {
182 |       "version": "2.0.3",
183 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
184 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
185 |     },
186 |     "ipaddr.js": {
187 |       "version": "1.8.0",
188 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
189 |       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
190 |     },
191 |     "media-typer": {
192 |       "version": "0.3.0",
193 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
194 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
195 |     },
196 |     "merge-descriptors": {
197 |       "version": "1.0.1",
198 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
199 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
200 |     },
201 |     "methods": {
202 |       "version": "1.1.2",
203 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
204 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
205 |     },
206 |     "mime": {
207 |       "version": "1.4.1",
208 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
209 |       "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
210 |     },
211 |     "mime-db": {
212 |       "version": "1.38.0",
213 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
214 |       "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
215 |     },
216 |     "mime-types": {
217 |       "version": "2.1.22",
218 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
219 |       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
220 |       "requires": {
221 |         "mime-db": "~1.38.0"
222 |       }
223 |     },
224 |     "ms": {
225 |       "version": "2.0.0",
226 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
227 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
228 |     },
229 |     "negotiator": {
230 |       "version": "0.6.1",
231 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
232 |       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
233 |     },
234 |     "on-finished": {
235 |       "version": "2.3.0",
236 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
237 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
238 |       "requires": {
239 |         "ee-first": "1.1.1"
240 |       }
241 |     },
242 |     "parseurl": {
243 |       "version": "1.3.2",
244 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
245 |       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
246 |     },
247 |     "path-to-regexp": {
248 |       "version": "0.1.7",
249 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
250 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
251 |     },
252 |     "proxy-addr": {
253 |       "version": "2.0.4",
254 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
255 |       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
256 |       "requires": {
257 |         "forwarded": "~0.1.2",
258 |         "ipaddr.js": "1.8.0"
259 |       }
260 |     },
261 |     "qs": {
262 |       "version": "6.5.2",
263 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
264 |       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
265 |     },
266 |     "range-parser": {
267 |       "version": "1.2.0",
268 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
269 |       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
270 |     },
271 |     "raw-body": {
272 |       "version": "2.3.3",
273 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
274 |       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
275 |       "requires": {
276 |         "bytes": "3.0.0",
277 |         "http-errors": "1.6.3",
278 |         "iconv-lite": "0.4.23",
279 |         "unpipe": "1.0.0"
280 |       }
281 |     },
282 |     "safe-buffer": {
283 |       "version": "5.1.2",
284 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
285 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
286 |     },
287 |     "safer-buffer": {
288 |       "version": "2.1.2",
289 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
290 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
291 |     },
292 |     "send": {
293 |       "version": "0.16.2",
294 |       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
295 |       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
296 |       "requires": {
297 |         "debug": "2.6.9",
298 |         "depd": "~1.1.2",
299 |         "destroy": "~1.0.4",
300 |         "encodeurl": "~1.0.2",
301 |         "escape-html": "~1.0.3",
302 |         "etag": "~1.8.1",
303 |         "fresh": "0.5.2",
304 |         "http-errors": "~1.6.2",
305 |         "mime": "1.4.1",
306 |         "ms": "2.0.0",
307 |         "on-finished": "~2.3.0",
308 |         "range-parser": "~1.2.0",
309 |         "statuses": "~1.4.0"
310 |       }
311 |     },
312 |     "serve-static": {
313 |       "version": "1.13.2",
314 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
315 |       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
316 |       "requires": {
317 |         "encodeurl": "~1.0.2",
318 |         "escape-html": "~1.0.3",
319 |         "parseurl": "~1.3.2",
320 |         "send": "0.16.2"
321 |       }
322 |     },
323 |     "setprototypeof": {
324 |       "version": "1.1.0",
325 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
326 |       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
327 |     },
328 |     "statuses": {
329 |       "version": "1.4.0",
330 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
331 |       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
332 |     },
333 |     "type-is": {
334 |       "version": "1.6.16",
335 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
336 |       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
337 |       "requires": {
338 |         "media-typer": "0.3.0",
339 |         "mime-types": "~2.1.18"
340 |       }
341 |     },
342 |     "unpipe": {
343 |       "version": "1.0.0",
344 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
345 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
346 |     },
347 |     "utils-merge": {
348 |       "version": "1.0.1",
349 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
350 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
351 |     },
352 |     "vary": {
353 |       "version": "1.1.2",
354 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
355 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
356 |     }
357 |   }
358 | }
359 | 


--------------------------------------------------------------------------------
/module2/02_geolocation_api/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise1",
 3 |   "version": "1.0.0",
 4 |   "description": "Serving two pages.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/02_geolocation_api/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Selfie App</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       if ("geolocation" in navigator) {
12 |         console.log("geolocation available");
13 |         navigator.geolocation.getCurrentPosition((position) => {
14 |           const lat = position.coords.latitude;
15 |           const lon = position.coords.longitude;
16 |           document.getElementById("latitude").textContent = lat;
17 |           document.getElementById("longitude").textContent = lon;
18 |           // console.log(position);
19 |         });
20 |       } else {
21 |         console.log("geolocation not available");
22 |       }
23 |     </script>
24 | 
25 |     <h1>Data Selfie App</h1>
26 |     <p>
27 |       latitude: <span id="latitude"></span>&deg;<br />
28 |       longitude: <span id="longitude"></span>&deg;
29 |     </p>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/module2/03_post_request/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | 
 3 | const app = express();
 4 | app.listen(3000, () => console.log("listening at 3000"));
 5 | app.use(express.static("public"));
 6 | app.use(express.json({ limit: "1mb" }));
 7 | 
 8 | app.post("/api", (request, response) => {
 9 |   console.log("I got a request!");
10 |   console.log(request.body);
11 |   const data = request.body;
12 |   response.json({
13 |     status: "success",
14 |     latitude: data.lat,
15 |     longitude: data.lon,
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/module2/03_post_request/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise1",
 3 |   "version": "1.0.0",
 4 |   "description": "Serving two pages.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/03_post_request/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Data Selfie App</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       if ("geolocation" in navigator) {
12 |         console.log("geolocation available");
13 |         navigator.geolocation.getCurrentPosition(async (position) => {
14 |           const lat = position.coords.latitude;
15 |           const lon = position.coords.longitude;
16 |           document.getElementById("latitude").textContent = lat;
17 |           document.getElementById("longitude").textContent = lon;
18 |           // console.log(position);
19 | 
20 |           const data = { lat, lon };
21 |           const options = {
22 |             method: "POST",
23 |             headers: {
24 |               "Content-Type": "application/json",
25 |             },
26 |             body: JSON.stringify(data),
27 |           };
28 |           const response = await fetch("/api", options);
29 |           const json = await response.json();
30 |           console.log(json);
31 |         });
32 |       } else {
33 |         console.log("geolocation not available");
34 |       }
35 |     </script>
36 | 
37 |     <h1>Data Selfie App</h1>
38 |     <p>
39 |       latitude: <span id="latitude"></span>&deg;<br />
40 |       longitude: <span id="longitude"></span>&deg;
41 |     </p>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/module2/04_saving_to_database/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('database.db');
10 | database.loadDatabase();
11 | 
12 | app.post('/api', (request, response) => {
13 |   const data = request.body;
14 |   const timestamp = Date.now();
15 |   data.timestamp = timestamp;
16 |   database.insert(data);
17 |   response.json(data);
18 | });
19 | 


--------------------------------------------------------------------------------
/module2/04_saving_to_database/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise_05",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/04_saving_to_database/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;
14 |     </p>
15 | 
16 |     <button id="submit">submit</button>
17 |     <script>
18 |       let lat, lon;
19 |       const button = document.getElementById("submit");
20 |       button.addEventListener("click", async (event) => {
21 |         const data = { lat, lon };
22 |         const options = {
23 |           method: "POST",
24 |           headers: {
25 |             "Content-Type": "application/json",
26 |           },
27 |           body: JSON.stringify(data),
28 |         };
29 |         const response = await fetch("/api", options);
30 |         const json = await response.json();
31 |         console.log(json);
32 |       });
33 | 
34 |       if ("geolocation" in navigator) {
35 |         console.log("geolocation available");
36 |         navigator.geolocation.getCurrentPosition(async (position) => {
37 |           lat = position.coords.latitude;
38 |           lon = position.coords.longitude;
39 |           document.getElementById("latitude").textContent = lat;
40 |           document.getElementById("longitude").textContent = lon;
41 |         });
42 |       } else {
43 |         console.log("geolocation not available");
44 |       }
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/module2/05_querying_database/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const Datastore = require("nedb");
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log("listening at 3000"));
 6 | app.use(express.static("public"));
 7 | app.use(express.json({ limit: "1mb" }));
 8 | 
 9 | const database = new Datastore("database.db");
10 | database.loadDatabase();
11 | 
12 | app.get("/api", (request, response) => {
13 |   database.find({}, (err, data) => {
14 |     if (err) {
15 |       response.end();
16 |       return;
17 |     }
18 |     response.send(data);
19 |   });
20 | });
21 | 
22 | app.post("/api", (request, response) => {
23 |   const data = request.body;
24 |   const timestamp = Date.now();
25 |   data.timestamp = timestamp;
26 |   database.insert(data);
27 |   response.json(data);
28 | });
29 | 


--------------------------------------------------------------------------------
/module2/05_querying_database/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise_05",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/05_querying_database/public/all.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 | 
12 |     <script>
13 |       async function getData() {
14 |         const response = await fetch("/api");
15 |         const data = await response.json();
16 | 
17 |         for (const item of data) {
18 |           const root = document.createElement("div");
19 |           const mood = document.createElement("div");
20 |           const geo = document.createElement("div");
21 |           const date = document.createElement("div");
22 | 
23 |           mood.textContent = item.mood;
24 |           geo.textContent = `${item.lat}°, ${item.lon}°`;
25 |           date.textContent = new Date(item.timestamp).toLocaleString();
26 | 
27 |           root.append(mood, geo, date);
28 |           document.body.append(root);
29 |         }
30 |         console.log(data);
31 |       }
32 | 
33 |       getData();
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/module2/05_querying_database/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;
14 |     </p>
15 |     <input id="mood" value="rainbow" />
16 | 
17 |     <button id="submit">submit</button>
18 |     <script>
19 |       let lat, lon;
20 |       const button = document.getElementById("submit");
21 |       button.addEventListener("click", async (event) => {
22 |         const mood = document.getElementById("mood").value;
23 |         const data = { lat, lon, mood };
24 |         const options = {
25 |           method: "POST",
26 |           headers: {
27 |             "Content-Type": "application/json",
28 |           },
29 |           body: JSON.stringify(data),
30 |         };
31 |         const response = await fetch("/api", options);
32 |         const json = await response.json();
33 |         console.log(json);
34 |       });
35 | 
36 |       if ("geolocation" in navigator) {
37 |         console.log("geolocation available");
38 |         navigator.geolocation.getCurrentPosition(async (position) => {
39 |           lat = position.coords.latitude;
40 |           lon = position.coords.longitude;
41 |           document.getElementById("latitude").textContent = lat;
42 |           document.getElementById("longitude").textContent = lon;
43 |         });
44 |       } else {
45 |         console.log("geolocation not available");
46 |       }
47 |     </script>
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/module2/06_webcam/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('database.db');
10 | database.loadDatabase();
11 | 
12 | app.get('/api', (request, response) => {
13 |   database.find({}, (err, data) => {
14 |     if (err) {
15 |       response.end();
16 |       return;
17 |     }
18 |     response.json(data);
19 |   });
20 | });
21 | 
22 | app.post('/api', (request, response) => {
23 |   const data = request.body;
24 |   const timestamp = Date.now();
25 |   data.timestamp = timestamp;
26 |   database.insert(data);
27 |   response.json(data);
28 | });
29 | 


--------------------------------------------------------------------------------
/module2/06_webcam/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/06_webcam/public/all.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <div><a href="/">enter</a> | <a href="/all.html">list</a></div>
12 | 
13 |     <script>
14 |       getData();
15 | 
16 |       async function getData() {
17 |         const response = await fetch("/api");
18 |         const data = await response.json();
19 | 
20 |         for (item of data) {
21 |           const root = document.createElement("p");
22 |           const mood = document.createElement("div");
23 |           const geo = document.createElement("div");
24 |           const date = document.createElement("div");
25 |           const image = document.createElement("img");
26 | 
27 |           mood.textContent = `mood: ${item.mood}`;
28 |           geo.textContent = `${item.lat}°, ${item.lon}°`;
29 |           const dateString = new Date(item.timestamp).toLocaleString();
30 |           date.textContent = dateString;
31 |           image.src = item.image64;
32 | 
33 |           root.append(mood, geo, date, image);
34 |           document.body.append(root);
35 |         }
36 |         console.log(data);
37 |       }
38 |     </script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/module2/06_webcam/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">enter</a> | <a href="/all.html">list</a></div>
13 | 
14 |     <p>
15 |       latitude: <span id="latitude"></span>&deg;<br />
16 |       longitude: <span id="longitude"></span>&deg;
17 |     </p>
18 |     <input id="mood" value="rainbow" />
19 | 
20 |     <button id="submit">submit</button>
21 | 
22 |     <script>
23 |       function setup() {
24 |         noCanvas();
25 |         const video = createCapture(VIDEO);
26 |         video.size(160, 120);
27 |         let lat, lon;
28 |         const button = document.getElementById("submit");
29 |         button.addEventListener("click", async (event) => {
30 |           const mood = document.getElementById("mood").value;
31 |           video.loadPixels();
32 |           const image64 = video.canvas.toDataURL();
33 |           const data = { lat, lon, mood, image64 };
34 |           const options = {
35 |             method: "POST",
36 |             headers: {
37 |               "Content-Type": "application/json",
38 |             },
39 |             body: JSON.stringify(data),
40 |           };
41 |           const response = await fetch("/api", options);
42 |           const json = await response.json();
43 |           console.log(json);
44 |         });
45 | 
46 |         if ("geolocation" in navigator) {
47 |           console.log("geolocation available");
48 |           navigator.geolocation.getCurrentPosition((position) => {
49 |             lat = position.coords.latitude;
50 |             lon = position.coords.longitude;
51 |             console.log(lat, lon);
52 |             document.getElementById("latitude").textContent = lat;
53 |             document.getElementById("longitude").textContent = lon;
54 |           });
55 |         } else {
56 |           console.log("geolocation not available");
57 |         }
58 |       }
59 |     </script>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('database.db');
10 | database.loadDatabase();
11 | 
12 | app.get('/api', (request, response) => {
13 |   database.find({}, (err, data) => {
14 |     if (err) {
15 |       response.end();
16 |       return;
17 |     }
18 |     response.json(data);
19 |   });
20 | });
21 | 
22 | app.post('/api', (request, response) => {
23 |   const data = request.body;
24 |   const timestamp = Date.now();
25 |   data.timestamp = timestamp;
26 |   database.insert(data);
27 |   response.json(data);
28 | });
29 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <h1>Data Selfie App</h1>
14 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
15 |     <p>
16 |       latitude: <span id="latitude"></span>&deg;<br />
17 |       longitude: <span id="longitude"></span>&deg;
18 |     </p>
19 |     <label for="mood">enter your mood</label>
20 |     <input id="mood" value="rainbow" />
21 |     <button id="submit">submit</button>
22 |     <script src="sketch.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/public/logs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="../style.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
13 |     <script src="logs.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/public/logs/logs.js:
--------------------------------------------------------------------------------
 1 | getData();
 2 | 
 3 | async function getData() {
 4 |   const response = await fetch('/api');
 5 |   const data = await response.json();
 6 | 
 7 |   for (item of data) {
 8 |     const root = document.createElement('p');
 9 |     const mood = document.createElement('div');
10 |     const geo = document.createElement('div');
11 |     const date = document.createElement('div');
12 |     const image = document.createElement('img');
13 | 
14 |     mood.textContent = `mood: ${item.mood}`;
15 |     geo.textContent = `${item.lat}°, ${item.lon}°`;
16 |     const dateString = new Date(item.timestamp).toLocaleString();
17 |     date.textContent = dateString;
18 |     image.src = item.image64;
19 |     image.alt = 'Dan Shiffman making silly faces.';
20 | 
21 |     root.append(mood, geo, date, image);
22 |     document.body.append(root);
23 |   }
24 |   console.log(data);
25 | }
26 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/public/sketch.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   noCanvas();
 3 |   const video = createCapture(VIDEO);
 4 |   video.size(160, 120);
 5 |   let lat, lon;
 6 |   const button = document.getElementById('submit');
 7 |   button.addEventListener('click', async event => {
 8 |     const mood = document.getElementById('mood').value;
 9 |     video.loadPixels();
10 |     const image64 = video.canvas.toDataURL();
11 |     const data = { lat, lon, mood, image64 };
12 |     const options = {
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       },
17 |       body: JSON.stringify(data)
18 |     };
19 |     const response = await fetch('/api', options);
20 |     const json = await response.json();
21 |     console.log(json);
22 |   });
23 | 
24 |   if ('geolocation' in navigator) {
25 |     console.log('geolocation available');
26 |     navigator.geolocation.getCurrentPosition(position => {
27 |       lat = position.coords.latitude;
28 |       lon = position.coords.longitude;
29 |       console.log(lat, lon);
30 |       document.getElementById('latitude').textContent = lat;
31 |       document.getElementById('longitude').textContent = lon;
32 |     });
33 |   } else {
34 |     console.log('geolocation not available');
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/module2/data_selfie_app/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffaaff;
4 | }
5 | 


--------------------------------------------------------------------------------
/module2/exercise_01_multiple_pages/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | 
3 | const app = express();
4 | app.listen(3000, () => console.log('listening at 3000'));
5 | app.use(express.static('public'));
6 | 


--------------------------------------------------------------------------------
/module2/exercise_01_multiple_pages/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise1",
 3 |   "version": "1.0.0",
 4 |   "description": "Serving two pages.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/exercise_01_multiple_pages/public/goodbye.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="style.css" />
 8 |     <title>Goodbye</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="index.html">hello</a> | <a href="/">goodbye</a></div>
13 |     <p>Goodbye!</p>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module2/exercise_01_multiple_pages/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="style.css" />
 8 |     <title>Hello</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">hello</a> | <a href="goodbye.html">goodbye</a></div>
13 |     <p>Hello!</p>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module2/exercise_02_leaflet/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | 
3 | const app = express();
4 | app.listen(3000, () => console.log('listening at 3000'));
5 | app.use(express.static('public'));
6 | 


--------------------------------------------------------------------------------
/module2/exercise_02_leaflet/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "module2_exercise2",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "accepts": {
  8 |       "version": "1.3.5",
  9 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
 10 |       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
 11 |       "requires": {
 12 |         "mime-types": "~2.1.18",
 13 |         "negotiator": "0.6.1"
 14 |       }
 15 |     },
 16 |     "array-flatten": {
 17 |       "version": "1.1.1",
 18 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 19 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 20 |     },
 21 |     "body-parser": {
 22 |       "version": "1.18.3",
 23 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
 24 |       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
 25 |       "requires": {
 26 |         "bytes": "3.0.0",
 27 |         "content-type": "~1.0.4",
 28 |         "debug": "2.6.9",
 29 |         "depd": "~1.1.2",
 30 |         "http-errors": "~1.6.3",
 31 |         "iconv-lite": "0.4.23",
 32 |         "on-finished": "~2.3.0",
 33 |         "qs": "6.5.2",
 34 |         "raw-body": "2.3.3",
 35 |         "type-is": "~1.6.16"
 36 |       }
 37 |     },
 38 |     "bytes": {
 39 |       "version": "3.0.0",
 40 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
 41 |       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
 42 |     },
 43 |     "content-disposition": {
 44 |       "version": "0.5.2",
 45 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
 46 |       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
 47 |     },
 48 |     "content-type": {
 49 |       "version": "1.0.4",
 50 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 51 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 52 |     },
 53 |     "cookie": {
 54 |       "version": "0.3.1",
 55 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
 56 |       "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
 57 |     },
 58 |     "cookie-signature": {
 59 |       "version": "1.0.6",
 60 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 61 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 62 |     },
 63 |     "debug": {
 64 |       "version": "2.6.9",
 65 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 66 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 67 |       "requires": {
 68 |         "ms": "2.0.0"
 69 |       }
 70 |     },
 71 |     "depd": {
 72 |       "version": "1.1.2",
 73 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 74 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 75 |     },
 76 |     "destroy": {
 77 |       "version": "1.0.4",
 78 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 79 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 80 |     },
 81 |     "ee-first": {
 82 |       "version": "1.1.1",
 83 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 84 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 85 |     },
 86 |     "encodeurl": {
 87 |       "version": "1.0.2",
 88 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 89 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 90 |     },
 91 |     "escape-html": {
 92 |       "version": "1.0.3",
 93 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 94 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 95 |     },
 96 |     "etag": {
 97 |       "version": "1.8.1",
 98 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 99 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
100 |     },
101 |     "express": {
102 |       "version": "4.16.4",
103 |       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
104 |       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
105 |       "requires": {
106 |         "accepts": "~1.3.5",
107 |         "array-flatten": "1.1.1",
108 |         "body-parser": "1.18.3",
109 |         "content-disposition": "0.5.2",
110 |         "content-type": "~1.0.4",
111 |         "cookie": "0.3.1",
112 |         "cookie-signature": "1.0.6",
113 |         "debug": "2.6.9",
114 |         "depd": "~1.1.2",
115 |         "encodeurl": "~1.0.2",
116 |         "escape-html": "~1.0.3",
117 |         "etag": "~1.8.1",
118 |         "finalhandler": "1.1.1",
119 |         "fresh": "0.5.2",
120 |         "merge-descriptors": "1.0.1",
121 |         "methods": "~1.1.2",
122 |         "on-finished": "~2.3.0",
123 |         "parseurl": "~1.3.2",
124 |         "path-to-regexp": "0.1.7",
125 |         "proxy-addr": "~2.0.4",
126 |         "qs": "6.5.2",
127 |         "range-parser": "~1.2.0",
128 |         "safe-buffer": "5.1.2",
129 |         "send": "0.16.2",
130 |         "serve-static": "1.13.2",
131 |         "setprototypeof": "1.1.0",
132 |         "statuses": "~1.4.0",
133 |         "type-is": "~1.6.16",
134 |         "utils-merge": "1.0.1",
135 |         "vary": "~1.1.2"
136 |       }
137 |     },
138 |     "finalhandler": {
139 |       "version": "1.1.1",
140 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
141 |       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
142 |       "requires": {
143 |         "debug": "2.6.9",
144 |         "encodeurl": "~1.0.2",
145 |         "escape-html": "~1.0.3",
146 |         "on-finished": "~2.3.0",
147 |         "parseurl": "~1.3.2",
148 |         "statuses": "~1.4.0",
149 |         "unpipe": "~1.0.0"
150 |       }
151 |     },
152 |     "forwarded": {
153 |       "version": "0.1.2",
154 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
155 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
156 |     },
157 |     "fresh": {
158 |       "version": "0.5.2",
159 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
160 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
161 |     },
162 |     "http-errors": {
163 |       "version": "1.6.3",
164 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
165 |       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
166 |       "requires": {
167 |         "depd": "~1.1.2",
168 |         "inherits": "2.0.3",
169 |         "setprototypeof": "1.1.0",
170 |         "statuses": ">= 1.4.0 < 2"
171 |       }
172 |     },
173 |     "iconv-lite": {
174 |       "version": "0.4.23",
175 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
176 |       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
177 |       "requires": {
178 |         "safer-buffer": ">= 2.1.2 < 3"
179 |       }
180 |     },
181 |     "inherits": {
182 |       "version": "2.0.3",
183 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
184 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
185 |     },
186 |     "ipaddr.js": {
187 |       "version": "1.8.0",
188 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
189 |       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
190 |     },
191 |     "media-typer": {
192 |       "version": "0.3.0",
193 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
194 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
195 |     },
196 |     "merge-descriptors": {
197 |       "version": "1.0.1",
198 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
199 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
200 |     },
201 |     "methods": {
202 |       "version": "1.1.2",
203 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
204 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
205 |     },
206 |     "mime": {
207 |       "version": "1.4.1",
208 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
209 |       "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
210 |     },
211 |     "mime-db": {
212 |       "version": "1.38.0",
213 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
214 |       "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
215 |     },
216 |     "mime-types": {
217 |       "version": "2.1.22",
218 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
219 |       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
220 |       "requires": {
221 |         "mime-db": "~1.38.0"
222 |       }
223 |     },
224 |     "ms": {
225 |       "version": "2.0.0",
226 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
227 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
228 |     },
229 |     "negotiator": {
230 |       "version": "0.6.1",
231 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
232 |       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
233 |     },
234 |     "on-finished": {
235 |       "version": "2.3.0",
236 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
237 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
238 |       "requires": {
239 |         "ee-first": "1.1.1"
240 |       }
241 |     },
242 |     "parseurl": {
243 |       "version": "1.3.2",
244 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
245 |       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
246 |     },
247 |     "path-to-regexp": {
248 |       "version": "0.1.7",
249 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
250 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
251 |     },
252 |     "proxy-addr": {
253 |       "version": "2.0.4",
254 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
255 |       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
256 |       "requires": {
257 |         "forwarded": "~0.1.2",
258 |         "ipaddr.js": "1.8.0"
259 |       }
260 |     },
261 |     "qs": {
262 |       "version": "6.5.2",
263 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
264 |       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
265 |     },
266 |     "range-parser": {
267 |       "version": "1.2.0",
268 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
269 |       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
270 |     },
271 |     "raw-body": {
272 |       "version": "2.3.3",
273 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
274 |       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
275 |       "requires": {
276 |         "bytes": "3.0.0",
277 |         "http-errors": "1.6.3",
278 |         "iconv-lite": "0.4.23",
279 |         "unpipe": "1.0.0"
280 |       }
281 |     },
282 |     "safe-buffer": {
283 |       "version": "5.1.2",
284 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
285 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
286 |     },
287 |     "safer-buffer": {
288 |       "version": "2.1.2",
289 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
290 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
291 |     },
292 |     "send": {
293 |       "version": "0.16.2",
294 |       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
295 |       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
296 |       "requires": {
297 |         "debug": "2.6.9",
298 |         "depd": "~1.1.2",
299 |         "destroy": "~1.0.4",
300 |         "encodeurl": "~1.0.2",
301 |         "escape-html": "~1.0.3",
302 |         "etag": "~1.8.1",
303 |         "fresh": "0.5.2",
304 |         "http-errors": "~1.6.2",
305 |         "mime": "1.4.1",
306 |         "ms": "2.0.0",
307 |         "on-finished": "~2.3.0",
308 |         "range-parser": "~1.2.0",
309 |         "statuses": "~1.4.0"
310 |       }
311 |     },
312 |     "serve-static": {
313 |       "version": "1.13.2",
314 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
315 |       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
316 |       "requires": {
317 |         "encodeurl": "~1.0.2",
318 |         "escape-html": "~1.0.3",
319 |         "parseurl": "~1.3.2",
320 |         "send": "0.16.2"
321 |       }
322 |     },
323 |     "setprototypeof": {
324 |       "version": "1.1.0",
325 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
326 |       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
327 |     },
328 |     "statuses": {
329 |       "version": "1.4.0",
330 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
331 |       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
332 |     },
333 |     "type-is": {
334 |       "version": "1.6.16",
335 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
336 |       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
337 |       "requires": {
338 |         "media-typer": "0.3.0",
339 |         "mime-types": "~2.1.18"
340 |       }
341 |     },
342 |     "unpipe": {
343 |       "version": "1.0.0",
344 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
345 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
346 |     },
347 |     "utils-merge": {
348 |       "version": "1.0.1",
349 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
350 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
351 |     },
352 |     "vary": {
353 |       "version": "1.1.2",
354 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
355 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
356 |     }
357 |   }
358 | }
359 | 


--------------------------------------------------------------------------------
/module2/exercise_02_leaflet/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/exercise_02_leaflet/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
10 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
11 |       crossorigin=""
12 |     />
13 |     <script
14 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
15 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
16 |       crossorigin=""
17 |     ></script>
18 |     <style>
19 |       #mymap {
20 |         height: 180px;
21 |       }
22 |     </style>
23 |     <title>Document</title>
24 |   </head>
25 |   <body>
26 |     <h1>Data Selfie App</h1>
27 |     <p>
28 |       latitude: <span id="latitude"></span>&deg;<br />
29 |       longitude: <span id="longitude"></span>&deg;
30 |     </p>
31 |     <div id="mymap"></div>
32 |     <script>
33 |       if ('geolocation' in navigator) {
34 |         console.log('geolocation available');
35 |         navigator.geolocation.getCurrentPosition(position => {
36 |           lat = position.coords.latitude;
37 |           lon = position.coords.longitude;
38 |           console.log(lat, lon);
39 |           document.getElementById('latitude').textContent = lat;
40 |           document.getElementById('longitude').textContent = lon;
41 | 
42 |           const mymap = L.map('mymap').setView([lat, lon], 15);
43 |           const attribution =
44 |             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
45 |           const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
46 |           const tiles = L.tileLayer(tileUrl, { attribution });
47 |           tiles.addTo(mymap);
48 |           const marker = L.marker([lat, lon]).addTo(mymap);
49 |         });
50 |       } else {
51 |         console.log('geolocation not available');
52 |       }
53 |     </script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/module2/exercise_03_button/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const app = express();
3 | app.listen(3000, () => console.log('listening at 3000'));
4 | app.use(express.static('public'));
5 | 


--------------------------------------------------------------------------------
/module2/exercise_03_button/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "module2_exercise2",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "accepts": {
  8 |       "version": "1.3.5",
  9 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
 10 |       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
 11 |       "requires": {
 12 |         "mime-types": "~2.1.18",
 13 |         "negotiator": "0.6.1"
 14 |       }
 15 |     },
 16 |     "array-flatten": {
 17 |       "version": "1.1.1",
 18 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 19 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 20 |     },
 21 |     "body-parser": {
 22 |       "version": "1.18.3",
 23 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
 24 |       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
 25 |       "requires": {
 26 |         "bytes": "3.0.0",
 27 |         "content-type": "~1.0.4",
 28 |         "debug": "2.6.9",
 29 |         "depd": "~1.1.2",
 30 |         "http-errors": "~1.6.3",
 31 |         "iconv-lite": "0.4.23",
 32 |         "on-finished": "~2.3.0",
 33 |         "qs": "6.5.2",
 34 |         "raw-body": "2.3.3",
 35 |         "type-is": "~1.6.16"
 36 |       }
 37 |     },
 38 |     "bytes": {
 39 |       "version": "3.0.0",
 40 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
 41 |       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
 42 |     },
 43 |     "content-disposition": {
 44 |       "version": "0.5.2",
 45 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
 46 |       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
 47 |     },
 48 |     "content-type": {
 49 |       "version": "1.0.4",
 50 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 51 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 52 |     },
 53 |     "cookie": {
 54 |       "version": "0.3.1",
 55 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
 56 |       "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
 57 |     },
 58 |     "cookie-signature": {
 59 |       "version": "1.0.6",
 60 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 61 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 62 |     },
 63 |     "debug": {
 64 |       "version": "2.6.9",
 65 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 66 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 67 |       "requires": {
 68 |         "ms": "2.0.0"
 69 |       }
 70 |     },
 71 |     "depd": {
 72 |       "version": "1.1.2",
 73 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 74 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 75 |     },
 76 |     "destroy": {
 77 |       "version": "1.0.4",
 78 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 79 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 80 |     },
 81 |     "ee-first": {
 82 |       "version": "1.1.1",
 83 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 84 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 85 |     },
 86 |     "encodeurl": {
 87 |       "version": "1.0.2",
 88 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 89 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 90 |     },
 91 |     "escape-html": {
 92 |       "version": "1.0.3",
 93 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 94 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 95 |     },
 96 |     "etag": {
 97 |       "version": "1.8.1",
 98 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 99 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
100 |     },
101 |     "express": {
102 |       "version": "4.16.4",
103 |       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
104 |       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
105 |       "requires": {
106 |         "accepts": "~1.3.5",
107 |         "array-flatten": "1.1.1",
108 |         "body-parser": "1.18.3",
109 |         "content-disposition": "0.5.2",
110 |         "content-type": "~1.0.4",
111 |         "cookie": "0.3.1",
112 |         "cookie-signature": "1.0.6",
113 |         "debug": "2.6.9",
114 |         "depd": "~1.1.2",
115 |         "encodeurl": "~1.0.2",
116 |         "escape-html": "~1.0.3",
117 |         "etag": "~1.8.1",
118 |         "finalhandler": "1.1.1",
119 |         "fresh": "0.5.2",
120 |         "merge-descriptors": "1.0.1",
121 |         "methods": "~1.1.2",
122 |         "on-finished": "~2.3.0",
123 |         "parseurl": "~1.3.2",
124 |         "path-to-regexp": "0.1.7",
125 |         "proxy-addr": "~2.0.4",
126 |         "qs": "6.5.2",
127 |         "range-parser": "~1.2.0",
128 |         "safe-buffer": "5.1.2",
129 |         "send": "0.16.2",
130 |         "serve-static": "1.13.2",
131 |         "setprototypeof": "1.1.0",
132 |         "statuses": "~1.4.0",
133 |         "type-is": "~1.6.16",
134 |         "utils-merge": "1.0.1",
135 |         "vary": "~1.1.2"
136 |       }
137 |     },
138 |     "finalhandler": {
139 |       "version": "1.1.1",
140 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
141 |       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
142 |       "requires": {
143 |         "debug": "2.6.9",
144 |         "encodeurl": "~1.0.2",
145 |         "escape-html": "~1.0.3",
146 |         "on-finished": "~2.3.0",
147 |         "parseurl": "~1.3.2",
148 |         "statuses": "~1.4.0",
149 |         "unpipe": "~1.0.0"
150 |       }
151 |     },
152 |     "forwarded": {
153 |       "version": "0.1.2",
154 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
155 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
156 |     },
157 |     "fresh": {
158 |       "version": "0.5.2",
159 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
160 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
161 |     },
162 |     "http-errors": {
163 |       "version": "1.6.3",
164 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
165 |       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
166 |       "requires": {
167 |         "depd": "~1.1.2",
168 |         "inherits": "2.0.3",
169 |         "setprototypeof": "1.1.0",
170 |         "statuses": ">= 1.4.0 < 2"
171 |       }
172 |     },
173 |     "iconv-lite": {
174 |       "version": "0.4.23",
175 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
176 |       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
177 |       "requires": {
178 |         "safer-buffer": ">= 2.1.2 < 3"
179 |       }
180 |     },
181 |     "inherits": {
182 |       "version": "2.0.3",
183 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
184 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
185 |     },
186 |     "ipaddr.js": {
187 |       "version": "1.8.0",
188 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
189 |       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
190 |     },
191 |     "media-typer": {
192 |       "version": "0.3.0",
193 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
194 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
195 |     },
196 |     "merge-descriptors": {
197 |       "version": "1.0.1",
198 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
199 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
200 |     },
201 |     "methods": {
202 |       "version": "1.1.2",
203 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
204 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
205 |     },
206 |     "mime": {
207 |       "version": "1.4.1",
208 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
209 |       "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
210 |     },
211 |     "mime-db": {
212 |       "version": "1.38.0",
213 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
214 |       "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
215 |     },
216 |     "mime-types": {
217 |       "version": "2.1.22",
218 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
219 |       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
220 |       "requires": {
221 |         "mime-db": "~1.38.0"
222 |       }
223 |     },
224 |     "ms": {
225 |       "version": "2.0.0",
226 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
227 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
228 |     },
229 |     "negotiator": {
230 |       "version": "0.6.1",
231 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
232 |       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
233 |     },
234 |     "on-finished": {
235 |       "version": "2.3.0",
236 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
237 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
238 |       "requires": {
239 |         "ee-first": "1.1.1"
240 |       }
241 |     },
242 |     "parseurl": {
243 |       "version": "1.3.2",
244 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
245 |       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
246 |     },
247 |     "path-to-regexp": {
248 |       "version": "0.1.7",
249 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
250 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
251 |     },
252 |     "proxy-addr": {
253 |       "version": "2.0.4",
254 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
255 |       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
256 |       "requires": {
257 |         "forwarded": "~0.1.2",
258 |         "ipaddr.js": "1.8.0"
259 |       }
260 |     },
261 |     "qs": {
262 |       "version": "6.5.2",
263 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
264 |       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
265 |     },
266 |     "range-parser": {
267 |       "version": "1.2.0",
268 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
269 |       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
270 |     },
271 |     "raw-body": {
272 |       "version": "2.3.3",
273 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
274 |       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
275 |       "requires": {
276 |         "bytes": "3.0.0",
277 |         "http-errors": "1.6.3",
278 |         "iconv-lite": "0.4.23",
279 |         "unpipe": "1.0.0"
280 |       }
281 |     },
282 |     "safe-buffer": {
283 |       "version": "5.1.2",
284 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
285 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
286 |     },
287 |     "safer-buffer": {
288 |       "version": "2.1.2",
289 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
290 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
291 |     },
292 |     "send": {
293 |       "version": "0.16.2",
294 |       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
295 |       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
296 |       "requires": {
297 |         "debug": "2.6.9",
298 |         "depd": "~1.1.2",
299 |         "destroy": "~1.0.4",
300 |         "encodeurl": "~1.0.2",
301 |         "escape-html": "~1.0.3",
302 |         "etag": "~1.8.1",
303 |         "fresh": "0.5.2",
304 |         "http-errors": "~1.6.2",
305 |         "mime": "1.4.1",
306 |         "ms": "2.0.0",
307 |         "on-finished": "~2.3.0",
308 |         "range-parser": "~1.2.0",
309 |         "statuses": "~1.4.0"
310 |       }
311 |     },
312 |     "serve-static": {
313 |       "version": "1.13.2",
314 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
315 |       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
316 |       "requires": {
317 |         "encodeurl": "~1.0.2",
318 |         "escape-html": "~1.0.3",
319 |         "parseurl": "~1.3.2",
320 |         "send": "0.16.2"
321 |       }
322 |     },
323 |     "setprototypeof": {
324 |       "version": "1.1.0",
325 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
326 |       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
327 |     },
328 |     "statuses": {
329 |       "version": "1.4.0",
330 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
331 |       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
332 |     },
333 |     "type-is": {
334 |       "version": "1.6.16",
335 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
336 |       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
337 |       "requires": {
338 |         "media-typer": "0.3.0",
339 |         "mime-types": "~2.1.18"
340 |       }
341 |     },
342 |     "unpipe": {
343 |       "version": "1.0.0",
344 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
345 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
346 |     },
347 |     "utils-merge": {
348 |       "version": "1.0.1",
349 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
350 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
351 |     },
352 |     "vary": {
353 |       "version": "1.1.2",
354 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
355 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
356 |     }
357 |   }
358 | }
359 | 


--------------------------------------------------------------------------------
/module2/exercise_03_button/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/exercise_03_button/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;<br />
14 |     </p>
15 |     <button id="geolocate">geolocate</button>
16 |     <script>
17 |       document.getElementById('geolocate').addEventListener('click', event => {
18 |         if ('geolocation' in navigator) {
19 |           console.log('geolocation available');
20 |           navigator.geolocation.getCurrentPosition(position => {
21 |             lat = position.coords.latitude;
22 |             lon = position.coords.longitude;
23 |             console.log(lat, lon);
24 |             document.getElementById('latitude').textContent = lat;
25 |             document.getElementById('longitude').textContent = lon;
26 |           });
27 |         } else {
28 |           console.log('geolocation not available');
29 |         }
30 |       });
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/module2/exercise_04_array_button/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | 
 3 | const app = express();
 4 | app.listen(3000, () => console.log('listening at 3000'));
 5 | app.use(express.static('public'));
 6 | app.use(express.json({ limit: '1mb' }));
 7 | 
 8 | const allData = [];
 9 | 
10 | app.post('/api', (request, response) => {
11 |   const data = request.body;
12 |   allData.push(data);
13 |   response.json(allData);
14 |   console.log(allData);
15 | });
16 | 


--------------------------------------------------------------------------------
/module2/exercise_04_array_button/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise_04",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/exercise_04_array_button/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;
14 |     </p>
15 |     <button id="submit">submit</button>
16 |     <script>
17 |       let lat, lon;
18 |       const button = document.getElementById('submit');
19 |       button.addEventListener('click', async event => {
20 |         const data = { lat, lon };
21 |         const options = {
22 |           method: 'POST',
23 |           headers: {
24 |             'Content-Type': 'application/json'
25 |           },
26 |           body: JSON.stringify(data)
27 |         };
28 |         const response = await fetch('/api', options);
29 |         const json = await response.json();
30 |         console.log(json);
31 |       });
32 | 
33 |       if ('geolocation' in navigator) {
34 |         console.log('geolocation available');
35 |         navigator.geolocation.getCurrentPosition(async position => {
36 |           lat = position.coords.latitude;
37 |           lon = position.coords.longitude;
38 |           document.getElementById('latitude').textContent = lat;
39 |           document.getElementById('longitude').textContent = lon;
40 |         });
41 |       } else {
42 |         console.log('geolocation not available');
43 |       }
44 |     </script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/module2/exercise_05_text_file/database.txt:
--------------------------------------------------------------------------------
1 | {"lat":40.7296101,"lon":-73.9937911}
2 | {"lat":40.7296101,"lon":-73.9937911}
3 | {"lat":40.7296101,"lon":-73.9937911}
4 | {"lat":40.7296101,"lon":-73.9937911}
5 | 


--------------------------------------------------------------------------------
/module2/exercise_05_text_file/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const fs = require("fs");
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log("listening at 3000"));
 6 | app.use(express.static("public"));
 7 | app.use(express.json({ limit: "1mb" }));
 8 | 
 9 | clearDatabase();
10 | 
11 | app.post("/api", (request, response) => {
12 |   const data = request.body;
13 |   saveToDatabase(data);
14 |   const allData = getDatabase();
15 |   response.json(allData);
16 |   console.log(allData);
17 | });
18 | 
19 | function getDatabase() {
20 |   const rawData = fs.readFileSync("database.txt").toString().trim();
21 |   const lines = rawData.split("\n");
22 |   const allData = [];
23 |   for (const line of lines) {
24 |     const data = JSON.parse(line);
25 |     allData.push(data);
26 |   }
27 |   return allData;
28 | }
29 | 
30 | function saveToDatabase(data) {
31 |   const dataString = JSON.stringify(data);
32 |   fs.appendFileSync("database.txt", dataString + "\n");
33 | }
34 | 
35 | function clearDatabase() {
36 |   fs.writeFileSync("database.txt", "");
37 | }
38 | 


--------------------------------------------------------------------------------
/module2/exercise_05_text_file/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise_04",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Dipam Sen",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/module2/exercise_05_text_file/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;
14 |     </p>
15 |     <button id="submit">submit</button>
16 |     <script>
17 |       let lat, lon;
18 |       const button = document.getElementById("submit");
19 |       button.addEventListener("click", async (event) => {
20 |         const data = { lat, lon };
21 |         const options = {
22 |           method: "POST",
23 |           headers: {
24 |             "Content-Type": "application/json",
25 |           },
26 |           body: JSON.stringify(data),
27 |         };
28 |         const response = await fetch("/api", options);
29 |         const json = await response.json();
30 |         console.log(json);
31 |       });
32 | 
33 |       if ("geolocation" in navigator) {
34 |         console.log("geolocation available");
35 |         navigator.geolocation.getCurrentPosition(async (position) => {
36 |           lat = position.coords.latitude;
37 |           lon = position.coords.longitude;
38 |           document.getElementById("latitude").textContent = lat;
39 |           document.getElementById("longitude").textContent = lon;
40 |         });
41 |       } else {
42 |         console.log("geolocation not available");
43 |       }
44 |     </script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/module2/exercise_06_input_box/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('database.db');
10 | database.loadDatabase();
11 | 
12 | app.post('/api', (request, response) => {
13 |   const data = request.body;
14 |   const timestamp = Date.now();
15 |   data.timestamp = timestamp;
16 |   database.insert(data);
17 |   response.json(data);
18 | });
19 | 


--------------------------------------------------------------------------------
/module2/exercise_06_input_box/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2_exercise_05",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/exercise_06_input_box/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Data Selfie App</h1>
11 |     <p>
12 |       latitude: <span id="latitude"></span>&deg;<br />
13 |       longitude: <span id="longitude"></span>&deg;
14 |     </p>
15 |     <label for="vegetable">enter your favorite vegetable</label>
16 |     <input id="vegetable" value="arugula" />
17 | 
18 |     <button id="submit">submit</button>
19 |     <script>
20 |       let lat, lon;
21 |       const button = document.getElementById('submit');
22 |       button.addEventListener('click', async event => {
23 |         const vegetable = document.getElementById('vegetable').value;
24 |         const data = { lat, lon, vegetable };
25 |         const options = {
26 |           method: 'POST',
27 |           headers: {
28 |             'Content-Type': 'application/json'
29 |           },
30 |           body: JSON.stringify(data)
31 |         };
32 |         const response = await fetch('/api', options);
33 |         const json = await response.json();
34 |         console.log(json);
35 |       });
36 | 
37 |       if ('geolocation' in navigator) {
38 |         console.log('geolocation available');
39 |         navigator.geolocation.getCurrentPosition(async position => {
40 |           lat = position.coords.latitude;
41 |           lon = position.coords.longitude;
42 |           document.getElementById('latitude').textContent = lat;
43 |           document.getElementById('longitude').textContent = lon;
44 |         });
45 |       } else {
46 |         console.log('geolocation not available');
47 |       }
48 |     </script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('database.db');
10 | database.loadDatabase();
11 | 
12 | app.get('/api', (request, response) => {
13 |   database.find({}, (err, data) => {
14 |     if (err) {
15 |       response.end();
16 |       return;
17 |     }
18 |     response.json(data);
19 |   });
20 | });
21 | 
22 | app.post('/api', (request, response) => {
23 |   const data = request.body;
24 |   const timestamp = Date.now();
25 |   data.timestamp = timestamp;
26 |   database.insert(data);
27 |   response.json(data);
28 | });
29 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <h1>Data Selfie App</h1>
14 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
15 |     <p>
16 |       latitude: <span id="latitude"></span>&deg;<br />
17 |       longitude: <span id="longitude"></span>&deg;
18 |     </p>
19 |     <label for="mood">enter your mood</label>
20 |     <input id="mood" value="rainbow" />
21 |     <button id="submit">submit</button>
22 |     <script src="sketch.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/public/logs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="../style.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
13 |     <br />
14 |     <div>sort by <a href="#" id="time">time</a> | <a href="#" id="mood">mood</a></div>
15 | 
16 |     <script src="logs.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/public/logs/logs.js:
--------------------------------------------------------------------------------
 1 | getData();
 2 | 
 3 | const selfies = [];
 4 | 
 5 | document.getElementById('time').addEventListener('click', event => {
 6 |   sortData((a, b) => b.time - a.time);
 7 | });
 8 | 
 9 | document.getElementById('mood').addEventListener('click', event => {
10 |   sortData((a, b) => {
11 |     if (b.mood > a.mood) return -1;
12 |     else return 1;
13 |   });
14 | });
15 | 
16 | function sortData(compare) {
17 |   for (let item of selfies) {
18 |     item.elt.remove();
19 |   }
20 |   selfies.sort(compare);
21 |   for (let item of selfies) {
22 |     document.body.append(item.elt);
23 |   }
24 | }
25 | 
26 | async function getData() {
27 |   const response = await fetch('/api');
28 |   const data = await response.json();
29 | 
30 |   for (item of data) {
31 |     const root = document.createElement('p');
32 |     const mood = document.createElement('div');
33 |     const geo = document.createElement('div');
34 |     const date = document.createElement('div');
35 |     const image = document.createElement('img');
36 | 
37 |     mood.textContent = `mood: ${item.mood}`;
38 |     geo.textContent = `${item.lat}°, ${item.lon}°`;
39 |     const dateString = new Date(item.timestamp).toLocaleString();
40 |     date.textContent = dateString;
41 |     image.src = item.image64;
42 |     image.alt = 'Dan Shiffman making silly faces.';
43 | 
44 |     root.append(mood, geo, date, image);
45 | 
46 |     selfies.push({ elt: root, time: item.timestamp, mood: item.mood });
47 |     document.body.append(root);
48 |   }
49 |   console.log(data);
50 | }
51 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/public/sketch.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   noCanvas();
 3 |   const video = createCapture(VIDEO);
 4 |   video.size(160, 120);
 5 |   let lat, lon;
 6 |   const button = document.getElementById('submit');
 7 |   button.addEventListener('click', async event => {
 8 |     const mood = document.getElementById('mood').value;
 9 |     video.loadPixels();
10 |     const image64 = video.canvas.toDataURL();
11 |     const data = { lat, lon, mood, image64 };
12 |     const options = {
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       },
17 |       body: JSON.stringify(data)
18 |     };
19 |     const response = await fetch('/api', options);
20 |     const json = await response.json();
21 |     console.log(json);
22 |   });
23 | 
24 |   if ('geolocation' in navigator) {
25 |     console.log('geolocation available');
26 |     navigator.geolocation.getCurrentPosition(position => {
27 |       lat = position.coords.latitude;
28 |       lon = position.coords.longitude;
29 |       console.log(lat, lon);
30 |       document.getElementById('latitude').textContent = lat;
31 |       document.getElementById('longitude').textContent = lon;
32 |     });
33 |   } else {
34 |     console.log('geolocation not available');
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/module2/exercise_07_sorting/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffaaff;
4 | }
5 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/images/image_1558376232234.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module2/exercise_08_save_files/images/image_1558376232234.png


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/images/image_1558376240358.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module2/exercise_08_save_files/images/image_1558376240358.png


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/images/image_1558376266448.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module2/exercise_08_save_files/images/image_1558376266448.png


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/images/image_1558376281197.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/Intro-to-Data-APIs-JS/6cdbe8a107ec6b28a10717b3ab6c3f6fc52771e8/module2/exercise_08_save_files/images/image_1558376281197.png


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const Datastore = require("nedb");
 3 | const fs = require("fs");
 4 | 
 5 | const app = express();
 6 | app.listen(3000, () => console.log("listening at 3000"));
 7 | app.use(express.static("public"));
 8 | app.use("/img", express.static("images"));
 9 | app.use(express.json({ limit: "1mb" }));
10 | 
11 | const database = new Datastore("database.db");
12 | database.loadDatabase();
13 | 
14 | app.get("/api", (request, response) => {
15 |   database.find({}, (err, data) => {
16 |     if (err) {
17 |       response.end();
18 |       return;
19 |     }
20 |     response.json(data);
21 |   });
22 | });
23 | 
24 | app.post("/api", (request, response) => {
25 |   const data = request.body;
26 |   const timestamp = Date.now();
27 |   data.timestamp = timestamp;
28 |   data.image_file = `image_${timestamp}.png`;
29 |   const base64Data = data.image64.replace(/^data:image\/png;base64,/, "");
30 |   fs.writeFileSync(`images/${data.image_file}`, base64Data, "base64");
31 |   delete data.image64;
32 |   database.insert(data);
33 |   response.json(data);
34 | });
35 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Dipam Sen",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <h1>Data Selfie App</h1>
14 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
15 |     <p>
16 |       latitude: <span id="latitude"></span>&deg;<br />
17 |       longitude: <span id="longitude"></span>&deg;
18 |     </p>
19 |     <label for="mood">enter your mood</label>
20 |     <input id="mood" value="rainbow" />
21 |     <button id="submit">submit</button>
22 |     <script src="sketch.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/public/logs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="../style.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
13 |     <script src="logs.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/public/logs/logs.js:
--------------------------------------------------------------------------------
 1 | getData();
 2 | 
 3 | async function getData() {
 4 |   const response = await fetch("/api");
 5 |   const data = await response.json();
 6 | 
 7 |   for (item of data) {
 8 |     const root = document.createElement("p");
 9 |     const mood = document.createElement("div");
10 |     const geo = document.createElement("div");
11 |     const date = document.createElement("div");
12 |     const image = document.createElement("img");
13 | 
14 |     mood.textContent = `mood: ${item.mood}`;
15 |     geo.textContent = `${item.lat}°, ${item.lon}°`;
16 |     const dateString = new Date(item.timestamp).toLocaleString();
17 |     date.textContent = dateString;
18 |     image.src = "/img/" + item.image_file;
19 |     image.alt = "Dan Shiffman making silly faces.";
20 | 
21 |     root.append(mood, geo, date, image);
22 |     document.body.append(root);
23 |   }
24 |   console.log(data);
25 | }
26 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/public/sketch.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   noCanvas();
 3 |   const video = createCapture(VIDEO);
 4 |   video.size(160, 120);
 5 |   let lat, lon;
 6 |   const button = document.getElementById('submit');
 7 |   button.addEventListener('click', async event => {
 8 |     const mood = document.getElementById('mood').value;
 9 |     video.loadPixels();
10 |     const image64 = video.canvas.toDataURL();
11 |     const data = { lat, lon, mood, image64 };
12 |     const options = {
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       },
17 |       body: JSON.stringify(data)
18 |     };
19 |     const response = await fetch('/api', options);
20 |     const json = await response.json();
21 |     console.log(json);
22 |   });
23 | 
24 |   if ('geolocation' in navigator) {
25 |     console.log('geolocation available');
26 |     navigator.geolocation.getCurrentPosition(position => {
27 |       lat = position.coords.latitude;
28 |       lon = position.coords.longitude;
29 |       console.log(lat, lon);
30 |       document.getElementById('latitude').textContent = lat;
31 |       document.getElementById('longitude').textContent = lon;
32 |     });
33 |   } else {
34 |     console.log('geolocation not available');
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffaaff;
4 | }
5 | 


--------------------------------------------------------------------------------
/module2/exercise_08_save_files/shiffman.db:
--------------------------------------------------------------------------------
1 | {"lat":40.7296086,"lon":-73.9938007,"mood":"rainbow","image_file":"image_1558376232234.png","timestamp":1558376232234,"_id":"7QLBKrUrXTPAoEyA"}
2 | {"lat":40.7296086,"lon":-73.9938007,"mood":"unicorn","image_file":"image_1558376240358.png","timestamp":1558376240358,"_id":"rLp45mGTbW4wa5pw"}
3 | {"lat":40.7296086,"lon":-73.9938007,"mood":"🚂🌈","image_file":"image_1558376266448.png","timestamp":1558376266448,"_id":"YLHImEEXOlLOPbFJ"}
4 | {"lat":40.7296086,"lon":-73.9938007,"mood":"❤️❤️❤️❤️❤️❤️❤️","image_file":"image_1558376281197.png","timestamp":1558376281197,"_id":"j2knqdvxHKqC2EB8"}


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | 
 4 | const app = express();
 5 | app.listen(3000, () => console.log('listening at 3000'));
 6 | app.use(express.static('public'));
 7 | app.use(express.json({ limit: '1mb' }));
 8 | 
 9 | const database = new Datastore('drawings.db');
10 | database.loadDatabase();
11 | 
12 | app.get('/api', (request, response) => {
13 |   database.find({}, (err, data) => {
14 |     if (err) {
15 |       response.end();
16 |       return;
17 |     }
18 |     response.json(data);
19 |   });
20 | });
21 | 
22 | app.post('/api', (request, response) => {
23 |   const data = request.body;
24 |   const timestamp = Date.now();
25 |   data.timestamp = timestamp;
26 |   database.insert(data);
27 |   response.json(data);
28 | });
29 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module2",
 3 |   "version": "1.0.0",
 4 |   "description": "This is the data selfie app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "example",
11 |     "data",
12 |     "selfie"
13 |   ],
14 |   "author": "Daniel Shiffman",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "express": "^4.16.4",
18 |     "nedb": "^1.8.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
 8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
 9 |     <link rel="stylesheet" type="text/css" href="style.css" />
10 |     <title>Document</title>
11 |   </head>
12 |   <body>
13 |     <h1>Data Selfie App</h1>
14 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
15 |     <p>
16 |       latitude: <span id="latitude"></span>&deg;<br />
17 |       longitude: <span id="longitude"></span>&deg;
18 |     </p>
19 |     <label for="mood">enter your mood</label>
20 |     <input id="mood" value="rainbow" />
21 |     <button id="submit">submit</button>
22 |     <script src="sketch.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/public/logs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="../style.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <h1>Data Selfie App</h1>
12 |     <div><a href="/">enter</a> | <a href="/logs">list</a></div>
13 |     <script src="logs.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/public/logs/logs.js:
--------------------------------------------------------------------------------
 1 | getData();
 2 | 
 3 | async function getData() {
 4 |   const response = await fetch('/api');
 5 |   const data = await response.json();
 6 | 
 7 |   for (item of data) {
 8 |     const root = document.createElement('p');
 9 |     const mood = document.createElement('div');
10 |     const geo = document.createElement('div');
11 |     const date = document.createElement('div');
12 |     const image = document.createElement('img');
13 | 
14 |     mood.textContent = `mood: ${item.mood}`;
15 |     geo.textContent = `${item.lat}°, ${item.lon}°`;
16 |     const dateString = new Date(item.timestamp).toLocaleString();
17 |     date.textContent = dateString;
18 |     image.src = item.image64;
19 |     image.alt = 'Dan Shiffman making silly faces.';
20 | 
21 |     root.append(mood, geo, date, image);
22 |     document.body.append(root);
23 |   }
24 |   console.log(data);
25 | }
26 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/public/sketch.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   const canvas = createCanvas(160, 120);
 3 |   pixelDensity(1);
 4 |   background(0);
 5 |   let lat, lon;
 6 |   const button = document.getElementById('submit');
 7 |   button.addEventListener('click', async event => {
 8 |     const mood = document.getElementById('mood').value;
 9 |     canvas.loadPixels();
10 |     const image64 = canvas.elt.toDataURL();
11 |     const data = { lat, lon, mood, image64 };
12 |     const options = {
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       },
17 |       body: JSON.stringify(data)
18 |     };
19 |     const response = await fetch('/api', options);
20 |     const json = await response.json();
21 |     console.log(json);
22 |   });
23 | 
24 |   if ('geolocation' in navigator) {
25 |     console.log('geolocation available');
26 |     navigator.geolocation.getCurrentPosition(position => {
27 |       lat = position.coords.latitude;
28 |       lon = position.coords.longitude;
29 |       console.log(lat, lon);
30 |       document.getElementById('latitude').textContent = lat;
31 |       document.getElementById('longitude').textContent = lon;
32 |     });
33 |   } else {
34 |     console.log('geolocation not available');
35 |   }
36 | }
37 | 
38 | function keyPressed() {
39 |   if (key == 'c') {
40 |     background(0);
41 |   }
42 | }
43 | 
44 | function draw() {
45 |   stroke(255);
46 |   strokeWeight(8);
47 |   if (mouseIsPressed) {
48 |     line(pmouseX, pmouseY, mouseX, mouseY);
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/module2/exercise_09_p5_drawings/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffaaff;
4 | }
5 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/.env_sample:
--------------------------------------------------------------------------------
1 | API_KEY=YOUR_API_KEY_HERE


--------------------------------------------------------------------------------
/module3/the_weather_here/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | node_modules/
3 | database.db


--------------------------------------------------------------------------------
/module3/the_weather_here/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | const fetch = require('node-fetch');
 4 | require('dotenv').config();
 5 | 
 6 | const app = express();
 7 | const port = process.env.PORT || 3000;
 8 | app.listen(port, () => {
 9 |   console.log(`Starting server at ${port}`);
10 | });
11 | app.use(express.static('public'));
12 | app.use(express.json({ limit: '1mb' }));
13 | 
14 | const database = new Datastore('database.db');
15 | database.loadDatabase();
16 | 
17 | app.get('/api', (request, response) => {
18 |   database.find({}, (err, data) => {
19 |     if (err) {
20 |       response.end();
21 |       return;
22 |     }
23 |     response.json(data);
24 |   });
25 | });
26 | 
27 | app.post('/api', (request, response) => {
28 |   const data = request.body;
29 |   const timestamp = Date.now();
30 |   data.timestamp = timestamp;
31 |   database.insert(data);
32 |   response.json(data);
33 | });
34 | 
35 | app.get('/weather/:latlon', async (request, response) => {
36 |   console.log(request.params);
37 |   const latlon = request.params.latlon.split(',');
38 |   console.log(latlon);
39 |   const lat = latlon[0];
40 |   const lon = latlon[1];
41 |   console.log(lat, lon);
42 |   const api_key = process.env.API_KEY;
43 |   const weather_url = `https://api.darksky.net/forecast/${api_key}/${lat},${lon}/?units=si`;
44 |   const weather_response = await fetch(weather_url);
45 |   const weather_data = await weather_response.json();
46 | 
47 |   const aq_url = `https://api.openaq.org/v1/latest?coordinates=${lat},${lon}`;
48 |   const aq_response = await fetch(aq_url);
49 |   const aq_data = await aq_response.json();
50 | 
51 |   const data = {
52 |     weather: weather_data,
53 |     air_quality: aq_data
54 |   };
55 |   response.json(data);
56 | });
57 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module3",
 3 |   "version": "1.0.0",
 4 |   "description": "This is a version of 'weather here' app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node index.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [
11 |     "weather",
12 |     "api",
13 |     "selfie"
14 |   ],
15 |   "author": "Daniel Shiffman",
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "dotenv": "^8.0.0",
19 |     "express": "^4.16.4",
20 |     "nedb": "^1.8.0",
21 |     "node-fetch": "^2.6.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/public/checkins/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
13 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
14 |       crossorigin=""
15 |     />
16 |     <script
17 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
18 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
19 |       crossorigin=""
20 |     ></script>
21 |     <style>
22 |       #checkinMap {
23 |         height: 240px;
24 |         margin: 8px 0px;
25 |       }
26 |     </style>
27 |     <link rel="stylesheet" type="text/css" href="../style.css" />
28 |     <title>The Weather Here</title>
29 |   </head>
30 |   <body>
31 |     <h1>The Weather Here</h1>
32 |     <div>
33 |       <a href="/">check in</a> | <a href="/checkins">view checkins</a>
34 |     </div>
35 |     <div id="checkinMap"></div>
36 |     <script src="logs.js"></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/public/checkins/logs.js:
--------------------------------------------------------------------------------
 1 | const mymap = L.map('checkinMap').setView([0, 0], 1);
 2 | const attribution =
 3 |   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 4 | //const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 5 | const tileUrl =
 6 |   'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png';
 7 | const tiles = L.tileLayer(tileUrl, { attribution });
 8 | tiles.addTo(mymap);
 9 | 
10 | getData();
11 | 
12 | async function getData() {
13 |   const response = await fetch('/api');
14 |   const data = await response.json();
15 | 
16 |   for (item of data) {
17 |     const marker = L.marker([item.lat, item.lon]).addTo(mymap);
18 |     let txt = `The weather here at ${item.lat}&deg;,
19 |     ${item.lon}&deg; is ${item.weather.summary} with
20 |     a temperature of ${item.weather.temperature}&deg; C.`;
21 | 
22 |     if (item.air.value < 0) {
23 |       txt += '  No air quality reading.';
24 |     } else {
25 |       txt += `  The concentration of particulate matter 
26 |     (${item.air.parameter}) is ${item.air.value} 
27 |     ${item.air.unit} last read on ${item.air.lastUpdated}`;
28 |     }
29 |     marker.bindPopup(txt);
30 |   }
31 |   console.log(data);
32 | }
33 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10 |     <link rel="stylesheet" type="text/css" href="style.css" />
11 |     <title>The Weather Here</title>
12 |   </head>
13 |   <body>
14 |     <h1>The Weather is Here</h1>
15 |     <div>
16 |       <a href="/">check in</a> | <a href="/checkins">view checkins</a>
17 |     </div>
18 |     <p>
19 |       The weather here at <span id="latitude"></span>&deg;,
20 |       <span id="longitude"></span>&deg; is <span id="summary"></span> with
21 |       a temperature of <span id="temp"></span>&deg; C. The concentration of
22 |       particulate matter (<span id="aq_parameter"></span>) is
23 |       <span id="aq_value"></span> <span id="aq_units"></span> last read on
24 |       <span id="aq_date"></span>.
25 |     </p>
26 |     <script src="sketch.js"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/public/sketch.js:
--------------------------------------------------------------------------------
 1 | // Geo Locate
 2 | let lat, lon;
 3 | if ('geolocation' in navigator) {
 4 |   console.log('geolocation available');
 5 |   navigator.geolocation.getCurrentPosition(async position => {
 6 |     let lat, lon, weather, air;
 7 |     try {
 8 |       lat = position.coords.latitude;
 9 |       lon = position.coords.longitude;
10 |       document.getElementById('latitude').textContent = lat.toFixed(2);
11 |       document.getElementById('longitude').textContent = lon.toFixed(2);
12 |       const api_url = `weather/${lat},${lon}`;
13 |       const response = await fetch(api_url);
14 |       const json = await response.json();
15 |       weather = json.weather.currently;
16 |       air = json.air_quality.results[0].measurements[0];
17 |       document.getElementById('summary').textContent = weather.summary;
18 |       document.getElementById('temp').textContent = weather.temperature;
19 |       document.getElementById('aq_parameter').textContent = air.parameter;
20 |       document.getElementById('aq_value').textContent = air.value;
21 |       document.getElementById('aq_units').textContent = air.unit;
22 |       document.getElementById('aq_date').textContent = air.lastUpdated;
23 |     } catch (error) {
24 |       console.error(error);
25 |       air = { value: -1 };
26 |       document.getElementById('aq_value').textContent = 'NO READING';
27 |     }
28 | 
29 |     const data = { lat, lon, weather, air };
30 |     const options = {
31 |       method: 'POST',
32 |       headers: {
33 |         'Content-Type': 'application/json'
34 |       },
35 |       body: JSON.stringify(data)
36 |     };
37 |     const db_response = await fetch('/api', options);
38 |     const db_json = await db_response.json();
39 |     console.log(db_json);
40 |   });
41 | } else {
42 |   console.log('geolocation not available');
43 | }
44 | 


--------------------------------------------------------------------------------
/module3/the_weather_here/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffddff;
4 | }
5 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/.env_sample:
--------------------------------------------------------------------------------
1 | API_KEY=YOUR_API_KEY_HERE


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | node_modules/
3 | database.db


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const Datastore = require('nedb');
 3 | const fetch = require('node-fetch');
 4 | require('dotenv').config();
 5 | 
 6 | const app = express();
 7 | const port = process.env.PORT || 3000;
 8 | app.listen(port, () => {
 9 |   console.log(`Starting server at ${port}`);
10 | });
11 | app.use(express.static('public'));
12 | app.use(express.json({ limit: '1mb' }));
13 | 
14 | const database = new Datastore('database.db');
15 | database.loadDatabase();
16 | 
17 | app.get('/api', (request, response) => {
18 |   database.find({}, (err, data) => {
19 |     if (err) {
20 |       response.end();
21 |       return;
22 |     }
23 |     response.json(data);
24 |   });
25 | });
26 | 
27 | app.post('/api', (request, response) => {
28 |   const data = request.body;
29 |   const timestamp = Date.now();
30 |   data.timestamp = timestamp;
31 |   database.insert(data);
32 |   response.json(data);
33 | });
34 | 
35 | app.get('/weather/:latlon', async (request, response) => {
36 |   console.log(request.params);
37 |   const latlon = request.params.latlon.split(',');
38 |   console.log(latlon);
39 |   const lat = latlon[0];
40 |   const lon = latlon[1];
41 |   console.log(lat, lon);
42 |   const api_key = process.env.API_KEY;
43 |   const weather_url = `https://api.darksky.net/forecast/${api_key}/${lat},${lon}/?units=si`;
44 |   const weather_response = await fetch(weather_url);
45 |   const weather_data = await weather_response.json();
46 | 
47 |   const aq_url = `https://api.openaq.org/v1/latest?coordinates=${lat},${lon}`;
48 |   const aq_response = await fetch(aq_url);
49 |   const aq_data = await aq_response.json();
50 | 
51 |   const data = {
52 |     weather: weather_data,
53 |     air_quality: aq_data
54 |   };
55 |   response.json(data);
56 | });
57 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "module3",
 3 |   "version": "1.0.0",
 4 |   "description": "This is a version of 'weather here' app by Joey Lee.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node index.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [
11 |     "weather",
12 |     "api",
13 |     "selfie"
14 |   ],
15 |   "author": "Daniel Shiffman",
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "dotenv": "^8.0.0",
19 |     "express": "^4.16.4",
20 |     "nedb": "^1.8.0",
21 |     "node-fetch": "^2.6.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/public/checkins/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1.0"
 8 |     />
 9 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10 |     <link
11 |       rel="stylesheet"
12 |       href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
13 |       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
14 |       crossorigin=""
15 |     />
16 |     <script
17 |       src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
18 |       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
19 |       crossorigin=""
20 |     ></script>
21 |     <style>
22 |       #checkinMap {
23 |         height: 240px;
24 |         margin: 8px 0px;
25 |       }
26 |     </style>
27 |     <link rel="stylesheet" type="text/css" href="../style.css" />
28 |     <title>The Weather Here</title>
29 |   </head>
30 |   <body>
31 |     <h1>The Weather Here</h1>
32 |     <div>
33 |       <a href="/">check in</a> | <a href="/checkins">view checkins</a>
34 |     </div>
35 |     <div id="checkinMap"></div>
36 |     <script src="logs.js"></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/public/checkins/logs.js:
--------------------------------------------------------------------------------
 1 | const mymap = L.map('checkinMap').setView([0, 0], 1);
 2 | const attribution =
 3 |   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 4 | //const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 5 | const tileUrl = 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png';
 6 | const tiles = L.tileLayer(tileUrl, { attribution });
 7 | tiles.addTo(mymap);
 8 | 
 9 | getData();
10 | 
11 | async function getData() {
12 |   const response = await fetch('/api');
13 |   const data = await response.json();
14 |   const pointList = [];
15 | 
16 |   for (item of data) {
17 |     pointList.push([item.lat, item.lon]);
18 |     console.log(item);
19 |     const marker = L.marker([item.lat, item.lon]).addTo(mymap);
20 |     let txt = `I'm sitting out here at ${item.lat}&deg;,  ${item.lon}&deg;, on
21 |     this ${item.weather.summary} day and it feels like ${item.weather.temperature}&deg; outside.`;
22 |     if (item.air.value < 0) {
23 |       txt += '  No air quality reading.';
24 |     } else {
25 |       txt += `  
26 |       The concentration of small carcinogenic particles (${item.air.measurements[0].parameter}) I'm
27 |         breathing in is  ${item.air.measurements[0].value} ${
28 |         item.air.measurements[0].unit
29 |       } measured from
30 |        ${item.air.city} at ${item.air.location} on ${item.air.measurements[0].lastUpdated}.`;
31 |     }
32 |     marker.bindPopup(txt);
33 |   }
34 | 
35 |   // Add a line path
36 | 
37 |   const polyLine = new L.Polyline(pointList, {
38 |     color: 'purple',
39 |     weight: 3,
40 |     opacity: 1,
41 |     smoothFactor: 1
42 |   });
43 |   polyLine.addTo(mymap);
44 | }
45 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="style.css" />
 8 |     <title>The Weather Here</title>
 9 |   </head>
10 |   <body>
11 |     <h1>The Weather Here</h1>
12 |     <div><a href="/">check in</a> | <a href="/checkins">view checkins</a></div>
13 |     <p>
14 |       I'm sitting out here at <span id="latitude"></span>&deg;, <span id="longitude"></span>&deg; on
15 |       this <span id="summary"></span> day and it feels like <span id="temp"></span>&deg; C.
16 |       outside.<br /><br />
17 |       <span id="air"
18 |         >The concentration of small carcinogenic particles (<span id="aq_parameter"></span>) I'm
19 |         breathing in is <span id="aq_value"></span> <span id="aq_units"></span> measured from
20 |         <span id="aq_city"></span> at <span id="aq_location"></span> on <span id="aq_date"></span>.
21 |       </span>
22 |     </p>
23 |     <script src="sketch.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/public/sketch.js:
--------------------------------------------------------------------------------
 1 | // Geo Locate
 2 | let lat, lon;
 3 | if ('geolocation' in navigator) {
 4 |   console.log('geolocation available');
 5 |   navigator.geolocation.getCurrentPosition(async position => {
 6 |     let lat, lon, weather, air;
 7 |     try {
 8 |       lat = position.coords.latitude;
 9 |       lon = position.coords.longitude;
10 |       document.getElementById('latitude').textContent = lat.toFixed(2);
11 |       document.getElementById('longitude').textContent = lon.toFixed(2);
12 |       const api_url = `weather/${lat},${lon}`;
13 |       const response = await fetch(api_url);
14 |       const json = await response.json();
15 |       weather = json.weather.currently;
16 |       console.log(weather);
17 |       console.log(weather.temperature);
18 |       document.getElementById('summary').textContent = weather.summary;
19 |       document.getElementById('temp').textContent = weather.temperature;
20 |       air = json.air_quality.results[0];
21 |       console.log(air);
22 |       document.getElementById('aq_city').textContent = air.city;
23 |       document.getElementById('aq_location').textContent = air.location;
24 |       document.getElementById('aq_parameter').textContent = air.measurements[0].parameter;
25 |       document.getElementById('aq_value').textContent = air.measurements[0].value;
26 |       document.getElementById('aq_units').textContent = air.measurements[0].unit;
27 |       document.getElementById('aq_date').textContent = air.measurements[0].lastUpdated;
28 |     } catch (error) {
29 |       console.error(error);
30 |       air = { value: -1 };
31 |       document.getElementById('air').textContent = 'No air quality reading was found.';
32 |     }
33 | 
34 |     const data = { lat, lon, weather, air };
35 |     const options = {
36 |       method: 'POST',
37 |       headers: {
38 |         'Content-Type': 'application/json'
39 |       },
40 |       body: JSON.stringify(data)
41 |     };
42 |     const db_response = await fetch('/api', options);
43 |     const db_json = await db_response.json();
44 |     console.log(db_json);
45 |   });
46 | } else {
47 |   console.log('geolocation not available');
48 | }
49 | 


--------------------------------------------------------------------------------
/module3/the_weather_here_exercises/public/style.css:
--------------------------------------------------------------------------------
1 | p {
2 |   padding: 10px;
3 |   background-color: #ffddff;
4 | }
5 | 


--------------------------------------------------------------------------------
/outline.md:
--------------------------------------------------------------------------------
 1 | ## Tracking
 2 | 
 3 | ### Introduction
 4 | 
 5 | | #   | Topic             | Recorded | Edited | Length | Animated | Ready | Published |
 6 | | --- | ----------------- | -------- | ------ | ------ | -------- | ----- | --------- |
 7 | | 1   | Trailer           | Yes      | Yes    | 1:56   | Yes      | Yes   | Yes       |
 8 | | 2   | What do you need? | Yes      | Yes    | 3:54   | Yes      | Yes   | Yes       |
 9 | 
10 | ### Module 1 Exercises
11 | 
12 | | #   | Topic                     | Recorded | Edited | Length | Animated | Ready | Published |
13 | | --- | ------------------------- | -------- | ------ | ------ | -------- | ----- | --------- |
14 | | 1   | fetch()                   | Yes      | Yes    | 15:39  | Yes      | Yes   | Yes       |
15 | | 2   | Tabular Data: Parsing CSV | Yes      | Yes    | 17:15  | Yes      | Yes   | Yes       |
16 | | 3   | Tabular Data: Chart.js    | Yes      | Yes    | 19:46  | Yes      | Yes   | Yes       |
17 | | 4   | JSON: fetch()             | Yes      | Yes    | 16:11  | Yes      | Yes   | Yes       |
18 | | 5   | mapping with leaflet.js   | Yes      | Yes    | 15:22  | Yes      | Yes   | Yes       |
19 | | 6   | updating with setInterval | Yes      | Yes    | 8:44   | Yes      | Yes   | Yes       |
20 | 
21 | ### Module 2 Data Selfie
22 | 
23 | | #   | Topic                   | Recorded | Edited | Length | Animated | Ready | Published |
24 | | --- | ----------------------- | -------- | ------ | ------ | -------- | ----- | --------- |
25 | | 1   | Server app setup        | Yes      | Yes    | 18:18  | Yes      | Yes   | Yes       |
26 | | 2   | Geolocation             | Yes      | Yes    | 15:04  | Yes      | Yes   | Yes       |
27 | | 3   | POST with fetch()       | Yes      | Yes    | 16:02  | Yes      | Yes   | Yes       |
28 | | 4   | Database with NeDB      | Yes      | Yes    | 11:18  | Yes      | Yes   | Yes       |
29 | | 5   | Query Database          | Yes      | Yes    | 13:05  | Yes      | Yes   | Yes       |
30 | | 6   | Capturing images        | Yes      | Yes    | 12:52  | Yes      | Yes   | Yes       |
31 | | 7   | Wrap-up Module 2 (WCAG) | Yes      | Yes    | 12:14  | Yes      | Yes   | Yes       |
32 | 
33 | ### Module 3 Weather Here
34 | 
35 | | #   | Topic                                 | Recorded | Edited | Length | Animated | Ready | Published |
36 | | --- | ------------------------------------- | -------- | ------ | ------ | -------- | ----- | --------- |
37 | | 1   | Weather API on node                   | Yes      | Yes    | 17:50  | Yes      | Yes   | Yes       |
38 | | 2   | air quality API on node               | Yes      | Yes    | 16:05  | Yes      | Yes   | Yes       |
39 | | 3   | mapping check-ins with leaflet        | Yes      | Yes    | 13:47  | Yes      | Yes   | Yes       |
40 | | 4   | hiding API keys and pushing to GitHub | Yes      | Yes    | 11:51  | Yes      | Yes   | Yes       |
41 | | 5   | Deployment (Glitch and Heroku)        | Yes      | Yes    | 19:10  | Yes      | Yes   | Yes       |
42 | 


--------------------------------------------------------------------------------