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

Merge branch 'master' into fix/readme-typo

Browse Source
This commit is contained in:
Micah Godbolt
2019-03-03 18:28:40 -08:00
committed by GitHub
parent 76b061ae41 adf8f76c5e
commit fa58a32f23
165 changed files with 2138 additions and 3519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,11 +52,10 @@ let myFunction = function(myNumberParam) {
### 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.
Let's start off our demo by adding a variable to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). This variable will be global and constant.
```js
const match = 'a';
let matches = 0;
```
## Functions
@@ -65,6 +64,8 @@ Functions are reusable pieces of functionality. Functions can take inputs (param
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 `alert("I'm Clicked")`, which is a function that creates an alert in your browser.
> Note that we want to place `matches` inside of the function so that it resets to 0 each time the function is called
```js
function displayMatches() {
alert("I'm Clicked");
@@ -118,7 +119,7 @@ button.onclick = displayMatches();
You can also combine these together like this:
```js
document.querySelector('.submit').onclick = displayMatches();
document.querySelector('.submit').onclick = displayMatches;
```
Wire this up and see you function in action!
@@ -138,11 +139,12 @@ 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. 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 global `match` value, and if they are the same, we will increment a `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() {
const text = 'abcda';
let matches = 0;
for (let letter of text) {
if (letter === match) {
matches++;

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

@@ -1,19 +1,58 @@
<html>
<head>
<link rel="stylesheet" href="../css-demo/css-demo-final.css" />
</head>
<body>
<div>
<div class="tiles">
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input id="email" type="email" />
<input class="submit" value="Submit" type="submit" />
</div>
</div>
</div>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="css">
body {
font: 1.2em sans-serif;
}
.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;
}
#contact-form {
display: flex;
flex-direction: column;
}
input[type='submit'] {
align-self: flex-start;
margin-top: 10px;
}
</pre>
<pre data-lang="html">
&lt;div class=&quot;tiles&quot;&gt;
&lt;div&gt;
&lt;h2&gt;Contact Us&lt;/h2&gt;
&lt;div id=&quot;contact-form&quot;&gt;
&lt;label&gt;Email&lt;/label&gt;&lt;input id=&quot;email&quot; type=&quot;email&quot; /&gt;
&lt;input class=&quot;submit&quot; value=&quot;Submit&quot; type=&quot;submit&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<pre data-lang="js">
// Count the number of 'a' characters in the email form.
// Update button to reflect that number.
</pre
>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
<script></script>
</html>

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

@@ -0,0 +1,9 @@
1. Create a function named `getFavs` and set its contents to `alert('clicked')`
2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure it calls our alert.
4. Replace the alert with a new `favList` variable set to an empty array: `[]`
5. Create a const variable `inputs` set to all of the inputs on the page. `querySelectorAll` will help here
6. Iterate over all of the inputs using `for (const input of inputs) {}`
7. For each iteration use an `if` statement to check if `input.checked` is equal to true
8. If the above tests passes, push the `input.parentNode.textContent` onto the `favList` array. Pass that text into `favList.push()` as the parameter to add it to the array
9. Outside of the for loop, use `document.querySelector('.favorites')` to target the div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`. This will join each of the foods together into a string separated by a space.

14
step1-03/exercise/answer.js Normal file
View File

@@ -0,0 +1,14 @@
function getFavs() {
let favList = [];
const inputs = document.querySelectorAll('input');
for (const input of inputs) {
if (input.checked === true) {
favList.push(input.parentNode.textContent);
}
}
document.querySelector('.favorites').textContent = favList.join(' ');
}
let button = document.querySelector('button');
button.addEventListener('click', getFavs);

73
step1-03/exercise/index.html
View File

@@ -1,37 +1,48 @@
<html>
<style>
label,
button {
display: block;
margin-bottom: 10px;
}
</style>
<body>
<label><input type="checkbox" />Ice cream</label>
<label><input type="checkbox" />Pizza</label>
<label><input type="checkbox" />Tacos</label>
<label><input type="checkbox" />Meatloaf</label>
<label><input type="checkbox" />Brocolli</label>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="css">
label,
button {
display: block;
margin-bottom: 10px;
}
</pre>
<pre data-lang="html">
&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Ice cream&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Pizza&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Tacos&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Meatloaf&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Brocolli&lt;/label&gt;
<button>Display Your Favorites</button>
&lt;button&gt;Display Your Favorites&lt;/button&gt;
<div class="favorites"></div>
&lt;div class=&quot;favorites&quot;&gt;&lt;/div&gt;
</pre>
<pre data-lang="js">
/*
1. Create a function named `getFavs` and set its contents to `alert('clicked')`
2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure it calls our alert.
4. Replace the alert with a new `favList` variable set to an empty array: `[]`
5. Create a const variable `inputs` set to all of the inputs on the page. `querySelectorAll` will help here
6. Iterate over all of the inputs using `for (const input of inputs) {}`
7. For each iteration use an `if` statement to check if `input.checked` is equal to true
8. If the above tests passes, push the `input.parentNode.textContent` onto the `favList` array. Pass that text into `favList.push()` as the parameter to add it to the array
9. Outside of the for loop, use `document.querySelector('.favorites')` to target the div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`. This will join each of the foods together into a string separated by a space.
*/
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
<script>
function getFavs() {
let favList = [];
const inputs = document.querySelectorAll('input');
for (const input of inputs) {
if (input.checked === true) {
favList.push(input.parentNode.textContent);
}
}
document.querySelector('.favorites').textContent = favList.join(' ');
}
let button = document.querySelector('button');
button.addEventListener('click', getFavs);
</script>
</html>