Canvas, Arrays, and Event Listeners

Ajax Type Ahead

This was a great run-through of using Ajax without using jQuery! I thought it would be more complicated than this. But for something as basic as this activity, it seemed like a good way to go.

Most of this was pretty new to me, so I needed to walk through it at a slower pace the second time around. The useful things I got out of this project:

  • fetch(endpoint) instead of $.getJSON()
  • .json() to identify type
  • .then()
  • (…data) to spread an array within an array
  • practical use of filter() and map() and replace()
  • more use of backtick
  • CSS3 transform:perspective

Extra credit: changed .addEventListener(‘change’) to (‘input’) so suggested list appears immediately rather than when user clicks outside of box

Array Cardio, Day Two

Wow! I think between this rundown and the Ajax Type ahead, I’m going to be able to fill in the missing pieces of a project I’m working on at work.

Material covered:

  • some(): checks array for at least one instance
  • every(): checks if every array item matches
  • find(): returns the first one it finds, rather than a subset
  • findIndex(): finds where something is within the array (the index number)
 const people = [
 { name: 'Wes', year: 1988 },
 { name: 'Kait', year: 1986 },
 { name: 'Irv', year: 1970 },
 { name: 'Lux', year: 2015 }
 const comments = [
 { text: 'Love this!', id: 523423 },
 { text: 'Super good', id: 823423 },
 { text: 'You are the best', id: 2039842 },
 { text: 'Ramen is my fav food ever', id: 123523 },
 { text: 'Nice Nice Nice!', id: 542328 }
 // Some and Every Checks
 // Array.prototype.some() // is at least one person 19 or older?
 const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19);
 console.log({isAdult}); // shows name of variable as well as value
 // Array.prototype.every() // is everyone 19 or older?
 const allAdult = people.every(person => (new Date()).getFullYear() - person.year >= 19);
 // Array.prototype.find()
 // Find is like filter, but instead returns just the one you are looking for
 // find the comment with the ID of 823423
 const findId = comments.find(comment => === 823423);
 // Array.prototype.findIndex()
 // Find the comment with this ID
 // delete the comment with the ID of 823423
 const index = comments.findIndex(comment => === 823423);
 comments.splice(index, 1);
  // or create new array with updated content
 const newComments = [
 ...comments.slice(0, index), // spread array into new array
 ...comments.slice(index + 1)

Fun with HTML5 Canvas

So. Many. Things.

I need to spend more time with this, but I already feel better about my knowledge in the following just from this short tutorial:

  • window.innerWidth && window.innerHeight can expand or shrink the canvas dimensions to the full browser window size
  • canvas and several of its properties (strokeStyle, lineCap, lineWidth, lineJoin, beginPath, moveTo, lineTo, stroke)
  • canvas context (2d vs. 3d)
  • HSL and a great site to see how hsl works
  • more addEventListeners (mousemove, mousedown, mouseout, mouseup)

Extra credit: I experimented with more addEventListeners to make it for touchscreen. Not successful yet, but I learned about touchstart, touchcancel, touchend, touchmove.

Extra extra credit: Added the following to give direction to the user:

context.fillText('Draw Here', canvas.width/2, canvas.height/2);

14 Must Know Dev Tool Tricks

Using Chrome Dev Tools, I can create a breakpoint to inspect via right-click on element > break on > attribute modifications.

A quick rundown by Wes:

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
 const p = document.querySelector('p'); = '#BADA55'; = '50px';

// Regular

// Interpolated
 console.log('Hello I am a %s string!', '💩');

// Styled
 // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
 console.warn('OH NOOO');

// Error :|

// Info'Crocodiles eat 3-4 people per year');

// Testing
 const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing

// Viewing DOM Elements


// Grouping together
 dogs.forEach(dog => {
 console.log(`This is ${}`);
 console.log(`${} is ${dog.age} years old`);
 console.log(`${} is ${dog.age * 7} dog years old`);

// counting


// timing
 console.time('fetching data');
 .then(data => data.json())
 .then(data => {
 console.timeEnd('fetching data');

// table output

Hold Shift to Check Multiple Checkboxes


  • click event comes from mouse or keyboard, unlike change event which detects the mouse
  • instead of setting true or false, I can set a variable opposite from itself (!variable)
  • it’s better to rely less on targeting HTML structure in case updates are made in separate files
  • properties new to me: shiftKey && checked

Extra credit: updated HTML to make it more semantic for web accessibility by using lists and labels rather than divs and paragraphs.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s