From d4c5fc4e99bef5b4276b6ae47a0c44008c7381c3 Mon Sep 17 00:00:00 2001
From: Andrew Ellis <astoellis@gmail.com>
Date: Wed, 21 Dec 2016 15:06:22 -0500
Subject: [PATCH] added stuff

---
 01 - JavaScript Drum Kit/index-START.html     |  34 ++++++
 01 - JavaScript Drum Kit/style.css            |   8 +-
 02 - JS + CSS Clock/index-START.html          |  58 ++++++++++
 03 - CSS Variables/index-START.html           |  47 ++++++++
 04 - Array Cardio Day 1/index-START.html      |  61 ++++++++++-
 05 - Flex Panel Gallery/index-START.html      |  41 +++++++
 06 - Type Ahead/index-START.html              |  39 +++++++
 08 - Fun with HTML5 Canvas/index-START.html   |  67 ++++++++++++
 .../index-START.html                          |  28 +++++
 .../{index.html => index-FINISHED.html}       |   2 +-
 11 - Custom Video Player/index-Start.html     |  28 +++++
 11 - Custom Video Player/scripts-START.js     |  58 ++++++++++
 11 - Custom Video Player/scripts.js           |   0
 12 - Key Sequence Detection/index-START.html  |  34 ++++++
 node_stuff/linked_list.js                     |  51 +++++++++
 node_stuff/package.json                       |  15 +++
 node_stuff/test/LinkedList.js                 | 100 ++++++++++++++++++
 17 files changed, 665 insertions(+), 6 deletions(-)
 rename 11 - Custom Video Player/{index.html => index-FINISHED.html} (95%)
 create mode 100644 11 - Custom Video Player/index-Start.html
 create mode 100644 11 - Custom Video Player/scripts-START.js
 delete mode 100644 11 - Custom Video Player/scripts.js
 create mode 100644 node_stuff/linked_list.js
 create mode 100644 node_stuff/package.json
 create mode 100644 node_stuff/test/LinkedList.js

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..535402add4 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,41 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  const keyElements = document.querySelectorAll('.key');
+  const keyMap = {};
 
+  Array.prototype.forEach.call( keyElements, displayEl => {
+    const keyNum = displayEl.attributes['data-key'].value;
+    const audioEl = document.querySelector(`audio[data-key="${keyNum}"]`);
+
+    displayEl.addEventListener( 'transitionend', ({ propertyName }) => {
+      if ( propertyName !== 'transform') return;
+      displayEl.classList.remove('playing');
+    });
+
+    keyMap[ keyNum ] = {
+      displayEl,
+      audioEl
+    };
+  });
+
+  function play({ keyCode }) {
+    if ( keyMap[ keyCode ] ) {
+      const { audioEl } = keyMap[ keyCode ];
+      audioEl.currentTime = 0;
+      audioEl.play();
+    }
+  }
+
+  function triggerAnimation({ keyCode }) {
+    if ( !keyMap[ keyCode ] ) return;
+    const { displayEl } = keyMap[ keyCode ];
+    displayEl.classList.add('playing');
+
+  }
+
+  document.addEventListener( 'keydown', play );
+  document.addEventListener( 'keydown', triggerAnimation );
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..ddc0fa661b 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all 0.07s;
   width:100px;
   text-align: center;
   color:white;
@@ -32,11 +32,15 @@ body,html {
 }
 
 .playing {
-  transform:scale(1.1);
+  transform:scale(1.3);
   border-color:#ffc600;
   box-shadow: 0 0 10px #ffc600;
 }
 
+.boom {
+  transform: scale(2);
+}
+
 kbd {
   display: block;
   font-size: 40px;
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 240705d8fe..e039f70503 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,70 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: right;
+    }
+    .hour-hand {
+      height: 10px;
+    }
+    .min-hand {
+      height: 8px;
     }
 
   </style>
 
   <script>
 
