From 9338736cd357ee96bf58fb3fbbd4a6463886c172 Mon Sep 17 00:00:00 2001
From: Oleg Tkachenko <oleggko1@gmail.com>
Date: Mon, 6 Feb 2017 01:40:25 +0200
Subject: [PATCH] commit start files

---
 .gitignore                                    |  4 -
 01 - JavaScript Drum Kit/index-START.html     | 20 ++++-
 02 - JS + CSS Clock/index-START.html          | 35 +++++++--
 03 - CSS Variables/index-START.html           | 31 +++++++-
 04 - Array Cardio Day 1/index-START.html      | 74 +++++++++++++++++--
 05 - Flex Panel Gallery/index-START.html      | 44 +++++++++--
 06 - Type Ahead/index-START.html              | 40 ++++++++++
 07 - Array Cardio Day 2/index-START.html      | 22 +++++-
 08 - Fun with HTML5 Canvas/index-START.html   | 51 +++++++++++++
 09 - Dev Tools Domination/index-START.html    | 31 ++++++++
 .../index-START.html                          | 20 +++++
 11 - Custom Video Player/index.html           |  1 +
 11 - Custom Video Player/scripts.js           | 67 +++++++++++++++++
 12 - Key Sequence Detection/index-START.html  |  9 +++
 13 - Slide in on Scroll/index-START.html      | 20 +++++
 .../index-START.html                          | 74 +++++++++++++++++--
 15 - LocalStorage/index-START.html            | 38 +++++++++-
 15 - LocalStorage/style.css                   |  4 +-
 16 - Mouse Move Shadow/index-start.html       | 29 ++++++++
 17 - Sort Without Articles/index-START.html   | 11 +++
 .../index-START.html                          | 20 +++++
 19 - Webcam Fun/scripts.js                    |  4 +
 .../index-START.html                          | 22 +++++-
 23 - Speech Synthesis/index-START.html        | 33 +++++++++
 readme.md                                     | 17 -----
 25 files changed, 664 insertions(+), 57 deletions(-)
 delete mode 100644 .gitignore
 delete mode 100644 readme.md

diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 6e1a3738b8..0000000000
--- a/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-.DS_Store
-node_modules/
-*.log
-haters/
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..445dc7529d 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+	function playSound(e){
+		const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //Шаблонные строки https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings
+		const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+		if (!audio) return;
+		audio.volume = 0.2;
+		audio.currentTime = 0;
+		audio.play();
+		key.classList.add('playing');
+	}
+	
+	function removeTransition(e){
+		if (e.propertyName !== 'transform') return;
+		this.classList.remove('playing');
+	}
+	
+	const keys = document.querySelectorAll('.key');
+	keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+	window.addEventListener('keydown', playSound);
+	
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..36155bb645 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -56,17 +56,40 @@
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
-      position: absolute;
-      top:50%;
+		width:50%;
+		height:6px;
+		background:black;
+		position: absolute;
+		top:50%;
+		transform-origin: 100%;
+		transform: rotate(90deg);
+		transition: all .05s;
+		transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
-
+	var secondHand = document.querySelector('.second-hand');
+	var minsHand = document.querySelector('.min-hand');
+	var hourHand = document.querySelector('.hour-hand');
+	
+	function setDate(){
+		var now = new Date();
+		var seconds = now.getSeconds();
+		var secondDegrees = ((seconds / 60) * 360) + 90;
+		secondHand.style.transform = `rotate(${secondDegrees}deg)`;
+		
+		var mins = now.getMinutes();
+		var minDegrees = ((mins / 60) * 360) + 90;
+		minsHand.style.transform = `rotate(${minDegrees}deg)`
+		
+		var hour = now.getHours();
+		var hourDegrees = ((hour / 12) * 360) + 90;
+		hourHand.style.transform = `rotate(${hourDegrees}deg)`
+	}
+	
+	setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..a64755724c 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
-
+	:root {
+		--base: #ffc600;
+		--spacing: 10px;
+		--blur: 10px;
+	}
+	
+	img {
+		padding: var(--spacing);
+		background: var(--base);
+		filter:blur(var(--blur));
+	}
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -29,7 +39,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     body {
       text-align: center;
     }
