add unit2 prepare, edit nps2

src/content/prepare/unit1.md

@@ -18,6 +18,8 @@ time: 60min
 "What is the Document Object Model?", "How can I manipulate an html document with javascript?", "How can I add elements to the DOM?", "How can I remove elements from the DOM?", "How can I add or remove attributes from elements in the DOM?","Why would I do this?"
 - **Javascript Fetch**:  
 "What is Fetch in Javascript?", "What does it mean to be asynchronous in Javascript?", "What is a promise?", "How can I use promises with Fetch?", "How can I use Fetch to retrieve data from a JSON file?", "How can I use Fetch to retrieve data from a REST API such as the pokeapi?"
+- **ES Modules**:  
+"What is an ES Module?", "How do I use an ES Module?", "How can ES Modules help me organize my code?"
 
 <!-- ### Prompt
 

src/content/prepare/unit1b.md

@@ -4,4 +4,6 @@ time: 30min
 ---
 
 - **Javascript Fetch**  :  
-"What is Fetch in Javascript?", "What does it mean to be asynchronous in Javascript?", "What is a promise?", "How can I use promises with Fetch?", "How can I use Fetch to retrieve data from a JSON file?", "How can I use Fetch to retrieve data from a REST API such as the pokeapi?"
+"What is Fetch in Javascript?", "What does it mean to be asynchronous in Javascript?", "What is a promise?", "How can I use promises with Fetch?", "How can I use Fetch to retrieve data from a JSON file?", "How can I use Fetch to retrieve data from a REST API such as the pokeapi?"
+- **ES Modules**:  
+"What is an ES Module?", "How do I use an ES Module?", "How can ES Modules help me organize my code?"

src/content/prepare/unit2.md

@@ -1,21 +1,12 @@
 ---
 title: Unit 2 Exploration.
-time: 60min
+time: 40min
 ---
 
-- Responsive Web Design: "What is responsive web design?", "How are css media queries used in responsive design?","What part does the viewport meta tag play in responsive design?"
-- CSS Reset/Normalize: "What is a CSS Reset?", "What is CSS Normalize?", "Should I use these?"
-- Debugging Javascript: "What are techniques for debugging Javascript code?", "How can I use breakpoints in the browser?"
-- Branching in Javascript: "How can I write Javascript code that makes decisions?", "What are valid conditions?"
-- Events with javascript: "How can I respond to events from the browser with javascript?"
-
-Questions that might be helpful could be:
-
-- What problems can arise when...?
-- Can you give me a specific example? (or another example)
-- Are there any other ways to do this?
-- Can you give me more information on...?
+- APIs (Application Programming Interface): "What is an API?", "How could I use the national park service api to get information about Yellowstone national park?" "How could I use the national park service api to get information about all national parks?",  "How could I use the national park service api to get information about all national parks in a specific state?"
+- JSON (Javascript Object Notation): "What is JSON?", "What does it mean to parse JSON?", "How could I parse JSON in Javascript?", "What does it mean to stringify?" "How could I stringify JSON in Javascript?" "What is the difference between JSON and XML?"
 
+<!-- 
 ### Prompt
 
 After you have asked a few questions about the topics above, try entering the following into the Chat prompt and use it to review and solidify your understanding:
@@ -41,4 +32,4 @@ Given this information, help students understand the topics by providing explana
 Ask students to explain their thinking. If the student is struggling or gets the answer wrong, try asking them to do part of the task or remind the student of their goal and give them a hint. If students improve, then praise them and show excitement. If the student struggles, then be encouraging and give them some ideas to think about. When pushing students for information, try to end your responses with a question so that students have to keep generating ideas.
 
 Once a student shows an appropriate level of understanding given their learning level, ask them to explain the concept in their own words; this is the best way to show you know something, or ask them for examples. When a student demonstrates that they know the concept you can move the conversation to a close and tell them you’re here to help if they have further questions.
-```
+``` -->

