From 647ae8f43c827d6b85533032d8f6be975fb982ab Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Mon, 19 Dec 2016 16:21:27 -0200 Subject: [PATCH 01/29] Add my solution to Exercise 01 --- 01 - JavaScript Drum Kit/index.html | 96 +++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..18a5a725ed --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,96 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From 3f333f2915b2dd719500e5bfc05c634073dd59ee Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Tue, 20 Dec 2016 14:39:49 -0200 Subject: [PATCH 02/29] Add my solution to exercise 02 --- 02 - JS + CSS Clock/index.html | 128 +++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 02 - JS + CSS Clock/index.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html new file mode 100644 index 0000000000..b165c0dbc2 --- /dev/null +++ b/02 - JS + CSS Clock/index.html @@ -0,0 +1,128 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+
+
+ + + + + + + From 2286ff1fd56db164418039d022545b564d52b397 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Tue, 20 Dec 2016 14:52:05 -0200 Subject: [PATCH 03/29] Apply E01 solution to index-START.html --- 01 - JavaScript Drum Kit/index-START.html | 30 +++++++ 01 - JavaScript Drum Kit/index.html | 96 ----------------------- 2 files changed, 30 insertions(+), 96 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..18a5a725ed 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,36 @@ diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html deleted file mode 100644 index 18a5a725ed..0000000000 --- a/01 - JavaScript Drum Kit/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - From 9ee4ceca726dcfe6dee31d6fce6deb749dbcaa56 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Tue, 20 Dec 2016 14:59:00 -0200 Subject: [PATCH 04/29] Apply E02 solution to index-START.html --- 02 - JS + CSS Clock/index-START.html | 61 ++++++++++++- 02 - JS + CSS Clock/index.html | 128 --------------------------- 2 files changed, 58 insertions(+), 131 deletions(-) delete mode 100644 02 - JS + CSS Clock/index.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..b165c0dbc2 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -9,7 +9,9 @@
-
+
+
+
@@ -56,17 +58,70 @@ } .hand { - width:50%; + width:55%; height:6px; - background:black; position: absolute; top:50%; + + transform: rotate(90deg); + transform-origin: 90.90909091%; + transition: all 0.1s; + transition-timing-function: cubic-bezier(0.5, 1.8, 0.6, 1); + } + + .hour-hand .inner { + background: black; + margin-left: 25%; + width: 75%; + height: 100%; + } + + .min-hand { + background: black; + } + + .second-hand { + background: #c11; } diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html deleted file mode 100644 index b165c0dbc2..0000000000 --- a/02 - JS + CSS Clock/index.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
-
-
- - - - - - - From 31d0d5fe1450edb5c85447b4e1db292b332c2f8d Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Wed, 21 Dec 2016 11:40:11 -0200 Subject: [PATCH 05/29] Add my solution to exercise 03 --- 03 - CSS Variables/index-START.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..9f505c8355 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,22 @@

Update CSS Variables with JS

From 24d069b52992533fd8c23e537da1b14980abda83 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Thu, 22 Dec 2016 16:51:29 -0200 Subject: [PATCH 06/29] Add my solution to exercise 04 --- 04 - Array Cardio Day 1/index-START.html | 44 ++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..a99ab1e493 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,31 +31,75 @@ const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + console.log('1. Inventors born in the 1500s:') + + const xviCentury = inventors.filter(i => 1500 <= i.year && i.year < 1600) + console.table(xviCentury) + // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + console.log("2. Inventors' full names:") + + const fullNames = inventors.map(i => `${i.first} ${i.last}`) + console.log(fullNames) + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + console.log('3. Inventors sorted by birth year:') + + const byBirthYear = inventors.sort((a, b) => a.year - b.year) + console.table(byBirthYear) + // Array.prototype.reduce() // 4. How many years did all the inventors live? + console.log("4. Inventors' total longevity:") + + const longevity = (i) => i.passed - i.year + const totalLongevity = inventors.reduce((sum, i) => sum + longevity(i), 0) + console.log(totalLongevity) + // 5. Sort the inventors by years lived + console.log('5. Inventors sorted by longevity:') + + const byLongevity = inventors.sort((a, b) => longevity(a) - longevity(b)) + console.table(byLongevity) + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // Array.from(document.querySelectorAll('.mw-category a')) + // .map(a => a.textContent) + // .filter(name => name.includes('de')) + // 7. sort Exercise // Sort the people alphabetically by last name + console.log('7. People sorted by last name:') + + const byLastName = people.sort() + console.log(byLastName) + // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + console.log('8. Number of instances of each item:') + + const counts = data.reduce((counts, item) => { + counts[item] = (counts[item] || 0) + 1 + return counts + }, {}) + console.log(counts) + From 6a209ec35b4269b5d6c74379ce20b901b7aff6b3 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 23 Dec 2016 11:24:34 -0200 Subject: [PATCH 07/29] Add my solution to exercise 05 --- 05 - Flex Panel Gallery/index-START.html | 36 ++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..219cbfe496 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,8 @@ .panels { min-height:100vh; overflow: hidden; + + display: flex; } .panel { @@ -41,6 +43,11 @@ font-size: 20px; background-size:cover; background-position:center; + + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; } @@ -61,13 +68,26 @@ font-family: 'Amatic SC', cursive; text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; + + flex: 1; + display: flex; + justify-content: center; + align-items: center; + } + .panel:not(.active) p:first-child { + transform: translateY(-100%); } .panel p:nth-child(2) { font-size: 4em; } + .panel:not(.active) p:last-child { + transform: translateY(100%); + } .panel.open { font-size:40px; + + flex: 5; } .cta { @@ -108,6 +128,22 @@ From 191a50386e7cfd362e641454c02bafe0cb4a9e72 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 23 Dec 2016 17:15:46 -0200 Subject: [PATCH 08/29] Add my solution to exercise 06 --- 06 - Type Ahead/index-START.html | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..0a3e074c3c 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,40 @@ From 1e92b8679b027f9e0c6f771a31ebc78650b60cb8 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sun, 25 Dec 2016 09:36:10 -0200 Subject: [PATCH 09/29] Add my solution to exercise 07 --- 07 - Array Cardio Day 2/index-START.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..ec5d60e847 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,35 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + function is19(person) { + const age = new Date().getFullYear() - person.year + return age >= 19 + } + console.log({ + isSomeone19: people.some(is19) + }) + // Array.prototype.every() // is everyone 19? + console.log({ + isEveryone19: people.every(is19) + }) // 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 + console.log( + comments.find(comment => comment.id === 823423) + ) // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(comment => comment.id === 823423) + console.log(comments[index]) + + console.table(comments) + comments.splice(index, 1) + console.table(comments) From 60f1dac2f081526d64b11fca81939f7d7ee67903 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Wed, 28 Dec 2016 13:51:06 -0200 Subject: [PATCH 10/29] Add my solution to exercise 08 --- 08 - Fun with HTML5 Canvas/index-START.html | 49 +++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..413f0fb478 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,11 +7,60 @@ From 2306e50119a8354a5e57a9ab2437fccf7bfb62b6 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Thu, 29 Dec 2016 16:10:40 -0200 Subject: [PATCH 11/29] Add my solution to exercise 10 --- .../index-START.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..fca33c0f2c 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -104,6 +104,20 @@
From 862dd030acdb84c32aed83474bdd74510e9f99c1 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 30 Dec 2016 19:58:24 -0200 Subject: [PATCH 12/29] Add my solution to exercise 11 --- 11 - Custom Video Player/scripts.js | 106 ++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..2be4be9e40 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,106 @@ +const player = document.querySelector('.player') + +const video = player.querySelector('video') +const playButton = player.querySelector('.toggle') + +const progress = player.querySelector('.progress') +const progressBar = player.querySelector('.progress__filled') + +const sliders = player.querySelectorAll('input[type="range"]') +const skipButtons = player.querySelectorAll('[data-skip]') + + +// Toggle playback when clicking the video or the Play/Pause button + +video.addEventListener('click', togglePlay) +playButton.addEventListener('click', togglePlay) + +function togglePlay() { + video[video.paused ? 'play' : 'pause']() +} + + +// Keep the Play/Pause button in sync with the playback state + +video.addEventListener('play', onTogglePlay) +video.addEventListener('pause', onTogglePlay) + +function onTogglePlay() { + playButton.textContent = (video.paused) ? '►' : '❚ ❚' +} + + +// Keep the progress bar updated + +video.addEventListener('durationchange', updateProgress) +video.addEventListener('timeupdate', updateProgress) + +function updateProgress() { + const percentage = 100 * (video.currentTime / video.duration) + progressBar.style.setProperty('flex-basis', `${percentage}%`) +} + + +// When the progress bar is clicked or scrubbed, seek to that position + +progress.addEventListener('mousedown', seek) +progress.addEventListener('mousemove', scrub) + +function seek(e) { + const ratio = e.offsetX / progress.clientWidth + video.currentTime = ratio * video.duration +} + +function scrub(e) { + if (e.buttons === 1) seek(e) +} + + +// Sliders for volume and playback rate + +sliders.forEach(slider => slider.addEventListener('input', onSlider)) + +function onSlider() { + const propertyName = this.name // 'volume' or 'playbackRate' + video[propertyName] = this.value +} + + +// Skip back/forward buttons + +skipButtons.forEach(skipButton => skipButton.addEventListener('click', skip)) + +function skip() { + const seconds = +this.dataset.skip + video.currentTime += seconds +} + + +// Bonus: Full Screen button + +const fullscreenButton = document.createElement('button') + +// append button to player controls +fullscreenButton.classList.add('player__button') +fullscreenButton.title = 'Toggle Full Screen' +fullscreenButton.textContent = '⤢' +player.querySelector('.player__controls').append(fullscreenButton) + +// add style rule for full screen player +document.styleSheets[0].insertRule(` + .player:-webkit-full-screen { + border: none; + max-width: none; + width: 100%; + } +`, 0) + +fullscreenButton.addEventListener('click', toggleFullscreen) + +function toggleFullscreen() { + if (document.webkitFullscreenElement) { + document.webkitExitFullscreen() + } else { + player.webkitRequestFullscreen() + } +} From b2b28b2dde4f43c02bf290a387c0dd44d8a3c74f Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sat, 31 Dec 2016 12:43:35 -0200 Subject: [PATCH 13/29] Add my solution to exercise 12 --- 12 - Key Sequence Detection/index-START.html | 35 ++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786140..7a3d79e066 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,41 @@ From c9f53613257703939e715a4849b8e2a79dceba46 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sun, 1 Jan 2017 10:01:10 -0200 Subject: [PATCH 14/29] Add my solution to exercise 13 --- 13 - Slide in on Scroll/index-START.html | 31 +++++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8fccb..34742637e6 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -43,21 +43,28 @@

Slide in on Scroll

From 131bc591e0c1598612fdb3b4cc87a2cc4f1abc42 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Tue, 3 Jan 2017 11:02:16 -0200 Subject: [PATCH 17/29] Add my solution to exercise 17 --- 17 - Sort Without Articles/index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..9aa93b028a 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -45,6 +45,22 @@ From 52e18650ca2872276e3e205f65536f320dbeb81d Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Tue, 3 Jan 2017 12:54:02 -0200 Subject: [PATCH 18/29] Add my solution to exercise 18 --- .../index-START.html | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..78834bd6ea 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,33 @@ From b3317fc24d78956c485dc20aab89eea819a9a963 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Wed, 4 Jan 2017 19:57:19 -0200 Subject: [PATCH 19/29] Add my (partial) solution to exercise 19 --- 19 - Webcam Fun/scripts.js | 46 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..cac3f5f546 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,49 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +navigator.mediaDevices + .getUserMedia({video: true, audio: false}) + .then(initVideo) + +function initVideo(mediaStream) { + video.srcObject = mediaStream + video.addEventListener('canplay', initCanvas, {once: true}) + video.play() +} + +function initCanvas() { + ;[canvas.width, canvas.height] = [video.videoWidth, video.videoHeight] + onAnimationFrame(() => { + ctx.drawImage(video, 0, 0/*, canvas.width, canvas.height*/) + }) +} + +function takePhoto() { + snap.currentTime = 0 + snap.play() + + const dataURL = canvas.toDataURL('image/jpeg') + strip.prepend( + h('a', {href: dataURL, download: `Photo_${Date.now()}`}, + h('img', {src: dataURL}) + ) + ) +} + +function onAnimationFrame(callback) { + function onFrame() { + requestAnimationFrame(onFrame) + callback() + } + requestAnimationFrame(onFrame) +} + +function h(tagName, attributes, ...children) { + const element = document.createElement(tagName) + for (const [key, value] of Object.entries(attributes)) { + if (value != null) element.setAttribute(key, value) + } + element.append(...children) + return element +} From da22a18d196ecbec441746214518bae7f2d22897 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Thu, 5 Jan 2017 13:00:27 -0200 Subject: [PATCH 20/29] Add my solution to exercise 20 --- 20 - Speech Detection/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..1f1014f47f 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -12,6 +12,24 @@ From bd66e1c15c150e34e11345eccbf883006b11b9fa Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 6 Jan 2017 12:23:56 -0200 Subject: [PATCH 21/29] Add my solution to exercise 21 --- 21 - Geolocation/index-START.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index a1b981b1cd..50525e9bf1 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -57,6 +57,22 @@

/*Compass: https://thenounproject.com/search/?q=compass&i=592352*/ From 8875bbd76ec52635be7f52933acbb6893dea6709 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 6 Jan 2017 16:00:01 -0200 Subject: [PATCH 22/29] Add my solution to exercise 22 --- .../index-START.html | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..40aba0d84a 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -26,8 +26,31 @@ - From a0d5effc12e6c758b8bcd5f2f040b8aac17b603b Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sat, 7 Jan 2017 13:23:56 -0200 Subject: [PATCH 23/29] Add my solution to exercise 23 --- 23 - Speech Synthesis/index-START.html | 62 +++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..f3b3d260ba 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -17,24 +17,82 @@

The Voiceinator 5000

- + + - + From 3b15e904161a283f9c9a3adb8919e8a1e62c7ee8 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Mon, 9 Jan 2017 13:32:53 -0200 Subject: [PATCH 24/29] Add my solution to exercise 24 --- 24 - Sticky Nav/index-START.html | 15 +++++++++++++++ 24 - Sticky Nav/style-START.css | 14 +++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..4289be71b6 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -55,6 +55,21 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..46326200e1 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -19,10 +19,14 @@ body { padding:40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); - transform: scale(0.98); + transform: scale(0.99); transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height:50vh; @@ -48,6 +52,10 @@ nav { z-index: 1; } +.fixed-nav nav { + position: fixed; +} + nav ul { margin: 0; padding:0; @@ -72,6 +80,10 @@ li.logo { font-size: 30px; } +.fixed-nav li.logo { + max-width: 100%; +} + li.logo a { color:black; } From d556ee9f2d5eb25fdc500f3c6393c3b439d3c264 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Thu, 12 Jan 2017 15:02:09 -0200 Subject: [PATCH 25/29] Add my solution to exercise 26 --- 26 - Stripe Follow Along Nav/index-START.html | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..a6ce8c62cd 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,42 @@

Cool

From bb3f08f84487763cc4ac26263ae5ae42da841804 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Fri, 13 Jan 2017 13:15:44 -0200 Subject: [PATCH 26/29] Add my solution to exercise 27 --- 27 - Click and Drag/index-START.html | 39 ++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..9d56abaa57 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,45 @@ From 9abf804aec34957ab0c20ffb93b7117699a44423 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sat, 14 Jan 2017 11:41:05 -0200 Subject: [PATCH 27/29] Add my solution to exercise 28 --- 28 - Video Speed Controller/index-START.html | 34 ++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..7bb6701c84 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,40 @@ From 65d2a3b3e0e67457c5455984032175aabfc95b42 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Sat, 14 Jan 2017 16:00:23 -0200 Subject: [PATCH 28/29] Add my solution to exercise 29 --- 29 - Countdown Timer/scripts-START.js | 60 +++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..c200c6c644 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,60 @@ +const timer = document.querySelector('.timer') + +const timerButtons = timer.querySelectorAll('.timer__button') +const customTimerForm = timer.querySelector('form') + +const timeLeftLabel = timer.querySelector('.display__time-left') +const endTimeLabel = timer.querySelector('.display__end-time') + +timerButtons.forEach(btn => btn.addEventListener('click', startPresetTimer)) +customTimerForm.addEventListener('submit', startCustomTimer) + +// + +function startPresetTimer() { + const seconds = +this.dataset.time + startTimer(seconds) +} + +function startCustomTimer(e) { + e.preventDefault() + const minutes = +this.minutes.value + this.reset() + if (! isNaN(minutes)) startTimer(minutes * 60) +} + +// + +let activeTimer = null + +function startTimer(seconds) { + const endTime = new Date(Date.now() + seconds * 1000) + endTimeLabel.textContent = 'Be back at ' + formatTime(endTime) + + clearInterval(activeTimer) + activeTimer = setInterval(() => updateTimer(endTime), 1000) + updateTimer(endTime) +} + +function updateTimer(endTime) { + const remaining = endTime - Date.now() + timeLeftLabel.textContent = formatSeconds(remaining > 0 ? remaining : 0) + if (remaining < 0) clearInterval(activeTimer) +} + +function formatSeconds(millis) { + const totalSeconds = Math.round(millis / 1000) + const minutes = Math.floor(totalSeconds / 60) + const seconds = totalSeconds % 60 + return `${minutes}:${twoDigits(seconds)}` +} + +function formatTime(date) { + const hours = date.getHours() + const minutes = date.getMinutes() + return `${hours}:${twoDigits(minutes)}` +} + +function twoDigits(number) { + return (number < 10) ? `0${number}` : `${number}` +} From f98cc2a2b26643b34631f05e3e032be30dde42e6 Mon Sep 17 00:00:00 2001 From: Diogo Campos Date: Mon, 16 Jan 2017 11:37:14 -0200 Subject: [PATCH 29/29] Add my solution to exercise 30 --- 30 - Whack A Mole/index-START.html | 50 +++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..fe01e294bf 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -33,10 +33,58 @@

Whack-a-mole! 0