+  const hourHand = document.querySelector('div.hour-hand');
+  const minHand = document.querySelector('div.min-hand');
+  const secHand = document.querySelector('div.second-hand');
+  const offset = 90;
+
+  function setHand( hand, deg ) {
+
+    hand.style.transition = deg === 90 ? 'none' : 'transform .02s';
+    hand.style.transform = `rotate(${deg}deg)`;
+  }
+
+  function getDegrees( val, isHour ) {
+    const degOffset = offset + ( val / ( isHour ? 12 : 60 ) * 360 );
+    console.log(degOffset);
+    return degOffset
+  }
+
+  function setHands( time ) {
+    const hr = time.getHours();
+    const min = time.getMinutes();
+    const sec = time.getSeconds();
+    console.log( sec );
+
+    const hourDegrees = getDegrees( hr, true )
+    const minDegrees  = getDegrees( min );
+    const secDegrees  = getDegrees( sec );
+
+    setHand( hourHand, hourDegrees )
+    setHand( minHand, minDegrees )
+    setHand( secHand, secDegrees )
+
+  }
+  function getNextSecond() {
+    const currentTime = new Date( Date.now() );
+
+    setHands( currentTime );
+
+    return 1000 - currentTime.getMilliseconds();
+  }
+
+
+  function timeLoop( time ) {
+    let timeout = setTimeout( () => {
+      timeLoop( getNextSecond() );
+    }, time );
+    window.timeout = timeout;
+
+  }
+
+  timeLoop( getNextSecond() );
+
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..a308115ebf 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -26,6 +26,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       misc styles, nothing to do with CSS variables
     */
 
+   img {
+     transition: all .5s;
+   }
+
     body {
       text-align: center;
     }
@@ -53,6 +57,49 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    let inputEls = Array.prototype
+    .slice.call( document.querySelectorAll('input') );
+
+    let image = document.querySelector('img');
+
+    inputEls.forEach( el => {
+      el.addEventListener( 'change', getInputVal );
+      handleValChange( el.name, el.value );
+    });
+
+    function handleValChange( name, val ) {
+
+      let style = image.style;
+      switch( name ) {
+        case 'spacing':
+          let bgColor = document.querySelector(`input[name='base']`).value;
+          image.style.border = `${val}px solid ${bgColor}`;
+          break;
+        case 'blur':
+          image.style.filter = `blur(${val}px)`;
+          break;
+        case 'base':
+        image.style['border-color'] = `${val}`;
+          break;
+        default:
+          console.log( 'you fucked up' );
+      }
+    }
+
+    function getInputVal( ev ) {
+      if ( !!~inputEls.indexOf( ev.currentTarget ) ) {
+        var { value, name } = ev.currentTarget;
+
+        handleValChange( name, value );
+      }
+
+    }
+
+
+
+
+
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 6e28e357d0..876ac83369 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,29 +27,84 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const sixteenth = inventors.filter( ({ year }) => 1500 <= year && year <= 1599 );
+    console.table( sixteenth );
 
     // Array.prototype.map()
     // 2. Give us an array of the inventory first and last names
+    //
+    const firstAndLasts = inventors.map( ({ first, last }) => {
+
+      return `${first} ${last}`;
+    } );
+    console.log( firstAndLasts );
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-
+    const sorted = inventors.sort( ( first, second ) => {
+      return first.year > second.year ? 1 : -1;
+    });
+    console.table( sorted );
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-
+    const reducto = inventors.reduce( ( prev, curr ) => {
+      return prev + ( curr.passed - curr.year );
+    }, 0 );
+    console.log( reducto );
     // 5. Sort the inventors by years lived
+    const sortedYears = inventors.sort( ( first, second ) => {
+      return ( first.passed - first.year ) > ( second.passed = second.year ) ? 1 : -1;
+    });
+    console.table( sortedYears );
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    //
+    function parseDes( doc ) {
+      const list = Array.prototype.slice.call( doc.querySelectorAll('.mw-category ul>li') );
+      return list
+        .filter( el => /de/.test( el.textContent ) )
+        .map( ({ textContent }) => textContent );
+    }
+    const req = new XMLHttpRequest()
+    let frag = document.createDocumentFragment();
+
+    function end() {
+      let el = document.createElement('div');
+      el.innerHTML = req.responseText;
+      frag.appendChild( el );
+
+      const nameList = parseDes( frag );
+      console.log( nameList );
+    }
+    req.addEventListener( 'load', end );
+    req.addEventListener( 'error', err => console.error );
+    req.addEventListener( 'abort', err => console.error );
+
+
+    const url = 'https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris';
+    req.open( 'GET', url, true );
+    req.setRequestHeader('Access-Control-Allow-Origin', '*' );
+    req.setRequestHeader('Content-Type', 'text/plain' );
+    req.send();
+
 
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
+    const sortedThree = people.sort( ( a, b ) => {
+      return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
+    } );
+    console.log(sortedThree );
     // 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 sumData = data.reduce( ( prev, curr ) => {
+      prev[ curr ] += 1;
+      return prev;
 
+    }, { car: 0, truck: 0, bike: 0, walk: 0, van: 0 } );
+    console.log( sumData );
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..ad11f6857b 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 {
@@ -41,6 +42,12 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+
+      justify-content: center;
+      display: flex;
+      flex-direction: column;
+
     }
 
 
