From 5e64d11d222ebfefd2dfcc832b5e597b62b3b856 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Fri, 15 Feb 2019 14:51:31 -0800
Subject: [PATCH] reorg step0

---
 assets/shared.css                             |   1 +
 step1-00/{ => assets}/fabric.jpg              | Bin
 .../css-demo-finished.css}                    |   4 +++
 step1-00/css-demo/css-demo-finished.html      |  29 ++++++++++++++++
 step1-00/css-demo/css-demo.css                |   0
 step1-00/{ => css-demo}/css-demo.html         |   0
 step1-00/{ => html-demo}/html-demo.html       |   2 +-
 step1-00/{ => html-demo}/style.css            |   0
 step1-00/index.html                           |   5 +--
 step1-01/index.html                           |  24 ++++++++------
 step1-02/index.html                           |   2 +-
 step1-03/index.html                           |  31 ++++++++----------
 step1-05/src/components/TodoHeader.tsx        |  13 +++-----
 step1-06/src/components/TodoHeader.tsx        |   2 +-
 step1-07/src/components/TodoHeader.tsx        |   2 +-
 15 files changed, 72 insertions(+), 43 deletions(-)
 rename step1-00/{ => assets}/fabric.jpg (100%)
 rename step1-00/{css-demo.css => css-demo/css-demo-finished.css} (97%)
 create mode 100644 step1-00/css-demo/css-demo-finished.html
 create mode 100644 step1-00/css-demo/css-demo.css
 rename step1-00/{ => css-demo}/css-demo.html (100%)
 rename step1-00/{ => html-demo}/html-demo.html (99%)
 rename step1-00/{ => html-demo}/style.css (100%)