-
+	
+	h2 {
+		--base: #cc0000;
+	}
+	
+	.hl {
+		color: var(--base);
+	}
     body {
       background: #193549;
       color: white;
@@ -45,9 +62,19 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+	
   </style>
 
   <script>
+	const inputs = document.querySelectorAll('.controls input');
+	
+	function handleUpdate(){
+		const suffix= this.dataset.sizing || '';
+		document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+	}
+	
+	inputs.forEach(input => input.addEventListener('change', handleUpdate));
+	inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..279b13d1b4 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,29 +33,87 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+	const fifteen = inventors.filter(function(inventor){
+		if(inventor.year >= 1500 && inventor.year <= 1599) {
+			return true;
+		}
+	});
+	
+	//arrow function
+	//const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <= 1599));
+	console.table(fifteen);
+	
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
-
+	const fullNames = inventors.map(function(inventor){
+		return inventor.first + ' ' + inventor.last;
+	})
+	
+	//const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+	console.log(fullNames);
+	
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+	/*const ordered = inventors.sort(function(a, b){
+		if (a.year > b.year) {
+			return 1;
+		} else {
+			return -1;
+		}
+	});*/
+	
+	const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+	console.table(ordered);
 
     // Array.prototype.reduce()
-    // 4. How many years did all the inventors live?
-
+	// 4. How many years did all the inventors live?
+	const totalYear = inventors.reduce(function( total, inventor) {
+		return total + (inventor.passed - inventor.year);
+	}, 0);
+	
+	console.log(totalYear);
     // 5. Sort the inventors by years lived
+	const oldest = inventors.sort(function(a, b){
+		const lastGuy = a.passed - a.year;
+		const nextGuy = b.passed - b.year;
+		return lastGuy > nextGuy ? -1 : 1;
+	});
+	
+	console.table(oldest);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
+	/*const category = document.querySelector('.mw-category');
+	const links = Array.from(category.querySelectorAll('a'));
+	
+	const de = links
+		.map(function(link){
+			return link.textContent;
+		})
+		.filter(function(streetNames){
+			return streetNames.toLowerCase().indexOf('de') !== -1;
+		})
+	console.log(de);*/
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
+	const peopleSort = people.sort(function(last, first){
+		const lastOne = last.split(', ');
+		const firstOne = first.split(', ');
+		return lastOne[1] > firstOne[1] ? 1 : -1;
+	});
+	console.log(peopleSort);
     // 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' ];
-
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
+	const transportation = data.reduce(function(obj, item){
+		if (!obj[item]) {
+			obj[item] = 0;
+		}
+		obj[item]++;
+		return obj;
+	}, {});
+	console.log(transportation);
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..b5448aa787 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+	  display: flex;
     }
 
     .panel {
@@ -31,7 +32,6 @@
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
       text-align: center;
-      align-items:center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
@@ -41,6 +41,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+	  flex: 1;
+	  justify-content: center;
+	  align-items: center;
+	  display: flex;
+	  flex-direction: column;
     }
 
 
@@ -54,8 +59,21 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+	  justify-content: center;
+	  align-items: center;
+	  display: flex;
+	  flex: 1 0 auto;
     }
-
+	.panel > *:first-child {
+		transform: translateY(-100%);
+	}
+	.panel.open-active > *:first-child,
+	.panel.open-active > *:last-child{
+		transform: translateY(0);
+	}
+	.panel > *:last-child {
+		transform: translateY(100%);
+	}
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +85,7 @@
     }
 
     .panel.open {
+	  flex: 5;
       font-size:40px;
     }
 
