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

Merge branch 'master' of github.com:kenotron/bootcamp

Browse Source
This commit is contained in:
Ken
2019-02-15 15:01:20 -08:00
parent 15ba6828f6 5e64d11d22
commit 3059b8dd64
15 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/shared.css
View File

@@ -55,6 +55,7 @@ body {
flex-direction: column; flex-direction: column;
height: 148px; height: 148px;
justify-content: center; justify-content: center;
text-align: center;
padding: 20px; padding: 20px;
text-decoration: none; text-decoration: none;
width: 148px; width: 148px;

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

4
step1-00/css-demo.css → step1-00/css-demo/css-demo-finished.css
View File

@@ -1,5 +1,9 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */ /* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */ /* Targeting an HTML tag */
h1 { h1 {
/* Color name */ /* Color name */

29
step1-00/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="./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>

0
step1-00/css-demo/css-demo.css Normal file
View File

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

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

@@ -84,7 +84,7 @@
<h3>Figure</h3> <h3>Figure</h3>
<figure> <figure>
<img src="./fabric.jpg" alt="Fabric Logo" /> <img src="../assets/fabric.jpg" alt="Fabric Logo" />
<figcaption>The Fabric Logo</figcaption> <figcaption>The Fabric Logo</figcaption>
</figure> </figure>

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

5
step1-00/index.html
View File

@@ -7,8 +7,9 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div class="Container"> <div class="Container">
<ul class="Tiles"> <ul class="Tiles">
<li class="Tile"><a href="./html-demo.html" class="Tile-link">HTML Demo</a></li> <li class="Tile"><a href="./html-demo/html-demo.html" class="Tile-link">HTML Demo</a></li>
<li class="Tile"><a href="./css-demo.html" class="Tile-link">CSS 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>
</ul> </ul>
</div> </div>
</body> </body>

24
step1-01/index.html
View File

@@ -2,22 +2,26 @@
<html> <html>
<body> <body>
<h1>todos</h1> <h1>todos</h1>
<div> <div><input placeholder="add todo" /><button>Add</button></div>
<input/><button>Add</button>
</div>
<div> <div>
<button>all</button> <button>all</button>
<button>active</button> <button>active</button>
<button>completed</button> <button>completed</button>
</div> </div>
<ul> <ul>
<li><input type="checkbox" /> Todo 1</li> <li>
<li><input type="checkbox" /> Todo 2</li> <label><input type="checkbox" /> Todo 1</label>
<li><input type="checkbox" /> Todo 3</li> </li>
<li><input type="checkbox" /> Todo 4</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> </ul>
<div> <div><span>4 items left</span> <button>Clear Completed</button></div>
<span>4 items left</span> <button>Clear Completed</button>
</div>
</body> </body>
</html> </html>

2
step1-02/index.html
View File

@@ -3,7 +3,7 @@
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
<body> <body>
<h1>todos</h1> <h1>todos</h1>
<input class="textfield" /><button class="button add">Add</button> <input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
<div class="filter"> <div class="filter">
<button class="active">all</button> <button class="active">all</button>
<button>active</button> <button>active</button>

31
step1-03/index.html
View File

@@ -3,7 +3,7 @@
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
<body> <body>
<h1>todos</h1> <h1>todos</h1>
<input class="textfield" /> <input class="textfield" placeholder="add todo" />
<button onclick="addTodo()" class="button add"> <button onclick="addTodo()" class="button add">
Add Add
</button> </button>
@@ -33,38 +33,35 @@
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
function getValue(selector) { function getValue(selector) {
const inputValue = document.querySelector(selector).value; const inputValue = document.querySelector(selector).value;
return inputValue; return inputValue;
} }
function clearInput(selector) { function clearInput(selector) {
document.querySelector(selector).value = ""; document.querySelector(selector).value = '';
} }
function updateRemaining() { function updateRemaining() {
const remaining = document.querySelector(".remaining"); const remaining = document.querySelector('.remaining');
const todos = document.querySelectorAll(".todo").length; const todos = document.querySelectorAll('.todo').length;
remaining.innerText = todos; remaining.innerText = todos;
} }
function addTodo() { function addTodo() {
const todo = document.querySelector(".todo"); const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(); const newTodo = todo.cloneNode();
newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue( newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue('.textfield')}</label>`;
".textfield"
)}</label>`;
todo.parentElement.insertBefore(newTodo, todo); todo.parentElement.insertBefore(newTodo, todo);
clearInput(".textfield"); clearInput('.textfield');
updateRemaining(); updateRemaining();
} }
function clearCompleted() { function clearCompleted() {
const todos = document.querySelectorAll(".todo"); const todos = document.querySelectorAll('.todo');
for (let todo of todos) { for (let todo of todos) {
if (todo.querySelector("input").checked == true) { if (todo.querySelector('input').checked == true) {
todo.remove(); todo.remove();
} }
} }
@@ -74,15 +71,13 @@
function filter(scope, button) { function filter(scope, button) {
document.querySelector('.active').classList.remove('active'); document.querySelector('.active').classList.remove('active');
button.classList.add('active'); button.classList.add('active');
for (let todo of document.querySelectorAll(".todo")) { for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector("input").checked == true; const checked = todo.querySelector('input').checked == true;
if (scope == 'all') { if (scope == 'all') {
todo.hidden = false; todo.hidden = false;
} } else if (scope == 'active') {
else if ( scope == 'active' ){
todo.hidden = checked; todo.hidden = checked;
} } else if (scope == 'completed') {
else if ( scope == 'completed' ){
todo.hidden = !checked; todo.hidden = !checked;
} }
} }

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

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

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

@@ -6,7 +6,7 @@ export class TodoHeader extends React.Component<any, any> {
return ( return (
<div> <div>
<h1>todos</h1> <h1>todos</h1>
<input className="textfield" /> <input className="textfield" placeholder="add todo" />
<button className="button add">Add</button> <button className="button add">Add</button>
<div className="filter"> <div className="filter">
<button className={filter == 'all' ? 'active' : ''}>all</button> <button className={filter == 'all' ? 'active' : ''}>all</button>

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

@@ -18,7 +18,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
return ( return (
<div> <div>
<h1>todos</h1> <h1>todos</h1>
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button onClick={this._onAdd} className="button add"> <button onClick={this._onAdd} className="button add">
Add Add
</button> </button>