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

48
step1-03/index.html
View File

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

21
step1-03/style.css
View File

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