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

day 1 exercise updates

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 23:46:32 -08:00
parent 119fb5785d
commit c1b142a684
9 changed files with 115 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
step1-01/css-demo/README.md
View File

@@ -124,12 +124,6 @@ a:hover {
color: #ccc;
}
/* Sibling selector */
a ~ a {
/* Changing elements from inline to block */
display: block;
}
/* Positional pseudo-selector */
.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */

62
step1-01/css-demo/css-demo.css
View File

@@ -0,0 +1,62 @@
/* body {
font: 1.2em sans-serif;
} */
/* h1 {
color: black;
background: #ababab;
margin-bottom: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
} */
/* span {
color: #004578;
} */
/* a ~ a {
display: block;
} */
/* .tiles {
display: flex;
} */
/* .tiles img {
width: 100%;
} */
/* .tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
border: 1px solid white;
} */
/* div.important-links {
background: #004578;
} */
/* a {
color: white;
} */
/* a:hover {
color: #ccc;
} */
/* .tiles > div:last-child {
margin-right: 0;
} */
/* #contact-form {
display: flex;
flex-direction: column;
} */
/* input[type='submit'] {
margin-top: 10px;
} */

44
step1-01/js-demo/README.md
View File

@@ -19,7 +19,7 @@ By the end of the demo we'll have covered the following:
- Loops
- Interacting with the DOM (Document Object Model)
### Variables
### Introduction To 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:
@@ -34,6 +34,8 @@ We can create a new variable with the keywords `var`, `let`, `const` and use the
> JavaScript is a loosely typed (dynamic) language, so if you initially store a number in a variable (`let myVar = 0`), you can change it to contain a string by simply writing `myVar = 'hello'` without any trouble.
### Adding Variables
Let's start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). The other examples on this page will reference these variables.
```js
@@ -41,11 +43,13 @@ const match = 'a';
let matches = 0;
```
> Note that `const` variables are those that will never change during the duration of your program, whereas `let` can change over time. Our `match` value will stay constant, but our `matches` will increment as we find matches.
### Functions
Functions are reusable 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.
Functions are reusable pieces of functionality. Functions can take inputs (parameters) and return values (or neither). 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 any time that our submit button is clicked. For now we'll simply have our function call `console.log` (a function that prints values to the browser console):
In our example we'll create a function called `displayMatches` (camelCase is typical for functions) and we'll invoke this function every time that our submit button is clicked. For now we'll simply have our function call `console.log` (a function that prints values to the browser console):
```html
<input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
@@ -59,7 +63,7 @@ function displayMatches() {
### Iteration
Next we'll update our function to iterate through a string of text. Later, we'll find and count all the `a` characters in the `email` variable, but for now, we'll just separately log each letter of a placeholder `text` variable. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax.
Next we'll update our function to iterate through a string of letters. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. We'll use real input later, but for now this varifies that our function is working.
```js
function displayMatches() {
@@ -72,7 +76,7 @@ function displayMatches() {
### 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 to do comparisons, we use the equality operator `==` or the strict equality operator `===`.
Next we want to compare each `letter` with our `match` value, and if they are the same, we will increment our `matches` variable. Remember that `letter = match` would set the `letter` variable to the value in `match`, so to do comparisons, we use the equality operator `==` or the strict equality operator `===`.
```js
function displayMatches() {
@@ -95,14 +99,22 @@ Now that we have a function performing all of our logic, it's time to connect th
First we need to get a reference to the email field in our app's DOM. To do this, I've added an `id` to the input, and we will call one of JavaScript's oldest methods (IE 5.5), `getElementById`, 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);
function displayMatches() {
const email = document.getElementById('email');
console.log(email);
...
}
```
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 email input's `value` key. To see this in action, in Chrome you can 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;
function displayMatches() {
const email = document.getElementById('email');
const text = email.value;
console.log(text);
...
}
```
#### Returning the values to the DOM
@@ -110,19 +122,29 @@ const text = email.value;
Now that we've read values from the DOM and fed that into our matching logic, we are ready to return the number of matches 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 match found.
```js
const submit = document.querySelector('.submit');
function displayMatches() {
...
const submit = document.querySelector('.submit');
}
```
Now that we have a reference to the submit input, we can set its value contain to the number of matches.
```js
submit.value = matches + ' matches';
function displayMatches() {
...
const submit = document.querySelector('.submit');
submit.value = matches + ' matches';
}
```
We could also have done this in a single line as follows:
```js
document.querySelector('.submit').value = matches + ' matches';
function displayMatches() {
...
document.querySelector('.submit').value = matches + ' matches';
}
```
## Next Step

13
step1-01/js-demo/js-demo.html
View File

@@ -4,23 +4,12 @@
</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" />
<input class="submit" value="Submit" type="submit" />
</div>
</div>
</div>

4
step1-02/demo/README.md
View File

@@ -1,3 +1,7 @@
## What We'll Be Building
![todo screenshot](https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/todo_screenshot.jpg)
## 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.

16
step1-03/demo/README.md
View File

@@ -10,19 +10,21 @@ This demo starts off with a few elements already in place. Let's walk through wh
- **clearInput()** - This is a generic, reusable function that takes in a `selector` parameter, 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
> Note that this approach is very fragile, as it requires a todo node to always be present on the page
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 actually be assigning 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
### Writing addTodo Function
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
> Note that this approach is very fragile, as it requires a todo node to always be present on the page
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 actually be assigning 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)
### 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.

10
step1-03/demo/index.html
View File

@@ -46,16 +46,6 @@
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');

2
step1-03/exercise/README.md
View File

@@ -5,7 +5,7 @@
1. Get a reference to the span with the `remaining` class, and store it in a variable
2. Use [querySelectorAll](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
4. Add updateRemaining() to end of addTodo function
### Write a clearCompleted function

9
step1-03/final/index.html
View File

@@ -6,10 +6,10 @@
<body>
<header>
<h1>todos</h1>
<div class="addTodo">
<form onsubmit="return addTodo()" class="addTodo">
<input class="textfield" placeholder="add todo" />
<button onclick="addTodo()" class="submit">Add</button>
</div>
<button class="submit">Add</button>
</form>
<nav class="filter">
<button onclick="filter('all', this)" class="selected">all</button>
<button onclick="filter('active', this)">active</button>
@@ -52,7 +52,8 @@
remaining.innerText = todos;
}
function addTodo() {
function addTodo(ev) {
console.log('hello');
const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(true);
newTodo.querySelector('.title').innerText = getTodoText();