microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding the non-webpack entry points to docs

Browse Source
This commit is contained in:
Ken
2019-02-20 12:25:38 -08:00
parent 9bce24d819
commit dce954c894
29 changed files with 770 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/playground/playground.js
View File

File diff suppressed because one or more lines are too long

BIN
docs/step1-00/assets/fabric.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

92
docs/step1-00/css-demo/css-demo-finished.css Normal file
View File

@@ -0,0 +1,92 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */
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;
}

29
docs/step1-00/css-demo/css-demo-finished.html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<link rel="stylesheet" href="./css-demo-finished.css" />
</head>
<body>
<div>
<h1>This is my <span>Title</span></h1>
<div class="tiles">
<div class="links">
<h2>Important Links</h2>
<a href="#">We're Awesome</a>
<a href="#">Learn More</a>
<a href="#">Hire Us</a>
</div>
<div>
<h2>Our Logo</h2>
<img src="./fabric.jpg" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input type="email" />
<input value="Submit" type="submit" />
</div>
</div>
</div>
</div>
</body>
</html>

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

29
docs/step1-00/css-demo/css-demo.html Normal file
View File

@@ -0,0 +1,29 @@
<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>

224
docs/step1-00/html-demo/html-demo.html Normal file
View File

@@ -0,0 +1,224 @@
<html>
<head>
<title>Intro to HTML</title>
<link rel="stylesheet" href="./style.css" />
<style>
hr {
margin: 40px;
}
</style>
</head>
<body>
<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>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
<section>
<header>
<h1>My Website</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>
<article>
<header><h3>Blog Title 1</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>
<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>
<aside><p>Aside</p></aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi
iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem.
</p>
<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>
</main>
<footer>Copyright 2019</footer>
</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
&lt;ul&gt;
&lt;li&gt;Unordered&lt;/li&gt;
&lt;li&gt;list&lt;/li&gt;
&lt;li&gt;items&lt;/li&gt;
&lt;/ul&gt;
</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</span> </a><br />
<a target="_blank" href="mailto:m.bluth@example.com">Email</a><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>
</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>
<hr />
</body>
</html>

23
docs/step1-00/html-demo/style.css Normal file
View File

@@ -0,0 +1,23 @@
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;
}

17
docs/step1-00/index.html Normal file
View File

@@ -0,0 +1,17 @@
<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-finished.html" class="Tile-link">CSS Demo Finished</a></li>
<li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
</ul>
</div>
</body>
</html>

41
docs/step1-00/js-demo/js-demo.html Normal file
View File

@@ -0,0 +1,41 @@
<html>
<head> </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 onclick="displayMatches()" class="submit" value="Submit" type="submit" />
</div>
</div>
</div>
</div>
</body>
<script>
const match = 'a';
let matches = 0;
function displayMatches() {
const text = document.querySelector('.email').value;
for (let letter of text) {
if (letter === match) {
matches++;
}
}
document.querySelector('.submit').value = matches + ' matches';
}
</script>
</html>

27
docs/step1-01/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<body>
<h1>todos</h1>
<div><input placeholder="add todo" /><button>Add</button></div>
<div>
<button>all</button>
<button>active</button>
<button>completed</button>
</div>
<ul>
<li>
<label><input type="checkbox" /> Todo 1</label>
</li>
<li>
<label><input type="checkbox" /> Todo 2</label>
</li>
<li>
<label><input type="checkbox" /> Todo 3</label>
</li>
<li>
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<div><span>4 items left</span> <button>Clear Completed</button></div>
</body>
</html>

28
docs/step1-02/index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./style.css" />
<body>
<h1>todos</h1>
<input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
<div class="filter">
<button class="active">all</button>
<button>active</button>
<button>completed</button>
</div>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer><span>4 items left</span> <button class="button">Clear Completed</button></footer>
</body>
</html>

46
docs/step1-02/style.css Normal file
View File

@@ -0,0 +1,46 @@
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.textfield {
width: 80%;
}
.add {
margin-left: 5%;
}
.button {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}