@@ -54,6 +61,11 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      border: 1px solid red;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .panel p {
@@ -66,8 +78,22 @@
       font-size: 4em;
     }
 
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
+    }
+
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -108,6 +134,21 @@
 
   <script>
 
+  function toggleOpen() {
+    this.classList.toggle('open');
+  }
+
+  function toggleActive( ev ) {
+    if ( ev.propertyName.includes('flex') ) {
+      this.classList.toggle('open-active');
+    }
+  }
+
+  const panels = Array.from( document.querySelectorAll('.panel') );
+
+  panels.forEach( panel => panel.addEventListener( 'click', toggleOpen ) );
+  panels.forEach( panel => panel.addEventListener( 'transitionend', toggleActive ) );
+
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..22c8d9a915 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,6 +16,45 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+let cities = [];
+
+fetch( endpoint ).then( res => {
+  res.json().then( data => {
+    cities = data;
+  } );
+});
+
+const suggestions = document.querySelector('ul.suggestions');
+const entry = document.querySelector('input.search');
+
+entry.addEventListener( 'input', searchInput );
+
+function searchInput( { currentTarget: { value } } ) {
+  const regExp = new RegExp( `${value}`, 'ig' );
+  const matchedCities = cities
+  .filter( ({ city, state }) => regExp.test( `${city}${state}` ) )
+  .map( city => Object.assign( {}, city, { regex: regExp, value } ) );
+
+  updateCities( matchedCities )
+}
+
+function updateCities( matches ) {
+  suggestions.innerHTML = matches
+  .map( makeElementText )
+  .join('');
+}
+
+function makeElementText( data ) {
+  const span = `
+  <li>
+    <span class="name">${data.city}, ${data.state}</span>
+    <span class="population">${Number(data.population).toLocaleString()}</span>
+  </li>
+  `;
+  return span.replace( data.regex, `<span class="hl">${data.value}</span>`);
+}
+
+
 
 </script>
   </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..5a0fecca93 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -5,14 +5,81 @@
   <title>HTML5 Canvas</title>
 </head>
 <body>
+  <div class="clear">Clear</div>
 <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 = 50;
+
+
+
+let hue = 0;
+let ascending = true;
+let drawing = false;
+let lastX = 0;
+let lastY = 0;
+
+const clear = document.querySelector('.clear');
+clear.addEventListener( 'click', () => {
+  ctx.clearRect( 0, 0, canvas.width, canvas.height );
+});
+
+canvas.addEventListener( 'mousedown', startLine );
+canvas.addEventListener( 'mousemove', drawLine );
+canvas.addEventListener( 'mouseup', endLine );
+canvas.addEventListener( 'mouseout', endLine );
+
+
+function startLine( { offsetX, offsetY } ) {
+  [ lastX, lastY ] = [ offsetX, offsetY ];
+  drawing = true;
+  console.log( `${offsetX}, ${offsetY}`)
+}
+
+function endLine(){
+  drawing = false;
+}
+
+function drawLine({ offsetX, offsetY }){
+  if ( drawing ) {
+    ctx.strokeStyle = `hsl(${hue++}, 100%, 50%)`;
+    if ( hue >= 360 ) { hue = 0 };
+    ctx.beginPath();
+    ctx.moveTo( lastX, lastY );
+    ctx.lineTo( offsetX, offsetY );
+    ctx.stroke();
+    if ( ctx.lineWidth >= 100 || ctx.lineWidth <= 1 ) {
+      ascending = !ascending;
+    }
+    ctx.lineWidth += ascending ? 1 : -1;
+
+    [ lastX, lastY ] = [ offsetX, offsetY ];
+    console.log( `${offsetX}, ${offsetY}`)
+  }
+}
 </script>
 
 <style>
   html, body {
     margin:0;
   }
+  .clear {
+    position: absolute;
+    height: 50px;
+    width: 100px;
+    background-color: hsl(208, 100%, 50%);
+    color: #fff;
+    text-align: center;
+    right: calc( 50% - 50px );
+  }
 </style>
 
 </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..6b54101e03 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,34 @@
   </div>
 
 <script>
