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

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>

49
step1-03/exercise/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;
}

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>