From d0947233ec50fa3c8b1905dda932d1be752d6867 Mon Sep 17 00:00:00 2001 From: Soshi Katsuta Date: Sat, 10 Dec 2016 23:25:23 +0900 Subject: [PATCH 01/16] 01: add my JavaScript code Signed-off-by: Soshi Katsuta --- 01 - JavaScript Drum Kit/index-START.html | 4 +-- 01 - JavaScript Drum Kit/index.js | 34 +++++++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 01 - JavaScript Drum Kit/index.js diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..85de0afbfd 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,7 @@ - + diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js new file mode 100644 index 0000000000..6390da4fb3 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.js @@ -0,0 +1,34 @@ +class Dram { + constructor(key, audio) { + this.key = key; + this.audio = audio; + this.className = 'playing'; + + key.addEventListener('transitionend', event => { + if (event.propertyName !== 'transform') { return; } + key.classList.remove(this.className); + }); + } + + playSound() { + this.audio.currentTime = 0; + this.audio.play(); + this.key.classList.add(this.className); + } +} + +const keys = Array.from(document.querySelectorAll('.key')); +const drams = Array.from(document.querySelectorAll('audio')) + .reduce((drams, audio) => { + const keyCode = audio.dataset.key; + const key = keys.find(key => key.dataset.key === keyCode); + if (!key) { return; } + drams[keyCode] = new Dram(key, audio); + return drams; + }, {}); + +window.addEventListener('keydown', event => { + const dram = drams[event.keyCode.toString()]; + if (!dram) { return; } + dram.playSound(); +}); From 387b98618aa3d5e007d913cde9a35b6cbc516022 Mon Sep 17 00:00:00 2001 From: Soshi Katsuta Date: Sun, 11 Dec 2016 00:32:28 +0900 Subject: [PATCH 02/16] 02: add my JavaScript code Signed-off-by: Soshi Katsuta --- 02 - JS + CSS Clock/index-START.html | 8 +++++--- 02 - JS + CSS Clock/index.js | 27 +++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 02 - JS + CSS Clock/index.js diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..b4f8c91dc6 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,15 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - - diff --git a/02 - JS + CSS Clock/index.js b/02 - JS + CSS Clock/index.js new file mode 100644 index 0000000000..44588de597 --- /dev/null +++ b/02 - JS + CSS Clock/index.js @@ -0,0 +1,27 @@ +const units = [ + { + elem: document.querySelector('.second-hand'), + method: 'getSeconds', + max: 60 + }, + { + elem: document.querySelector('.min-hand'), + method: 'getMinutes', + max: 60 + }, + { + elem: document.querySelector('.hour-hand'), + method: 'getHours', + max: 12 + } +]; + +setInterval(setDate, 1000); + +function setDate() { + units.forEach(unit => { + const now = new Date(); + const deg = (now[unit.method]() / unit.max) * 360 + 90; + unit.elem.style.transform = `rotate(${deg}deg)`; + }); +} From 6320c80989aa37feea52570844c05a3d2ba4c289 Mon Sep 17 00:00:00 2001 From: Soshi Katsuta Date: Sun, 11 Dec 2016 03:45:35 +0900 Subject: [PATCH 03/16] 06: add my JavaScript code Signed-off-by: Soshi Katsuta --- 06 - Type Ahead/index-START.html | 32 ++++++++++++++------------------ 06 - Type Ahead/index.js | 30 ++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 18 deletions(-) create mode 100644 06 - Type Ahead/index.js diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..94e2a10c11 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,18 @@ - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
  • -
  • or a state
  • -
-
- + + + Type Ahead 👀 + + + +
+ +
    +
  • Filter for a city
  • +
  • or a state
  • +
+
+ diff --git a/06 - Type Ahead/index.js b/06 - Type Ahead/index.js new file mode 100644 index 0000000000..ec8d8afb51 --- /dev/null +++ b/06 - Type Ahead/index.js @@ -0,0 +1,30 @@ +class Suggester { + constructor() { + this.cities = []; + const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + fetch(endpoint) + .then(resp => resp.json()) + .then(data => this.cities.push(...data)); + } + + listMatches(wordToMatch) { + const regex = new RegExp(wordToMatch, 'gi'); + const html = this.cities + .filter(place => regex.test(place.city) || regex.test(place.state)) + .map(place => { + const highlight = `${wordToMatch}`; + const cityName = place.city.replace(regex, highlight); + const stateName = place.state.replace(regex, highlight); + return `
  • ${cityName}, ${stateName}
  • `; + }) + .join("\n"); + return html; + } +} + +const searchInput = document.querySelector('input.search'); +const suggestions = document.querySelector('ul.suggestions'); +const suggester = new Suggester(); +const displayMatches = () => suggestions.innerHTML = suggester.listMatches(searchInput.value); +searchInput.addEventListener('change', displayMatches); +searchInput.addEventListener('keyup', displayMatches); From 1bbfef75dbccc7c74f52f6de5599eaa9c8449242 Mon Sep 17 00:00:00 2001 From: Soshi Katsuta Date: Sun, 11 Dec 2016 16:35:01 +0900 Subject: [PATCH 04/16] 08: add my JavaScript code Signed-off-by: Soshi Katsuta --- 08 - Fun with HTML5 Canvas/index-START.html | 3 +- 08 - Fun with HTML5 Canvas/index.js | 55 +++++++++++++++++++++ 2 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 08 - Fun with HTML5 Canvas/index.js diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..11b5ffcb7f 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -6,8 +6,7 @@ - +