From 7f626610bf94f6841a6a8c2485f4a9703a9762d6 Mon Sep 17 00:00:00 2001 From: Daniel Shiffman Date: Sun, 17 Mar 2019 14:06:09 -0400 Subject: [PATCH 1/2] Outline for Module 1 This module will be three short client-side projects demonstrating `fetch()` with images, tabular data, and JSON data from an API with no authentication. --- README.md | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0c20a6c..7e3095a 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,23 @@ This course is for aspiring developers who want to learn how to work with data i 1. Course Trailer (~1 minute overview) 2. Full introduction -- overview of topics, goals for the course -### Project 1: TBD (client JS only) +### Module 1: `fetch()` with image, CSV, JSON + +#### 1a: fetch() +1. What is `fetch()`? + * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) + * Promises, async and await + * [Body - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/Body) + * `` DOM element + +#### 1b: Tabular Data +1. Parsing CSV with `split()` +2. Line chart with [chart.js](https://www.chartjs.org/docs/latest/) + +#### 1c: JSON Data from API +1. load JSON data with `fetch()` and update DOM element +2. Drawing a static map. +3. updating with `setInterval()`. #### Objectives 1. Learn `fetch()` for GET requests with Promises and `async`/`await` @@ -18,7 +34,7 @@ This course is for aspiring developers who want to learn how to work with data i 2. Learn to "render" data with native JS DOM manipulation 3. Discover missing pieces: no persistence, API keys not hidden -### Project 2: The Data Selfie App +### Module 2: The Data Selfie App [The Data Selfie App](https://github.com/joeyklee/data-selfie-app) is a project tutorial by [@joeyklee](https://github.com/joeyklee). @@ -30,7 +46,7 @@ This course is for aspiring developers who want to learn how to work with data i * introduce idea of database 3. Learn how to use `fetch()` to POST data to server. -### Project 3: The Weather Here +### Module 3: The Weather Here [The Weather Here](https://github.com/joeyklee/the-weather-here) is a project tutorial by [@joeyklee](https://github.com/joeyklee). From 6a59e398aa2f1089ff3fe40a663880b36c5bb268 Mon Sep 17 00:00:00 2001 From: Daniel Shiffman Date: Sun, 17 Mar 2019 14:41:46 -0400 Subject: [PATCH 2/2] organized part 3 of module 1 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7e3095a..27c0343 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,9 @@ This course is for aspiring developers who want to learn how to work with data i 2. Line chart with [chart.js](https://www.chartjs.org/docs/latest/) #### 1c: JSON Data from API -1. load JSON data with `fetch()` and update DOM element -2. Drawing a static map. -3. updating with `setInterval()`. +1. load JSON data with `fetch()` and update DOM element. +2. Add map to page with [Leaflet.js](https://leafletjs.com/) and place ISS location as marker. +3. Updating location continuously with `setInterval()`. #### Objectives 1. Learn `fetch()` for GET requests with Promises and `async`/`await`