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

breaking up into stages

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-21 14:29:33 -08:00
parent 102c14648a
commit 37598e5812
62 changed files with 906 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -3817,6 +3817,7 @@
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3835,6 +3836,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3928,6 +3930,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4013,7 +4016,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4113,12 +4117,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

8
step1-02/README.md
View File

@@ -2,8 +2,12 @@
## Demo
Scaffold out page
Write html tag down to ul > li, footer
add CSS link
Add active styles, describe specificity
## Exercise
Add and style footer
Update list item to match (already styled)
duplicate 3 more times
Add and style footer content

1
step1-02/demo/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html>

37
step1-02/demo/style.css Normal file
View File

@@ -0,0 +1,37 @@
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;
}
.todos {
list-style: none;
padding: 0;
}

25
step1-02/exercise/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>Todo 1</li>
</ul>
</main>
</body>
</html>

41
step1-02/exercise/style.css Normal file
View File

@@ -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 .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}

5
step1-02/finished/index.html → step1-02/final/index.html
View File

@@ -6,7 +6,10 @@
<body>
<header>
<h1>todos</h1>
<div class="addTodo"><input class="textfield" placeholder="add todo" /><button class="submit">Add</button></div>
<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>

0
step1-02/finished/style.css → step1-02/final/style.css
View File

16
step1-02/index.html
View File

@@ -0,0 +1,16 @@
<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="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>

3
step1-03/README.md
View File

@@ -9,10 +9,11 @@ already done
Walk through 'addTodo'
attach addTodo to button
write clearInput/add to addTodo
write clearInput
write updateRemaining
## Exercise
add filter to filter buttons
write clearCompleted
add to footer button

70
step1-03/demo/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!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">Add</button>
</div>
<nav class="filter">
<button class="active">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 getTodoText() {
return document.querySelector('.textfield').value;
}
function addTodo() {
const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(true);
newTodo.querySelector('.title').innerText = getTodoText();
todo.parentElement.insertBefore(newTodo, todo);
// clearInput();
// updateRemaining();
}
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;
if (scope == 'all') {
todo.hidden = false;
} else if (scope == 'active') {
todo.hidden = checked;
} else if (scope == 'completed') {
todo.hidden = !checked;
}
}
}
</script>
</html>

0
step1-03/style.css → step1-03/demo/style.css
View File

82
step1-03/exercise/index.html Normal file
View File

@@ -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">Add</button>
</div>
<nav class="filter">
<button class="active">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 getTodoText() {
return document.querySelector('.textfield').value;
}
function clearInput() {
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();
updateRemaining();
}
// clearCompleted
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;
if (scope == 'all') {
todo.hidden = false;
} else if (scope == 'active') {
todo.hidden = checked;
} else if (scope == 'completed') {
todo.hidden = !checked;
}
}
}
</script>
</html>

0
step1-05/src/style.css → step1-03/exercise/style.css
View File

90
step1-03/final/index.html Normal file
View File

@@ -0,0 +1,90 @@
<!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">Add</button>
</div>
<nav class="filter">
<button onclick="filter('all', this)" class="active">all</button>
<button onclick="filter('active', this)">active</button>
<button onclick="filter('completed', this)">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 onclick="clearCompleted()" class="submit">Clear Completed</button>
</footer>
</body>
<script type="text/javascript">
function getTodoText() {
return document.querySelector('.textfield').value;
}
function clearInput() {
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();
updateRemaining();
}
function clearCompleted() {
const todos = document.querySelectorAll('.todo');
for (let todo of todos) {
if (todo.querySelector('input').checked == true) {
todo.remove();
}
}
updateRemaining();
}
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;
if (scope == 'all') {
todo.hidden = false;
} else if (scope == 'active') {
todo.hidden = checked;
} else if (scope == 'completed') {
todo.hidden = !checked;
}
}
}
</script>
</html>

49
step1-03/final/style.css Normal file
View File

@@ -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 .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

94
step1-03/index.html
View File

