microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

html cleanup

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-20 22:36:08 -08:00
parent bdf6b2b0a9
commit 756c948ce3
36 changed files with 428 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
step1-00/assets/fabric.jpg → assets/fabric.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/todo_screenshot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

2
docs/step1-00/css-demo/css-demo-finished.html
View File

@@ -14,7 +14,7 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="./fabric.jpg" width="100" alt="fabric logo" /> <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>

2
docs/step1-00/css-demo/css-demo.html
View File

@@ -14,7 +14,7 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="../assets/fabric.jpg" width="100" alt="fabric logo" /> <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>

2
docs/step1-00/js-demo/js-demo.html
View File

@@ -12,7 +12,7 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="../assets/fabric.jpg" width="100" alt="fabric logo" /> <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>

10
index.html
View File

@@ -16,22 +16,16 @@
<h2>Day 1</h2> <h2>Day 1</h2>
Setup, HTML, CSS, Javascript and Intro to React Setup, HTML, CSS, Javascript and Intro to React
</li> </li>
<li class="Tile">
<a target="_blank" href="./step1-00/" class="Tile-link">
Step 0 <br />
HTML/CSS/JS
</a>
</li>
<li class="Tile"> <li class="Tile">
<a target="_blank" href="./step1-01/" class="Tile-link"> <a target="_blank" href="./step1-01/" class="Tile-link">
Step 1 <br /> Step 1 <br />
Todo HTML HTML/CSS/JS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile">
<a target="_blank" href="./step1-02/" class="Tile-link"> <a target="_blank" href="./step1-02/" class="Tile-link">
Step 2 <br /> Step 2 <br />
Todo CSS Todo HTML & CSS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile">

12
package-lock.json generated
View File

@@ -3825,7 +3825,6 @@
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -3844,7 +3843,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -3938,7 +3936,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -4024,8 +4021,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -4125,14 +4121,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },

17
step1-00/index.html
View File

@@ -1,17 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="../assets/shared.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
</head>
<body class="ms-Fabric">
<div class="Container">
<ul class="Tiles">
<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>
<li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
</ul>
</div>
</body>
</html>

0
step1-00/README.md → step1-01/README.md
View File

3
step1-00/css-demo/README.md → step1-01/css-demo/README.md
View File

@@ -30,9 +30,10 @@ CSS can be applied to HTML tags in three different ways.
### Targeting specific HTML tags ### Targeting specific HTML tags
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "selectors", and they are just as important to learn as the properties/values themselves. Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "selectors", and they are just as important to learn as the properties/values themselves. Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
```css ```css
/* Targeting the entire page */
body { body {
font: 1.2em sans-serif; font: 1.2em sans-serif;
} }

7
step1-00/css-demo/css-demo.css → step1-01/css-demo/css-demo-finished.css
View File

