adding docs subtree

2026-07-13 15:28:32 +08:00 · 2019-02-25 13:12:18 -08:00
parent 1adcc07a61
commit 41dcf8731d
365 changed files with 10620 additions and 0 deletions
@@ -0,0 +1,12 @@
+## Exercise
+
+1. Add an unordered list with class `todos` to the main section
+2. Add 4 list items with class `todo` inside of that list with the following content
+   `<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
+3. Add a span and a button to your footer
+4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
+5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
+
+> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
+
+> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.
@@ -0,0 +1,22 @@
+<!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 class="submit">Add</button>
+      </div>
+      <nav class="filter">
+        <button class="selected">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+    <main></main>
+    <footer></footer>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+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;
+}