@@ -1,90 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<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>
<header>
<h1>todos</h1>
<div class="addTodo">
<input class="textfield" placeholder="add todo" />
<button onclick="addTodo()" class="submit add">Add</button>
</div>
<nav class="filter">
<button onclick="filter('all', this)" class="active">all</button>
<button onclick="filter('active', this)">active</button>
<button onclick="filter('completed', this)">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 onclick="clearCompleted()" class="button">Clear Completed</button>
</footer>
<body class="ms-Fabric">
<div class="Container">
<ul class="Tiles">
<li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
function getTodoText() {
return document.querySelector('.textfield').value;
}
function clearInput() {
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();
updateRemaining();
}
function clearCompleted() {
const todos = document.querySelectorAll('.todo');
for (let todo of todos) {
if (todo.querySelector('input').checked == true) {
todo.remove();
}
}
updateRemaining();
}
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;
if (scope == 'all') {
todo.hidden = false;
} else if (scope == 'active') {
todo.hidden = checked;
} else if (scope == 'completed') {
todo.hidden = !checked;
}
}
}
</script>
</html>

12
step1-04/README.md Normal file
View File

@@ -0,0 +1,12 @@
## React quick demo
already done:
Button.css
scaffold app.tsx (my app)
write index.tsx
write index.html
demo 'hello world'
Write Counter Component with button
Demo Button, import into Component

6
step1-04/demo/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

3
step1-04/src/App.tsx → step1-04/demo/src/App.tsx
View File

@@ -6,7 +6,8 @@ export class App extends React.Component {
return (
<div>
<h2>My App</h2>
<Counter start={2} />
<Counter text="Chickens" />
<Counter text="Ducks" />
</div>
);
}

1
step1-04/src/components/Button.css → step1-04/demo/src/components/Button.css
View File

@@ -1,4 +1,5 @@
.Button {
display: block;
background: #0078d4;
color: white;
padding: 5px 10px;

0
step1-04/src/components/Button.tsx → step1-04/demo/src/components/Button.tsx
View File

12
step1-04/src/components/Counter.tsx → step1-04/demo/src/components/Counter.tsx
View File

@@ -1,23 +1,25 @@
import React from 'react';
import { Button } from './Button';
export class Counter extends React.Component<any, any> {
export class Counter extends React.Component<{ text: string }, { counter: number }> {
constructor(props) {
super(props);
this.state = {
counter: props.start
counter: 0
};
}
render() {
const { counter } = this.state;
const { text } = this.props;
return (
<div>
<span> {this.state.counter} </span>
{text}: {counter}
<Button
onClick={() => {
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: counter + 1 });
}}
>
Click Me
Click
</Button>
</div>
);

0
step1-04/src/index.tsx → step1-04/demo/src/index.tsx
View File

6
step1-04/final/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

14
step1-04/final/src/App.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Counter } from './components/Counter';
export class App extends React.Component {
render() {
return (
<div>
<h2>My App</h2>
<Counter text="Chickens" />
<Counter text="Ducks" />
</div>
);
}
}

15
step1-04/final/src/components/Button.css Normal file
View File

@@ -0,0 +1,15 @@
.Button {
display: block;
background: #0078d4;
color: white;
padding: 5px 10px;
outline: none;
border: none;
}
.Button:hover {
background: #005a9e;
}
.Button:active {
background: #004578;
}

10
step1-04/final/src/components/Button.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import './Button.css';
export const Button = props => {
return (
<button className="Button" onClick={props.onClick}>
{props.children}
</button>
);
};

27
step1-04/final/src/components/Counter.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { Button } from './Button';
export class Counter extends React.Component<{ text: string }, { counter: number }> {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
render() {
const { counter } = this.state;
const { text } = this.props;
return (
<div>
{text}: {counter}
<Button
onClick={() => {
this.setState({ counter: counter + 1 });
}}
>
Click
</Button>
</div>
);
}
}

4
step1-04/final/src/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />, document.getElementById("app"));

17
step1-04/index.html
View File

@@ -1,8 +1,15 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<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="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>

5
step1-05/README.md
View File

@@ -1,7 +1,12 @@
start with
style/index/index/failing imports
demo
Header
ListItem
exercise
Footer
List

9
step1-05/demo/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>

0
step1-05/src/App.tsx → step1-05/demo/src/App.tsx
View File

9
step1-05/demo/src/components/TodoFooter.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export const TodoFooter = (props: any) => {
return (
<footer>
<p>footer</p>
</footer>
);
};

7
step1-05/demo/src/components/TodoHeader.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export class TodoHeader extends React.Component {
render() {
return <div />;
}
}

7
step1-05/demo/src/components/TodoList.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export class TodoList extends React.Component<any, any> {
render() {
return <div />;
}
}

7
step1-05/demo/src/components/TodoListItem.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export class TodoListItem extends React.Component {
render() {
return <div />;
}
}

0
step1-05/src/index.tsx → step1-05/demo/src/index.tsx
View File

