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

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>
);
};

20
step1-05/exercise/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>
);
}
}

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 />;
}
}

13
step1-05/exercise/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/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;
}