-
-
diff --git a/step1-00/README.md b/step1-01/README.md
similarity index 100%
rename from step1-00/README.md
rename to step1-01/README.md
diff --git a/step1-00/css-demo/README.md b/step1-01/css-demo/README.md
similarity index 93%
rename from step1-00/css-demo/README.md
rename to step1-01/css-demo/README.md
index 920b06e..3974435 100644
--- a/step1-00/css-demo/README.md
+++ b/step1-01/css-demo/README.md
@@ -30,9 +30,10 @@ CSS can be applied to HTML tags in three different ways.
### 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 "selectors", and they are just as important to learn as the properties/values themselves.
+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 "selectors", and they are just as important to learn as the properties/values themselves. 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;
}
diff --git a/step1-00/css-demo/css-demo.css b/step1-01/css-demo/css-demo-finished.css
similarity index 92%
rename from step1-00/css-demo/css-demo.css
rename to step1-01/css-demo/css-demo-finished.css
index 6d769bd..fa9c4ee 100644
--- a/step1-00/css-demo/css-demo.css
+++ b/step1-01/css-demo/css-demo-finished.css
@@ -1,11 +1,14 @@
-/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
-
+/* 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 */
diff --git a/step1-01/css-demo/css-demo-finished.html b/step1-01/css-demo/css-demo-finished.html
new file mode 100644
index 0000000..9f18134
--- /dev/null
+++ b/step1-01/css-demo/css-demo-finished.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md
new file mode 100644
index 0000000..509dd40
--- /dev/null
+++ b/step1-01/js-demo/README.md
@@ -0,0 +1,116 @@
+## 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.
+
+We'll be covering:
+
+- Variables
+- Functions
+- Conditionals
+- Loops
+- Interacting with the DOM (Document Object Model)
+
+### Variables
+
+Javascript is a loosly typed language. 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
+
+Because they are not strongly typed, we can switch a varible from a number, to a string, to an array anytime we want to. In practice, this is a bit of an anti-pattern, as it makes debugging and refactoring extremely difficult. This is why we write just about every project in [Typescript](https://www.typescriptlang.org/).
+
+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
+
+```
+
+```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';
+```
diff --git a/step1-00/js-demo/js-demo.html b/step1-01/js-demo/js-demo-finished.html
similarity index 65%
rename from step1-00/js-demo/js-demo.html
rename to step1-01/js-demo/js-demo-finished.html
index ce350c2..eb4eb17 100644
--- a/step1-00/js-demo/js-demo.html
+++ b/step1-01/js-demo/js-demo-finished.html
@@ -1,5 +1,7 @@
-
+
+
+
This is my Title
@@ -12,12 +14,12 @@
Our Logo
-
+
Contact Us
-
+
@@ -29,13 +31,15 @@
let matches = 0;
function displayMatches() {
- const text = document.querySelector('.email').value;
+ const email = document.getElementById('email');
+ const text = email.value;
for (let letter of text) {
if (letter === match) {
matches++;
}
}
- document.querySelector('.submit').value = matches + ' matches';
+ const submit = document.querySelector('.submit');
+ submit.value = matches + ' matches';
}
diff --git a/step1-01/js-demo/js-demo.html b/step1-01/js-demo/js-demo.html
new file mode 100644
index 0000000..3080f1c
--- /dev/null
+++ b/step1-01/js-demo/js-demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
diff --git a/step1-02/README.md b/step1-02/README.md
new file mode 100644
index 0000000..0106361
--- /dev/null
+++ b/step1-02/README.md
@@ -0,0 +1,9 @@
+## HTML and CSS
+
+## Exercise
+
+1. Add an unordered list of class 'todos' after the filters
+2. Add four todos.
+3. Center the "TODO" header
+4. Style all elements with button class to have no border and 5px padding top/bottom and 10px left/right
+5. Set the active button style to have a 2px solid blue bottom border
diff --git a/step1-02/finished/index.html b/step1-02/finished/index.html
new file mode 100644
index 0000000..3f93472
--- /dev/null
+++ b/step1-02/finished/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+ 
+