+
+const [ ...checkboxes ] = document.querySelectorAll(`input[type="checkbox"]`);
+let shiftPressed = false;
+let latestChecked = checkboxes[ 0 ];
+
+function updateAll( start, end, state ) {
+  const list = checkboxes.slice( start, end );
+  list.forEach( checkbox => {
+    checkbox.checked = state;
+  });
+}
+
+function checkShift( { currentTarget } ) {
+
+  if( shiftPressed ) {
+    const checked = latestChecked.checked;
+    const indexToStart = checkboxes.indexOf( latestChecked );
+    const indexToEnd   = checkboxes.indexOf( currentTarget ) + 1;
+    updateAll( indexToStart, indexToEnd, checked );
+  }
+
+  latestChecked = currentTarget;
+}
+
+checkboxes.forEach( chk => chk.addEventListener( 'change', checkShift ) );
+
+document.addEventListener( 'keydown', () => shiftPressed = true )
+document.addEventListener( 'keyup', () => shiftPressed = false )
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index-FINISHED.html
similarity index 95%
rename from 11 - Custom Video Player/index.html
rename to 11 - Custom Video Player/index-FINISHED.html
index fe2b55b394..dee25cd7d0 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index-FINISHED.html	
@@ -22,6 +22,6 @@
      </div>
    </div>
 
-  <script src="scripts.js"></script>
+  <script src="scripts-FINISHED.js"></script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index-Start.html b/11 - Custom Video Player/index-Start.html
new file mode 100644
index 0000000000..0903a3230c
--- /dev/null
+++ b/11 - Custom Video Player/index-Start.html	
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML Video Player</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+   <div class="player">
+     <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
+
+     <div class="player__controls">
+       <div class="progress">
+        <div class="progress__filled"></div>
+       </div>
+       <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 data-skip="-10" class="player__button">« 10s</button>
+       <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button">FS</button>
+     </div>
+   </div>
+
+  <script src="scripts-START.js"></script>
+</body>
+</html>
diff --git a/11 - Custom Video Player/scripts-START.js b/11 - Custom Video Player/scripts-START.js
new file mode 100644
index 0000000000..43ebbcfbd3
--- /dev/null
+++ b/11 - Custom Video Player/scripts-START.js	
@@ -0,0 +1,58 @@
+const video = document.querySelector('video');
+const [ ...buttons ] = document.querySelectorAll('button');
+const [ ...ranges ] = document.querySelectorAll('input[type="range"]');
+const progress = document.querySelector('.progress');
+const player = document.querySelector('.player');
+let scrubbing = false;
+
+function playPause( { currentTarget } ) {
+  if ( !( currentTarget = video ) ) {
+    return;
+  }
+
+  if ( video.paused ) {
+    video.play();
+  } else {
+    video.pause();
+  }
+}
+
+function skip( { currentTarget: { dataset: { skip } } } ) {
+  const timeToSeek = Number( skip );
+  video.currentTime += timeToSeek;
+}
+
+function setRange( ev ) {
+  const property = ev.currentTarget.name;
+  const val = ev.currentTarget.value;
+  video[ property ] = val;
+}
+
+function scrubaDub( ev ) {
+  if ( scrubbing ) {
+    const ratio = ( ( ev.clientX - player.offsetLeft ) / ev.currentTarget.offsetWidth );
+    const progBar = ev.currentTarget.children[ 0 ];
+    progBar.style['flex-basis'] = `${ ratio * 100 }%`;
+    video.currentTime = video.duration * ratio;
+  }
+
+  if ( ev.type === 'mouseup' ) {
+    scrubbing = false;
+  }
+}
+
+video.addEventListener( 'click', playPause );
+
+buttons.forEach( button => button.addEventListener( 'click', skip ) );
+ranges.forEach( range => range.addEventListener( 'input', setRange ) );
+
+
+
+progress.addEventListener( 'mousedown', () => scrubbing = true );
+document.addEventListener( 'mouseout', ev => {
+  if ( ev.currentTarget === video ) {
+    scrubbing = false;
+  }
+});
+progress.addEventListener( 'mouseup', scrubaDub );
+progress.addEventListener( 'mousemove', scrubaDub );
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..97e4616e1a 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,40 @@
 </head>
 <body>
 <script>
+const currentSequence = [];
+const fullSequence = [
+  'arrowUp',
+  'arrowUp',
+  'arrowDown',
+  'arrowDown',
+  'arrowLeft',
+  'arrowRight',
+  'arrowLeft',
+  'arrowRight',
+  'a',
+  'b',
+  'Enter'
+];
+const code = new RegExp( fullSequence.join(''), 'i' );
+
+function log( { key } ) {
+  const start = -( fullSequence.length - 1 );
+  const end = currentSequence.length - fullSequence.length;
+  currentSequence.splice( start, end );
+  currentSequence.push( key );
+  checkMatch();
+  console.log( currentSequence );
+}
+
+function checkMatch() {
+
+  if ( code.test( currentSequence.join('') ) ) {
+    alert('YOU DID IT');
+  }
+}
+
+document.addEventListener( 'keyup', log );
+
 </script>
 </body>
 </html>