49
step1-05/demo/src/style.css Normal file
View File

@@ -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 .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

9
step1-05/exercise/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>

16
step1-05/exercise/src/App.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
}

9
step1-05/exercise/src/components/TodoFooter.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export const TodoFooter = (props: any) => {
return (
<footer>
<p>footer</p>
</footer>
);
};

0
step1-05/src/components/TodoHeader.tsx → step1-05/exercise/src/components/TodoHeader.tsx
View File

7
step1-05/exercise/src/components/TodoList.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export class TodoList extends React.Component<any, any> {
render() {
return <div />;
}
}

0
step1-05/src/components/TodoListItem.tsx → step1-05/exercise/src/components/TodoListItem.tsx
View File

4
step1-05/exercise/src/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./App";
ReactDOM.render(<TodoApp />, document.getElementById("app"));

49
step1-05/exercise/src/style.css Normal file
View File

@@ -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 .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

9
step1-05/final/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>

16
step1-05/final/src/App.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
}

0
step1-05/src/components/TodoFooter.tsx → step1-05/final/src/components/TodoFooter.tsx
View File

20
step1-05/final/src/components/TodoHeader.tsx Normal file
View File

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

0
step1-05/src/components/TodoList.tsx → step1-05/final/src/components/TodoList.tsx
View File

13
step1-05/final/src/components/TodoListItem.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from "react";
export class TodoListItem extends React.Component {
render() {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
}

4
step1-05/final/src/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./App";
ReactDOM.render(<TodoApp />, document.getElementById("app"));

49
step1-05/final/src/style.css Normal file
View File

@@ -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 .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

18
step1-05/index.html
View File

@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
<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="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>

1
step1-06/README.md
View File

@@ -6,6 +6,7 @@ demo
add state
pass to header and list
add filter class stuff
controlled components (header) with consolelog
exercise
update footer to include todos

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

@@ -8,7 +8,7 @@ export class TodoHeader extends React.Component<any, any> {
<header>
<h1>todos</h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
@@ -19,4 +19,12 @@ export class TodoHeader extends React.Component<any, any> {
</header>
);
}
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};
_onAdd = () => {
console.log(this.state.labelInput);
this.setState({ labelInput: '' });
};
}

23
step1-07/README.md Normal file
View File

@@ -0,0 +1,23 @@
already done
Types in header
TodoApp methods
filteredTodos in List
demo
Add Types to TodoApp
change 'filter' value
Types in List
pass complete to List - show types, change complete to boolean/, filter
add complete, pass to item (prop drilling)
TodoListItemProps, extend, id, complete (possible abstraction)
Demo how you can't add random things to TodoListItem or this.props now
add complete to List item
exercise
Add types to footer
Add onClick to button
Add types to header
Add setFilter to filter buttons
add 'addTodo' to onAdd function

23
step1-07/src/TodoApp.tsx
View File

@@ -2,10 +2,11 @@ import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todos, FilterTypes } from './TodoApp.types';
let index = 0;
export class TodoApp extends React.Component<any, any> {
export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
constructor(props) {
super(props);
this.state = {
@@ -25,6 +26,8 @@ export class TodoApp extends React.Component<any, any> {
);
}
// business logic
private _addTodo = label => {
const { todos } = this.state;
const id = index++;
@@ -34,15 +37,6 @@ export class TodoApp extends React.Component<any, any> {
});
};
private _remove = id => {
const newTodos = { ...this.state.todos };
delete newTodos[id];
this.setState({
todos: newTodos
});
};
private _complete = id => {
const newTodos = { ...this.state.todos };
newTodos[id].completed = !newTodos[id].completed;
@@ -52,15 +46,6 @@ export class TodoApp extends React.Component<any, any> {
});
};
private _edit = (id, label) => {
const newTodos = { ...this.state.todos };
newTodos[id] = { ...newTodos[id], label };
this.setState({
todos: newTodos
});
};
private _clear = () => {
const { todos } = this.state;
const newTodos = {};

2
webpack.config.js
View File

@@ -11,7 +11,7 @@ const nonWebpackedEntries = [];
function* getEntryPoint(step) {
if (step.includes('step') || step.includes('playground')) {
for (let prefix of ['', 'demo/', 'exercise/']) {
for (let prefix of ['', 'demo/', 'exercise/', 'final/']) {
for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
const entryRequest = `./${step}/${prefix}src/index${suffix}`;
if (fs.existsSync(entryRequest)) {