@@ -107,10 +126,23 @@
   </div>
 
   <script>
-
+	const panels = document.querySelectorAll('.panel');
+	function toggleOpen() {
+		this.classList.toggle('open');
+	}
+	function toggleActive(e) {
+		if(e.propertyName.indexOf("flex")) {
+			this.classList.toggle('open-active');
+		}
+		
+	}
+	
+	panels.forEach(function(panel) {
+		panel.addEventListener('click', toggleOpen);
+	})
+	panels.forEach(function(panel) {
+		panel.addEventListener('transitionend', toggleActive);
+	})
   </script>
-
-
-
 </body>
 </html>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..176b567516 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,46 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities =[];
+
+fetch(endpoint)
+	.then(blob => blob.json())
+	.then(data => cities.push(...data));
+
+function findMatches(wordToMatch, cities) {
+	return cities.filter(function(place) {
+		const regex = new RegExp(wordToMatch, 'gi');
+		
+		return place.city.match(regex) || place.state.match(regex);
+	})
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatches(){
+	const matchArray = findMatches(this.value, cities);
+	const html = matchArray.map(place => {
+		const regex = new RegExp(this.value, 'gi');
+		const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+		const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+		return `
+			<li>
+				<span class="name">${cityName}, ${stateName}</span>
+				<span class="population">${numberWithCommas(place.population)}</span>
+			</li>
+		`;
+	}).join('');
+	suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
+
 </script>
   </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..c08052db6c 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,16 +26,34 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
-    // Array.prototype.every() // is everyone 19?
+	const isAdult = people.some(function(person){
+		const currentYear = (new Date()).getFullYear();
+		return currentYear - person.year >= 19;
+	});
+	console.log({isAdult});
 
+	
+    // Array.prototype.every() // is everyone 19?
+	const allAdult = people.every(person => ((new Date()).getFullYear()) - person.year >=19);
+	console.log({allAdult});
+	
+	
     // 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 comment = comments.find(function(comment){
+		return comment.id === 823423;
+	});
+	console.log(comment);
+	
 
     // 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(index);
+	comments.splice(index, 1);
+	console.table(comments);
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..7dc9ba6143 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,57 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const canvas = document.getElementById('draw');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 0;
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+	if (!isDrawing) return;
+	ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+	ctx.beginPath();
+	ctx.moveTo(lastX, lastY);
+	ctx.lineTo(e.offsetX, e.offsetY);
+	ctx.stroke();
+	lastX = e.offsetX;
+	lastY = e.offsetY;
+	
+	hue++;
+	if(hue >= 360) hue = 0;
+	
+	if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+		direction = !direction;
+	}
+	if (direction) {
+		ctx.lineWidth++;
+	} else {
+		ctx.lineWidth--;
+	}
+	
+	
+}
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousedown', (e) => {
+	isDrawing = true;
+	lastX = e.offsetX;
+	lastY = e.offsetY;
+});
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false);
+
 </script>
 
 <style>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..52245e6db8 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,59 @@
     }
 
     // Regular
+	console.log('hello');
 
     // Interpolated
+	console.log('hello I am a %s string!', ':)');
 
     // Styled
+	console.log('%c I am some great text', 'font-size: 18px; background: red');
 
     // warning!
+	console.warn('oh nooo')
 
     // Error :|
+	console.error('shit!');
 
     // Info
+	console.info('crocodiles eat 3-4 people per year');
 
     // Testing
+	console.assert( 1 === 2, 'That is wrong!');
 
     // clearing
+	//console.clear();
 
     // Viewing DOM Elements
+	var p = document.querySelector('p');
+	console.log(p);
+	console.dir(p);
 
     // Grouping together
+	dogs.forEach(dog => {
+		console.groupCollapsed(`${dog.name}`);
+		console.log(`This is ${dog.name}`);
+		console.log(`${dog.name} is ${dog.age} years old`);console.log(`${dog.name} is ${dog.age * 7} dog years old`);
+		console.groupEnd(`${dog.name}`);
+	})
 
     // counting