diff --git a/node_stuff/linked_list.js b/node_stuff/linked_list.js
new file mode 100644
index 0000000000..20d65621a2
--- /dev/null
+++ b/node_stuff/linked_list.js
@@ -0,0 +1,51 @@
+class LinkedList {
+  constructor() {
+    this._list = [];
+    
+  }
+
+  get list() {
+    return this._list;
+  }
+
+  set list( val ) {
+    return true;
+  }
+
+  push( value ) {
+    const newNode = new Node({
+     next: null,
+     previous: null,
+     value
+    });
+
+    
+    if( this._list.length === 0 ) {
+     this._list.push( newNode );
+     return;
+    }
+    
+    const oldNode = this._list.pop();
+   
+
+    oldNode.next = newNode;
+    newNode.previous = oldNode;
+    this._list.push( oldNode );
+    this._list.push( newNode );
+  }
+
+  remove( node ) {
+
+  }
+}
+
+
+class Node {
+  constructor({ next, previous, value }) {
+    Object.assign( this, { next, previous, value } );
+  }
+}
+
+
+
+module.exports = new LinkedList();
diff --git a/node_stuff/package.json b/node_stuff/package.json
new file mode 100644
index 0000000000..e3f74c83e5
--- /dev/null
+++ b/node_stuff/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "node_stuff",
+  "version": "1.0.0",
+  "description": "",
+  "main": "linked_list.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
diff --git a/node_stuff/test/LinkedList.js b/node_stuff/test/LinkedList.js
new file mode 100644
index 0000000000..7988e4b860
--- /dev/null
+++ b/node_stuff/test/LinkedList.js
@@ -0,0 +1,100 @@
+const assert = require('chai').assert;
+const path = '../linked_list.js';
+const rewire = require('rewire');
+
+describe( 'LL export', function() {
+  it( 'should export a function', function() {
+    const LL = rewire( path );
+    assert.isObject(LL);
+  })
+
+
+  describe( 'initialize', function() {
+    it( 'it should have a list property', function() {
+      const LL = rewire( path ); 
+
+      assert.property( LL, 'list' );
+      assert.isArray( LL.list );
+      assert.equal( LL.list.length, 0 );
+    });
+
+
+    it( 'list property should not change list property', function() {
+      const LL = rewire( path );
+      LL.list = 'foo';
+      assert.notEqual( LL.list, 'foo' );
+    });
+
+  });
+
+  describe( '#push', function() {
+    
+    it( 'should have method push', function() {
+      const LL = rewire( path );
+      assert.isFunction( LL.push );
+    });
+    
+
+    it( 'should add a node to list', function() {
+      const LL = rewire( path );
+      const dummyObj = { foo: 'bar' };
+      LL.push( dummyObj );
+      assert.equal( LL.list.length, 1 );
+      assert.equal( LL.list[0].value, dummyObj );
+      assert.equal( LL.list[0].previous, null );
+      assert.equal( LL.list[0].next, null );
+    });
+    
+    it( 'new node should have reference to previous node', function() {
+      const LL = rewire( path );
+      const dummyObj = { foo: 'bar' };
+      const dummyObjTwo = { foo: 'bar' };
+     
+      LL.push( dummyObj );
+      LL.push( dummyObjTwo );
+      
+      
+      assert.equal( LL.list.length, 2 );
+      assert.equal( LL.list[1].previous.value, dummyObj );
+    });
+
+    it( 'should update previous node to have next', function() {
+      const LL = rewire( path );
+      const dummyObj = { foo: 'bar' };
+      const dummyObjTwo = { foo: 'bar' };
+
+      LL.push( dummyObj );
+      LL.push( dummyObjTwo );
+
+
+      assert.equal( LL.list[ 0 ].value, dummyObj, 'dummyone' );
+      assert.equal( LL.list[ 1 ].value, dummyObjTwo, 'value of second element should be dummyObj');
+      assert.equal( LL.list[ 0 ].next, LL.list[ 1 ] ); 
+    });
+
+  });
+
+  describe('#remove()', () => {
+
+
+    it( 'should have remove method', () => {
+      const LL = rewire( path );
+      assert.isFunction( LL.remove );
+    });
+    it( 'should reattach disconnected nodes', () => {
+      const LL = rewire( path );
+      const dummyOne = { foo: 'bar' };
+      const dummyTwo = { bar: 'baz' };
+      const dummyThree = { bing: 'boom' };
+
+      LL.push( dummyOne );
+      LL.push( dummyTwo );
+      LL.push( dummyThree );
+
+
+      LL
+    });
+
+  })
+
+})