diff --git a/src/content/prepare/unit1.md b/src/content/prepare/unit1.md
index fde1d1c..f421cb0 100644
--- a/src/content/prepare/unit1.md
+++ b/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?"
diff --git a/src/content/prepare/unit2a.md b/src/content/prepare/unit2a.md
index 0a2919d..5dad9ba 100644
--- a/src/content/prepare/unit2a.md
+++ b/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?"
+
diff --git a/src/content/prove/nps-1.mdx b/src/content/prove/nps-1.mdx
index 2ff4fa6..2a2612a 100644
--- a/src/content/prove/nps-1.mdx
+++ b/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).
\ No newline at end of file
+After working as far as you can, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1).
\ No newline at end of file
diff --git a/src/content/prove/nps-2.mdx b/src/content/prove/nps-2.mdx
index 1efea8e..cec1501 100644
--- a/src/content/prove/nps-2.mdx
+++ b/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 = `${parkData.fullName}
+ ${parkData.description}
`;
+}
+
+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).
\ No newline at end of file
+After working as far as you can, [click here for the instructor's solution](https://github.com/matkat99/nps/tree/unit-1b).
\ No newline at end of file
diff --git a/src/content/semester/unit2.md b/src/content/semester/unit2.md
index e8ef65b..93a1341 100644
--- a/src/content/semester/unit2.md
+++ b/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)
+
## 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/)
-
+
## 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)