JavaScript

Download the boilerplate:

Click this link to get the boilerplate files

  • Open the downloaded folder in Atom and look through the files. You’ll see some HTML and CSS already set up, and an empty JS file.
  • Look through the HTML and CSS for a review, and open the file in Chrome to see what it looks like.
  • Open the JS file in the boilerplate you downloaded and write console.log('Hello world!') then save it and reload your browser, then open up the chrome dev tools and select “console” from the right pane. You should see your first JavaScript program!

JavaScript

Intro to JS
Number guessing game
  • Copy this one piece at a time into your JS file. Try to see what each line does, and play around with the game. See what other things you can do with this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// I'm a comment!
var answer = Math.ceil(Math.random() * 50);
var form = document.querySelector('form');
var input = document.querySelector('input');
var response = document.querySelector('.response');
var response = $('.response')
console.log(answer);

document.addEventListener('submit', checkGuess);

function checkGuess (event) {
  event.preventDefault();
  var guess = input.value;
  if (guess == answer) {
    response.textContent = guess + " is correct!";
    form.style.backgroundColor = "#27ae60";
  } else if (guess > answer + 10) {
    response.textContent = guess + " is WAY too high!";
    form.style.backgroundColor = "#f39c12";
  } else if (guess > answer) {
    response.textContent = guess + " is too high!";
    form.style.backgroundColor = "#f39c12";
  } else if (guess < answer - 10) {
    response.textContent = guess + " is WAY too low!";
    form.style.backgroundColor = "#f39c12";
  } else if (guess < answer) {
    response.textContent = guess + " is too low!";
    form.style.backgroundColor = "#f39c12";
  } else {
    response.textContent = guess + " is not a number!!!!";
    form.style.backgroundColor = "#c0392b";
  }
}

Next week

JS Data Structures and Algorithms