Intro to JavaScript Preview

// Now let's use JavaScript to interact with the HTML!

// First try clicking on the button to the right    > > >
// It doesn't do anything yet, but we'll fix that!

						

// The HTML for the button is:
// <button id="testbutton">Click me!</button>

// So we can create a variable for the button like this:
var button = document.getElementById('testbutton');

						

// The HTML for the button is:
// <button id="testbutton">Click me!</button>

// So we can create a variable for the button like this:
var button = document.getElementById('testbutton');

// and change the text inside it like this:
button.textContent = 'testing one two three!';
						

// The HTML for the button is:
// <button id="testbutton">Click me!</button>

// So we can create a variable for the button like this:
var button = document.getElementById('testbutton');

// and change the text inside it like this:
button.textContent = 'testing one two three!';

// Let's do the same with the box below the button:
var displayBox = document.getElementById('testdisplay');
						

// The HTML for the button is:
// <button id="testbutton">Click me!</button>

// So we can create a variable for the button like this:
var button = document.getElementById('testbutton');

// and change the text inside it like this:
button.textContent = 'testing one two three!';

// Let's do the same with the box below the button:
var displayBox = document.getElementById('testdisplay');

// and change the text inside the box too:
displayBox.textContent = 'JavaScript is magical!';
						

// Now let's define a new function that does this:
function sayHello() {
	displayBox.textContent = 'Hello, world!';
};

// And let's call the function to check that it works:
sayHello();
						

// Now let's define a new function that does this:
function sayHello() {
	displayBox.textContent = 'Hello, world!';
};

// Finally, let's run this function when the button is clicked!
button.addEventListener('click', sayHello);

// It has 3 parts:
//  1) the HTML element where the event happens (button)
//  2) the type of event ('click')
//    REFERENCE:
//    https://developer.mozilla.org/en-US/docs/Web/Events
//  3) the function to run (sayHello)
						

// The complete code:

var button = document.getElementById('testbutton');
var displayBox = document.getElementById('testdisplay');

function sayHello() {
	displayBox.textContent = 'Hello, world!';
};

button.addEventListener('click', sayHello);

// Tinker with it here:
// https://codepen.io/LearnToCodeLA/pen/ZONyjP
						

Display messages here

// Press W, A, S, and D on your keyboard to move the box!

var box = document.getElementById('movebox');

window.addEventListener('keydown', moveBox);

function moveBox(event) {
  if (event.keyCode == '83') {
	var currentTopPosition = parseInt(box.style.top, 10);
	var newTopPosition = currentTopPosition + 10;
	box.style.top = newTopPosition + 'px';
  }

  if (event.keyCode == '87') {
	var currentTopPosition = parseInt(box.style.top, 10);
	var newTopPosition = currentTopPosition - 10;
	box.style.top = newTopPosition + 'px';
  }

  if (event.keyCode == '68') {
	var currentLeftPosition = parseInt(box.style.left, 10);
	var newLeftPosition = currentLeftPosition + 10;
	box.style.left = newLeftPosition + 'px';
  }

  if (event.keyCode == '65') {
	var currentLeftPosition = parseInt(box.style.left, 10);
	var newLeftPosition = currentLeftPosition - 10;
	box.style.left = newLeftPosition + 'px';
  }

}
						

var colorBox = document.getElementById('colorbox');

colorBox.addEventListener('click', randomColor);

function randomColor() {

  // Your code here! Go Googling!

  // HINT 1: Find out how to generate a random hex color

  // HINT 2: Find out how to use JavaScript to change
  //         the background color of an element

  // HINT 3: Don't forget hex colors need a # in front!

}
							

// Did you learn anything interesting? :)

// HERE'S THE SOLUTION:

var colorBoxSolved = document.getElementById('colorboxsolved');

colorBoxSolved.addEventListener('click', randomColor);

function randomColor() {

 colorBoxSolved.style.background = '#' +
          Math.floor(Math.random()*16777215).toString(16);

}
// SOURCE:
// https://css-tricks.com/snippets/javascript/random-hex-color/