Day 1: title formatting coherence, other edits

step1-03/demo/README.md

@@ -1,4 +1,4 @@
-# JavaScript Demo
+# Step 1.3 - Introduction to JavaScript (Demo)
 
 It's entirely possible to create a website with nothing but HTML and CSS, but as soon as you want user interaction other than links and forms, you'll need to reach for JavaScript, the scripting language of the web. Fortunately, JavaScript has grown up quite a bit since it was introduced in the '90s, and now runs just about everything: web applications, mobile applications, native applications, servers, robots and rocket ships.
 
@@ -20,7 +20,7 @@ By the end of the demo we'll have covered the following:
 - Loops
 - Interacting with the DOM (Document Object Model)
 
-## Introduction To Variables
+## Introduction to variables
 
 We can create a new variable with the keywords `var`, `let`, `const` and use them within our application. These variables can contain one of the following types of values:
 
@@ -35,7 +35,7 @@ We can create a new variable with the keywords `var`, `let`, `const` and use the
 
 > [When to use `var`/`let`/`const`?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) Use `const` for variables you never expect to change, and `let` for anything else. `var` is mostly no longer used. See the link for more details about how each works.
 
-### Variable Examples
+### Variable examples
 
 ```js
 const myBoolean = true;
@@ -50,7 +50,7 @@ const myFunction = function(myNumberParam) {
 
 > JavaScript is a dynamically typed language, so if you initially store a number in a variable (`let myVar = 0`), you can change it to contain a string by simply writing `myVar = 'hello'` without any trouble.
 
-### Adding Variables
+### Adding variables
 
 Let's start off our demo by adding a variable to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). This variable will be global and constant.
 
@@ -76,7 +76,7 @@ Functions on their own don't have any effect on the page. When I declare `functi
 
 To execute a function we need to attach it to an event. There are a number of possible events: keyboard strokes, mouse clicks, document loading, and more.
 
-### Add Event Listeners
+### Add event listeners
 
 To attach a function to an event, we use an [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) like this:
 
@@ -92,7 +92,7 @@ window.addEventListener('click', function() {
 
 > [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) is a reference to the entire window containing the HTML document.
 
-### Global Event Handlers
+### Global event handlers
 
 If you think this feels a little verbose, you're not alone. Many of the [most common event types](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers) are available as element properties. This way we can set properties like `onload` or `onclick` like this:
 
@@ -208,7 +208,3 @@ function displayMatches() {
   document.querySelector('.submit').value = matches + ' matches';
 }
 ```
-
-## Next Step
-
-[Start our Todo App](../../step1-02/demo/)

step1-03/exercise/README.md

@@ -1,11 +1,3 @@
-# Exercise
+# Step 1.3 - Introduction to JavaScript (Exercise)
 
-1. Create a function named `getFavs`. Inside, run `alert('clicked')`.
-2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
-3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure the alert is displayed.
-4. Replace the `alert` call with a new `favList` variable set to an empty array: `[]`
-5. Create a const variable `inputs` set to all of the inputs on the page. [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) will help here.
-6. Iterate over all of the inputs using `for (const input of inputs) {}`
-7. In each iteration, use an `if` statement to check if `input.checked` is equal to true
-8. If the above tests passes, push the `input.parentNode.textContent` onto the `favList` array by passing the text as a parameter to `favList.push()` ([`push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) is a built-in array method.)
-9. Outside of the for loop, use `document.querySelector('.favorites')` to target the div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`. This will join each of the foods together into a string separated by a space.
+See index.html from [npm start](http://localhost:8080/step1-03/exercise/) or the [live site](https://microsoft.github.io/frontend-bootcamp/step1-03/exercise/) for the exercise.

step1-03/exercise/index.html

@@ -28,16 +28,33 @@ button {
 <div class="favorites"></div>
       </pre>
       <pre data-lang="js">
-/*        
-1. Create a function named `getFavs` and set its contents to `alert('clicked')`
-2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
-3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure it calls our alert.
-4. Replace the alert with a new `favList` variable set to an empty array: `[]`
-5. Create a const variable `inputs` set to all of the inputs on the page. `querySelectorAll` will help here
-6. Iterate over all of the inputs using `for (const input of inputs) {}`
-7. For each iteration use an `if` statement to check if `input.checked` is equal to true
-8. If the above tests passes, push the `input.parentNode.textContent` onto the `favList` array. Pass that text into `favList.push()` as the parameter to add it to the array
-9. Outside of the for loop, use `document.querySelector('.favorites')` to target the div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`. This will join each of the foods together into a string separated by a space.
+/*
+1. Create a function named `getFavs`. Inside, run:
+    alert('clicked')
+
+2. Create a variable `button` and set it to a reference to our button using:
+    document.querySelector('button')
+
+3. Add a click event listener to the button that calls `getFavs`.
+   Click the button and make sure the alert is displayed.
+
+4. Replace the `alert` call with a new `favList` variable set to an empty array: []
+
+5. Create a const variable `inputs` set to all of the inputs on the page.
+   `querySelectorAll` will help here.
+
+6. Iterate over all of the inputs using:
+    for (const input of inputs) {}
+
+7. In each iteration, use an `if` statement to check if `input.checked` is equal to true
+
+8. If the above tests passes, push the `input.parentNode.textContent` into the `favList`
+   array by passing the text as a parameter to `favList.push()`
+  - `push` is a built-in array method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
+
+9. Outside of the for loop, use `document.querySelector('.favorites')` to target the
+   div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`.
+   This will join each of the foods together into a string separated by a space.
 */
 
       </pre>