src/content/prepare/unit2a.md

@@ -4,17 +4,10 @@ title: Unit 2 Exploration.
 time: 30min
 ---
 
-- Responsive Web Design: "What is responsive web design?", "How are css media queries used in responsive design?","What part does the viewport meta tag play in responsive design?"
-- CSS Reset/Normalize: "What is a CSS Reset?", "What is CSS Normalize?", "Should I use these?"
-- Debugging Javascript: "What are techniques for debugging Javascript code?", "How can I use breakpoints in the browser?"
-
-Questions that might be helpful could be:
-
-- What problems can arise when...?
-- Can you give me a specific example? (or another example)
-- Are there any other ways to do this?
-- Can you give me more information on...?
+- APIs (Application Programming Interface): "What is an API?", "How could I use the national park service api to get information about Yellowstone national park?" "How could I use the national park service api to get information about all national parks?",  "How could I use the national park service api to get information about all national parks in a specific state?"
+- JSON (Javascript Object Notation): "What is JSON?", "What does it mean to parse JSON?", "How could I parse JSON in Javascript?", "What does it mean to stringify?" "How could I stringify JSON in Javascript?" "What is the difference between JSON and XML?"
 
+<!-- 
 ### Prompt
 
 After you have asked a few questions about the topics above, try entering the following into the Chat prompt and use it to review and solidify your understanding:
@@ -38,4 +31,4 @@ Given this information, help students understand the topics by providing explana
 Ask students to explain their thinking. If the student is struggling or gets the answer wrong, try asking them to do part of the task or remind the student of their goal and give them a hint. If students improve, then praise them and show excitement. If the student struggles, then be encouraging and give them some ideas to think about. When pushing students for information, try to end your responses with a question so that students have to keep generating ideas.
 
 Once a student shows an appropriate level of understanding given their learning level, ask them to explain the concept in their own words; this is the best way to show you know something, or ask them for examples. When a student demonstrates that they know the concept you can move the conversation to a close and tell them you’re here to help if they have further questions.
-```
+``` -->

src/content/prove/nps-1.mdx

@@ -350,4 +350,4 @@ As a part of this activity, you are expected to look over a solution from the in
 
 Please DO NOT open the solution until you have worked through this activity for at least one hour. At the end of the hour, if you are still struggling with some of the core requirements, you are welcome to view the instructor's solution and use it to help you complete your own code. Even if you use the instructor's code to help you, you are welcome to report that you finished the core requirements, if you code them up yourself.
 
-After working with your team for the one hour activity, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1).
+After working as far as you can, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1).

src/content/prove/nps-2.mdx

@@ -207,12 +207,41 @@ Continue adding css until your page matches the mockups above. The background fo
 
 ## **04** Refactor
 
