Day 1: Introduction

Tuesday, May 31, 2016

Topics

• History of JavaScript and the Web
• Getting the most out of a coding bootcamp
• Anatomy of an HTML element (tags, attributes, contents)
• Basic CSS selector syntax
  • Element name (div, h1, p, etc.)
  • Element ID (#theID, div#theID, etc.)
  • Class name (.theClass, p.theClass, etc.)
• Basic DOM manipulation
  • document.querySelector/document.querySelectorAll
  • .innerText/.innerHTML
• Basic event handling
  • onsubmit
  • Anonymous functions
  • .preventDefault

Presentations

Presentations have been converted from their original format to play in web browsers.

• JavaScript History
• Bootcamp Expectations and Tips for Success

Projects

• Basic Form (FirstJS): morning | afternoon

Links

• Foundation - a front-end framework
• CSS Diner - a game for practicing CSS selector syntax
• CSS Selector Game - another tool for practicing selector syntax

Homework: Basic Form (FirstJS)

Grab values from form fields and add them to a list.

You’ll need to employ these concepts that we used in class: * Target elements with document.querySelector * Handle events * Prevent default event behavior from executing * Alter an element’s contents via innerHTML

Baseline Goal

• Display values as plain text.

Bonus Credit

• Display values in separate paragraphs.

Mega Bonus Credit

• Display values in an unordered list.

Super Mega Bonus Credit

• Display values in a definition list (<dl>).

Output something like this:

<dl>
  <li>
    <dt>First Name</dt>
    <dd>Davey</dd>
  </li>

  <li>
    <dt>Hair color</dt>
    <dd>#000000</dd>
  </li>

  <!-- etc. -->
</dl>

Super Mega Bonus Credit Hyper Fighting

Display the color value in the specified color.

Update: Solution: FirstJS (Basic Form)