From 55cd2cffe8e7cdf4b8795779edb071c6456b128f Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 10:09:17 -0800 Subject: [PATCH 1/6] style tweak --- assets/shared.css | 4 ++-- index.html | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/shared.css b/assets/shared.css index fa268f0..bc0d60a 100644 --- a/assets/shared.css +++ b/assets/shared.css @@ -67,10 +67,10 @@ h1 a { content: counter(steps); position: absolute; left: -20px; - bottom: -20px; + bottom: -3px; font-size: 220px; line-height: 188px; - color: #f3f2f1; + color: #eaeaea; z-index: 1; } diff --git a/index.html b/index.html index 0986473..c9dc707 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Microsoft Days in the Web - Welcome
From d8702ec24e3bc849398f18a9b4e6878160915a1d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 11:21:28 -0800 Subject: [PATCH 2/6] misc fixes --- README.md | 9 +++++---- assets/{track.js => scripts.js} | 0 index.html | 4 ++-- step1-01/html-demo/html-demo.html | 13 ++++++++++++- step1-01/index.html | 1 + step1-01/js-demo/js-demo-final.html | 2 +- step1-02/index.html | 16 ---------------- step1-03/index.html | 16 ---------------- step1-04/index.html | 15 --------------- step1-05/index.html | 15 --------------- step1-06/demo/README.md | 14 +++++++------- step1-06/demo/src/components/TodoFooter.tsx | 2 +- step1-06/demo/src/components/TodoList.tsx | 6 +++--- .../exercise/src/components/TodoHeader.tsx | 6 +++--- step1-06/final/src/components/TodoHeader.tsx | 8 ++++---- step1-07/demo/README.md | 4 ++++ step1-07/demo/src/TodoApp.tsx | 19 ++++++++++++++++++- step1-07/exercise/src/TodoApp.tsx | 19 ++++++++++++++++++- .../exercise/src/components/TodoHeader.tsx | 2 +- step1-07/final/src/components/TodoHeader.tsx | 2 +- step1-07/index.html | 15 --------------- step2-01/demo/index.html | 2 +- step2-01/exercise/index.html | 2 +- step2-02/demo/index.html | 2 +- step2-02/exercise/index.html | 2 +- step2-03/demo/index.html | 2 +- step2-03/exercise/index.html | 2 +- step2-04/demo/index.html | 2 +- step2-04/exercise/index.html | 2 +- step2-05/demo/index.html | 2 +- step2-05/exercise/index.html | 2 +- step2-06/demo/index.html | 2 +- step2-06/exercise/index.html | 2 +- step2-07/demo/index.html | 2 +- step2-07/exercise/index.html | 2 +- step2-08/demo/index.html | 2 +- step2-08/exercise/index.html | 2 +- step2-09/demo/index.html | 2 +- step2-09/exercise/index.html | 2 +- 39 files changed, 99 insertions(+), 125 deletions(-) rename assets/{track.js => scripts.js} (100%) delete mode 100644 step1-02/index.html delete mode 100644 step1-03/index.html delete mode 100644 step1-04/index.html delete mode 100644 step1-05/index.html delete mode 100644 step1-07/index.html diff --git a/README.md b/README.md index 6236408..bd7849c 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,8 @@ This workshop starts as a very high level introduction to the core principles of - Current version of [Node/NPM](https://nodejs.org/en/) - Install [Git](https://git-scm.com/downloads) - [VSCode Editor](https://code.visualstudio.com) -- Up to date browser with dev tools (some demos will be shown using Chrome) +- Up to date browser with React Developer Tools +- React Developer Tools: [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) ### Getting Set Up @@ -48,13 +49,13 @@ This workshop starts as a very high level introduction to the core principles of - [Exercise](step1-03/exercise) 4. [React Introduction](step1-04) - [Demo](step1-04/demo) -5. [Thinking in React: Building a Static Page](step1-05) +5. [Building a Static Page](step1-05) - [Demo](step1-05/demo) - [Exercise](step1-05/exercise) -6. [Thinking in React: State Driven UI](step1-06) +6. [State Driven UI](step1-06) - [Demo](step1-06/demo) - [Exercise](step1-06/exercise) -7. [Thinking in React: UI Driven State](step1-07) +7. [Types & UI Driven State](step1-07) - [Demo](step1-07/demo) - [Exercise](step1-07/exercise) diff --git a/assets/track.js b/assets/scripts.js similarity index 100% rename from assets/track.js rename to assets/scripts.js diff --git a/index.html b/index.html index abddfc3..8400b40 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@
  • - UI-Driven State + Types &
    UI-Driven State
    demo | exercise | final @@ -165,6 +165,6 @@
  • Playground
    • - + diff --git a/step1-01/html-demo/html-demo.html b/step1-01/html-demo/html-demo.html index 2fe26b0..f15f393 100644 --- a/step1-01/html-demo/html-demo.html +++ b/step1-01/html-demo/html-demo.html @@ -13,7 +13,18 @@

    Document Meta Data

    -

    head, title, link, style

    + 
    +    <head>
+      <title>Intro to HTML</title>
+      <link rel="stylesheet" href="./style.css" />
+      
+      <style>
+        hr {
+          margin: 40px;
+        }
+      </style>
+    </head>
+
    diff --git a/step1-01/index.html b/step1-01/index.html index e46ae19..05c4cb9 100644 --- a/step1-01/index.html +++ b/step1-01/index.html @@ -15,5 +15,6 @@
    + diff --git a/step1-01/js-demo/js-demo-final.html b/step1-01/js-demo/js-demo-final.html index eb4eb17..ff57981 100644 --- a/step1-01/js-demo/js-demo-final.html +++ b/step1-01/js-demo/js-demo-final.html @@ -1,6 +1,6 @@ - +
    diff --git a/step1-02/index.html b/step1-02/index.html deleted file mode 100644 index a245e9e..0000000 --- a/step1-02/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-03/index.html b/step1-03/index.html deleted file mode 100644 index a245e9e..0000000 --- a/step1-03/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-04/index.html b/step1-04/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-04/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-05/index.html b/step1-05/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-05/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step1-06/demo/README.md b/step1-06/demo/README.md index 1722863..c82d7e5 100644 --- a/step1-06/demo/README.md +++ b/step1-06/demo/README.md @@ -71,10 +71,10 @@ I've already pulled out our props into `filter` and `todos` variables, and writt } ``` -- A JavaScript map takes in an array and transforms it into a new array -- We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes. -- The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later. -- Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values. +- **map**: A JavaScript map takes in an array (filteredTodos) and transforms it into a new array (our rendered TodoListItems) +- **key**: We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes. +- **id**: The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later. +- **todos[id]**: Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values. > This spread operator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy! ### State Driven and Stateful Header @@ -87,9 +87,9 @@ In CSS based styling, visual states are applied by adding and removing classes. ```jsx ``` diff --git a/step1-06/demo/src/components/TodoFooter.tsx b/step1-06/demo/src/components/TodoFooter.tsx index c936963..ae4bf06 100644 --- a/step1-06/demo/src/components/TodoFooter.tsx +++ b/step1-06/demo/src/components/TodoFooter.tsx @@ -1,7 +1,7 @@ import React from 'react'; export const TodoFooter = (props: any) => { - const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; + // const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; return (
    4 items left diff --git a/step1-06/demo/src/components/TodoList.tsx b/step1-06/demo/src/components/TodoList.tsx index 29ca769..9f12d6d 100644 --- a/step1-06/demo/src/components/TodoList.tsx +++ b/step1-06/demo/src/components/TodoList.tsx @@ -5,9 +5,9 @@ export class TodoList extends React.Component { render() { const { filter, todos } = this.props; - const filteredTodos = Object.keys(todos).filter(id => { - return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); - }); + // const filteredTodos = Object.keys(todos).filter(id => { + // return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); + // }); return (
      diff --git a/step1-06/exercise/src/components/TodoHeader.tsx b/step1-06/exercise/src/components/TodoHeader.tsx index 51830e9..e8fde78 100644 --- a/step1-06/exercise/src/components/TodoHeader.tsx +++ b/step1-06/exercise/src/components/TodoHeader.tsx @@ -17,9 +17,9 @@ export class TodoHeader extends React.Component {
    ); diff --git a/step1-06/final/src/components/TodoHeader.tsx b/step1-06/final/src/components/TodoHeader.tsx index 17a8b3e..f606f4a 100644 --- a/step1-06/final/src/components/TodoHeader.tsx +++ b/step1-06/final/src/components/TodoHeader.tsx @@ -5,7 +5,7 @@ export class TodoHeader extends React.Component { super(props); this.state = { labelInput: '' }; } - + render() { const { filter } = this.props; @@ -17,9 +17,9 @@ export class TodoHeader extends React.Component { ); diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index 0222dd5..7a2d569 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -160,8 +160,12 @@ const { label, completed, complete, id } = this.props; And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `id` of type string, so we'll pass our `id` prop in. +> A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop + ```tsx complete(id)} /> ``` > Note that the function param and prop name just happen to be the same. This isn't required. + +Now that our todos are firing the `onChange` callback, give them a click and take look at how the app response. Since our footer text is driven off of the number of unchecked todos, the footer will automatically update to reflect the new state. diff --git a/step1-07/demo/src/TodoApp.tsx b/step1-07/demo/src/TodoApp.tsx index bfcbe22..7c67e87 100644 --- a/step1-07/demo/src/TodoApp.tsx +++ b/step1-07/demo/src/TodoApp.tsx @@ -10,7 +10,24 @@ export class TodoApp extends React.Component { constructor(props) { super(props); this.state = { - todos: {}, + todos: { + '04': { + label: 'Todo 4', + completed: true + }, + '03': { + label: 'Todo 3', + completed: false + }, + '02': { + label: 'Todo 2', + completed: false + }, + '01': { + label: 'Todo 1', + completed: false + } + }, filter: 'all' }; } diff --git a/step1-07/exercise/src/TodoApp.tsx b/step1-07/exercise/src/TodoApp.tsx index b24da27..c8ec119 100644 --- a/step1-07/exercise/src/TodoApp.tsx +++ b/step1-07/exercise/src/TodoApp.tsx @@ -10,7 +10,24 @@ export class TodoApp extends React.Component { } _onFilter = evt => { - this.props.setFilter(evt.target.textContet); + this.props.setFilter(evt.target.innerText); }; _onChange = evt => { diff --git a/step1-07/final/src/components/TodoHeader.tsx b/step1-07/final/src/components/TodoHeader.tsx index d1f18e3..9526319 100644 --- a/step1-07/final/src/components/TodoHeader.tsx +++ b/step1-07/final/src/components/TodoHeader.tsx @@ -44,7 +44,7 @@ export class TodoHeader extends React.Component { - this.props.setFilter(evt.target.textContet); + this.props.setFilter(evt.target.innerText); }; _onChange = evt => { diff --git a/step1-07/index.html b/step1-07/index.html deleted file mode 100644 index dadfb94..0000000 --- a/step1-07/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/step2-01/demo/index.html b/step2-01/demo/index.html index 51959a8..b0857bf 100644 --- a/step2-01/demo/index.html +++ b/step2-01/demo/index.html @@ -8,6 +8,6 @@
    Nothing to show here, just look at your console window for output. Hit F12 to open console window.
    - + diff --git a/step2-01/exercise/index.html b/step2-01/exercise/index.html index 51959a8..b0857bf 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -8,6 +8,6 @@
    Nothing to show here, just look at your console window for output. Hit F12 to open console window.
    - + diff --git a/step2-02/demo/index.html b/step2-02/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-02/demo/index.html +++ b/step2-02/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-02/exercise/index.html b/step2-02/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-02/exercise/index.html +++ b/step2-02/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-03/demo/index.html b/step2-03/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-03/demo/index.html +++ b/step2-03/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-03/exercise/index.html b/step2-03/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-03/exercise/index.html +++ b/step2-03/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-04/demo/index.html b/step2-04/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-04/demo/index.html +++ b/step2-04/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-04/exercise/index.html b/step2-04/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-04/exercise/index.html +++ b/step2-04/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-05/demo/index.html b/step2-05/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-05/demo/index.html +++ b/step2-05/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-05/exercise/index.html +++ b/step2-05/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-06/demo/index.html b/step2-06/demo/index.html index f6ea247..50d9fb4 100644 --- a/step2-06/demo/index.html +++ b/step2-06/demo/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-06/exercise/index.html b/step2-06/exercise/index.html index f6ea247..50d9fb4 100644 --- a/step2-06/exercise/index.html +++ b/step2-06/exercise/index.html @@ -10,6 +10,6 @@ 
    npm test
    in the command line. - + diff --git a/step2-07/demo/index.html b/step2-07/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-07/demo/index.html +++ b/step2-07/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-07/exercise/index.html b/step2-07/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-07/exercise/index.html +++ b/step2-07/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-08/demo/index.html b/step2-08/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-08/demo/index.html +++ b/step2-08/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-08/exercise/index.html b/step2-08/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-08/exercise/index.html +++ b/step2-08/exercise/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-09/demo/index.html b/step2-09/demo/index.html index 3bde031..ab43ffe 100644 --- a/step2-09/demo/index.html +++ b/step2-09/demo/index.html @@ -6,6 +6,6 @@
    - + diff --git a/step2-09/exercise/index.html b/step2-09/exercise/index.html index 3bde031..ab43ffe 100644 --- a/step2-09/exercise/index.html +++ b/step2-09/exercise/index.html @@ -6,6 +6,6 @@
    - + From 6d90d0eed75d5efac179cef970a25c96dccd553b Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 26 Feb 2019 11:35:38 -0800 Subject: [PATCH 3/6] Update JS demo readme --- step1-01/js-demo/README.md | 47 ++++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md index 1395eac..49943c4 100644 --- a/step1-01/js-demo/README.md +++ b/step1-01/js-demo/README.md @@ -2,11 +2,11 @@ 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. -In this demo we are going to cover a few of the core basics of the language that will help us when we start writing our TODO app. At the end of this demo we will be able to display the number of the letter 'a's in our email input. Here's the markup we're working with: +In this demo we are going to cover a few of the core basics of the language that will help us when we start writing our TODO app. At the end of this demo we will be able to display the number of the letter "a"s in our email input. Here's the markup we're working with: ```html
    - +
    ``` @@ -21,17 +21,20 @@ By the end of the demo we'll have covered the following: ### 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: +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: -1. boolean -2. number -3. string -4. array -5. object +- **boolean**: `true`, `false` +- **number**: `1`, `3.14` +- **string**: can use `'single quotes'`, `"double quotes"`, or `` `backticks` `` +- **array**: `[1, 2, 3]` +- **object**: defined inline (`{ foo: 3, bar: 'hello' })` or constructed (`new Foo()`) +- **function** +- **null** +- **undefined** -> Javascript is a loosly typed language so if start a variable off as a number `let myVar = 0`, you can change it to a string by simply writing `myVar = 'hello'` without any trouble. +> JavaScript is a loosely typed (dynamic) 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. -Lets start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) +Let's start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). The other examples on this page will reference these variables. ```js const match = 'a'; @@ -40,9 +43,9 @@ let matches = 0; ### Functions -Functions are resuable pieces of functionality. Functions can take inputs (parameters), and return values. Functions can be called from within your program, from within other functions, or invoked from within the DOM itself. +Functions are reusable pieces of functionality. Functions can take inputs (parameters) and return values. Functions can be called from within your program, from within other functions, or invoked from within the DOM itself. -In our example we'll create a function called displayMatches (camelCase is typical for functions) and we'll invoke this function anytime that our submit button is clicked. For now we'll simply call a console log (a function that prints values to the browser console); +In our example we'll create a function called `displayMatches` (camelCase is typical for functions) and we'll invoke this function any time that our submit button is clicked. For now we'll simply have our function call `console.log` (a function that prints values to the browser console): ```html @@ -56,7 +59,7 @@ function displayMatches() { ### Iteration -Next up we are going to iterate through a string of text, and find all of the 'a' characters in the list. We don't yet have that string, so we'll use a fill in for now. Once we have our `email` variable we can loop over it with the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loop syntax. +Next we'll update our function to iterate through a string of text. Later, we'll find and count all the `a` characters in the `email` variable, but for now, we'll just separately log each letter of a placeholder `text` variable. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. ```js function displayMatches() { @@ -69,9 +72,7 @@ function displayMatches() { ### Conditionals -Next we want to compare each `letter` with our `match` value, and if they are the same, we will increment our matches variable. Notice that `match` is a const and `matches` is a let because we expected `matches` to change over time. Remember that `letter = match` would set the `letter` variable to the value in `match`, so we use `==`, equality operator, and `===` strict equality operator, to make these comparisons. - -> ("1" == 1) is true whereas ("1" === 1) would be false +Next we want to compare each `letter` with our `match` value, and if they are the same, we will increment our `matches` variable. Notice that `match` is a `const` and `matches` is a `let` because we expected `matches` to change over time. Remember that `letter = match` would set the `letter` variable to the value in `match`--so to do comparisons, we use the equality operator `==` or the strict equality operator `===`. ```js function displayMatches() { @@ -85,18 +86,20 @@ function displayMatches() { } ``` +> In JavaScript, it's safest to use strict `===` for comparisons, because `==` will try to convert the operands to the same type (and sometimes the behavior is [not what you'd expect](https://www.youtube.com/watch?v=et8xNAc2ic8)). For example, `"1" == 1` is true whereas `"1" === 1` would be false. + ### Interacting with the DOM -Now that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browsers built in functions. +Now that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browser's built-in functions. -First we need to get a reference to the email field in our app. To do this, I've added an `id` to the input, and we will call one of JavaScripts oldest methods (IE 5.5), getElementyId, which we find on the browser provided `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable. +First we need to get a reference to the email field in our app's DOM. To do this, I've added an `id` to the input, and we will call one of JavaScript's oldest methods (IE 5.5), `getElementById`, which we find on the browser-provided `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable. ```js const email = document.getElementById('email'); console.log(email); ``` -And since what we're actually after is the "value" of the input field, we can set our `text` variable to the string assigned to the "value" key. To see this in action. Right click on the console message created by the code above, choose "save as variable" and then type `variableName.value`. +Since what we're actually after is the value of the input field, we can set our `text` variable to the string assigned to the email input's `value` key. To see this in action, in Chrome you can right click on the console message created by the code above, choose "save as variable" and then type `variableName.value`. ```js const text = email.value; @@ -104,19 +107,19 @@ const text = email.value; #### Returning the values to the DOM -Now that we've read values from the DOM, and fed that into our matching logic, we are ready to return that number to our app. To do this we first need to grab a reference to our submit button, and since this button has no `id` we are going to use the more modern (IE8) `querySelector` to get it. This function takes any valid CSS selector and returns the first found match. +Now that we've read values from the DOM and fed that into our matching logic, we are ready to return the number of matches to our app. To do this we first need to grab a reference to our submit button, and since this button has no `id` we are going to use the more modern (IE8+) `querySelector` to get it. This function takes any valid CSS selector and returns the first match found. ```js const submit = document.querySelector('.submit'); ``` -Now that we have a reference to the submit input, we can set its value to a new value. +Now that we have a reference to the submit input, we can set its value contain to the number of matches. ```js submit.value = matches + ' matches'; ``` -If you are curious, we could have done this in a single line by chaining these methods and keys together: +We could also have done this in a single line as follows: ```js document.querySelector('.submit').value = matches + ' matches'; From 837060da3311c2139f4b56cc14004a6a5772582a Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 11:48:40 -0800 Subject: [PATCH 4/6] fixed js demo starter --- step1-01/js-demo/js-demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-01/js-demo/js-demo.html b/step1-01/js-demo/js-demo.html index db28ca0..7aa4459 100644 --- a/step1-01/js-demo/js-demo.html +++ b/step1-01/js-demo/js-demo.html @@ -19,7 +19,7 @@

    Contact Us

    - +
    From 331e19526a6d0c0927da57f07dcd23457eb3a5d5 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 11:58:28 -0800 Subject: [PATCH 5/6] js var type changes --- step1-01/js-demo/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md index 49943c4..7c494b7 100644 --- a/step1-01/js-demo/README.md +++ b/step1-01/js-demo/README.md @@ -25,10 +25,10 @@ We can create a new variable with the keywords `var`, `let`, `const` and use the - **boolean**: `true`, `false` - **number**: `1`, `3.14` -- **string**: can use `'single quotes'`, `"double quotes"`, or `` `backticks` `` -- **array**: `[1, 2, 3]` -- **object**: defined inline (`{ foo: 3, bar: 'hello' })` or constructed (`new Foo()`) -- **function** +- **string**: `'single quotes'`, `"double quotes"`, or `` `backticks` `` +- **array**: `[ 1, 2, 3, 'hello', 'world']` +- **object**: `{ foo: 3, bar: 'hello' }` +- **function**: `function(foo) { return foo + 1 }` - **null** - **undefined** From 701e32a24b0815d0bc9640da5061a1b4f80d3733 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 13:13:15 -0800 Subject: [PATCH 6/6] fixed markdown --- assets/step.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/step.css b/assets/step.css index 5dce2d8..9fe6565 100644 --- a/assets/step.css +++ b/assets/step.css @@ -17,6 +17,8 @@ body { background: #efefef; padding: 50px; margin: 0 auto; + height: 100vh; + overflow: scroll; } pre {