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>