• Let's finish the FizzBuzz
• How did you solve the take-home?

• Forms can get really complicated, so let's go through the basics
• Forms with the details
  • Nameless forms can be accessed by document.forms[index]
  • Named forms can be accessed by name
  • Child inputs on a form can be accessed like so:

    
            //HTML
            < form class="" action="index.html" method="post" name="loginForm">
                < input type="text" name="email" value="email">
                < input type="text" name="password" value="password">
            
    
            //JS
            let loginForm = document.forms.loginForm;
            console.log(loginForm["password"]);
    
            //console
            < input type="text" name="password" value="password">
            

  • Accessing the "value" of an input
  • The "submit" input type
  • Sending Form data and all that goes with it.
  • Action attributes declare where the form's info is being sent. (relative vs. absolute actions)

• HTTP Protocols: GET(no body) and POST(with req.body)
• Let's try both!
  • Create two forms, one that submits using a GET method and one that does so using a POST method
• Using .preventDefault() to stop the auto submit while we handle the form.
• Don't trust your users! Always use enctype and encryption in production.

• What's "this"?
• First, you have to comprehend the call stack.
• Global Context:
  • Console.log(this) in the scripts.js file.
  • Set some vars in the global namespace (same place as you logged this) and then log out this.varName
• Bound Context
  • Now, create an event listener on a DOM node for 'click' and inside the callback, console.log(this);
  • this is dependent upon the context it was called in...
  • Let's see this in action:
    1. Create an object in your scripts.js file that looks like this:

       
               var obj = {
                   a: checkScope
               }
                                               

    2. Define checkScope outside of the object as a function that takes 0 arguments and just logs this.
    3. Now, call checkScope in the global context, and then log out obj.a : Don't worry, we'll learn about object next class!
  • Four ways to bind this:
    1. Use new (more on that next class)
    2. Explicit binding using .call() or .apply().
    3. Implicit binding by calling the function with a context;

       
               function logThis() {
                   console.log( this );
               }
       
               var implicitBindingObject = {
                   answerToLife: 42,
                   logThis: logThis //notice that foo is called/referenced here, thus changing the calling context.
               };
       
               implicitBindingObject.logThis(); //Result will be the contents of the implicitBindingObject.
                                       

    4. Otherwise, default binding refers to the global context a.k.a. Window.
• Inline Context
  • If you call this inline (straight in your HTML code) it will return the DOM node it's attached to.
  • Let's create a button with a click attribute that alerts this to see what we're talking about.
• Make sense? Yeah, I didn't think so...
• I highly recommend You Don't Know JS, which is available for free on GitHub.

• The scope of what you're working on is closely tied to this in many ways.
• Basically, where do these vars, lets, and consts live? In their scope!
• Cheatsheet for scope.
• We will get more in-depth when we talk about Object creation and prototypes. For now, let's check the context/scope of what we already know.
• Do the following:
  1. declare a var in the global context and define it with a string.
  2. create a function and declare the same var inside the function.
  3. console.log the var inside the function and outside the function.
  4. Do the same with a let, then again with a const.
  5. Knowing what you do about variables and functions, do the results make sense?

Today we begin the final project in earnest. As such, I won't be going over take homes anymore, they will all pertain directly to your final

• Create a new repository for your ToDo App if you have not already on GitHub and add me as a contributor.
• Begin coding your HTML and CSS
• At a minumum your HTML should contain:
  1. Two h1 tags with the titles of your lists ('todo' and 'done').
  2. An input for entering ToDo Items with a submit button.
  3. Two empty uls to hold the ToDo Items and the Done Items.
• Your JS should be able to:
  1. Access the input's value and the uls using DOM methods and store them in variables.
  2. When the submit button is clicked get the user input and add it to an array.
  3. Use whatever visual framework (or plain CSS styling) you like to make your page look good. Treat this like a product that you are building for a client. How would they want it to look and function?
• Remember, this is the basic setup, or just the beginning.