+	console.count('Oleg');
+	console.count('Oleg');
+	console.count('Oleg');
+	console.count('Oleg');
 
     // timing
+	console.time('fetching data');
+	fetch('https://api.github.com/users/oltkachenko')
+		.then(data => data.json())
+		.then(data => {
+			console.timeEnd('fetching data');
+			console.log(data);
+		})
+	
+	//table
+	console.table(dogs);
 
   </script>
 </body>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..acf980c646 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,26 @@
   </div>
 
 <script>
+const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+
+let lastChecked;
+
+function handleCheck(e){
+	let inBetween = false;
+	if (e.shiftKey && this.checked) {
+		checkboxes.forEach(checkbox => {
+			if (checkbox === this || checkbox === lastChecked) {
+				inBetween = !inBetween;
+			}
+			if (inBetween) {
+				checkbox.checked = true;
+			}
+		})
+	}
+	lastChecked = this;
+};
+
+checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..b85d2cb985 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -17,6 +17,7 @@
        <button class="player__button toggle" title="Toggle Play">►</button>
        <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
+	   <button class="fullScreen player__button">[ ]</button>
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
      </div>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..e2faaa1f55 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,67 @@
+/* Get Our Elements */
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+const fullScreen = player.querySelector('.fullScreen');
+
+function togglePlay(){
+	/* if (video.paused){
+		video.play();
+	} else {
+		video.pause();
+	} */
+	const method = video.paused ? 'play' : 'pause';
+	video[method]();
+}
+
+function updateButton() {
+	const icon = this.paused ? '>' : '||';
+	toggle.textContent = icon;
+}
+
+function skip() {
+	video.currentTime +=parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+	video[this.name] = this.value;
+}
+
+function handleProgress() {
+	const percent = (video.currentTime / video.duration) * 100;
+	progressBar.style.flexBasis = percent + '%';
+}
+
+function scrub(e) {
+	const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+	video.currentTime = scrubTime;
+}
+
+function toggleFullScreen(){
+	if (video.webkitRequestFullscreen){
+		video.webkitRequestFullscreen();
+	} else if (video.mozRequestFullScreen){
+		video.mozRequestFullScreen();
+	}
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
+fullScreen.addEventListener('click', toggleFullScreen);
+
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..8a0cbe6130 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,15 @@
 </head>
 <body>
 <script>
+const pressed = [];
+const secretCode = 'oleg';
+window.addEventListener('keyup', (e) => {
+	pressed.push(e.key);
+	pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+	if (pressed.join('') == secretCode) {
+		cornify_add();
+	}
+})
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..dea5daf0d6 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -57,6 +57,26 @@ <h1>Slide in on Scroll</h1>
         if (callNow) func.apply(context, args);
       };
     }
+	
+	const sliderImages = document.querySelectorAll('.slide-in');
+	
+	function checkSlide (e){
+		sliderImages.forEach(slideImage => {
+			const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;
+			const imageBottom = slideImage.offsetTop + slideImage.height;
+			
+			const isHalfShown = slideInAt > slideImage.offsetTop;
+			const isNotScrolledPast = window.scrollY < imageBottom;
+			
+			if (isHalfShown && isNotScrolledPast) {
+				slideImage.classList.add('active')
+			} else {
+				slideImage.classList.remove('active');
+			}
+		});
+	}
+	
+	window.addEventListener('scroll', debounce(checkSlide));
 
   </script>
 
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..c99d5f55bb 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,13 +8,30 @@
 
   <script>
     // start with strings, numbers and booleans