-If you go back and look at the `main.js` file you will see that it has gotten quite large. We should take a minute to organize our code. This process of improving your code is called `refactoring`. Doing this regularly will make things easier for you as your code grows in size and complexity.
+If you go back and look at the `main.js` file you will see that it has gotten quite large. We should take a minute to organize our code. This process of improving your code is called `refactoring`. This process has us look for places where we can make our code more efficient, and DRY (Don't Repeat Yourself). We can look for code that we might want to reuse, and move it into modules. Sometimes we are able to identify code that we need to re-use as we write it, but often it does not become apparent until later. Analyzing and tweaking our code regularly will make things easier for you as your code grows in size and complexity.
 
 We can first consider the new data that we built: `parkInfoLinks`. It feels a little out of place in `main.js`. Let's move it to `parkService.mjs` instead. Then we can export it and if it is needed in other pages it will be easy to get. Remember to import it back into `main.js` You will also need to update the `image` property of each record. It references `parkData` and in it's new location the data is found in `park`
 
 Second: the template functions. Templates are things that are sometimes re-used across a project. Let's gather them all together in one place to make them easy to find. Create a new file called `templates.mjs`, copy and paste the functions into that file, and export them. Then go back to `main.js` and import the templates we need.
 
+Finally we're going to have to set the header and footer info on every page. In order to avoid re-writing those functions over and over let's put them in a module as well. Create one more file called `setHeaderFooter.mjs`. Copy the `setHeaderInfo` and `setFooter` functions from `main.js` into this new file. Then since I can't think of an instance where we would set one and not the other, create one more function called `setHeaderFooter` and make it the default export. Call the two functions in that one. Note that you will also need pass the data into that function as well.
+
+Clean up `main.js` by importing in the new functions and templates and calling them. Also if you have not done so, remove all the code that we moved from `main.js` into the modules. Your `main.js` file should look something like this when you are done:
+
+```javascript
+import { getParkData, parkInfoLinks } from "./parkService.mjs";
+import setHeaderFooter from "./setHeaderFooter.mjs";
+import { mediaCardTemplate } from "./templates.mjs";
+const parkData = getParkData();
+
+function setParkIntro(data) {
+  const introEl = document.querySelector(".intro");
+  introEl.innerHTML = `<h1>${parkData.fullName}</h1>
+  <p>${parkData.description}</p>`;
+}
+
+function setParkInfoLinks(data) {
+  const infoEl = document.querySelector(".info");
+  // we have multiple links to build...so we map to transform the array of objects into an array of HTML strings.
+  const html = data.map(mediaCardTemplate);
+  // join the array of strings into one string and insert it into the section
+  infoEl.insertAdjacentHTML("afterbegin", html.join(""));
+}
+
+setHeaderFooter(parkData);
+setParkIntro(parkData);
+setParkInfoLinks(parkInfoLinks);
+```
+
 After refactoring it is important to test and make sure that everything still works. Do that now.
 
 ## **05** Commit and push to Github
@@ -227,4 +256,4 @@ As a part of this activity, you are expected to look over a solution from the in
 
 Please DO NOT open the solution until you have worked through this activity for at least one hour. At the end of the hour, if you are still struggling with some of the core requirements, you are welcome to view the instructor's solution and use it to help you complete your own code. Even if you use the instructor's code to help you, you are welcome to report that you finished the core requirements, if you code them up yourself.
 
-After working with your team for the one hour activity, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1b).
+After working as far as you can, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1b).

src/content/semester/unit2.md

@@ -1,29 +1,26 @@
 ---
-title: Unit Two - Responsive Design
-summary: This unit will introduce the tools and concepts behind responsive web pages. It will also discuss making comparisions and branching in Javascript. Finally it will introduce DOM events
+title: Unit Two - Working with APIs
+summary: This unit will introduce the tools and concepts behind Application Programming Interfaces (API). We will also introduce the team project.
 tags: [
-	Responsive design,
-	Media Queries,
-	JS debugging,
-	JS operators,
-	coercion,
-	DOM events
+	API,
+	JSON,
+	planning
 ]
 ---
 
 ## Prepare
 
 [Week 3 Exploration](../../prepare/unit2a)
-[Week 4 Exploration](../../prepare/unit2b)
+<!-- [Week 4 Exploration](../../prepare/unit2b) -->
 
 ## Ponder
 
 - [Practice with Media Queries](https://byui-cit.github.io/learning-modules/modules/css/media-queries/ponder1/)
 - [Debugging Practice](https://byui-cit.github.io/learning-modules/modules/js/debugging/ponder1/)
 - [Practice with DOM Events](https://byui-cit.github.io/learning-modules/modules/js/dom-events/ponder1/)
-<!-- https://byui-cit.github.io/learning-modules/modules/js/operators/ponder1/ -->
+
 
 ## Prove
 
-[Cool Pics part 1](../../prove/cool-pics-1)
-[Cool Pics part 2](../../prove/cool-pics-2)
+[NPS 3](../../prove/nps-3)
+[Team 1](../../prove/team-1)