86
docs/step1-03/index.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./style.css" />
<body>
<h1>todos</h1>
<input class="textfield" placeholder="add todo" />
<button onclick="addTodo()" class="button add">
Add
</button>
<div class="filter">
<button onclick="filter('all', this)" class="active">all</button>
<button onclick="filter('active', this)">active</button>
<button onclick="filter('completed', this)">completed</button>
</div>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer>
<span><span class="remaining">4</span> items left</span>
<button onclick="clearCompleted()" class="button">Clear Completed</button>
</footer>
</body>
<script type="text/javascript">
function getValue(selector) {
const inputValue = document.querySelector(selector).value;
return inputValue;
}
function clearInput(selector) {
document.querySelector(selector).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();
newTodo.innerHTML = `<label><input type="checkbox" /> ${getValue('.textfield')}</label>`;
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(scope, button) {
document.querySelector('.active').classList.remove('active');
button.classList.add('active');
for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true;
if (scope == 'all') {
todo.hidden = false;
} else if (scope == 'active') {
todo.hidden = checked;
} else if (scope == 'completed') {
todo.hidden = !checked;
}
}
}
</script>
</html>

50
docs/step1-03/style.css Normal file
View File

@@ -0,0 +1,50 @@
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.textfield {
width: 80%;
}
.add {
margin-left: 5%;
}
.button {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .active {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
.hidden {
display: none;
}

10
docs/step2-02/demo/step2-02/demo.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-02/exercise/step2-02/exercise.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-03/demo/step2-03/demo.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-03/exercise/step2-03/exercise.js
View File

File diff suppressed because one or more lines are too long

8
docs/step2-05/exercise/src/reducers/pureFunctions.spec.ts
View File

@@ -9,11 +9,17 @@ describe('TodoApp reducers', () => {
const keys = Object.keys(newState);
// make sure that adding an item would not result in the same instance of state
// TODO: uncomment the below to get started
/*
expect(newState).not.toBe(state);
expect(keys.length).toBe(1);
expect(newState[keys[0]].label).toBe('item1');
expect(newState[keys[0]].completed).toBeFalsy();
*/
});
// test remove, complete and clear
// TODO: test remove, complete and clear
});

4
docs/step2-06/demo/index.html
View File

@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
<script type="text/javascript" src="../../step2-06/demo/step2-06/demo.js"></script></body>
</html>

4
docs/step2-06/exercise/index.html
View File

@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
<script type="text/javascript" src="../../step2-06/exercise/step2-06/exercise.js"></script></body>
</html>

10
docs/step2-07/demo/step2-07/demo.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-07/exercise/step2-07/exercise.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-08/demo/step2-08/demo.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-08/exercise/step2-08/exercise.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-09/demo/step2-09/demo.js
View File

File diff suppressed because one or more lines are too long

10
docs/step2-09/exercise/step2-09/exercise.js
View File

File diff suppressed because one or more lines are too long

11
webpack.config.js
View File

@@ -7,6 +7,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const outPath = path.resolve(__dirname, 'docs');
const entries = {};
const nonWebpackedEntries = [];
function* getEntryPoint(step) {
if (step.includes('step') || step.includes('playground')) {
@@ -24,11 +25,18 @@ function* getEntryPoint(step) {
}
fs.readdirSync('./').filter(step => {
let isEntryPoint = false;
for (let entryPoint of getEntryPoint(step)) {
if (entryPoint) {
entries[entryPoint.replace(/\/src\/index.*/, '').replace(/^\.\//, '')] = entryPoint;
isEntryPoint = true;
}
}
if (!isEntryPoint && step.includes('step')) {
nonWebpackedEntries.push(step);
}
});
module.exports = function() {
@@ -75,7 +83,8 @@ module.exports = function() {
{
from: 'index.html',
to: outPath
}
},
...nonWebpackedEntries.map(entry => ({ from: `${entry}/**/*`, to: outPath }))
]),
new ForkTsCheckerWebpackPlugin({
silent: true,