-
-    // Let's say we have an array
+	let age = 100;
+	let age2 = age;
+	console.log(age, age2);
+    age = 200;
+	console.log(age, age2);
+	
+	let name = 'Oleg';
+	let name2 = name;
+	console.log (name, name2);
+	name = 'Anna';
+	console.log(name, name2);
+	
+	
+	// Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+	const team = players;
+	
+	console.log(players, team);
 
     // You might think we can just do something like this:
+	/*team[3] = 'lux';
+	console.log(players, team);*/
 
     // however what happens when we update that array?
 
@@ -25,26 +42,69 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
-
+	const team2 = players.slice();
+	/*team2[3] = 'lux';
+	console.log(players, team2);*/
+	
     // one day
 
     // or create a new array and concat the old one in
-
+	const team3 = [].concat(players);
+	/*team3[3] = 'lux';
+	console.log(players, team3);*/
+	
     // or use the new ES6 Spread
+	const team4 = [...players];
+	/*team4[3] = 'lux';
+	console.log(players, team4);*/
+	
+	const team5 = Array.from(players);
+	team5[3] = 'lux';
+	console.log(players, team5);
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
+	const person = {
+		name: 'Oleg T',
+		age: 27
+	}
 
     // and think we make a copy:
-
+	const captain = person
+	/*captain.number = 99;
+	console.log(person, captain);*/
+	
     // how do we take a copy instead?
-
+	const cap2 = Object.assign({}, person, {number: 99})
+	console.log(person, cap2);
+	
+	
     // We will hopefully soon see the object ...spread
