Day 1: Introduction

Monday, June 4, 2018

Lecture Videos

Morning:

Afternoon:

Topics

  • History of JavaScript and the Web
  • Getting the most out of a coding bootcamp
  • Starting a project with git
  • Anatomy of an HTML element (tags, attributes, text content)
  • Basic CSS selector syntax
    • Element name (div, h1, p, etc.)
    • Element ID (#theID, div#theID, etc.)
    • Class name (.theClass, p.theClass, etc.)

Examples

Git

Starting a new project with a git repository

First make a new directory and then navigate into the new directory. Then start a new repository with git init.

user@localhost ~
  
mkdir my_new_project
cd my_new_project
git init

To be able to make our first commit, we need to first add something to our empty project folder. A common first choice is a README.md file, which is a document written in markdown that provides information about the project.

user@localhost ~
  
echo "# My New Project" >> README.md
git add .
git commit -m "Initial commit"

Once we have our first commit, we can add a ‘remote’ for our repository, like github or bitbucket. For github, log in to github.com, then hit the ‘+’ button in the top right of the screen to add a new repository. Then, it will give you the following commands to run from the command line.

user@localhost ~
  
git remote add origin git@github.com:myusername/my_new_project.git
git push -u origin master

This adds the github remote as ‘origin’ and sets it as the default for when you push your changes. From this point forward, just type git push to push your changes to the remote.

DOM Manipulation



<div class="person">
  <h2 id="firstName">Han</h2>
  <h2 id="lastName">Solo</h2>
  <p>Made the Kessel Run in less than 12 parsecs</p>
  <button>Click here to hire me!</button>
</div>





// Get all h2 elements with querySelectorAll. Returns a NodeList
const headings = document.querySelectorAll('.person h2')
console.log(headings)     // [h2#firstName, h2#lastName]

// Get a single element with querySelector
const heading = document.querySelector('.person h2')
console.log(heading)      // h2#firstName

// Do something when a click event occurs
const button = document.querySelector('button')
button.addEventListener('click', (ev) => {
  alert('clicked!')
  console.log(ev.target)  // button
})

Presentations

Projects

First JS

Morning | Afternoon

Spellbook

Morning | Afternoon

Homework

  • Make the button change the text of the heading (the <h1>).

Bonus Credit

  • Add multiple headings to the page, and make the button change the second one. (Use a class or an id.)

Super Mega Bonus Credit

  • Add a form to the page.
  • Add a text input to the form.
  • When the form is submitted, update the heading with the text that you type in the text input.

Super Mega Bonus Credit Hyper Fighting

  • Make sure it works when you press enter on the keyboard, not just when you click the button.