adding docs subtree

2026-01-26 14:56:42 +08:00 · 2019-02-25 13:12:18 -08:00
parent 1adcc07a61
commit 41dcf8731d
365 changed files with 10620 additions and 0 deletions
--- a/docs/step1-03/exercise/README.md
+++ b/docs/step1-03/exercise/README.md
@@ -0,0 +1,19 @@
+## Exercise
+
+### 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.
+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)
+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
+4. Call `todo.remove()` for any todo whos input check is true
+5. After the loop is done, run `updateRemaining()`
+6. Attach this function to the footer button
+7. Test it out!
--- a/docs/step1-03/exercise/index.html
+++ b/docs/step1-03/exercise/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>todos</h1>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button onclick="addTodo()" class="submit">Add</button>
+      </div>
+      <nav class="filter">
+        <button class="selected">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+
+    <ul class="todos">
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
+      </li>
+    </ul>
+    <footer>
+      <span><span class="remaining">4</span> items left</span>
+      <button class="submit">Clear Completed</button>
+    </footer>
+  </body>
+
+  <script type="text/javascript">
+    function clearInput(selector) {
+      document.querySelector(selector).value = '';
+    }
+
+    function getTodoText() {
+      return document.querySelector('.textfield').value;
+    }
+
+    function updateRemaining() {
+      const remaining = document.querySelector('.remaining');
+      const todos = document.querySelectorAll('.todo').length;
+      remaining.innerText = todos;
+    }
+
+    function addTodo() {
+      const todo = document.querySelector('.todo');
+      const newTodo = todo.cloneNode(true);
+      newTodo.querySelector('.title').innerText = getTodoText();
+      todo.parentElement.insertBefore(newTodo, todo);
+
+      clearInput('.textfield');
+      updateRemaining();
+    }
+
+    // clearCompleted
+
+    function filter(filterName, button) {
+      document.querySelector('.selected').classList.remove('selected');
+      button.classList.add('selected');
+      for (let todo of document.querySelectorAll('.todo')) {
+        const checked = todo.querySelector('input').checked == true;
+        if (filterName == 'all') {
+          todo.hidden = false;
+        } else if (filterName == 'active') {
+          todo.hidden = checked;
+        } else if (filterName == 'completed') {
+          todo.hidden = !checked;
+        }
+      }
+    }
+  </script>
+</html>
--- a/docs/step1-03/exercise/style.css
+++ b/docs/step1-03/exercise/style.css
@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .selected {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}