From a38cf967e928ad02c047faae2a5b995023856895 Mon Sep 17 00:00:00 2001 From: Steven Lay Date: Mon, 25 Feb 2019 23:10:45 -0800 Subject: [PATCH 01/11] Update README.md --- step1-01/html-demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-01/html-demo/README.md b/step1-01/html-demo/README.md index 5d02cfd..3021dd9 100644 --- a/step1-01/html-demo/README.md +++ b/step1-01/html-demo/README.md @@ -1,6 +1,6 @@ ## HTML Demo -The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). +The [HTML demo page](http://localhost:8080/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). To learn more about each element, click on the elements below. From 04526328fe2319d6b97f150dc74c3698b04c4a6d Mon Sep 17 00:00:00 2001 From: elrimando Date: Tue, 26 Feb 2019 22:32:40 +0800 Subject: [PATCH 02/11] Add title to index page --- index.html | 323 ++++++++++++++++++++++++++++------------------------- 1 file changed, 171 insertions(+), 152 deletions(-) diff --git a/index.html b/index.html index 0986473..8a37e0d 100644 --- a/index.html +++ b/index.html @@ -1,169 +1,188 @@ - - - - - - -
-

Frontend Bootcamp View on GitHub

-
-
- +
+
+
    +
  • +

    Playground

    + Build your app here! +
    • +
  • Playground
    • +
+
+ + + + \ No newline at end of file From 244ed37702b309f73c206793cf8cccce19f0552d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ragnar=20K=C3=A1rason=20Colon?= Date: Tue, 26 Feb 2019 16:18:27 +0000 Subject: [PATCH 03/11] Fixing typos, the one with the title select is a suggestion as it might be unclear. --- step1-02/demo/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index e3f5123..5bbc685 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -4,7 +4,7 @@ Every website, application, form or component starts with markup. The HTML will ## Demo -In this exercise we will scaffold out some HTML for out Todo app, and add some basic styling to it. +In this exercise we will scaffold out some HTML for our Todo app, then add some basic styling to it. ### Page scaffold @@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different ### Updating the header -The header of our page is where most of the action is going to happen. First, lets give our page a title, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. +The header of our page is where most of the action is going to happen. First, lets give our page a title (Not the HTML tag), adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. ```html @@ -61,7 +61,7 @@ The navigation for this application is quite simple. We want users to be able to ### Adding styles -Now that we've got the top of our application scaffolded, we can add some our styles in the head. +Now that we've got the top of our application scaffolded, we can add some of our styles in the head. ```html From 3a197e879a69acc595a0f2e1bedffc70df36af8c Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 08:57:32 -0800 Subject: [PATCH 04/11] fixed step 3 bug --- step1-02/demo/index.html | 14 -------------- step1-03/final/index.html | 3 ++- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/step1-02/demo/index.html b/step1-02/demo/index.html index 7d13230..e69de29 100644 --- a/step1-02/demo/index.html +++ b/step1-02/demo/index.html @@ -1,14 +0,0 @@ - - - - - -
-

-
- -
-
-
- - diff --git a/step1-03/final/index.html b/step1-03/final/index.html index b8a52a6..0222d11 100644 --- a/step1-03/final/index.html +++ b/step1-03/final/index.html @@ -48,7 +48,8 @@ function updateRemaining() { const remaining = document.querySelector('.remaining'); - const todos = document.querySelectorAll('.todo'); + const todos = document.querySelectorAll('.todo').length; + console.log(todos); remaining.innerText = todos; } From 13ff73b9d2e66acc1b0bcd56ff16f8701d8e0157 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 08:59:15 -0800 Subject: [PATCH 05/11] remove console log --- step1-03/final/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/step1-03/final/index.html b/step1-03/final/index.html index 0222d11..ddf87e9 100644 --- a/step1-03/final/index.html +++ b/step1-03/final/index.html @@ -49,7 +49,6 @@ function updateRemaining() { const remaining = document.querySelector('.remaining'); const todos = document.querySelectorAll('.todo').length; - console.log(todos); remaining.innerText = todos; } From 3dbd8061477803171b31a63186348eec22954096 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:01:47 -0800 Subject: [PATCH 06/11] updaging step 3 docs --- step1-03/demo/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index 3fd1c61..cc356cc 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -13,6 +13,7 @@ This demo starts off with a few elements already in place. Let's walk through wh - **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down. 1. `todo` is set to equal the first todo item 2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4 + > Note that this approach is very fragile, as it requires a node todo node to always be present 3. We set the innerText of the `` to the value returned from getTodoText > Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return 4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) From 9c5f658168eab6de2af96868da3a5b9ec748ef36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ragnar=20K=C3=A1rason=20Colon?= Date: Tue, 26 Feb 2019 17:01:49 +0000 Subject: [PATCH 07/11] More typos. --- step1-03/exercise/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md index b3736b4..708208e 100644 --- a/step1-03/exercise/README.md +++ b/step1-03/exercise/README.md @@ -3,13 +3,13 @@ ### Write updateRemaining function 1. Get a reference to the span with the `remaining` class, and store it in a variable -2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos. +2. Use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos. 3. Set the `innerText` of the remaining span to the length of those todos. 4. Add updateRemaining() to addTodo ### Write a clearCompleted function -1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) +1. Get a reference to all of the todos with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) 2. Use a `for (let todo of todos)` loop to iterate over each todo 3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true > Hint: you can use querySelector on any HTML node to find child elements within From 8fd958a74686439c28f4a00d171b64d8c3729da2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:11:39 -0800 Subject: [PATCH 08/11] Update README.md --- step1-03/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index cc356cc..ae8397c 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -13,7 +13,7 @@ This demo starts off with a few elements already in place. Let's walk through wh - **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down. 1. `todo` is set to equal the first todo item 2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4 - > Note that this approach is very fragile, as it requires a node todo node to always be present + > Note that this approach is very fragile, as it requires a todo node to always be present on the page 3. We set the innerText of the `` to the value returned from getTodoText > Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return 4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) From 9bb0fe0c514b1784c74940647a32350f23c63f81 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:15:17 -0800 Subject: [PATCH 09/11] Update index.html --- index.html | 324 +++++++++++++++++++++++++---------------------------- 1 file changed, 153 insertions(+), 171 deletions(-) diff --git a/index.html b/index.html index 8a37e0d..c9dc707 100644 --- a/index.html +++ b/index.html @@ -1,188 +1,170 @@ - - - - - - Microsoft Days in the Web - Welcome - - - -
-

