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 docs subtree

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-25 13:12:18 -08:00
parent 1adcc07a61
commit 41dcf8731d
365 changed files with 10620 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/step1-01/README.md Normal file
View File

@@ -0,0 +1,28 @@
## 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
![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png)
## Next Step
[HTML Demo](./html-demo)

145
docs/step1-01/css-demo/README.md Normal file
View File

@@ -0,0 +1,145 @@
## 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)

91
docs/step1-01/css-demo/css-demo-final.css Normal file
View File

@@ -0,0 +1,91 @@
/* 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;
}

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

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

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

29
docs/step1-01/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>

76
docs/step1-01/html-demo/README.md Normal file
View File

@@ -0,0 +1,76 @@
## 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)

222
docs/step1-01/html-demo/html-demo.html Normal file
View File

@@ -0,0 +1,222 @@
<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
&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 in span tag</span> </a><br />
<a target="_blank" href="mailto:m.bluth@example.com">Email</a> (no &lt;br&gt;) <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>

23
docs/step1-01/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;
}

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

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

127
docs/step1-01/js-demo/README.md Normal file
View File

@@ -0,0 +1,127 @@
## 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/)

45
docs/step1-01/js-demo/js-demo-final.html Normal file
View File

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

30
docs/step1-01/js-demo/js-demo.html Normal file
View File

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