mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
remove docs
This commit is contained in:
Micah Godbolt
108
docs/README.md
108
docs/README.md
@@ -1,108 +0,0 @@
|
||||
# Frontend Bootcamp / Days in the Web
|
||||
|
||||
> 🚨🚨 This project is still a WIP. Issues and PRs are welcome for typos or inaccuracies. 🚨🚨
|
||||
|
||||
## Purpose of this workshop
|
||||
|
||||
This repo is the content for a two day workshop focused on introducing you to the fundamentals of web development. By the end of these two days you will have better understanding of how we write and deliver features on the web. You will also get some hands on experience using everything from HTML, CSS and JavaScript to React, Redux and UI Fabric as we build a working application together.
|
||||
|
||||
## Who is this workshop for
|
||||
|
||||
This workshop starts as a very high level introduction to the core principles of the web: HTML, CSS and JavaScript. This section is targeted at new and experienced developers alike. The second day dives into more complex topics such as Typescript and state management within an application. The examples should be accessible to anyone, but you will get more out of the day if you have some foundational experience in programing or web technologies.
|
||||
|
||||
## Web Workshop Setup
|
||||
|
||||
#### Computer Setup
|
||||
|
||||
- Current version of [Node/NPM](https://nodejs.org/en/)
|
||||
- Install [Git](https://git-scm.com/downloads)
|
||||
- [VSCode Editor](https://code.visualstudio.com)
|
||||
- Up to date browser with dev tools (some demos will be shown using Chrome)
|
||||
|
||||
### Getting Set Up
|
||||
|
||||
```bash
|
||||
$ git clone tba
|
||||
$ cd bootcamp
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
After the project loads in your browser, click on `Step 1 - HTML/CSS/JS`. Then go to the `Day 1: Step 1` page for the lesson and exercise instructions.
|
||||
|
||||
## Table Of Contents
|
||||
|
||||
### Day One
|
||||
|
||||
1. [Introduction to HTML, CSS and JavaScript](step1-01)
|
||||
- [HTML Demo](step1-01/html-demo)
|
||||
- [CSS Demo](step1-01/css-demo)
|
||||
- [JavaScript Demo](step1-01/js-demo)
|
||||
2. [Writing a Todo App: HTML and CSS](step1-02)
|
||||
- [Demo](step1-02/demo)
|
||||
- [Exercise](step1-02/exercise)
|
||||
3. [Writing a Todo App: JavaScript](step1-03)
|
||||
- [Demo](step1-03/demo)
|
||||
- [Exercise](step1-03/exercise)
|
||||
4. [React Introduction](step1-04)
|
||||
- [Demo](step1-04/demo)
|
||||
5. [Thinking in React: Building a Static Page](step1-05)
|
||||
- [Demo](step1-05/demo)
|
||||
- [Exercise](step1-05/exercise)
|
||||
6. [Thinking in React: State Driven UI](step1-06)
|
||||
- [Demo](step1-06/demo)
|
||||
- [Exercise](step1-06/exercise)
|
||||
7. [Thinking in React: UI Driven State](step1-07)
|
||||
- [Demo](step1-07/demo)
|
||||
- [Exercise](step1-07/exercise)
|
||||
|
||||
### Day Two
|
||||
|
||||
Demo and Exercises are combined
|
||||
|
||||
1. [Introduction to Typescript](step2-01)
|
||||
2. [UI Fabric Component Library](step2-02)
|
||||
3. [Theming and Styling](step2-03)
|
||||
4. [Testing with Jest](step2-04)
|
||||
5. [Redux: Reducers](step2-05)
|
||||
6. [Redux: Dispatching Actions and Examining State](step2-06)
|
||||
7. [Redux: Stores and Dispatch](step2-07)
|
||||
8. [Redux: Combining Reducers](step2-08)
|
||||
9. [Redux: Thunk Middleware](step2-09)
|
||||
|
||||
### Additional Resources
|
||||
|
||||
- [MDN Web Docs](https://developer.mozilla.org/en-US/)
|
||||
- [React Docs](https://reactjs.org/docs/getting-started.html)
|
||||
- [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
|
||||
|
||||
# Contributing
|
||||
|
||||
This project welcomes contributions and suggestions. Most contributions require you to agree to a
|
||||
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
|
||||
the rights to use your contribution. For details, visit https://cla.microsoft.com.
|
||||
|
||||
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
|
||||
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
|
||||
provided by the bot. You will only need to do this once across all repos using our CLA.
|
||||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
|
||||
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
|
||||
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|
||||
|
||||
# Legal Notices
|
||||
|
||||
Microsoft and any contributors grant you a license to the Microsoft documentation and other content
|
||||
in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode),
|
||||
see the [LICENSE](LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), see the
|
||||
[LICENSE-CODE](LICENSE-CODE) file.
|
||||
|
||||
Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation
|
||||
may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries.
|
||||
The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks.
|
||||
Microsoft's general trademark guidelines can be found at http://go.microsoft.com/fwlink/?LinkID=254653.
|
||||
|
||||
Privacy information can be found at https://privacy.microsoft.com/en-us/
|
||||
|
||||
Microsoft and any contributors reserve all other rights, whether under their respective copyrights, patents,
|
||||
or trademarks, whether by implication, estoppel or otherwise.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,99 +0,0 @@
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f3f2f1;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+);
|
||||
background-attachment: fixed;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 900px 740px;
|
||||
}
|
||||
|
||||
.Container {
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.Tiles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-gap: 20px;
|
||||
display: grid;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Tile {
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
|
||||
opacity: 0.96;
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
|
||||
.Tile:not(.Tile--intro):hover {
|
||||
box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.Tile-link {
|
||||
align-items: center;
|
||||
color: #323130;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 148px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Tile-link i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
color: #605e5c;
|
||||
}
|
||||
|
||||
.Tile--intro {
|
||||
grid-column: span 2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.Tile--intro h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
margin: 8px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Tile--intro p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Tile--intro a,
|
||||
.Tile--intro a:visited {
|
||||
color: #0078d4;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);
|
||||
@import url(./github.css);
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
flex: 1;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
#markdownReadme {
|
||||
flex: 1;
|
||||
background: #efefef;
|
||||
padding: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 15px;
|
||||
border: 1px #999 solid;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
margin: 15px 0;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
155
docs/index.html
155
docs/index.html
@@ -1,155 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
|
||||
<link rel="stylesheet" href="./assets/shared.css" />
|
||||
</head>
|
||||
<body class="ms-Fabric">
|
||||
<div class="Container">
|
||||
<h1>Frontend Bootcamp</h1>
|
||||
<a href="https://github.com/kenotron/bootcamp">github sources</a>
|
||||
</div>
|
||||
<div class="Container">
|
||||
<ul class="Tiles">
|
||||
<li class="Tile Tile--intro">
|
||||
<h2>Day 1</h2>
|
||||
Setup, HTML, CSS, Javascript and Intro to React
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<a target="_blank" href="./step1-01/" class="Tile-link">
|
||||
Step 1 <br />
|
||||
HTML/CSS/JS
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 2 <br />
|
||||
Todo HTML & CSS
|
||||
<div>
|
||||
<a target="_blank" href="./step1-02/demo/">demo</a> | <a target="_blank" href="./step1-01/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-02/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 3 <br />
|
||||
Todo JS
|
||||
<div>
|
||||
<a target="_blank" href="./step1-03/demo/">demo</a> | <a target="_blank" href="./step1-03/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-03/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 4 <br />
|
||||
React Intro
|
||||
<div>
|
||||
<a target="_blank" href="./step1-04/demo/">demo</a> |
|
||||
<a target="_blank" href="./step1-04/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 5 <br />
|
||||
React Components
|
||||
<div>
|
||||
<a target="_blank" href="./step1-05/demo/">demo</a> | <a target="_blank" href="./step1-05/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-05/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 6 <br />
|
||||
State Driven UI
|
||||
<div>
|
||||
<a target="_blank" href="./step1-06/demo/">demo</a> | <a target="_blank" href="./step1-06/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-06/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile-link">
|
||||
Step 7 <br />
|
||||
UI Driven State
|
||||
<div>
|
||||
<a target="_blank" href="./step1-07/demo/">demo</a> | <a target="_blank" href="./step1-07/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-07/final/">final</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="Container">
|
||||
<ul class="Tiles">
|
||||
<li class="Tile Tile--intro">
|
||||
<h2>Day 2</h2>
|
||||
UI Fabric and Redux Deep Dive
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 1<br />
|
||||
Typescript Basics
|
||||
<div><a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 2<br />
|
||||
UI Fabric
|
||||
<div><a target="_blank" href="./step2-02/demo/">demo</a> | <a target="_blank" href="./step2-02/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 3<br />
|
||||
Theming and Styling
|
||||
<div><a target="_blank" href="./step2-03/demo/">demo</a> | <a target="_blank" href="./step2-03/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 4<br />
|
||||
Testing with jest
|
||||
<div><a target="_blank" href="./step2-04/demo/">demo</a> | <a target="_blank" href="./step2-04/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 5<br />
|
||||
Redux: Reducers
|
||||
<div><a target="_blank" href="./step2-05/demo/">demo</a> | <a target="_blank" href="./step2-05/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 6<br />
|
||||
Redux: Dispatch Actions
|
||||
<div><a target="_blank" href="./step2-06/demo/">demo</a> | <a target="_blank" href="./step2-06/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 7<br />
|
||||
Redux: Connect to UI
|
||||
<div><a target="_blank" href="./step2-07/demo/">demo</a> | <a target="_blank" href="./step2-07/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 8<br />
|
||||
Redux: Combine Reducers
|
||||
<div><a target="_blank" href="./step2-08/demo/">demo</a> | <a target="_blank" href="./step2-08/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile">
|
||||
<div class="Tile-link">
|
||||
Step 9<br />
|
||||
Redux: Service Calls
|
||||
<div><a target="_blank" href="./step2-09/demo/">demo</a> | <a target="_blank" href="./step2-09/exercise/">exercise</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="Container">
|
||||
<ul class="Tiles">
|
||||
<li class="Tile Tile--intro">
|
||||
<h2>Playground</h2>
|
||||
</li>
|
||||
<li class="Tile"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
<!doctype html><html><body><div id="app"></div><script src="../playground/playground.js"></script><script src="../markdownReadme/markdownReadme.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,58 +0,0 @@
|
||||
import { action, GenericActionTypes, GenericAction, GenericActionLookup } from '../redux-utils/action';
|
||||
import { Dispatch } from 'redux';
|
||||
import { Store } from '../store';
|
||||
import uuid from 'uuid/v4';
|
||||
import * as todosService from '../service/todosService';
|
||||
|
||||
export const actions = {
|
||||
add: (label: string) => action('add', { id: uuid(), label }),
|
||||
remove: (id: string) => action('remove', { id }),
|
||||
edit: (id: string, label: string) => action('edit', { id, label }),
|
||||
complete: (id: string) => action('complete', { id }),
|
||||
clear: () => action('clear'),
|
||||
setFilter: (filter: string) => action('setFilter', { filter })
|
||||
};
|
||||
|
||||
export const actionsWithService = {
|
||||
add: (label: string) => {
|
||||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => {
|
||||
const addAction = actions.add(label);
|
||||
const id = addAction.id;
|
||||
dispatch(addAction);
|
||||
await todosService.add(id, getState().todos[id]);
|
||||
};
|
||||
},
|
||||
|
||||
edit: (id: string, label: string) => {
|
||||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => {
|
||||
dispatch(actions.edit(id, label));
|
||||
await todosService.edit(id, getState().todos[id]);
|
||||
};
|
||||
},
|
||||
|
||||
remove: (id: string) => {
|
||||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => {
|
||||
dispatch(actions.remove(id));
|
||||
await todosService.remove(id);
|
||||
};
|
||||
},
|
||||
|
||||
complete: (id: string) => {
|
||||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => {
|
||||
dispatch(actions.complete(id));
|
||||
await todosService.edit(id, getState().todos[id]);
|
||||
};
|
||||
},
|
||||
|
||||
clear: () => {
|
||||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => {
|
||||
dispatch(actions.clear());
|
||||
await todosService.editBulk(getState().todos);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export type ActionTypes = GenericActionTypes<typeof actions>;
|
||||
export type TodoAction = GenericAction<typeof actions>;
|
||||
export type TodoActionWithService = GenericAction<typeof actionsWithService>;
|
||||
export type TodoActionLookup = GenericActionLookup<typeof actions>;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Stack } from 'office-ui-fabric-react';
|
||||
import { TodoFooter } from './TodoFooter';
|
||||
import { TodoHeader } from './TodoHeader';
|
||||
import { TodoList } from './TodoList';
|
||||
|
||||
export const TodoApp = (props: {}) => (
|
||||
<Stack horizontalAlign="center">
|
||||
<Stack style={{ width: 400 }} gap={25}>
|
||||
<TodoHeader />
|
||||
<TodoList />
|
||||
<TodoFooter />
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Text } from '@uifabric/experiments';
|
||||
import { Stack } from 'office-ui-fabric-react';
|
||||
import { Store } from '../store';
|
||||
import { DefaultButton } from 'office-ui-fabric-react';
|
||||
import { actionsWithService } from '../actions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Redux Container
|
||||
export function mapStateToProps({ todos, filter }: Store) {
|
||||
return {
|
||||
todos,
|
||||
filter
|
||||
};
|
||||
}
|
||||
|
||||
export function mapDispatchToProps(dispatch: any) {
|
||||
return {
|
||||
clear: () => dispatch(actionsWithService.clear())
|
||||
};
|
||||
}
|
||||
|
||||
type TodoFooterProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
|
||||
|
||||
export const TodoFooter = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)((props: TodoFooterProps) => {
|
||||
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
|
||||
|
||||
return (
|
||||
<Stack horizontal horizontalAlign="space-between">
|
||||
<Text>
|
||||
{itemCount} item{itemCount > 1 ? 's' : ''} left
|
||||
</Text>
|
||||
<DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
|
||||
</Stack>
|
||||
);
|
||||
});
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Text } from '@uifabric/experiments';
|
||||
import { Pivot, PivotItem, TextField, Stack } from 'office-ui-fabric-react';
|
||||
import { FilterTypes, Store } from '../store';
|
||||
import { actionsWithService, actions } from '../actions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
function mapStateToProps({ todos, filter }: Store) {
|
||||
return {
|
||||
todos,
|
||||
filter
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any) {
|
||||
return {
|
||||
add: (label: string) => dispatch(actionsWithService.add(label)),
|
||||
remove: (id: string) => dispatch(actionsWithService.remove(id)),
|
||||
setFilter: (filter: FilterTypes) => dispatch(actions.setFilter(filter))
|
||||
};
|
||||
}
|
||||
|
||||
type TodoHeaderProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
|
||||
|
||||
interface TodoHeaderState {
|
||||
labelInput: string;
|
||||
}
|
||||
|
||||
class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
|
||||
constructor(props: TodoHeaderProps) {
|
||||
super(props);
|
||||
this.state = { labelInput: undefined };
|
||||
}
|
||||
|
||||
onKeyPress = (evt: React.KeyboardEvent) => {
|
||||
if (evt.charCode === 13) {
|
||||
this.props.add(this.state.labelInput);
|
||||
this.setState({ labelInput: undefined });
|
||||
}
|
||||
};
|
||||
|
||||
onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
|
||||
this.setState({ labelInput: newValue });
|
||||
};
|
||||
|
||||
onFilter = (item: PivotItem) => {
|
||||
this.props.setFilter(item.props.headerText as FilterTypes);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Stack>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
</Stack>
|
||||
|
||||
<TextField
|
||||
placeholder="What needs to be done?"
|
||||
value={this.state.labelInput}
|
||||
onChange={this.onChange}
|
||||
onKeyPress={this.onKeyPress}
|
||||
/>
|
||||
|
||||
<Pivot onLinkClick={this.onFilter}>
|
||||
<PivotItem headerText="all" />
|
||||
<PivotItem headerText="active" />
|
||||
<PivotItem headerText="completed" />
|
||||
</Pivot>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Hook up the Redux state and dispatches
|
||||
const component = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TodoHeader);
|
||||
|
||||
export { component as TodoHeader };
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Stack } from 'office-ui-fabric-react';
|
||||
import { TodoListItem } from './TodoListItem';
|
||||
import { Store } from '../store';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
function mapStateToProps({ todos, filter }: Store) {
|
||||
return {
|
||||
todos,
|
||||
filter
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any) {}
|
||||
|
||||
type TodoListProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
|
||||
|
||||
class TodoList extends React.Component<TodoListProps> {
|
||||
render() {
|
||||
const { filter, todos } = this.props;
|
||||
const filteredTodos = Object.keys(todos).filter(id => {
|
||||
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
{filteredTodos.map(id => (
|
||||
<TodoListItem key={id} id={id} />
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const component = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TodoList);
|
||||
|
||||
export { component as TodoList };
|
||||
@@ -1,104 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Stack, Checkbox, IconButton, TextField } from 'office-ui-fabric-react';
|
||||
import { mergeStyles } from '@uifabric/styling';
|
||||
import { Store } from '../store';
|
||||
import { actionsWithService } from '../actions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
function mapStateToProps({ todos }: Store) {
|
||||
return {
|
||||
todos
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any) {
|
||||
return {
|
||||
remove: (id: string) => dispatch(actionsWithService.remove(id)),
|
||||
complete: (id: string) => dispatch(actionsWithService.complete(id)),
|
||||
edit: (id: string, label: string) => dispatch(actionsWithService.edit(id, label))
|
||||
};
|
||||
}
|
||||
|
||||
type TodoListItemProps = { id: string } & ReturnType<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>;
|
||||
|
||||
interface TodoListItemState {
|
||||
editing: boolean;
|
||||
editLabel: string;
|
||||
}
|
||||
|
||||
const className = mergeStyles({
|
||||
selectors: {
|
||||
'.clearButton': {
|
||||
visibility: 'hidden'
|
||||
},
|
||||
'&:hover .clearButton': {
|
||||
visibility: 'visible'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
constructor(props: TodoListItemProps) {
|
||||
super(props);
|
||||
this.state = { editing: false, editLabel: undefined };
|
||||
}
|
||||
|
||||
onEdit = () => {
|
||||
const { todos, id } = this.props;
|
||||
const { label } = todos[id];
|
||||
|
||||
this.setState(prevState => ({
|
||||
editing: true,
|
||||
editLabel: prevState.editLabel || label
|
||||
}));
|
||||
};
|
||||
|
||||
onDoneEdit = () => {
|
||||
this.props.edit(this.props.id, this.state.editLabel);
|
||||
this.setState(prevState => ({
|
||||
editing: false,
|
||||
editLabel: undefined
|
||||
}));
|
||||
};
|
||||
|
||||
onKeyDown = (evt: React.KeyboardEvent) => {
|
||||
if (evt.which === 13) {
|
||||
this.onDoneEdit();
|
||||
}
|
||||
};
|
||||
|
||||
onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
|
||||
this.setState({ editLabel: newValue });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { todos, id, complete, remove } = this.props;
|
||||
const item = todos[id];
|
||||
|
||||
return (
|
||||
<Stack horizontal className={className} verticalAlign="center" horizontalAlign="space-between">
|
||||
{!this.state.editing && (
|
||||
<>
|
||||
<Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
|
||||
<div>
|
||||
<IconButton iconProps={{ iconName: 'Edit' }} className="clearButton" onClick={this.onEdit} />
|
||||
<IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" onClick={() => remove(id)} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{this.state.editing && <TextField value={this.state.editLabel} onChange={this.onChange} onKeyPress={this.onKeyDown} />}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const component = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(TodoListItem);
|
||||
|
||||
export { component as TodoListItem };
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { createStore, applyMiddleware, compose } from 'redux';
|
||||
import { Provider } from 'react-redux';
|
||||
import { reducer } from './reducers';
|
||||
import { TodoApp } from './components/TodoApp';
|
||||
import { initializeIcons } from '@uifabric/icons';
|
||||
import thunk from 'redux-thunk';
|
||||
import * as todosService from './service/todosService';
|
||||
import { FilterTypes } from './store';
|
||||
|
||||
declare var window: any;
|
||||
|
||||
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
|
||||
|
||||
// For preloading store
|
||||
initializeIcons();
|
||||
|
||||
(async () => {
|
||||
const preloadStore = {
|
||||
todos: await todosService.getAll(),
|
||||
filter: 'all' as FilterTypes
|
||||
};
|
||||
|
||||
const store = createStore(reducer, preloadStore, composeEnhancers(applyMiddleware(thunk)));
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<TodoApp />
|
||||
</Provider>,
|
||||
document.getElementById('app')
|
||||
);
|
||||
})();
|
||||
|
||||
// For Synchronous Case
|
||||
// const store = createStore(reducer, { todos: {}, filter: 'all' }, composeEnhancers(applyMiddleware(thunk)));
|
||||
@@ -1,10 +0,0 @@
|
||||
import { reducer } from '../index';
|
||||
|
||||
describe('reducers', () => {
|
||||
it('should add item to the list', () => {
|
||||
const newStore = reducer({ todos: {}, filter: 'all' }, { type: 'add', label: 'hello' });
|
||||
const keys = Object.keys(newStore.todos);
|
||||
expect(keys.length).toBe(1);
|
||||
expect(newStore.todos[keys[0]].label).toBe('hello');
|
||||
});
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
import { ActionTypes, TodoActionLookup, actions } from '../actions';
|
||||
import { createGenericReducer, HandlerMap, ImmerReducer } from '../redux-utils/reducer';
|
||||
import { Reducer } from 'redux';
|
||||
|
||||
export function createReducer<T, AM extends ActionTypes | never = never>(
|
||||
initialState: T,
|
||||
handlerOrMap: HandlerMap<T, typeof actions> | ImmerReducer<T, TodoActionLookup[AM]>
|
||||
): Reducer<T> {
|
||||
return createGenericReducer<T, typeof actions, AM>(initialState, handlerOrMap);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { createReducer } from './createReducer';
|
||||
import { Store, FilterTypes } from '../store';
|
||||
import { combineReducers } from 'redux';
|
||||
|
||||
export const reducer = combineReducers<Store>({
|
||||
todos: createReducer<Store['todos']>(
|
||||
{},
|
||||
{
|
||||
add(draft, action) {
|
||||
draft[action.id] = { label: action.label, completed: false };
|
||||
return draft;
|
||||
},
|
||||
|
||||
remove(draft, action) {
|
||||
delete draft[action.id];
|
||||
return draft;
|
||||
},
|
||||
|
||||
complete(draft, action) {
|
||||
draft[action.id].completed = !draft[action.id].completed;
|
||||
return draft;
|
||||
},
|
||||
|
||||
clear(draft) {
|
||||
Object.keys(draft).forEach(id => {
|
||||
if (draft[id].completed) {
|
||||
delete draft[id];
|
||||
}
|
||||
});
|
||||
return draft;
|
||||
},
|
||||
|
||||
edit(draft, action) {
|
||||
draft[action.id].label = action.label;
|
||||
return draft;
|
||||
}
|
||||
}
|
||||
),
|
||||
filter: createReducer<Store['filter'], 'setFilter'>('all', (draft, action) => {
|
||||
return action.filter as FilterTypes;
|
||||
})
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Action } from 'redux';
|
||||
|
||||
type ActionWithPayload<T, P> = Action<T> & P;
|
||||
|
||||
export function action<T extends string>(type: T): Action<T>;
|
||||
export function action<T extends string, P>(type: T, payload: P): ActionWithPayload<T, P>;
|
||||
export function action<T extends string, P>(type: T, payload?: P) {
|
||||
return { type, ...payload };
|
||||
}
|
||||
|
||||
export type GenericActionMapping<A> = { [somekey in keyof A]: (...args: any) => Action<any> | ActionWithPayload<any, any> };
|
||||
export type GenericActionTypes<A extends GenericActionMapping<A>> = ReturnType<A[keyof A]>['type'];
|
||||
export type GenericAction<A extends GenericActionMapping<A>> = ReturnType<A[GenericActionTypes<A>]>;
|
||||
export type GenericActionLookup<A extends GenericActionMapping<A>> = { [a in GenericActionTypes<A>]: ReturnType<A[a]> };
|
||||
@@ -1,34 +0,0 @@
|
||||
import { Reducer } from 'redux';
|
||||
import { Draft, produce } from 'immer';
|
||||
import { GenericActionLookup, GenericActionMapping } from './action';
|
||||
|
||||
export type ImmerReducer<T, A> = (state: Draft<T>, action?: A) => T;
|
||||
export type HandlerMap<T, A extends GenericActionMapping<A>> = {
|
||||
[actionType in keyof A]?: ImmerReducer<T, GenericActionLookup<A>[actionType]>
|
||||
};
|
||||
|
||||
function isHandlerFunction<T, A extends GenericActionMapping<A>>(
|
||||
handlerOrMap: HandlerMap<T, A> | ImmerReducer<T, A>
|
||||
): handlerOrMap is ImmerReducer<T, A> {
|
||||
if (typeof handlerOrMap === 'function') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function createGenericReducer<T, A extends GenericActionMapping<A>, AM = keyof GenericActionMapping<A>>(
|
||||
initialState: T,
|
||||
handlerOrMap: HandlerMap<T, A> | ImmerReducer<T, GenericActionLookup<A>[AM]>
|
||||
): Reducer<T> {
|
||||
return function reducer(state = initialState, action: GenericActionLookup<A>[AM]): T {
|
||||
if (isHandlerFunction(handlerOrMap)) {
|
||||
return produce(state, draft => handlerOrMap(draft, action as GenericActionLookup<A>[AM]));
|
||||
} else if (handlerOrMap.hasOwnProperty(action.type)) {
|
||||
const handler = (handlerOrMap as any)[action.type] as ImmerReducer<T, GenericActionLookup<A>[AM]>;
|
||||
return produce(state, draft => handler(draft, action));
|
||||
} else {
|
||||
return state;
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { TodoItem, Store } from '../store';
|
||||
const HOST = 'http://localhost:3000';
|
||||
|
||||
export async function add(id: string, todo: TodoItem) {
|
||||
const response = await fetch(`${HOST}/todos/${id}`, {
|
||||
method: 'post',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(todo)
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
export async function edit(id: string, todo: TodoItem) {
|
||||
const response = await fetch(`${HOST}/todos/${id}`, {
|
||||
method: 'put',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(todo)
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
export async function remove(id: string) {
|
||||
const response = await fetch(`${HOST}/todos/${id}`, {
|
||||
method: 'delete'
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
export async function getAll() {
|
||||
const response = await fetch(`${HOST}/todos`, {
|
||||
method: 'get'
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
export async function editBulk(todos: Store['todos']) {
|
||||
const response = await fetch(`${HOST}/todos`, {
|
||||
method: 'post',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(todos)
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
export type FilterTypes = 'all' | 'active' | 'completed';
|
||||
|
||||
export interface TodoItem {
|
||||
label: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
export interface Store {
|
||||
todos: {
|
||||
[id: string]: TodoItem;
|
||||
};
|
||||
|
||||
filter: FilterTypes;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
## How the Web Works
|
||||
|
||||
A simple web page is rendered on the screen via the following steps
|
||||
|
||||
> There are many sub steps in this process
|
||||
> but these are the highlights
|
||||
|
||||
1. You instruct the browser which webpage you'd like to see
|
||||
2. The browser looks up the site in a 'DNS Server'
|
||||
- This is like a big phone book for website server addresses
|
||||
3. The browser asks the server to send over a specific page of the website `developer.mozilla.org/filename.html` or `developer.mozilla.org`
|
||||
- If asked for a 'root' level address, most servers will return `'root'/index.html`
|
||||
4. The server sends the HTML file back to the browser
|
||||
5. The browser starts to read the HTML file from the top to the bottom, \*stopping any time that additional resources are required
|
||||
- CSS stylesheets
|
||||
- JavaScript files
|
||||
- Fonts
|
||||
- Images
|
||||
6. Browser makes requests for additional resources
|
||||
- Those resources might request even more files
|
||||
7. Once the browser gets to the bottom of the page it can start rendering, and then load the page
|
||||
|
||||
|
||||
|
||||
|
||||
## Next Step
|
||||
|
||||
[HTML Demo](./html-demo)
|
||||
@@ -1,145 +0,0 @@
|
||||
## CSS Demo
|
||||
|
||||
### CSS Properties
|
||||
|
||||
Now that we've gone over adding HTML tags to the page, lets cover adding styles to those tags. We can do quite a lot with styles! We can change:
|
||||
|
||||
- Typography
|
||||
- Colors
|
||||
- Appearance (Corners, Borders, Decorations)
|
||||
- Layout
|
||||
- Position
|
||||
- Inline vs Block
|
||||
- Animations
|
||||
- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
|
||||
|
||||
CSS is always applied in `property: value` pairs, like `background: blue;` and are terminated with a semi colon.
|
||||
|
||||
### Applying CSS to an HTML file
|
||||
|
||||
CSS can be applied to HTML tags in three different ways.
|
||||
|
||||
1. Inline - Styles are applied directly to the HTML tag
|
||||
- `<div style="background: blue; color: white;">Hello </div>`
|
||||
2. Via a `<style>` tag in the HTML page
|
||||
3. Through an externally loaded CSS file
|
||||
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
|
||||
|
||||
### Targeting specific HTML tags
|
||||
|
||||
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. When selectors are combined with CSS styles, we call this a ruleset.
|
||||
|
||||
CSS rulesets take on the following form:
|
||||
|
||||
```css
|
||||
selector1,
|
||||
selector2 {
|
||||
property1: value1;
|
||||
property2: value2;
|
||||
}
|
||||
```
|
||||
|
||||
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
|
||||
|
||||
<img src="../../assets/css-syntax.png"/>
|
||||
|
||||
Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
|
||||
|
||||
Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
|
||||
|
||||
```css
|
||||
/* Targeting the entire page */
|
||||
body {
|
||||
font: 1.2em sans-serif;
|
||||
}
|
||||
|
||||
/* Targeting an HTML tag */
|
||||
h1 {
|
||||
/* Color name */
|
||||
color: black;
|
||||
|
||||
/* 6 digit hex */
|
||||
background: #ababab;
|
||||
|
||||
/* Margin: property for each side */
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
/* Shorthand: Padding applies to all sides */
|
||||
padding: 10px;
|
||||
|
||||
/* 3 digit hex and border shorthand */
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Overriding inherited styles */
|
||||
span {
|
||||
color: #004578;
|
||||
}
|
||||
|
||||
/* Targeting a class name */
|
||||
.tiles {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Decendant selector */
|
||||
.tiles img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Direct decendant selector */
|
||||
.tiles > div {
|
||||
/* rgb colors */
|
||||
background: rgb(10, 10, 10);
|
||||
color: white;
|
||||
flex-basis: 100%;
|
||||
/* Longhand goes clockwise from top
|
||||
10px - all
|
||||
10px 20px - top/bottom left/right
|
||||
10px 20px 15px - top left/right bottom
|
||||
*/
|
||||
padding: 10px 20px 15px;
|
||||
margin: 10px 20px 10px 0;
|
||||
}
|
||||
|
||||
/* Qualified selector */
|
||||
div.links {
|
||||
background: #004578;
|
||||
}
|
||||
|
||||
/* Style inheritance only works for unstyled elements */
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Pseudo hover selector */
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Sibling selectors */
|
||||
a ~ a {
|
||||
/* Changing elements from inline to block */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Positional Pseudo Selectors */
|
||||
.tiles > div:last-child {
|
||||
/* overrides margin-right but leaves other margins alone */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ID selector */
|
||||
#contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Attribute selector */
|
||||
input[type='submit'] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
```
|
||||
## Next Step
|
||||
|
||||
[JavaScript Demo](../js-demo)
|
||||
@@ -1,91 +0,0 @@
|
||||
/* Targeting an HTML tag */
|
||||
body {
|
||||
font: 1.2em sans-serif;
|
||||
}
|
||||
|
||||
/* Targeting an HTML tag */
|
||||
h1 {
|
||||
/* Color name */
|
||||
color: black;
|
||||
|
||||
/* 6 digit hex */
|
||||
background: #ababab;
|
||||
|
||||
/* Margin: property for each side */
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
/* Shorthand: Padding applies to all sides */
|
||||
padding: 10px;
|
||||
|
||||
/* 3 digit hex and border shorthand */
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Overriding inherited styles */
|
||||
span {
|
||||
color: #004578;
|
||||
}
|
||||
|
||||
/* Targeting a class name */
|
||||
.tiles {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Decendant selector */
|
||||
.tiles img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Direct decendant selector */
|
||||
.tiles > div {
|
||||
/* rgb colors */
|
||||
background: rgb(10, 10, 10);
|
||||
color: white;
|
||||
flex-basis: 100%;
|
||||
/* Longhand goes clockwise from top
|
||||
10px - all
|
||||
10px 20px - top/bottom left/right
|
||||
10px 20px 15px - top left/right bottom
|
||||
*/
|
||||
padding: 10px 20px 15px;
|
||||
margin: 10px 20px 10px 0;
|
||||
}
|
||||
|
||||
/* Qualified selector */
|
||||
div.links {
|
||||
background: #004578;
|
||||
}
|
||||
|
||||
/* Style inheritance only works for unstyled elements */
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Pseudo hover selector */
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Sibling selectors */
|
||||
a ~ a {
|
||||
/* Changing elements from inline to block */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Positional Pseudo Selectors */
|
||||
.tiles > div:last-child {
|
||||
/* overrides margin-right but leaves other margins alone */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ID selector */
|
||||
#contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Attribute selector */
|
||||
input[type='submit'] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./css-demo-final.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="../../assets/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>
|
||||
@@ -1,29 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./css-demo.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="../../assets/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>
|
||||
@@ -1,76 +0,0 @@
|
||||
## HTML Demo
|
||||
|
||||
The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
|
||||
To learn more about each element, click on the elements below.
|
||||
|
||||
### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
|
||||
|
||||
- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
|
||||
- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
|
||||
- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
|
||||
- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
|
||||
- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
|
||||
|
||||
### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
|
||||
|
||||
- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
|
||||
- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
|
||||
- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
|
||||
- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
|
||||
- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
|
||||
- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
|
||||
- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
|
||||
- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
|
||||
|
||||
### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
|
||||
|
||||
- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
|
||||
- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
|
||||
- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
|
||||
- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
|
||||
- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
|
||||
- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
|
||||
|
||||
### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
|
||||
|
||||
- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
|
||||
- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
|
||||
- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
|
||||
- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
|
||||
- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
|
||||
- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
|
||||
- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
|
||||
- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
|
||||
|
||||
### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
|
||||
|
||||
- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
|
||||
|
||||
### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
|
||||
|
||||
- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
|
||||
- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
|
||||
- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
|
||||
- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
|
||||
- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
|
||||
- [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
|
||||
|
||||
### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
|
||||
|
||||
- [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
|
||||
- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
|
||||
- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
|
||||
- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
|
||||
- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
|
||||
- text
|
||||
- checkbox
|
||||
- color
|
||||
- date
|
||||
- radio
|
||||
- submit
|
||||
|
||||
|
||||
## Next Step
|
||||
|
||||
[CSS Demo](../css-demo)
|
||||
@@ -1,222 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Intro to HTML</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
|
||||
<style>
|
||||
hr {
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
|
||||
<p>head, title, link, style</p>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
|
||||
|
||||
<div>
|
||||
<header>
|
||||
<h1>My Website H1 inside Header</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="page1">About Me</a></li>
|
||||
<li><a href="page2">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>My Blog H2 inside Main</h2>
|
||||
<article>
|
||||
<header><h3>Blog Title 1 H3 in Article Header</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
|
||||
consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga!
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<header><h3>Blog Title 2</h3></header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, rem.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>Copyright 2019 in the Footer</footer>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
|
||||
|
||||
<h3>Div</h3>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem
|
||||
modi, numquam laborum accusamus adipisci eius excepturi doloremque vero.
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error
|
||||
officia accusantium reiciendis, vero perspiciatis. Incidunt numquam enim deserunt, velit earum totam veritatis.
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio,
|
||||
aliquid libero eaque nihil provident nemo est adipisci repellendus nisi numquam?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Paragraph</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel
|
||||
eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit
|
||||
enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?
|
||||
</p>
|
||||
|
||||
<h3>Ordered List</h3>
|
||||
<ol>
|
||||
<li>Ordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ol>
|
||||
|
||||
<h3>Unordered List</h3>
|
||||
<ul>
|
||||
<li>Unordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
|
||||
<h3>Pre</h3>
|
||||
<pre>
|
||||
// This is a pre tag -- It respects spacing and tabs
|
||||
// But actual code still needs to be escaped
|
||||
<ul>
|
||||
<li>Unordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2>
|
||||
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a>
|
||||
</h2>
|
||||
|
||||
<h3>Anchor tag, br and span</h3>
|
||||
|
||||
<a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a><br />
|
||||
<a target="_blank" href="mailto:m.bluth@example.com">Email</a> (no <br>) <a target="_blank" href="tel:+123456789">Phone</a
|
||||
><br />
|
||||
|
||||
<h3>Inline style tags</h3>
|
||||
<p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>
|
||||
|
||||
<h3>Image tag</h3>
|
||||
<div>
|
||||
<img src="../../assets/fabric.jpg" width="100" />
|
||||
<img src="../../assets/fabric.jpg" width="50" />
|
||||
<img src="../../assets/fabric.jpg" width="150" />
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">The table header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
<td>with two columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Another table row</td>
|
||||
<td>with two columns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
|
||||
|
||||
<form action="" method="get" class="form-example">
|
||||
<div>
|
||||
<label for="name">Enter your name: </label>
|
||||
<input type="text" name="name" id="name" required />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<input type="checkbox" id="option1" name="option1" checked />
|
||||
<label for="option1">Option1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="option2" name="option2" />
|
||||
<label for="option2">Option2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color1" name="color1" value="#e66465" />
|
||||
<label for="color1">Color1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color2" name="color2" value="#f6b73c" />
|
||||
<label for="color2">Color2</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="start">Start date:</label>
|
||||
|
||||
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
|
||||
<label for="Radio1">Radio1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio2" name="radios" value="radio2" />
|
||||
<label for="radio2">Radio2</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio3" name="radios" value="radio3" />
|
||||
<label for="radio3">Radio3</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pet-select">Choose a pet:</label>
|
||||
|
||||
<select id="pet-select">
|
||||
<option value="">--Please choose an option--</option>
|
||||
<option value="dog">Dog</option>
|
||||
<option value="cat">Cat</option>
|
||||
<option value="hamster">Hamster</option>
|
||||
<option value="parrot">Parrot</option>
|
||||
<option value="spider">Spider</option>
|
||||
<option value="goldfish">Goldfish</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Subscribe!" />
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
aside {
|
||||
float: right;
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
form > div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: #0078d4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<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="./html-demo/html-demo.html" class="Tile-link">HTML 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-final.html" class="Tile-link">CSS Demo Final</a></li>
|
||||
<li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
|
||||
<li class="Tile"><a href="./js-demo/js-demo-final.html" class="Tile-link">JS Demo Final</a></li>
|
||||
</ul>
|
||||
<div id="markdownReadme"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,127 +0,0 @@
|
||||
## JavaScript Demo
|
||||
|
||||
It's entirely possible to create a website with nothing but HTML and CSS, but as soon as you want user interaction other than links and forms, you'll need to reach for JavaScript, the scripting language of the web. Fortunately, JavaScript has grown up quite a bit since it was introduced in the 90s, and now runs just about everything: web applications, mobile applications, native applications, servers, robots and rocket ships.
|
||||
|
||||
In this demo we are going to cover a few of the core basics of the language that will help us when we start writing our TODO app. At the end of this demo we will be able to display the number of the letter 'a's in our email input. Here's the markup we're working with:
|
||||
|
||||
```html
|
||||
<div id="contact-form">
|
||||
<label>Email</label><input class="email" type="email" />
|
||||
<input class="submit" value="Submit" type="submit" />
|
||||
</div>
|
||||
```
|
||||
|
||||
By the end of the demo we'll have covered the following:
|
||||
|
||||
- Variables
|
||||
- Functions
|
||||
- Conditionals
|
||||
- Loops
|
||||
- Interacting with the DOM (Document Object Model)
|
||||
|
||||
### Variables
|
||||
|
||||
We can create a new variable with the keywords `var, let, const` and use them within our application. These variables can contain one of the following types of values:
|
||||
|
||||
1. boolean
|
||||
2. number
|
||||
3. string
|
||||
4. array
|
||||
5. object
|
||||
|
||||
> Javascript is a loosly typed language so if start a variable off as a number `let myVar = 0`, you can change it to a string by simply writing `myVar = 'hello'` without any trouble.
|
||||
|
||||
Lets start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
|
||||
|
||||
```js
|
||||
const match = 'a';
|
||||
let matches = 0;
|
||||
```
|
||||
|
||||
### Functions
|
||||
|
||||
Functions are resuable pieces of functionality. Functions can take inputs (parameters), and return values. Functions can be called from within your program, from within other functions, or invoked from within the DOM itself.
|
||||
|
||||
In our example we'll create a function called displayMatches (camelCase is typical for functions) and we'll invoke this function anytime that our submit button is clicked. For now we'll simply call a console log (a function that prints values to the browser console);
|
||||
|
||||
```html
|
||||
<input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
|
||||
```
|
||||
|
||||
```js
|
||||
function displayMatches() {
|
||||
console.log("I'm Clicked");
|
||||
}
|
||||
```
|
||||
|
||||
### Iteration
|
||||
|
||||
Next up we are going to iterate through a string of text, and find all of the 'a' characters in the list. We don't yet have that string, so we'll use a fill in for now. Once we have our `email` variable we can loop over it with the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) loop syntax.
|
||||
|
||||
```js
|
||||
function displayMatches() {
|
||||
const text = 'abcda';
|
||||
for (let letter of text) {
|
||||
console.log(letter);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Conditionals
|
||||
|
||||
Next we want to compare each `letter` with our `match` value, and if they are the same, we will increment our matches variable. Notice that `match` is a const and `matches` is a let because we expected `matches` to change over time. Remember that `letter = match` would set the `letter` variable to the value in `match`, so we use `==`, equality operator, and `===` strict equality operator, to make these comparisons.
|
||||
|
||||
> ("1" == 1) is true whereas ("1" === 1) would be false
|
||||
|
||||
```js
|
||||
function displayMatches() {
|
||||
const text = 'abcda';
|
||||
for (let letter of text) {
|
||||
if (letter === match) {
|
||||
matches++;
|
||||
}
|
||||
}
|
||||
console.log(matches);
|
||||
}
|
||||
```
|
||||
|
||||
### Interacting with the DOM
|
||||
|
||||
Now that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browsers built in functions.
|
||||
|
||||
First we need to get a reference to the email field in our app. To do this, I've added an `id` to the input, and we will call one of JavaScripts oldest methods (IE 5.5), getElementyId, which we find on the browser provided `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable.
|
||||
|
||||
```js
|
||||
const email = document.getElementById('email');
|
||||
console.log(email);
|
||||
```
|
||||
|
||||
And since what we're actually after is the "value" of the input field, we can set our `text` variable to the string assigned to the "value" key. To see this in action. Right click on the console message created by the code above, choose "save as variable" and then type `variableName.value`.
|
||||
|
||||
```js
|
||||
const text = email.value;
|
||||
```
|
||||
|
||||
#### Returning the values to the DOM
|
||||
|
||||
Now that we've read values from the DOM, and fed that into our matching logic, we are ready to return that number to our app. To do this we first need to grab a reference to our submit button, and since this button has no `id` we are going to use the more modern (IE8) `querySelector` to get it. This function takes any valid CSS selector and returns the first found match.
|
||||
|
||||
```js
|
||||
const submit = document.querySelector('.submit');
|
||||
```
|
||||
|
||||
Now that we have a reference to the submit input, we can set its value to a new value.
|
||||
|
||||
```js
|
||||
submit.value = matches + ' matches';
|
||||
```
|
||||
|
||||
If you are curious, we could have done this in a single line by chaining these methods and keys together:
|
||||
|
||||
```js
|
||||
document.querySelector('.submit').value = matches + ' matches';
|
||||
```
|
||||
|
||||
## Next Step
|
||||
|
||||
[Start our Todo App](../../step1-02/demo/)
|
||||
@@ -1,45 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css-demo/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="../../assets/fabric.jpg" width="100" alt="fabric logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Contact Us</h2>
|
||||
<div id="contact-form">
|
||||
<label>Email</label><input id="email" type="email" />
|
||||
<input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const match = 'a';
|
||||
let matches = 0;
|
||||
|
||||
function displayMatches() {
|
||||
const email = document.getElementById('email');
|
||||
const text = email.value;
|
||||
for (let letter of text) {
|
||||
if (letter === match) {
|
||||
matches++;
|
||||
}
|
||||
}
|
||||
const submit = document.querySelector('.submit');
|
||||
submit.value = matches + ' matches';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../css-demo/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="../../assets/fabric.jpg" width="100" alt="fabric logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Contact Us</h2>
|
||||
<div id="contact-form">
|
||||
<label>Email</label><input class="email" type="email" />
|
||||
<input class="submit" value="Submit" type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script></script>
|
||||
</html>
|
||||
@@ -1,82 +0,0 @@
|
||||
## HTML and CSS
|
||||
|
||||
Every website, application, form or component starts with markup. The HTML will change over time as you develop, but a first pass helps you understand the UI you are trying to build.
|
||||
|
||||
## Demo
|
||||
|
||||
In this exercise we will scaffold out some HTML for out Todo app, and add some basic styling to it.
|
||||
|
||||
### Page scaffold
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
1. The DOCTYPE tells the browser that this file is written in modern HTML.
|
||||
2. The HTML tag wraps the entire page, and is the page root. Nothing is placed outside of those tags. Attributes can be set on HTML
|
||||
3. Head will contain all of the page's meta data, in this case a link to our css file
|
||||
4. Body is where all of the visible content should be placed.
|
||||
|
||||
### Content Sectioning
|
||||
|
||||
As we saw in the previous demo, HTML elements can be used to describe different content sections of the applications. Let's add `header`, `main` and `footer`, as well as populate the header with an `h1`, addTodo div, and `nav` for our filters.
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1></h1>
|
||||
<div class="addTodo"></div>
|
||||
<nav></nav>
|
||||
<header>
|
||||
<main class="filter"></main>
|
||||
<footer></footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
> Note that a `form` element would have been more semantic than a `div`, but we aren't using this form to POST to a server, so for this example a div is easier to use.
|
||||
|
||||
### Updating the header
|
||||
|
||||
The header of our page is where most of the action is going to happen. First, lets give our page a title, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div.
|
||||
|
||||
```html
|
||||
<input class="textfield" placeholder="add todo" /> <button class="submit">Add</button>
|
||||
```
|
||||
|
||||
#### Navigation
|
||||
|
||||
The navigation for this application is quite simple. We want users to be able to switch between three filtered states. Since we need to track which state is currently selected, we'll add that as a class on the first item.
|
||||
|
||||
```html
|
||||
<nav class="filter">
|
||||
<button class="selected">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Adding styles
|
||||
|
||||
Now that we've got the top of our application scaffolded, we can add some our styles in the head.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
```
|
||||
|
||||
### Updating styles
|
||||
|
||||
It looks like the selected button isn't getting any special styles. Let's dig in and see why that is.
|
||||
|
||||
Open up the browser inspector and target our 'all' button. You'll notice that the blue style is present on the list, but it is being overriden by the `border: none` above it. This is a situation where specificity is winning out over the cascade.
|
||||
|
||||
> **Cascade** states that if two selectors are equal, the lowest one on the page wins
|
||||
|
||||
> **Specificity** states that regardless of cascade, the selector with the highest specificity wins
|
||||
|
||||
To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway.
|
||||
@@ -1,41 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
## Exercise
|
||||
|
||||
1. Add an unordered list with class `todos` to the main section
|
||||
2. Add 4 list items with class `todo` inside of that list with the following content
|
||||
`<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
|
||||
3. Add a span and a button to your footer
|
||||
4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
|
||||
5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
|
||||
|
||||
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
|
||||
|
||||
> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.
|
||||
@@ -1,22 +0,0 @@
|
||||
<!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="selected">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main></main>
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
<!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="selected">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<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>
|
||||
</main>
|
||||
<footer><span>4 items left</span> <button class="submit">Clear Completed</button></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<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>
|
||||
@@ -1,41 +0,0 @@
|
||||
# Javascript Demo
|
||||
|
||||
Now that we a UI that looks like a todo app, we need to add functionality to make it **function** like a todo app. In this example we are going to use raw Javascript explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise.
|
||||
|
||||
> Keep an eye on how often user actions directly modify the HTML on the page. You'll see this number drop to zero when we start using React.
|
||||
|
||||
## Demo
|
||||
|
||||
This demo starts off with a few elements already in place. Let's walk through what's already here.
|
||||
|
||||
- **clearInput()** - This is a generic, reusable function that takes in a `selector` paramater, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a side effect.
|
||||
- **getTodoText()** - This is a quick helper function that returns the value inside of our textfield. Notice how some functions return values and how you can set that return to a variable.
|
||||
- **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down.
|
||||
1. `todo` is set to equal the first todo item
|
||||
2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4
|
||||
3. We set the innerText of the `<span class='title'>` to the value returned from getTodoText
|
||||
> Note that if we left off the `()` we'd actully be assiging innerText to the 'function' instead of the function return
|
||||
4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)
|
||||
- **filter()** - This function takes in a `filterName` string, and a `button` which is a reference to the clicked button.
|
||||
1. Remove any `selected` class names
|
||||
2. Add `selected` to the clicked button
|
||||
3. Get all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), and then loop through them.
|
||||
4. Set the `hidden` property of each todo based on the filter/state combination
|
||||
|
||||
### Triggering functions from click events
|
||||
|
||||
Now that we have a working `addTodo` function, we need a way to trigger it when the user is ready. This can be done in two ways.
|
||||
|
||||
1. We can find the element with querySelector, then set its `onclick` to our function
|
||||
|
||||
```js
|
||||
document.querySelector('.addTodo .submit').onclick = addTodo;
|
||||
```
|
||||
|
||||
2. We can add the function directly to our button in our HTML
|
||||
|
||||
```html
|
||||
<button onclick="addTodo()" class="submit">Add</button>
|
||||
```
|
||||
|
||||
Today we'll use #2, as this is the way it will work in React as well.
|
||||
@@ -1,74 +0,0 @@
|
||||
<!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="selected">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 clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
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('.textfield');
|
||||
// updateRemaining();
|
||||
}
|
||||
|
||||
function filter(filterName, button) {
|
||||
document.querySelector('.selected').classList.remove('selected');
|
||||
button.classList.add('selected');
|
||||
for (let todo of document.querySelectorAll('.todo')) {
|
||||
const checked = todo.querySelector('input').checked == true;
|
||||
if (filterName == 'all') {
|
||||
todo.hidden = false;
|
||||
} else if (filterName == 'active') {
|
||||
todo.hidden = checked;
|
||||
} else if (filterName == 'completed') {
|
||||
todo.hidden = !checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
## Exercise
|
||||
|
||||
### Write updateRemaining function
|
||||
|
||||
1. Get a reference to the span with the `remaining` class, and store it in a variable
|
||||
2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
|
||||
3. Set the `innerText` of the remaining span to the length of those todos.
|
||||
4. Add updateRemaining() to addTodo
|
||||
|
||||
### Write a clearCompleted function
|
||||
|
||||
1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
|
||||
2. Use a `for (let todo of todos)` loop to iterate over each todo
|
||||
3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
|
||||
> Hint: you can use querySelector on any HTML node to find child elements within
|
||||
4. Call `todo.remove()` for any todo whos input check is true
|
||||
5. After the loop is done, run `updateRemaining()`
|
||||
6. Attach this function to the footer button
|
||||
7. Test it out!
|
||||
@@ -1,82 +0,0 @@
|
||||
<!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</button>
|
||||
</div>
|
||||
<nav class="filter">
|
||||
<button class="selected">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 clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
function getTodoText() {
|
||||
return 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('.textfield');
|
||||
updateRemaining();
|
||||
}
|
||||
|
||||
// clearCompleted
|
||||
|
||||
function filter(filterName, button) {
|
||||
document.querySelector('.selected').classList.remove('selected');
|
||||
button.classList.add('selected');
|
||||
for (let todo of document.querySelectorAll('.todo')) {
|
||||
const checked = todo.querySelector('input').checked == true;
|
||||
if (filterName == 'all') {
|
||||
todo.hidden = false;
|
||||
} else if (filterName == 'active') {
|
||||
todo.hidden = checked;
|
||||
} else if (filterName == 'completed') {
|
||||
todo.hidden = !checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
<!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</button>
|
||||
</div>
|
||||
<nav class="filter">
|
||||
<button onclick="filter('all', this)" class="selected">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 clearInput(selector) {
|
||||
document.querySelector(selector).value = '';
|
||||
}
|
||||
|
||||
function getTodoText() {
|
||||
return document.querySelector('.textfield').value;
|
||||
}
|
||||
|
||||
function updateRemaining() {
|
||||
const remaining = document.querySelector('.remaining');
|
||||
const todos = document.querySelectorAll('.todo');
|
||||
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('.textfield');
|
||||
updateRemaining();
|
||||
}
|
||||
|
||||
function clearCompleted() {
|
||||
const todos = document.querySelectorAll('.todo');
|
||||
for (let todo of todos) {
|
||||
if (todo.querySelector('input').checked == true) {
|
||||
todo.remove();
|
||||
}
|
||||
}
|
||||
updateRemaining();
|
||||
}
|
||||
|
||||
function filter(filterName, button) {
|
||||
document.querySelector('.selected').classList.remove('selected');
|
||||
button.classList.add('selected');
|
||||
for (let todo of document.querySelectorAll('.todo')) {
|
||||
const checked = todo.querySelector('input').checked == true;
|
||||
if (filterName == 'all') {
|
||||
todo.hidden = false;
|
||||
} else if (filterName == 'active') {
|
||||
todo.hidden = checked;
|
||||
} else if (filterName == 'completed') {
|
||||
todo.hidden = !checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<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>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html><body><div id="app"></div><script src="../../step1-04/final/step1-04/final.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>
|
||||
@@ -1,14 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
.Button {
|
||||
display: block;
|
||||
background: #0078d4;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.Button:hover {
|
||||
background: #005a9e;
|
||||
}
|
||||
|
||||
.Button:active {
|
||||
background: #004578;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import './Button.css';
|
||||
|
||||
export const Button = props => {
|
||||
return (
|
||||
<button className="Button" onClick={props.onClick}>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button } from './Button';
|
||||
|
||||
export class Counter extends React.Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
counter: 0
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const { counter } = this.state;
|
||||
const { text } = this.props;
|
||||
return (
|
||||
<div>
|
||||
{text}: {counter}
|
||||
<Button onClick={this._onButtonCLick}>Click</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_onButtonCLick = () => {
|
||||
this.setState({ counter: this.state.counter + 1 });
|
||||
};
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { App } from './App';
|
||||
ReactDOM.render(<App />, document.getElementById('app'));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,15 +0,0 @@
|
||||
<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="./final/index.html" class="Tile-link">Final</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,74 +0,0 @@
|
||||
# Building a Static Page
|
||||
|
||||
## Demo
|
||||
|
||||
To start off our Todo application we are going to follow the steps outline in [Thinking in React](https://reactjs.org/docs/thinking-in-react.html). The first step of the process is to break our application into a component hierarchy. For this app, we're going to keep it simple and just use four parts.
|
||||
|
||||
- TodoHeader
|
||||
- TodoList
|
||||
-TodoListItem
|
||||
- TodoFooter
|
||||
|
||||
We could go a lot deeping creating buttons, inputs and checkboxes, but this is a great place start. Often you'll want to start with a single large control, and then start breaking it up into smaller pieces.
|
||||
|
||||
### TodoApp
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We'll start off with all of the file scaffolded and imported into our App. This will let us dive right into each control and see updates quickly.
|
||||
|
||||
### TodoHeader
|
||||
|
||||
Our objective is to create a static version of our application, so we'll copy over the entire header tag, minus any function calls we may have added.
|
||||
|
||||
> Note that since this is React we had to change `class` to `className`, otherwise nothing changes
|
||||
|
||||
```jsx
|
||||
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="completed">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
```
|
||||
|
||||
### TodoListItem
|
||||
|
||||
Anytime you see repeated complex elements, that is usually a sign to create a new component. With a few props you can typically abstract all of those elements into a single component. This is certainly the case with Todos items.
|
||||
|
||||
```jsx
|
||||
return (
|
||||
<li className="todo">
|
||||
<label>
|
||||
<input type="checkbox" /> Todo 1
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
```
|
||||
|
||||
> Note that I've removed the title span as it was only needed to make targeting that text easier
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-05/demo/step1-05/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>
|
||||
@@ -1,16 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export const TodoFooter = (props: any) => {
|
||||
return (
|
||||
<footer>
|
||||
<p>footer</p>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export class TodoHeader extends React.Component {
|
||||
render() {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export class TodoList extends React.Component<any, any> {
|
||||
render() {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export class TodoListItem extends React.Component {
|
||||
render() {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { TodoApp } from "./App";
|
||||
ReactDOM.render(<TodoApp />, document.getElementById("app"));
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,12 +0,0 @@
|
||||
## Exercise
|
||||
|
||||
### TodoFooter
|
||||
|
||||
1. Update the TodoFooter component, copying over the `<footer>` tag and all of its children
|
||||
2. Remove any `onclick` properties, and change `class` to `className`
|
||||
|
||||
### TodoList
|
||||
|
||||
1. Update the TodoList component like you did with the footer.
|
||||
2. Import TodoListItem and add 4 of them inside of the `<ul>`
|
||||
3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-05/exercise/step1-05/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>
|
||||
@@ -1,16 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export const TodoFooter = (props: any) => {
|
||||
return (
|
||||
<footer>
|
||||
<p>footer</p>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
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="completed">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export class TodoList extends React.Component<any, any> {
|
||||
render() {
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export class TodoListItem extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<li className="todo">
|
||||
<label>
|
||||
<input type="checkbox" /> Todo 1
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { TodoApp } from "./App";
|
||||
ReactDOM.render(<TodoApp />, document.getElementById("app"));
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-05/final/step1-05/final.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>
|
||||
@@ -1,16 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export const TodoFooter = (props: any) => {
|
||||
return (
|
||||
<footer>
|
||||
<span>
|
||||
<span className="remaining">4</span> items left
|
||||
</span>
|
||||
<button className="submit">Clear Completed</button>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
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="completed">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { TodoListItem } from './TodoListItem';
|
||||
|
||||
export class TodoList extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<ul className="todos">
|
||||
<TodoListItem />
|
||||
<TodoListItem />
|
||||
<TodoListItem />
|
||||
<TodoListItem />
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export class TodoListItem extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<li className="todo">
|
||||
<label>
|
||||
<input type="checkbox" /> Todo 1
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { TodoApp } from './TodoApp';
|
||||
ReactDOM.render(<TodoApp />, document.getElementById('app'));
|
||||
@@ -1,49 +0,0 @@
|
||||
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 .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
.todos {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
footer span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user