Frontend Bootcamp View on GitHub

-
-
-
- -
  • -
    - React Intro -
    - demo | final +
    • +
  • +
    + React Intro +
    + demo | final +
    - -
    • -
  • -
    - React Components -
    - demo | exercise | - final +
    • +
  • +
    + React Components +
    + demo | exercise | + final +
    - -
    • -
  • -
    - State-Driven UI -
    - demo | exercise | - final +
    • +
  • +
    + State-Driven UI +
    + demo | exercise | + final +
    - -
    • -
  • -
    - UI-Driven State -
    - demo | exercise | - final +
    • +
  • +
    + UI-Driven State +
    + demo | exercise | + final +
    - -
    • - - -
    -
      -
    • -

      Day 2

      - Take your todo app to the next level with TypeScript, Fabric React, and Redux. -
      • -
    • -
      - TypeScript Basics -
      - demo | exercise +
      • +
    +
    +
    +
      +
    • +

      Day 2

      + Take your todo app to the next level with TypeScript, Fabric React, and Redux. +
      • +
    • +
      + TypeScript Basics +
      + demo | exercise +
      -
    - -
  • -
    - UI Fabric -
    - demo | exercise +
    • +
  • +
    + UI Fabric +
    + demo | exercise +
    - -
    • -
  • -
    - Theming and Styling -
    - demo | exercise +
    • +
  • +
    + Theming and Styling +
    + demo | exercise +
    - -
    • -
  • -
    - Testing with jest -
    - demo | exercise +
    • +
  • +
    + Testing with jest +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Reducers -
    - demo | exercise +
    • +
  • +
    + Redux: Reducers +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Dispatch Actions -
    - demo | exercise +
    • +
  • +
    + Redux: Dispatch Actions +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Connect to UI -
    - demo | exercise +
    • +
  • +
    + Redux: Connect to UI +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Combine Reducers -
    - demo | exercise +
    • +
  • +
    + Redux: Combine Reducers +
    + demo | exercise +
    - -
    • -
  • -
    - Redux: Service Calls -
    - demo | exercise +
    • +
  • +
    + Redux: Service Calls +
    + demo | exercise +
    - -
    • - - -
    -
      -
    • -

      Playground

      - Build your app here! -
      • -
    • Playground
      • -
    -
    - - - - \ No newline at end of file + + + +
    +
      +
    • +

      Playground

      + Build your app here! +
      • +
    • Playground
      • +
    +
    + + + From 0cd4c168113a3331317d5574a26d4a567c7e54b2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:17:33 -0800 Subject: [PATCH 10/11] Update README.md --- step1-02/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index 5bbc685..b3b8b52 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different ### Updating the header -The header of our page is where most of the action is going to happen. First, lets give our page a title (Not the HTML tag), adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. +The header of our page is where most of the action is going to happen. First, lets give our app a name, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. ```html From 212806fe9c73a6fb6d6f1b58ba617cd97a82c5b2 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 26 Feb 2019 09:18:45 -0800 Subject: [PATCH 11/11] Update README.md --- step1-02/demo/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/step1-02/demo/README.md b/step1-02/demo/README.md index b3b8b52..8b419ba 100644 --- a/step1-02/demo/README.md +++ b/step1-02/demo/README.md @@ -61,7 +61,7 @@ The navigation for this application is quite simple. We want users to be able to ### Adding styles -Now that we've got the top of our application scaffolded, we can add some of our styles in the head. +Now that we've got the top of our application scaffolded, we can add some styles in the head. ```html