-
+	//const cap3 = {...person};
+	
+	
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
+	const oleg = {
+		name: 'oleg',
+		age: 27,
+		social: {
+			facebook: 'oleg.tkachenko'
+		}
+	}
+	
+	console.log(oleg);
+	const dev = Object.assign({}, oleg);
+	console.log(dev);
+	
+	/*dev.social.facebook = 'test';
+	console.log(dev, oleg);*/
+	
+	const dev2 = JSON.parse(JSON.stringify(oleg));
+	dev2.social.facebook = 'test';
+	console.log(dev2, oleg);
 
   </script>
 
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..c273ecc98c 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -28,7 +28,43 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  
+  function addItem(e) {
+	e.preventDefault();
+	const text = (this.querySelector('[name=item]')).value;
+	const item = {
+		text: text,
+		done: false
+	}
+	items.push(item);
+	populateList(items, itemsList);
+	localStorage.setItem('items', JSON.stringify(items));
+	this.reset();
+  }
+  
+  function populateList(plates = [], platesList) {
+	platesList.innerHTML = plates.map(function(plate, i) {
+		return `
+		<li>
+			<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''}/>
+			<label for="item${i}">${plate.text}</label>
+		</li>`;
+	}).join('');
+  }
+  
+  function toggleDone(e){
+	if (!e.target.matches('input')) return;
+	const el = e.target;
+	const index = el.dataset.index;
+	items[index].done = !items[index].done;
+	localStorage.setItem('items', JSON.stringify(items));
+	populateList(items, itemsList);
+  }
+  
+  addItems.addEventListener('submit', addItem);  
+  itemsList.addEventListener('click', toggleDone);  
+  populateList(items, itemsList);
 
 </script>
 
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..8727d4d143 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -59,12 +59,12 @@
     }
 
     .plates input + label:before {
-      content: '⬜️';
+      content: 'x';
       margin-right: 10px;
     }
 
     .plates input:checked + label:before {
-      content: '🌮';
+      content: 'v';
     }
 
     .add-items {
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..cfaa142de1 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,35 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+	const hero = document.querySelector('.hero');
+	const text = hero.querySelector('h1');
+	const walk = 500;
+	
+	function shadow(e) {
+		const width = hero.offsetWidth;
+		const height = hero.offsetHeight;
+		
+		//const {offsetWidth: width, offsetHeight: height} = hero;
+		
+		let x = e.offsetX;
+		let y = e.offsetY;
+		if (this !== e.target) {
+			x = x + e.target.offsetLeft;
+			y = y + e.target.offsetTop;
+		}
+		
+		const xWalk = Math.round((x / width * walk) - (walk / 2));
+		const yWalk = Math.round((y / height * walk) - (walk / 2));
+		
+		text.style.textShadow = `
+		${xWalk}px ${yWalk * -1}px 0 rgba(255, 0, 255, .7),
+		${xWalk * -1}px ${yWalk}px 0 rgba(0, 255, 255, .7),
+		${yWalk}px ${xWalk * -1}px 0 rgba(0, 0, 255, .7),
+		${yWalk * -1}px ${xWalk}px 0 rgba(255, 255, 0, .7)`;
+	}
+	
+	hero.addEventListener('mousemove', shadow);
+
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..9e3473b52c 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -45,6 +45,17 @@
 <script>
 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+	function strip(item) {
+		return item.replace(/^(a |the |an )/i, '').trim();
+	}
+
+	const sortedBands = bands.sort(function (a, b) {
+		return strip(a) > strip(b) ? 1 : -1;
+	});
+	
+	document.querySelector('#bands').innerHTML = sortedBands.map(function(band){
+		return `<li>${band}</li>`;
+	}).join('');
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..c6c04b937e 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -5,6 +5,7 @@
   <title>Videos</title>
 </head>
 <body>
+	<div class="total"></div>
   <ul class="videos">
     <li data-time="5:43">
       Video 1
@@ -182,6 +183,25 @@
     </li>
 
 <script>
+	const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+	
+	const seconds = timeNodes
+	.map(function(node){return node.dataset.time})
+	.map(timeCode => {
+		const [mins, secs] = timeCode.split(':').map(parseFloat);
+		return (mins * 60) + secs;
+	})
+	.reduce((total, vidSeconds) => total + vidSeconds);
+	
+	let secondsLeft = seconds;
+	const hours = Math.floor(secondsLeft / 3600);
+	secondsLeft = secondsLeft % 3600;
+	
+	const mins = Math.floor(secondsLeft / 60);
+	secondsLeft = secondsLeft % 60;
+	
+	const total = document.querySelector('.total');
+	total.innerHTML = (hours + ',' + mins + ',' + secondsLeft);
 </script>
 </body>
 </html>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..41d2551465 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,7 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+
+function getVideo() {
+	
+}
\ No newline at end of file
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..b19b37800f 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,27 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX
+      }
+
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px )`;
+    }
+
+    triggers.forEach( a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..065ca2a567 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,6 +35,39 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+  msg.text = document.querySelector('[name="text"]').value;
+
+  function populateVoices() {
+    voices = this.getVoices();
+    const voiceOptions = voices
+    .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
+    .join('');
+    voicesDropdown.innerHTML = voiceOptions;
+  }
+
+  function setVoice() {
+    msg.voice = voices.find(voice => voice.name === this.value);
+    toggle();
+  }
+
+  function toggle(startOver = true) {
+    speechSynthesis.cancel();
+    if(startOver) {
+      speechSynthesis.speak(msg);
+    }
+  }
+
+  function setOption(){
+    msg[this.name] = this.value;
+    toggle();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(option => option.addEventListener('change', setOption));
+  speakButton.addEventListener('click', toggle);
+  stopButton.addEventListener('click', toggle.bind(null, false));
+
 </script>
 
 </body>
diff --git a/readme.md b/readme.md
deleted file mode 100644
index 5a1eaa18c8..0000000000
--- a/readme.md
+++ /dev/null
@@ -1,17 +0,0 @@
-![](https://javascript30.com/images/JS3-social-share.png)
-
-# JavaScript30
-
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge. 
-
-Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
-
-Text-based guides (unofficial) for the challenges can be found here - [Text Guides](https://github.com/nitishdayal/JavaScript30).
-
-## Pull Requests
-
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. 
-
-The starter files + solutions will be updated if/when the videos are updated. 
-
-Thanks!