diff --git a/assets/shared.css b/assets/shared.css
index d5e1d84..4f08735 100644
--- a/assets/shared.css
+++ b/assets/shared.css
@@ -55,6 +55,7 @@ body {
   flex-direction: column;
   height: 148px;
   justify-content: center;
+  text-align: center;
   padding: 20px;
   text-decoration: none;
   width: 148px;
diff --git a/step1-00/fabric.jpg b/step1-00/assets/fabric.jpg
similarity index 100%
rename from step1-00/fabric.jpg
rename to step1-00/assets/fabric.jpg
diff --git a/step1-00/css-demo.css b/step1-00/css-demo/css-demo-finished.css
similarity index 97%
rename from step1-00/css-demo.css
rename to step1-00/css-demo/css-demo-finished.css
index db7481a..b1b8ca9 100644
--- a/step1-00/css-demo.css
+++ b/step1-00/css-demo/css-demo-finished.css
@@ -1,5 +1,9 @@
 /* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
 
+body {
+  font: 1.2em sans-serif;
+}
+
 /* Targeting an HTML tag */
 h1 {
   /* Color name */
diff --git a/step1-00/css-demo/css-demo-finished.html b/step1-00/css-demo/css-demo-finished.html
new file mode 100644
index 0000000..ff34678
--- /dev/null
+++ b/step1-00/css-demo/css-demo-finished.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./css-demo-finished.css" />
+  </head>
+  <body>
+    <div>
+      <h1>This is my <span>Title</span></h1>
+      <div class="tiles">
+        <div class="links">
+          <h2>Important Links</h2>
+          <a href="#">We're Awesome</a>
+          <a href="#">Learn More</a>
+          <a href="#">Hire Us</a>
+        </div>
+        <div>
+          <h2>Our Logo</h2>
+          <img src="./fabric.jpg" width="100" alt="fabric logo" />
+        </div>
+        <div>
+          <h2>Contact Us</h2>
+          <div id="contact-form">
+            <label>Email</label><input type="email" />
+            <input value="Submit" type="submit" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/step1-00/css-demo/css-demo.css b/step1-00/css-demo/css-demo.css
new file mode 100644
index 0000000..e69de29
diff --git a/step1-00/css-demo.html b/step1-00/css-demo/css-demo.html
similarity index 100%
rename from step1-00/css-demo.html
rename to step1-00/css-demo/css-demo.html
diff --git a/step1-00/html-demo.html b/step1-00/html-demo/html-demo.html
similarity index 99%
rename from step1-00/html-demo.html
rename to step1-00/html-demo/html-demo.html
index 40a1672..25f19ac 100644
--- a/step1-00/html-demo.html
+++ b/step1-00/html-demo/html-demo.html
@@ -84,7 +84,7 @@
 
       <h3>Figure</h3>
       <figure>
-        <img src="./fabric.jpg" alt="Fabric Logo" />
+        <img src="../assets/fabric.jpg" alt="Fabric Logo" />
         <figcaption>The Fabric Logo</figcaption>
       </figure>
 
diff --git a/step1-00/style.css b/step1-00/html-demo/style.css
similarity index 100%
rename from step1-00/style.css
rename to step1-00/html-demo/style.css
diff --git a/step1-00/index.html b/step1-00/index.html
index 43225e8..7764819 100644
--- a/step1-00/index.html
+++ b/step1-00/index.html
@@ -7,8 +7,9 @@
   <body class="ms-Fabric">
     <div class="Container">
       <ul class="Tiles">
-        <li class="Tile"><a href="./html-demo.html" class="Tile-link">HTML Demo</a></li>
-        <li class="Tile"><a href="./css-demo.html" class="Tile-link">CSS Demo</a></li>
+        <li class="Tile"><a href="./html-demo/html-demo.html" class="Tile-link">HTML Demo</a></li>
+        <li class="Tile"><a href="./css-demo/css-demo.html" class="Tile-link">CSS Demo</a></li>
+        <li class="Tile"><a href="./css-demo/css-demo-finished.html" class="Tile-link">CSS Demo Finished</a></li>
       </ul>
     </div>
   </body>
diff --git a/step1-01/index.html b/step1-01/index.html
index c534e69..8e4c512 100644
--- a/step1-01/index.html
+++ b/step1-01/index.html
@@ -2,22 +2,26 @@
 <html>
   <body>
     <h1>todos</h1>
-    <div>
-      <input/><button>Add</button>
-    </div>
+    <div><input placeholder="add todo" /><button>Add</button></div>
     <div>
       <button>all</button>
       <button>active</button>
       <button>completed</button>
     </div>
     <ul>
-      <li><input type="checkbox" /> Todo 1</li>
-      <li><input type="checkbox" /> Todo 2</li>
-      <li><input type="checkbox" /> Todo 3</li>
-      <li><input type="checkbox" /> Todo 4</li>
+      <li>
+        <label><input type="checkbox" /> Todo 1</label>
+      </li>
+      <li>
+        <label><input type="checkbox" /> Todo 2</label>
+      </li>
+      <li>
+        <label><input type="checkbox" /> Todo 3</label>
+      </li>
+      <li>
+        <label><input type="checkbox" /> Todo 4</label>
+      </li>
     </ul>
-    <div>
-      <span>4 items left</span> <button>Clear Completed</button>
-    </div>
+    <div><span>4 items left</span> <button>Clear Completed</button></div>
   </body>
 </html>
diff --git a/step1-02/index.html b/step1-02/index.html
index d960eaf..7c9d40d 100644
--- a/step1-02/index.html
+++ b/step1-02/index.html
@@ -3,7 +3,7 @@
   <link rel="stylesheet" href="./style.css" />
   <body>
     <h1>todos</h1>
-    <input class="textfield" /><button class="button add">Add</button>
+    <input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
     <div class="filter">
       <button class="active">all</button>
       <button>active</button>
diff --git a/step1-03/index.html b/step1-03/index.html
index 321247d..c9278ac 100644
--- a/step1-03/index.html
+++ b/step1-03/index.html
@@ -3,7 +3,7 @@
   <link rel="stylesheet" href="./style.css" />
   <body>
     <h1>todos</h1>
-    <input class="textfield" />
+    <input class="textfield" placeholder="add todo" />
     <button onclick="addTodo()" class="button add">
       Add
     </button>
@@ -33,38 +33,35 @@
   </body>
 
   <script type="text/javascript">
-    
     function getValue(selector) {
       const inputValue = document.querySelector(selector).value;
       return inputValue;
     }
 
     function clearInput(selector) {
-      document.querySelector(selector).value = "";
+      document.querySelector(selector).value = '';
     }
 
     function updateRemaining() {
-      const remaining = document.querySelector(".remaining");
-      const todos = document.querySelectorAll(".todo").length;
+      const remaining = document.querySelector('.remaining');
+      const todos = document.querySelectorAll('.todo').length;
       remaining.innerText = todos;
     }
 
     function addTodo() {
-      const todo = document.querySelector(".todo");
+      const todo = document.querySelector('.todo');
       const newTodo = todo.cloneNode();
-      newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue(
-        ".textfield"
-      )}</label>`;
+      newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue('.textfield')}</label>`;
       todo.parentElement.insertBefore(newTodo, todo);
 
-      clearInput(".textfield");
+      clearInput('.textfield');
       updateRemaining();
     }
 
     function clearCompleted() {
-      const todos = document.querySelectorAll(".todo");
+      const todos = document.querySelectorAll('.todo');
       for (let todo of todos) {
-        if (todo.querySelector("input").checked == true) {
+        if (todo.querySelector('input').checked == true) {
           todo.remove();
         }
       }
@@ -74,15 +71,13 @@
     function filter(scope, button) {
       document.querySelector('.active').classList.remove('active');
       button.classList.add('active');
-      for (let todo of document.querySelectorAll(".todo")) {
-        const checked = todo.querySelector("input").checked == true;
+      for (let todo of document.querySelectorAll('.todo')) {
+        const checked = todo.querySelector('input').checked == true;
         if (scope == 'all') {
           todo.hidden = false;
-        }
-        else if ( scope == 'active' ){
+        } else if (scope == 'active') {
           todo.hidden = checked;
-        }
-        else if ( scope == 'completed' ){
+        } else if (scope == 'completed') {
           todo.hidden = !checked;
         }
       }
diff --git a/step1-05/src/components/TodoHeader.tsx b/step1-05/src/components/TodoHeader.tsx
index 2b2da8b..aa1ec8b 100644
--- a/step1-05/src/components/TodoHeader.tsx
+++ b/step1-05/src/components/TodoHeader.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
 
 export class TodoHeader extends React.Component {
-
   render() {
     return (
       <div>
         <h1>todos</h1>
-        <input className="textfield" />
-        <button  className="button add">
-          Add
-        </button>
+        <input className="textfield" placeholder="add todo" />
+        <button className="button add">Add</button>
         <div className="filter">
-          <button className="active">
-            all
-          </button>
-          <button >active</button>
+          <button className="active">all</button>
+          <button>active</button>
           <button>completed</button>
         </div>
       </div>
diff --git a/step1-06/src/components/TodoHeader.tsx b/step1-06/src/components/TodoHeader.tsx
index 9d31542..c26e54b 100644
--- a/step1-06/src/components/TodoHeader.tsx
+++ b/step1-06/src/components/TodoHeader.tsx
@@ -6,7 +6,7 @@ export class TodoHeader extends React.Component<any, any> {
     return (
       <div>
         <h1>todos</h1>
-        <input className="textfield" />
+        <input className="textfield" placeholder="add todo" />
         <button className="button add">Add</button>
         <div className="filter">
           <button className={filter == 'all' ? 'active' : ''}>all</button>
diff --git a/step1-07/src/components/TodoHeader.tsx b/step1-07/src/components/TodoHeader.tsx
index 30ef324..99bda01 100644
--- a/step1-07/src/components/TodoHeader.tsx
+++ b/step1-07/src/components/TodoHeader.tsx
@@ -18,7 +18,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
     return (
       <div>
         <h1>todos</h1>
-        <input value={this.state.labelInput} onChange={this._onChange} className="textfield" />
+        <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
         <button onClick={this._onAdd} className="button add">
           Add
         </button>
