Day 2: Git and The DOM

Tuesday, June 26, 2018

Lecture Videos

Morning:

Afternoon:

Topics

Git

DOM

Other Topics

Examples

Template literals

Template literals are string literals that allow embedded JavaScript expressions. Surround the string literal with `` (backticks), and use the variable placeholders inside ${ } (a dollar sign and curly braces), and they will be replaced with their respective values.



const name = 'Dana'
const hometown = 'Youngstown, OH'

console.log(`Hello, I'm ${name}. I'm from ${hometown}.`)   // "Hello, I'm Dana. I'm from Youngstown, OH."


Google Fonts

Google has a catalog of web fonts that you can use in your projects. You can import the font in your index.css file like the code below from Chrismess.



@import url('https://fonts.googleapis.com/css?family=Lato');

body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}


$0 and more on Chrome DevTools

Tools for Web Developers

Presentations

Review: JavaScript Elements and Attributes

Projects

Chrismess

Morning | Afternoon

Homework

  • Give the function changeHeading a more accurate name.
  • Add a second field to the form.
  • Display the value of that field in the list.

Bonus Credit

  • Display the second field in a separate HTML element than the flick name. For example:
<li>
  <span class="flickName">Jurassic Work</span>
  <span class="year">2015</span>
</li>
  • See if you can then style each field differently.

Super Mega Bonus Credit

  • Use more than one function. (Break changeHeading into multiple functions, as appropriate.)