@@ -1,11 +1,14 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */ /* Targeting an HTML tag */
body { body {
font: 1.2em sans-serif; font: 1.2em sans-serif;
} }
/* Targeting an HTML tag */
h1 { h1 {
/* Color name */
color: black; color: black;
/* 6 digit hex */
background: #ababab; background: #ababab;
/* Margin: property for each side */ /* Margin: property for each side */

29
step1-01/css-demo/css-demo-finished.html Normal file
View File

@@ -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="../../assets/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>

63
step1-01/css-demo/css-demo.css Normal file
View File

@@ -0,0 +1,63 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
/* body {
font: 1.2em sans-serif;
} */
/* h1 {
color: black;
background: #ababab;
margin-bottom: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
} */
/* span {
color: #004578;
} */
/* .tiles {
display: flex;
} */
/* .tiles img {
width: 100%;
} */
/* .tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
} */
/* div.links {
background: #004578;
} */
/* a {
color: white;
} */
/* a:hover {
color: #ccc;
} */
/* a ~ a {
display: block;
} */
/* .tiles > div:last-child {
margin-right: 0;
} */
/* #contact-form {
display: flex;
flex-direction: column;
} */
/* input[type='submit'] {
margin-top: 10px;
} */

2
step1-00/css-demo/css-demo.html → step1-01/css-demo/css-demo.html
View File

@@ -14,7 +14,7 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="./fabric.jpg" width="100" alt="fabric logo" /> <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>

0
step1-00/html-demo/README.md → step1-01/html-demo/README.md
View File

2
step1-00/html-demo/html-demo.html → step1-01/html-demo/html-demo.html
View File

@@ -128,7 +128,7 @@
<p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p> <p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>
<div> <div>
<img src="../assets/fabric.jpg" width="100" /> <img src="../../assets/fabric.jpg" width="100" />
</div> </div>
</section> </section>
<hr /> <hr />

0
step1-00/html-demo/style.css → step1-01/html-demo/style.css
View File

37
step1-01/index.html
View File

@@ -1,27 +1,18 @@
<!DOCTYPE html>
<html> <html>
<body> <head>
<h1>todos</h1> <link rel="stylesheet" href="../assets/shared.css" />
<div><input placeholder="add todo" /><button>Add</button></div> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
<div> </head>
<button>all</button>
<button>active</button> <body class="ms-Fabric">
<button>completed</button> <div class="Container">
<ul class="Tiles">
<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>
<li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
<li class="Tile"><a href="./js-demo/js-demo-finished.html" class="Tile-link">JS Demo Finished</a></li>
</ul>
</div> </div>
<ul>
<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>
</body> </body>
</html> </html>

116
step1-01/js-demo/README.md Normal file
View File

@@ -0,0 +1,116 @@
## JavaScript Demo
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.
We'll be covering:
- Variables
- Functions
- Conditionals
- Loops
- Interacting with the DOM (Document Object Model)
### Variables
Javascript is a loosly typed language. 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
Because they are not strongly typed, we can switch a varible from a number, to a string, to an array anytime we want to. In practice, this is a bit of an anti-pattern, as it makes debugging and refactoring extremely difficult. This is why we write just about every project in [Typescript](https://www.typescriptlang.org/).
Lets start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
```js
const match = 'a';
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.
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);
```html
<input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
```
```js
function displayMatches() {
console.log("I'm Clicked");
}
```
### 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.
```js
function displayMatches() {
const text = 'abcda';
for (let letter of text) {
console.log(letter);
}
}
```
### 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
```js
function displayMatches() {
const text = 'abcda';
for (let letter of text) {
if (letter === match) {
matches++;
}
}
console.log(matches);
}
```
### 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.
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.
```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`.
```js
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.
```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.
```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:
```js
document.querySelector('.submit').value = matches + ' matches';
```

14
step1-00/js-demo/js-demo.html → step1-01/js-demo/js-demo-finished.html
View File

@@ -1,5 +1,7 @@
<html> <html>
<head> </head> <head>
<link rel="stylesheet" href="../css-demo/css-demo-finished.css" />
</head>
<body> <body>
<div> <div>
<h1>This is my <span>Title</span></h1> <h1>This is my <span>Title</span></h1>
@@ -12,12 +14,12 @@
</div> </div>
<div> <div>
<h2>Our Logo</h2> <h2>Our Logo</h2>
<img src="../assets/fabric.jpg" width="100" alt="fabric logo" /> <img src="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div> </div>
<div> <div>
<h2>Contact Us</h2> <h2>Contact Us</h2>
<div id="contact-form"> <div id="contact-form">
<label>Email</label><input class="email" type="email" /> <label>Email</label><input id="email" type="email" />
<input onclick="displayMatches()" class="submit" value="Submit" type="submit" /> <input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
</div> </div>
</div> </div>
@@ -29,13 +31,15 @@
let matches = 0; let matches = 0;
function displayMatches() { function displayMatches() {
const text = document.querySelector('.email').value; const email = document.getElementById('email');
const text = email.value;
for (let letter of text) { for (let letter of text) {
if (letter === match) { if (letter === match) {
matches++; matches++;
} }
} }
document.querySelector('.submit').value = matches + ' matches'; const submit = document.querySelector('.submit');
submit.value = matches + ' matches';
} }
</script> </script>
</html> </html>

30
step1-01/js-demo/js-demo.html Normal file
View File

@@ -0,0 +1,30 @@
<html>
<head>
<link rel="stylesheet" href="../css-demo/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="../../assets/fabric.jpg" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input class="email" type="email" />
<input class="submit" value="Submit" type="submit" />
</div>
</div>
</div>
</div>
</body>
<script></script>
</html>

9
step1-02/README.md Normal file
View File

@@ -0,0 +1,9 @@
## HTML and CSS
## Exercise
1. Add an unordered list of class 'todos' after the filters
2. Add four todos.
3. Center the "TODO" header
4. Style all elements with button class to have no border and 5px padding top/bottom and 10px left/right
5. Set the active button style to have a 2px solid blue bottom border

34
step1-02/finished/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!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="active">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<main>
<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>
</main>
<footer><span>4 items left</span> <button class="submit">Clear Completed</button></footer>
</body>
</html>

17
step1-02/style.css → step1-02/finished/style.css
View File

@@ -1,21 +1,23 @@
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.addTodo {
display: flex;
}
.textfield { .textfield {
width: 80%; flex-grow: 1;
margin-right: 10px;
} }
.add { .submit {
margin-left: 5%;
}
.button {
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
} }
@@ -28,6 +30,7 @@ h1 {
background: transparent; background: transparent;
border: none; border: none;
} }
.filter .active { .filter .active {
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
} }

28
step1-02/index.html
View File

@@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./style.css" />
<body>
<h1>todos</h1>
<input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
<div class="filter">
<button class="active">all</button>
<button>active</button>
<button>completed</button>
</div>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer><span>4 items left</span> <button class="button">Clear Completed</button></footer>
</body>
</html>

48
step1-03/index.html
View File

@@ -1,29 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<link rel="stylesheet" href="./style.css" /> <head>
<link rel="stylesheet" href="./style.css" />
</head>
<body> <body>
<h1>todos</h1> <header>
<input class="textfield" placeholder="add todo" /> <h1>todos</h1>
<button onclick="addTodo()" class="button add"> <div class="addTodo">
Add <input class="textfield" placeholder="add todo" />
</button> <button onclick="addTodo()" class="submit add">Add</button>
<div class="filter"> </div>
<button onclick="filter('all', this)" class="active">all</button> <nav class="filter">
<button onclick="filter('active', this)">active</button> <button onclick="filter('all', this)" class="active">all</button>
<button onclick="filter('completed', this)">completed</button> <button onclick="filter('active', this)">active</button>
</div> <button onclick="filter('completed', this)">completed</button>
</nav>
</header>
<ul class="todos"> <ul class="todos">
<li class="todo"> <li class="todo">
<label><input type="checkbox" /> Todo 1</label> <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
</li> </li>
<li class="todo"> <li class="todo">
<label><input type="checkbox" /> Todo 2</label> <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
</li> </li>
<li class="todo"> <li class="todo">
<label><input type="checkbox" /> Todo 3</label> <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
</li> </li>
<li class="todo"> <li class="todo">
<label><input type="checkbox" /> Todo 4</label> <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
</li> </li>
</ul> </ul>
<footer> <footer>
@@ -33,13 +38,12 @@
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
function getValue(selector) { function getTodoText() {
const inputValue = document.querySelector(selector).value; return document.querySelector('.textfield').value;
return inputValue;
} }
function clearInput(selector) { function clearInput(selector) {
document.querySelector(selector).value = ''; document.querySelector('.textfield').value = '';
} }
function updateRemaining() { function updateRemaining() {
@@ -50,11 +54,11 @@
function addTodo() { function addTodo() {
const todo = document.querySelector('.todo'); const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(); const newTodo = todo.cloneNode(true);
newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue('.textfield')}</label>`; newTodo.querySelector('.title').innerText = getTodoText();
todo.parentElement.insertBefore(newTodo, todo); todo.parentElement.insertBefore(newTodo, todo);
clearInput('.textfield'); clearInput();
updateRemaining(); updateRemaining();
} }

21
step1-03/style.css
View File

@@ -1,21 +1,23 @@
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.addTodo {
display: flex;
}
.textfield { .textfield {
width: 80%; flex-grow: 1;
margin-right: 10px;
} }
.add { .submit {
margin-left: 5%;
}
.button {
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
} }
@@ -28,6 +30,7 @@ h1 {
background: transparent; background: transparent;
border: none; border: none;
} }
.filter .active { .filter .active {
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
} }
@@ -44,7 +47,3 @@ footer {
footer span { footer span {
flex-grow: 1; flex-grow: 1;
} }
.hidden {
display: none;
}

5
step1-05/src/components/TodoFooter.tsx
View File

@@ -1,13 +1,12 @@
import React from "react"; import React from 'react';
export const TodoFooter = (props: any) => { export const TodoFooter = (props: any) => {
return ( return (
<footer> <footer>
<span> <span>
<span className="remaining">4</span> items left <span className="remaining">4</span> items left
</span> </span>
<button className="button">Clear Completed</button> <button className="submit">Clear Completed</button>
</footer> </footer>
); );
}; };

14
step1-05/src/components/TodoHeader.tsx
View File

@@ -3,16 +3,18 @@ import React from 'react';
export class TodoHeader extends React.Component { export class TodoHeader extends React.Component {
render() { render() {
return ( return (
<div> <header>
<h1>todos</h1> <h1>todos</h1>
<input className="textfield" placeholder="add todo" /> <div className="addTodo">
<button className="button add">Add</button> <input className="textfield" placeholder="add todo" />
<div className="filter"> <button className="submit">Add</button>
</div>
<nav className="filter">
<button className="active">all</button> <button className="active">all</button>
<button>active</button> <button>active</button>
<button>completed</button> <button>completed</button>
</div> </nav>
</div> </header>
); );
} }
} }

21
step1-05/src/style.css
View File

@@ -1,21 +1,23 @@
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.addTodo {
display: flex;
}
.textfield { .textfield {
width: 80%; flex-grow: 1;
margin-right: 10px;
} }
.add { .submit {
margin-left: 5%;
}
.button {
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
} }
@@ -28,6 +30,7 @@ h1 {
background: transparent; background: transparent;
border: none; border: none;
} }
.filter .active { .filter .active {
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
} }
@@ -44,7 +47,3 @@ footer {
footer span { footer span {
flex-grow: 1; flex-grow: 1;
} }
.hidden {
display: none;
}

2
step1-06/src/components/TodoFooter.tsx
View File

@@ -7,7 +7,7 @@ export const TodoFooter = (props: any) => {
<span> <span>
{itemCount} item{itemCount > 1 ? 's' : ''} left {itemCount} item{itemCount > 1 ? 's' : ''} left
</span> </span>
<button className="button">Clear Completed</button> <button className="submit">Clear Completed</button>
</footer> </footer>
); );
}; };

15
step1-06/src/components/TodoHeader.tsx
View File

@@ -3,17 +3,20 @@ import React from 'react';
export class TodoHeader extends React.Component<any, any> { export class TodoHeader extends React.Component<any, any> {
render() { render() {
const { filter } = this.props; const { filter } = this.props;
return ( return (
<div> <header>
<h1>todos</h1> <h1>todos</h1>
<input className="textfield" placeholder="add todo" /> <div className="addTodo">
<button className="button add">Add</button> <input className="textfield" placeholder="add todo" />
<div className="filter"> <button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter == 'all' ? 'active' : ''}>all</button> <button className={filter == 'all' ? 'active' : ''}>all</button>
<button className={filter == 'active' ? 'active' : ''}>active</button> <button className={filter == 'active' ? 'active' : ''}>active</button>
<button className={filter == 'completed' ? 'active' : ''}>completed</button> <button className={filter == 'completed' ? 'active' : ''}>completed</button>
</div> </nav>
</div> </header>
); );
} }
} }

21
step1-06/src/style.css
View File

@@ -1,21 +1,23 @@
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.addTodo {
display: flex;
}
.textfield { .textfield {
width: 80%; flex-grow: 1;
margin-right: 10px;
} }
.add { .submit {
margin-left: 5%;
}
.button {
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
} }
@@ -28,6 +30,7 @@ h1 {
background: transparent; background: transparent;
border: none; border: none;
} }
.filter .active { .filter .active {
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
} }
@@ -44,7 +47,3 @@ footer {
footer span { footer span {
flex-grow: 1; flex-grow: 1;
} }
.hidden {
display: none;
}

2
step1-07/src/components/TodoFooter.tsx
View File

@@ -12,7 +12,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
<span> <span>
{itemCount} item{itemCount > 1 ? 's' : ''} left {itemCount} item{itemCount > 1 ? 's' : ''} left
</span> </span>
<button onClick={() => props.clear()} className="button"> <button onClick={() => props.clear()} className="submit">
Clear Completed Clear Completed
</button> </button>
</footer> </footer>

18
step1-07/src/components/TodoHeader.tsx
View File

@@ -16,13 +16,15 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
render() { render() {
const { filter, setFilter } = this.props; const { filter, setFilter } = this.props;
return ( return (
<div> <header>
<h1>todos</h1> <h1>todos</h1>
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <div className="addTodo">
<button onClick={this._onAdd} className="button add"> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
Add <button onClick={this._onAdd} className="submit">
</button> Add
<div className="filter"> </button>
</div>
<nav className="filter">
<button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}> <button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
all all
</button> </button>
@@ -32,8 +34,8 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
<button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}> <button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
completed completed
</button> </button>
</div> </nav>
</div> </header>
); );
} }

21
step1-07/src/style.css
View File

@@ -1,21 +1,23 @@
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.addTodo {
display: flex;
}
.textfield { .textfield {
width: 80%; flex-grow: 1;
margin-right: 10px;
} }
.add { .submit {
margin-left: 5%;
}
.button {
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
} }
@@ -28,6 +30,7 @@ h1 {
background: transparent; background: transparent;
border: none; border: none;
} }
.filter .active { .filter .active {
border-bottom: 2px solid blue; border-bottom: 2px solid blue;
} }
@@ -44,7 +47,3 @@ footer {
footer span { footer span {
flex-grow: 1; flex-grow: 1;
} }
.hidden {
display: none;
}