diff --git a/05week/checkers.js b/05week/checkers.js
index 8f33a089c..eb0da804b 100644
--- a/05week/checkers.js
+++ b/05week/checkers.js
@@ -7,9 +7,26 @@ const rl = readline.createInterface({
   output: process.stdout
 });
 
+let playerTurn = 'O';
 
-function Checker() {
-  // Your code here
+/*function Checker() {
+  this.king = no;
+  this.symbol =
+  //define Checker attributes
+  //checker.create per checker
+}*/
+
+class Checker {
+  constructor(symbol, king){
+    this.symbol = symbol;
+    this.king = king;
+    //this.row = game.board.grid[row];
+    //this.column = game.board.grid[column];
+    //this.where = this.row.tostring() + this.column.tostring();
+  }
+  moveChecker(whichPiece, toWhere){
+
+  }
 }
 
 function Board() {
@@ -21,7 +38,16 @@ function Board() {
       this.grid[row] = [];
       // push in 8 columns of nulls
       for (let column = 0; column < 8; column++) {
-        this.grid[row].push(null);
+       if (((row%2==0)&&(column%2!=0))||((row%2!=0)&&(column%2==0))) {
+          if (row<3){
+            this.grid[row].push(new Checker('X',false));
+          }
+          if (row>4){
+            this.grid[row].push(new Checker('O',false));
+          }
+        }else{
+          this.grid[row].push(null);
+        }
       }
     }
   };
@@ -57,15 +83,100 @@ function Board() {
 function Game() {
 
   this.board = new Board();
+  this.moveChecker = function(whichPiece, toWhere){
+    let x1 = Number(whichPiece.charAt(0));
+    let y1 = Number(whichPiece.charAt(1));
+    let x2 = Number(toWhere.charAt(0));
+    let y2 = Number(toWhere.charAt(1));
+    //If the player enters an empty square as whichPiece
+    if (game.board.grid[y1][x1]===null){
+      console.log("The square you specified in response to 'Which piece?' has no piece in it. Please try again.")
+      return;
+    }
+
+    //If the 'O' player enters a square with the wrong piece as whichPiece
+    if (playerTurn==='O'){
+      if(game.board.grid[y1][x1].symbol==='X'){
+        console.log("The square you specified in response to 'Which piece?' has an 'X' piece in it. Please try again.")
+        return;
+      }else{
+        if(game.board.grid[y2][x2]!=null){
+          console.log("The square you are trying to move to is already occupied. Please try again.")
+          return;
+        }else{
+//          if (((y2!=y1+1)&&(Math.abs(x2-x1)!=1))||
+//          (((y2!=y1+2)&&(Math.abs(x2-x1)!=2))&&
+//          (((x2>x1)&&(game.board.grid[y1+1][x1+1].symbol!='X'))||
+//          ((x1>x2)&&(game.board.grid[y1+1][x1-1].symbol!='X'))))){
+//            console.log("The square you want to move to is not diagonal from the square with the piece in it. Please try again.");
+//            return;
+//          }else{
+            let currentChecker = game.board.grid[y1][x1];
+            game.board.grid[y2].splice(x2,1,currentChecker);
+            game.board.grid[y1].splice(x1,1,null);
+            if (Math.abs(x2-x1)==2){
+              let deadx = (x1+x2)/2;
+              let deady = (y1+y2)/2;
+              game.board.grid[deady].splice(deadx,1,null);
+            }
+
+//          }
+        }
+
 
+        //if toWhere is diagonal and empty, move piece
+        //if toWhere is diagonal and occupied by same piece, console.log error
+        //if toWhere is diagonal and occupied by opposite piece and the space diagonal from THAT is empty, capture piece
+        //if toWhere row is 0, king
+        //if king, allow backwards moves
+        //repetitive captures (if possible)
+      }
+      playerTurn='X';
+      return;
+    }
+
+    //If the 'X' player enters a square with the wrong piece as whichPiece
+    if (playerTurn==='X'){
+      if(game.board.grid[y1][x1].symbol==='O'){
+        console.log("The square you specified in response to 'Which piece?' has an 'X' piece in it. Please try again.")
+        return;
+      }else{
+        if(game.board.grid[y2][x2]!=null){
+          console.log("The square you are trying to move to is already occupied. Please try again.")
+          return;
+        }else{
+            let currentChecker = game.board.grid[y1][x1];
+            game.board.grid[y2].splice(x2,1,currentChecker);
+            game.board.grid[y1].splice(x1,1,null);
+            if (Math.abs(x2-x1)==2){
+              let deadx = (x1+x2)/2;
+              let deady = (y1+y2)/2;
+              game.board.grid[deady].splice(deadx,1,null);
+            }
+          }
+        //if toWhere is diagonal and empty, move piece
+        //if toWhere is diagonal and occupied by same piece, console.log error
+        //if toWhere is diagonal and occupied by opposite piece and the space diagonal from THAT is empty, capture piece
+        //if toWhere row is 0, king
+        //if king, allow backwards moves
+        //repetitive captures (if possible)
+      }
+      playerTurn='O';
+      return;
+    }
+  }
+  //define moveChecker function
+  //flip between players
   this.start = function() {
     this.board.createGrid();
+    console.log('Refer to each piece/space by the column number then row number such as "10" or "67"')
     // Your code here
   };
 }
 
 function getPrompt() {
   game.board.viewGrid();
+  console.log("It's Player " + playerTurn + "'s turn.");
   rl.question('which piece?: ', (whichPiece) => {
     rl.question('to where?: ', (toWhere) => {
       game.moveChecker(whichPiece, toWhere);
diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js
index ce258a382..ef861aca7 100644
--- a/05week/spaceTravelToMars.js
+++ b/05week/spaceTravelToMars.js
@@ -2,6 +2,8 @@
 
 let assert = require('assert');
 
+let good2go = null;
+
 let jobTypes = {
   pilot: 'MAV',
   mechanic: 'Repair Ship',
@@ -9,7 +11,62 @@ let jobTypes = {
   programmer: 'Any Ship!'
 };
 
-// Your code here
+class CrewMember {
+  constructor(name, job, specialSkill){
+    this.name = name;
+    this.job = job;
+    this.specialSkill = specialSkill;
+    this.ship = null;
+  }
+  enterShip(x){
+    this.ship = x;
+    x.crew.push(this);
+  }
+}
+
+class Ship {
+  constructor(name, type, ability){
+    this.name = name;
+    this.type = type;
+    this.ability = ability;
+    this.crew = [];
+  }
+  missionStatement() { //This function returns the mission of the ship if properly crewed and "Can't perform a mission yet." if not
+    console.log("Begin Mission Statement");
+    //console.log("Ship Type: "+(this.type));
+    for (let i=0; i<this.crew.length; i++){
+      let crewMemberJob = this.crew[i].job;
+      console.log("Crew Member Job Type: "+(jobTypes[crewMemberJob]));
+      if (((jobTypes[crewMemberJob])==(this.type))||(this.crew[i].job=='programmer')){
+        good2go = true;
+      }
+    }
+    if (good2go==true){
+      //console.log(this.ability);
+      good2go=null; //need to reset because good2go is a global variable
+      return this.ability;
+    }else{
+      //console.log("Can't perform a mission yet.");
+      return "Can't perform a mission yet."
+    }
+  } // returns the ship's ability as a string if there is a crewmember whose job matches the ship, otherwise should return "Can't perform a mission yet."
+}
+
+/*
+*
+* Test code to verify everything works. Everything works as of 8:55PM CT 2017-11-3.
+*
+let TestCrew = new CrewMember('Joe Doe', 'programmer', 'botany');
+let TestShip = new Ship('Janus','Repair Ship','Start shoveling bodies.');
+TestShip.missionStatement();
+TestCrew.enterShip(TestShip);
+console.log(TestShip.crew[0]);
+let crewMemberJob = TestShip.crew[0].job;
+console.log("Crew Member Job Type: "+crewMemberJob);
+TestShip.missionStatement();
+*/
+
+
 
 //tests
 if (typeof describe === 'function'){
diff --git a/06week/higherOrder.js b/06week/higherOrder.js
index 73926e3dc..1c3e4a535 100644
--- a/06week/higherOrder.js
+++ b/06week/higherOrder.js
@@ -2,32 +2,173 @@
 
 const assert = require('assert');
 
-function forEach(arr, callback) {
-  // Your code here
+let array = [1,2,3,4,5];
+
+/*
+*This function returns true if the input is even
+*
+* @param num the input number
+*/
+let evenFilter = function(num){
+  return num%2 === 0;
+};
+
+/*
+*This function returns true if the input is odd
+*
+* @param num the input number
+*/
+let oddFilter = function(num){
+  return !evenFilter(num);
+}
+
+let expected = [2,4];
+
+/*
+*This function acts as the higher order function "filter," returning an array of values from the input array that satisfy the callback function
+*
+* @param arr the input array
+* @param callback the function being implemented on the input array
+*/
+function myFilterImpl(arr, callback){
+  let blank = [];
+  for(let i=0; i<arr.length; i++){
+    if ((callback(arr[i]))===true){
+      blank.push(arr[i]);
+    }
+  }
+  return blank;
+}
+
+let filtered = myFilterImpl(array, oddFilter);
+
+console.log(filtered);
+
+/*
+*This function acts as the higher order function "map," returning an array of values where each value is the result of the callback function being implemented on the element of the input array
+*
+* @param arr the input array
+* @param callback the function being implemented on the input array
+*/
+function myMapImpl(arr, callback){
+  let mapped = [];
+  for(let i=0; i<arr.length; i++){
+    let mapelement = callback(arr[i]);
+    mapped.push(mapelement);
+  }
+  return mapped;
 }
 
-function map(arr, callback) {
-  // Your code here
+/*
+*This function converts numerical grades to their A-through-F equivalent letter grades
+*
+* @param num the numerical grade
+*/
+let gradeConverter = function(num){
+  if ((num>=90)&&(num<=100)){
+    return 'A';
+  }else if((num>=80)&&(num<90)){
+    return 'B';
+  }else if((num>=75)&&(num<80)){
+    return 'C';
+  }else if((num>=70)&&(num<75)){
+    return 'D';
+  }else if(num<70){
+    return 'F';
+  }
 }
 
-function filter(arr, callback) {
-  // Your code here
+let grades = [99,87,23,67,13,77];
+
+let converted = myMapImpl(grades,gradeConverter);
+console.log(converted);
+
+/*
+*This function detects whether the input number is positive
+*
+* @param num the number to be tested on whether is positive or negative
+*/
+let detectPositive = function(num){
+  if(num>0){
+    return true;
+  }
 }
 
-function some(arr, callback) {
-  // Your code here
+/*
+*This function acts as the higher order function "some," returning true if at least one element in the input array fulfills the callback's requirements
+*
+* @param arr the input array
+* @param callback the function being implemented on the input array
+*/
+function mySomeImpl(arr, callback){
+  for (let i=0; i<arr.length; i++){
+    if (callback(arr[i])){
+      return true;
+    }
+  }
+  return false;
+}
+
+let someArray1 = [-1,-2,-3,-4,5];
+let someArray2 =  [-1,-2,-3,-4,-5];
+let PosArray1 = mySomeImpl(someArray1, detectPositive);
+let PosArray2 = mySomeImpl(someArray2, detectPositive);
+console.log("mySomeImpl test on array with 1 positive: "+PosArray1);
+console.log("mySomeImpl test on array with 0 positives: "+PosArray2);
+
+
+/*
+*This function acts as the higher order function "forEach," implementing the callback function on each element of the input array
+*
+* @param arr the input array
+* @param callback the function being implemented on the input array
+*/
+function myForEachImpl(arr, callback){
+  for (let i=0; i<arr.length; i++){
+    callback(arr[i]);
+  }
+}
+
+let forEachArray = [1,2,3,4];
+
+/*
+*This function prints the input
+*
+* @param x what is being printed
+*/
+function Printing(x){
+  console.log("Printing: "+x);
 }
 
-function every(arr, callback) {
-  // Your code here
+myForEachImpl(forEachArray, Printing);
+/*
+*This function acts as the higher order function "every," returning true if every element in the input array fulfills the callback's requirements
+*
+* @param arr the input array
+* @param callback the function being implemented on the input array
+*/
+function myEveryImpl(arr, callback){
+  for (let i=0; i<arr.length; i++){
+    if (callback(arr[i])!=true){
+      return false;
+    }
+  }
+  return true;
 }
 
+let everyArray1 = [1,2,3,4,5];
+let everyArray2 =  [1,2,3,-4,5];
+let PosEvArray1 = myEveryImpl(everyArray1, detectPositive);
+let PosEvArray2 = myEveryImpl(everyArray2, detectPositive);
+console.log("myEveryImpl test on array with all positives: "+PosEvArray1);
+console.log("myEveryImpl test on array with 1 negative: "+PosEvArray2);
+///////////////////////////////////////////////////////////////////////////////////////////////////////
 if (typeof describe === 'function') {
 
   describe('#forEach()', () => {
     it('should call the callback the array.length number of times', () => {
       let count = 0;
-      forEach([1, 2, 3], () => {
+      myForEachImpl([1, 2, 3], () => {
         count++;
       });
       assert.equal(count, 3);
@@ -36,7 +177,7 @@ if (typeof describe === 'function') {
 
   describe('#map()', () => {
     const arr = [1, 2, 3];
-    const mapped = map(arr, (num) => {
+    const mapped = myMapImpl(arr, (num) => {
       return num * num;
     });
     it('should return new array with mapped items', () => {
@@ -49,7 +190,7 @@ if (typeof describe === 'function') {
 
   describe('#filter()', () => {
     it('should return an array of items that pass the predicate test', () => {
-      const filtered = filter([1, 2, 3], (num) => {
+      const filtered = myFilterImpl([1, 2, 3], (num) => {
         return num % 2 === 0;
       });
       assert.deepEqual(filtered, [2]);
@@ -58,7 +199,7 @@ if (typeof describe === 'function') {
 
   describe('#some()', () => {
     let count = 0;
-    const somed = some([1, 2, 3, 4], (num) => {
+    const somed = mySomeImpl([1, 2, 3, 4], (num) => {
       count++;
       return num % 2 === 0;
     });
@@ -69,7 +210,7 @@ if (typeof describe === 'function') {
       assert.equal(count, 2);
     });
     it('should return false if no items pass the predicate test', () => {
-      const somed = some([1, 3, 5], (num) => {
+      const somed = mySomeImpl([1, 3, 5], (num) => {
         return num % 2 === 0;
       });
       assert.equal(somed, false);
@@ -78,13 +219,13 @@ if (typeof describe === 'function') {
 
   describe('#every()', () => {
     it('should return true if at all passes the predicate test', () => {
-      const everied = every([2, 4, 6], (num) => {
+      const everied = myEveryImpl([2, 4, 6], (num) => {
         return num % 2 === 0;
       });
       assert.equal(everied, true);
     });
     let count = 0;
-    const everied = every([2, 3, 4, 5], (num) => {
+    const everied = myEveryImpl([2, 3, 4, 5], (num) => {
       count++;
       return num % 2 === 0;
     });
diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index d0bc4bd52..8355e32a1 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -3,25 +3,131 @@
 class TicTacToe extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      playerTurn: "X",
+      board: [null,null,null,null,null,null,null,null,null]
+    }
+    this.placeSymbol = this.placeSymbol.bind(this);
+  }
+
+
+/*
+*This function puts symbols on the Board
+*
+*@param event The object being clicked on
+*/
+  placeSymbol(event) {
+    console.log("The event object: ", event);
+    console.log("The element clicked: ", event.target);
+    console.log("The value is: ", event.target.getAttribute("data-cell"));
+
+/*
+*This function checks for a horizontal win
+*
+*@param x The component to check for a win on
+*/
+    function horizontalWin(x) {
+      if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[1])&&(x.state.board[0]===x.state.board[2]))) || //top row
+          ((x.state.board[3]!=null)&&((x.state.board[3]===x.state.board[4])&&(x.state.board[3]===x.state.board[5]))) || //middle row
+          ((x.state.board[6]!=null)&&((x.state.board[6]===x.state.board[7])&&(x.state.board[6]===x.state.board[8])))){ //bottom row
+            return true
+          }
+    }
+
+
+/*
+*This function checks for a vertical win
+*
+*@param x The component to check for a win on
+*/
+    function verticalWin(x) {
+      if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[3])&&(x.state.board[0]===x.state.board[6]))) || //left column
+          ((x.state.board[1]!=null)&&((x.state.board[1]===x.state.board[4])&&(x.state.board[1]===x.state.board[7]))) || //middle column
+          ((x.state.board[2]!=null)&&((x.state.board[2]===x.state.board[5])&&(x.state.board[2]===x.state.board[8])))){ //right column
+            return true
+          }
+    }
+
+/*
+*This function checks for a diagonal win
+*
+*@param x The component to check for a win on
+*/
+    function diagonalWin(x) {
+      if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[4])&&(x.state.board[0]===x.state.board[8]))) ||
+          ((x.state.board[6]!=null)&&((x.state.board[6]===x.state.board[4])&&(x.state.board[6]===x.state.board[2])))){
+            return true
+          }
+    }
+
+/*
+*This function checks for a win on the Board
+*
+*@param y The component to check for a win on
+*/
+    function checkForWin(y) {
+      if (horizontalWin(y)||verticalWin(y)||diagonalWin(y)){
+        let myFunction = function(){
+          alert("Player "+y.state.playerTurn+" Wins!");
+        }
+        setTimeout(myFunction,200); //this is so that the winning symbol shows up on the board before the alert
+        //y.state.board = [null,null,null,null,null,null,null,null,null]; Couldn't get this to easily reset the board after a win
+        return true;
+      }
+    }
+
+
+    let task = event.target.getAttribute("data-cell");
+
+    if ((this.state.playerTurn==="X")&&(this.state.board[task]===null)){
+      console.log("Orig Board: "+this.state.board);
+      this.state.board[task] = "X";
+      let newBoard = this.state.board;
+      const newState = {
+        board: newBoard
+      }
+      console.log("Task: "+task);
+      console.log("Board: "+this.state.board);
+      this.setState(newState);
+      checkForWin(this);
+      if (!((horizontalWin(this)||verticalWin(this)||diagonalWin(this)))) { //if no wins
+        this.state.playerTurn="O";
+      }
+
+    }else if ((this.state.playerTurn==="O")&&(this.state.board[task]===null)){
+      this.state.board[task] = "O";
+      let newBoard = this.state.board;
+      const newState = {
+        board: newBoard
+      }
+      console.log("Task: "+task);
+      console.log("Board: "+this.state.board);
+      this.setState(newState);
+      checkForWin(this);
+      if (!((horizontalWin(this)||verticalWin(this)||diagonalWin(this)))) { //if no wins
+        this.state.playerTurn="X";
+      }
+    }
+
   }
 
   render() {
     return (
       <div>
         <div className="row">
-          <div data-cell="0"></div>
-          <div data-cell="1"></div>
-          <div data-cell="2"></div>
+          <div data-cell="0" onClick={this.placeSymbol}>{this.state.board[0]}</div>
+          <div data-cell="1" onClick={this.placeSymbol}>{this.state.board[1]}</div>
+          <div data-cell="2" onClick={this.placeSymbol}>{this.state.board[2]}</div>
         </div>
         <div className="row">
-          <div data-cell="3"></div>
-          <div data-cell="4"></div>
-          <div data-cell="5"></div>
+          <div data-cell="3" onClick={this.placeSymbol}>{this.state.board[3]}</div>
+          <div data-cell="4" onClick={this.placeSymbol}>{this.state.board[4]}</div>
+          <div data-cell="5" onClick={this.placeSymbol}>{this.state.board[5]}</div>
         </div>
         <div className="row">
-          <div data-cell="6"></div>
-          <div data-cell="7"></div>
-          <div data-cell="8"></div>
+          <div data-cell="6" onClick={this.placeSymbol}>{this.state.board[6]}</div>
+          <div data-cell="7" onClick={this.placeSymbol}>{this.state.board[7]}</div>
+          <div data-cell="8" onClick={this.placeSymbol}>{this.state.board[8]}</div>
         </div>
       </div>
     );
diff --git a/07week/towersOfHanoi/script.js b/07week/towersOfHanoi/script.js
index 9b156e880..95fcd309b 100644
--- a/07week/towersOfHanoi/script.js
+++ b/07week/towersOfHanoi/script.js
@@ -3,20 +3,121 @@
 class TowersOfHanoi extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+              $block: null,
+              removedDiv: null,
+              A: [100,75,50,25],
+              B: [],
+              C: []
+    }
+    this.movePiece = this.movePiece.bind(this);
   }
 
+  /*
+  *This function should*** move the blocks in the game. ***You can see the blocks move in the console.log statements, but the blocks do not visually move
+  *
+  *@param event Clicking on the stacks
+  */
+  movePiece(event) {
+    //debugger;
+    console.log("The event object: ", event);
+    console.log("The element clicked: ", event.target);
+    console.log("The value is: ", event.target.getAttribute("data-stack"));
+    console.log("State Before Move: ",this.state);
+
+    let task = event.target.getAttribute("data-stack");
+    //console.log("typeof task: ",typeof task);
+    let $stack;
+    if(task==="A"){
+      $stack = this.state.A;
+      //console.log("$stack(A): "+$stack);
+    }else if (task==="B") {
+      $stack = this.state.B;
+      //console.log("$stack(B): "+$stack);
+    }else if (task==="C") {
+      $stack = this.state.C;
+      //console.log("$stack(C): "+$stack);
+    }
+      if (this.state.$block===null) {
+        //this.state.$block = $stack[$stack.length-1];
+        //$stack.splice(($stack.length-1),1);
+        this.state.$block = $stack.pop();
+        //debugger;
+        this.state.removedDiv = event.target.removeChild(event.target.lastChild);
+        let newBlock = this.state.$block;
+        let stillA = this.state.A;
+        let stillB = this.state.B;
+        let stillC = this.state.C;
+        const newState = {
+          $block: newBlock,
+          A: stillA,
+          B: stillB,
+          C: stillC
+        }
+      } else {
+        // console.log($block.attr("data-block"),$(this).children().last().attr("data-block"))
+        if(this.state.$block>$stack[$stack.length-1]) {
+          alert("BAD MOVE");
+        } else {
+        //$stack.splice($stack[$stack.length-1],0,this.state.$block);
+        $stack.push(this.state.$block);
+        event.target.appendChild(this.state.removedDiv);
+        this.state.$block = null;
+        let newBlock = this.state.$block;
+        let newA = this.state.A;
+        let newB = this.state.B;
+        let newC = this.state.C;
+        const newState = {
+          $block: newBlock,
+          A: newA,
+          B: newB,
+          C: newC
+        }
+        if (newC.length===4) {
+          alert("You win!");
+        }
+        //moves++;
+        // console.log($("#winner").children().length);
+      }
+      console.log("State After Move: ",this.state);
+
+      }
+
+
+    }
+
+  /*
+  *This function converts the arrays in state to divs
+  *
+  *@param numbers The values from the state arrays
+  */
+  convertToDivs (numbers){
+    return (<div key={numbers} data-block={numbers}></div>)
+  }
+
+  /*
+  *This function should*** render the the blocks. ***You can see the blocks move in the console.log statements, but the blocks do not visually move
+  */
   render() {
+
+    /*function convertToDivs (numbers){
+      return (<div key={numbers} data-block={numbers}></div>)
+    }*/
+
+    let Ablocks = this.state.A.map(this.convertToDivs);
+    let Bblocks = this.state.B.map(this.convertToDivs);
+    let Cblocks = this.state.C.map(this.convertToDivs);
+
     return (
       <div>
-        <div data-stack="1">
-          <div data-block="100"></div>
-          <div data-block="75"></div>
-          <div data-block="50"></div>
-          <div data-block="25"></div>
+        <div data-stack="A" onClick={this.movePiece}>
+          {Ablocks}
         </div>
-        <div data-stack="2">
+        <div data-stack="B" onClick={this.movePiece}>
+          {Bblocks}
         </div>
-        <div data-stack="3">
+        <div data-stack="C" onClick={this.movePiece}>
+          {Cblocks}
         </div>
       </div>
     );
diff --git a/08week/fetch/index.html b/08week/fetch/index.html
index 6417d858f..a5049c997 100644
--- a/08week/fetch/index.html
+++ b/08week/fetch/index.html
@@ -3,10 +3,16 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Fetch</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
+  <!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"-->
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+  <!--img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"-->
   <div id="fetch"></div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
diff --git a/08week/fetch/script.js b/08week/fetch/script.js
index ad9a93a7c..6e4e41357 100644
--- a/08week/fetch/script.js
+++ b/08week/fetch/script.js
@@ -1 +1,64 @@
 'use strict';
+
+class ListUsers extends React.Component{
+
+  constructor(props){
+    super(props);
+    this.state = {
+      users: []
+    }
+    this.initialDraw = this.initialDraw.bind(this);
+  }
+
+  initialDraw(){
+      fetch('https://reqres.in/api/users?page=2').then((response) =>{
+        console.log("the status of my response ",response.status);
+        console.log("is this undefined? ", this);
+        return response.json();
+      }).then((random) => {
+        console.log("the data is ", random);
+        console.log("list of users",  random.data)
+        this.setState({
+          users: random.data
+        });
+      });
+  }
+
+  renderUsers() {
+    return this.state.users.map(function($user) {
+      //return (<li key={$user.id}>{$user.first_name} {$user.last_name} {$user.avatar}</li>)
+      return (<article key={$user.id}>
+                <div className="title">
+                  <h2>{$user.first_name} {$user.last_name}</h2>
+                </div>
+                <img className="pic" src={$user.avatar}></img>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+              </article>)
+    });
+  }
+
+/*className="col-md-2 col-md-offset-5 col-lg-2 col-lg-offset-5 col-sm-2 col-sm-offset-5 col-xs-4 col-xs-offset-4"*/
+
+  render(){
+    if(this.state.users.length == 0) {
+      this.initialDraw();
+    }
+    console.log("my state ", this.state)
+
+    return(
+
+      <div>
+        <header>
+          <h1>User List</h1>
+        </header>
+        <main>
+          {this.renderUsers()}
+          {/*}<button className="btn btn-success col-md-2 col-md-offset-5 col-lg-2 col-lg-offset-5 col-sm-2 col-sm-offset-5 col-xs-4 col-xs-offset-4">Do Nothing</button>*/}
+        </main>
+      </div>
+    )
+  }
+
+}
+
+ReactDOM.render(<ListUsers />, document.getElementById('fetch'));
diff --git a/08week/fetch/style.css b/08week/fetch/style.css
index e69de29bb..20f03d8da 100644
--- a/08week/fetch/style.css
+++ b/08week/fetch/style.css
@@ -0,0 +1,87 @@
+header {
+background-color: rgb(43,205,192);
+width: 900px;
+height: 300px;
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+h1 {
+color: white;
+font-size: 300%;
+font-family: "Times";
+}
+
+main {
+background-color: black;
+width: 900px;
+margin: auto;
+box-sizing: border-box;
+display: flex;
+justify-content: space-around;
+align-items: center;
+padding: 45px 20px 45px 20px;
+}
+
+article {
+  width: 22%;
+  /*display: flex;*/
+  /*justify-content: center;*/
+}
+
+.pic {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0px;
+}
+
+h2 {
+color: white;
+font-size: 200%;
+text-align: center;
+}
+
+p {
+  color: white;
+  text-align: center;
+  font-family: "Calibri";
+}
+
+@media (max-width: 767px) {
+
+  header {
+    background-color: rgb(55,170,224);
+    width: 100%;
+    padding-left: 50px;
+    padding-right: 50px;
+    box-sizing: border-box;
+  }
+
+  main {
+    background-color: rgb(220,220,220);
+    width: 100%;
+    flex-direction: column;
+  }
+
+  article {
+    width: 280px;
+    padding-bottom: 50px;
+  }
+
+  h2 {
+    color: black;
+  }
+
+  p {
+    color: black;
+  }
+}
diff --git a/09week/blog/index.html b/09week/blog/index.html
new file mode 100644
index 000000000..6d2459774
--- /dev/null
+++ b/09week/blog/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Air Quality</title>
+</head>
+<body>
+  <div id="blog"></div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+  <script type="text/babel" src="./script.js"></script>
+</body>
+</html>
diff --git a/09week/blog/script.js b/09week/blog/script.js
new file mode 100644
index 000000000..d4cd115c4
--- /dev/null
+++ b/09week/blog/script.js
@@ -0,0 +1,53 @@
+'use strict';
+
+class Blog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      allofit: []
+    }
+
+    this.markComplete = this.Remove.bind(this);
+  }
+
+  componentDidMount() {
+    fetch('https://api.openaq.org/v1/cities').then((result) => {
+      return result.json();
+    }).then((numbers) => {
+      this.setState({
+        allofit: numbers.results
+      })
+    });
+  }
+
+Remove(currentNumber) {
+  let list = this.state.results;
+  list.splice(currentNumber, 1);
+  this.setState({
+    allofit: list
+  })
+}
+
+render() {
+  const list = [];
+  //debugger;
+  this.state.allofit.forEach((item, index) => {
+    list.push(
+      <div key={index}>
+        <p key={index}>{item.city}</p>
+        <p>{item.city}</p>
+        <p>{item.locations}</p>
+        <button onClick={ () => {this.Remove(index)} }>Remove</button>
+      </div>
+    );
+  });
+  return (
+    <div>
+      {list}
+    </div>
+  )
+}
+}
+
+ReactDOM.render(<Blog />, document.getElementById('blog'));
diff --git a/09week/hackernews/index.html b/09week/hackernews/index.html
index d8518af73..578635af7 100644
--- a/09week/hackernews/index.html
+++ b/09week/hackernews/index.html
@@ -2,6 +2,9 @@
 <html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="style.css" />
   <title>Hacker News</title>
 </head>
 <body>
diff --git a/09week/hackernews/script.js b/09week/hackernews/script.js
index ad9a93a7c..3f696e41d 100644
--- a/09week/hackernews/script.js
+++ b/09week/hackernews/script.js
@@ -1 +1,90 @@
 'use strict';
+
+class Hacker extends React.Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      list: []
+    }
+  }
+
+  componentDidMount() {
+    const articleList = [];
+    for(let i=1; i<151; i++){
+      const url = `https://hacker-news.firebaseio.com/v0/item/${i}.json?print=pretty`;
+
+      const options = { //this is how we pass options to our fetch for future reference
+        method: 'GET',
+        headers: {
+          'content-type': 'application/json'
+        }
+      }
+
+      /*
+      *This function fetches the results of the API call
+      *
+      * @param url the url of the API
+      * @param options This is something that the substitute teacher showed us, and I am unclear exactly what it does, but I want to keep it in my code for future reference
+      */
+      fetch(url, options).then((result) => {
+        return result.json();
+      }).then((response) => {
+        //debugger;
+        if (response.type == "story") {
+          articleList.push(response);
+        }
+        this.setState({
+          list: articleList
+        })
+
+          console.log("testing mount");
+
+      });
+    }
+  }
+
+  /*
+  *This function allows the search bar to filter the results for only those that match the inputted string
+  *
+  *This was boiler plate code from W3 schools tweaked to fit here
+  */
+  mySearch(){
+    let input, filter, ul, li, a, i;
+    input = document.getElementById('myInput');
+    filter = input.value.toUpperCase();
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName('li');
+
+    for (i = 0; i < li.length; i++) {
+        a = li[i].getElementsByTagName("a")[0];
+        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            li[i].style.display = "";
+         } else {
+            li[i].style.display = "none";
+       }
+     }
+  }
+
+  render() {
+    //debugger;
+    return (
+      <div>
+        <header>
+          <h1>Hacker News Clone</h1>
+        </header>
+        <div id="inputdiv">
+          <input type="text" id="myInput" onKeyUp={this.mySearch} placeholder="Search for articles.."></input>
+        </div>
+        <div id="main">
+            <ul id="myUL">{this.state.list.map((item, index) => {
+              return <li className="articles" key={index}><a href={item.url}>{item.title}</a></li>;
+            })
+          }</ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<Hacker />, document.getElementById('hacker-news'))
diff --git a/09week/hackernews/style.css b/09week/hackernews/style.css
new file mode 100644
index 000000000..113ecdf4d
--- /dev/null
+++ b/09week/hackernews/style.css
@@ -0,0 +1,57 @@
+header {
+background-color: rgb(215,129,40);
+width: 900px;
+height: 150px;
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+h1 {
+color: black;
+font-size: 300%;
+font-family: "Impact";
+}
+
+#main {
+background-color: black;
+width: 900px;
+margin: auto;
+box-sizing: border-box;
+display: flex;
+align-items: center;
+padding: 45px 20px 45px 20px;
+}
+
+#inputdiv {
+  margin: auto;
+  width: 900px;
+  background-color: black;
+}
+
+a:link {
+    text-decoration: none;
+    color: white;
+}
+
+a:visited {
+    text-decoration: none;
+    color: white;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:active {
+    text-decoration: underline;
+}
+
+#myInput {
+    width: 100%; /* Full-width */
+    font-size: 16px; /* Increase font-size */
+    padding: 12px 20px 12px 40px; /* Add some padding */
+    border: 1px solid #ddd; /* Add a grey border */
+    margin-bottom: 12px; /* Add some space below the input */
+}
diff --git a/09week/hackernews_backup-notes/index.html b/09week/hackernews_backup-notes/index.html
new file mode 100644
index 000000000..d8518af73
--- /dev/null
+++ b/09week/hackernews_backup-notes/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hacker News</title>
+</head>
+<body>
+  <div id="hacker-news"></div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+  <script type="text/babel" src="./script.js"></script>
+</body>
+</html>
diff --git a/09week/hackernews_backup-notes/script.js b/09week/hackernews_backup-notes/script.js
new file mode 100644
index 000000000..869920d91
--- /dev/null
+++ b/09week/hackernews_backup-notes/script.js
@@ -0,0 +1,44 @@
+'use strict';
+
+class List extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <section className="blog">
+          <Article title="First article" />
+          <Article title="Second article" />
+          <Article title="Third passage" />
+          <Article title="Fourth passage" />
+        </section>
+      </div>
+    )
+  }
+}
+
+class Article extends React.Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      text = props.text
+    }
+  }
+
+  render() {
+    return {
+      <div>
+        <h3>{this.props.text}</h3>
+        {!this.props.title.includes('article') &&
+          <p><i>WARNiNG: This is not a valid article </i></p>}
+        <p>Lorem ipsum dolor sit amet, consectutur adipsiscing elit, sed dolo eisusmod tempor dicidndunt ut ajdf tidkc lskd te.</p>
+      </div>
+    }
+  }
+}
+
+
+ReactDOM.render(<List />, document.getElementById('hacker-news'))
diff --git a/Checkpoints/checkpoint2.js b/Checkpoints/checkpoint2.js
new file mode 100644
index 000000000..b5548aa43
--- /dev/null
+++ b/Checkpoints/checkpoint2.js
@@ -0,0 +1,51 @@
+'use strict';
+
+let printStuff = function(x){
+  console.log(x.customer.customerName+" paid $"+x.customer.productPrice+" for "+x.customer.product+" in "+x.customer.customerCity+", "+x.customer.customerState+".");
+};
+
+
+let userArray = [
+    {
+            "customer": {
+                "id": 1,
+                "customerName":"Marilyn Monroe",
+                "customerCity":"New York City",
+                "customerState":"NY",
+                "product":"Yellow Chair",
+                "productPrice": 19.99
+            }
+        },
+        {
+            "customer": {
+                "id": 2,
+                "customerName":"Abraham Lincoln",
+                "customerCity":"Boston",
+                "customerState":"MA",
+                "product":"Movie Tickets",
+                "productPrice": 27.00
+            }
+        },
+                {
+            "customer": {
+                "id": 3,
+                "customerName":"John F. Kennedy",
+                "customerCity":"Dallas",
+                "customerState":"TX",
+                "product":"Mustang Convertible",
+                "productPrice": 24999.99
+            }
+        },
+                {
+            "customer": {
+                "id": 4,
+                "customerName":"Martin Luther King",
+                "customerCity":"Burmingham",
+                "customerState":"AL",
+                "product":"Sandwiches",
+                "productPrice": 7.99
+            }
+        },
+];
+
+const map1 = userArray.map(printStuff);
diff --git a/Checkpoints/final/emailed files/index.txt b/Checkpoints/final/emailed files/index.txt
new file mode 100644
index 000000000..5384b39d9
--- /dev/null
+++ b/Checkpoints/final/emailed files/index.txt	
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="style.css" />
+  <title>Weather</title>
+</head>
+<body>
+  <div id="blog"></div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+  <script type="text/babel" src="./script.js"></script>
+</body>
+</html>
diff --git a/Checkpoints/final/emailed files/script.txt b/Checkpoints/final/emailed files/script.txt
new file mode 100644
index 000000000..1c1331e62
--- /dev/null
+++ b/Checkpoints/final/emailed files/script.txt	
@@ -0,0 +1,83 @@
+'use strict';
+
+class Blog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      list: []
+    }
+
+    //this.componentDidMount = this.componentDidMount.bind(this);
+  }
+
+//http://api.wunderground.com/api/91ae09d6dd3707f8/conditions/q/NY/New_York.json
+//http://api.wunderground.com/api/91ae09d6dd3707f8/conditions/q/CA/Los_Angeles.json
+//http://api.wunderground.com/api/91ae09d6dd3707f8/conditions/q/IL/Chicago.json
+
+  componentDidMount() {
+    const proxyurl = "https://cors-anywhere.herokuapp.com/";
+    const dataList = [];
+    const cityList = [
+      [42.3601,-71.0589],//["New_York", "NY"],
+      [37.8267,-122.4233]//["Los_Angeles", "CA"],
+      //["Chicago", "IL"],
+      //["Philadelphia", "PA"],
+      //["Dallas", "TX"],
+      //["San_Francisco", "CA"],
+      //["Houston", "TX"],
+      //["Washington","DC"],
+      //["Boston","MA"],
+      //["Detroit","MI"]
+    ];
+    for(let i=0; i<2; i++){
+      const url = `https://api.darksky.net/forecast/84e636b4f181398b4c799662fd1d9914/${cityList[i][0]},${cityList[i][1]}`;
+      //console.log("URL: ",url);
+    fetch(proxyurl+url).then((result) => {
+      return result.json();
+      //debugger;
+    }).then((response) => {
+      //debugger;
+      dataList.push(response);
+      this.setState({
+        list: dataList
+      })
+      console.log("testing mount");
+      console.log(this.state);
+      //debugger;
+    });
+  }
+}
+
+/* When the user clicks on the button,
+toggle between hiding and showing the dropdown content */
+myFunction() {
+    document.getElementById("myDropdown").classList.toggle("show");
+}
+
+render() {
+  if (this.state.list.length !== 0) {
+  console.log("First things in list: ",this.state.list[0].latitude);
+}
+
+  return (
+    <div>
+      <header>
+        <h1>Quick Weather</h1>
+      </header>
+      {this.state.list[0].latitude}
+      {/*<div className="dropdown">
+        <button onClick={this.myFunction} className="dropbtn">Dropdown</button>
+        <div id="myDropdown" className="dropdown-content">
+          <a href="#">{this.state.list[0].current_observation.display_location.full}</a>
+          <a href="#">{/*this.state.list[1].current_observation.display_location.full}</a>
+          <a href="#">{/*this.state.list[2].current_observation.display_location.full}</a>
+        </div>
+      </div>*/}
+    </div>
+  )
+
+}
+}
+
+ReactDOM.render(<Blog />, document.getElementById('blog'));
diff --git a/Checkpoints/final/emailed files/style.txt b/Checkpoints/final/emailed files/style.txt
new file mode 100644
index 000000000..d3a98dcfe
--- /dev/null
+++ b/Checkpoints/final/emailed files/style.txt	
@@ -0,0 +1,142 @@
+header {
+background-color: rgb(194,192,189);
+width: 900px;
+height: 150px;
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+h1 {
+color: black;
+font-size: 300%;
+font-family: "Impact";
+}
+
+.dropbtn {
+    background-color: white;
+    color: black;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+.dropbtn:hover, .dropbtn:focus {
+    background-color: #3e8e41;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: White;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+.show {display:block;}
+
+/*header {
+background-color: rgb(43,205,192);
+width: 900px;
+height: 300px;
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+h1 {
+color: white;
+font-size: 300%;
+font-family: "Times";
+}
+
+main {
+background-color: black;
+width: 900px;
+margin: auto;
+box-sizing: border-box;
+display: flex;
+justify-content: space-around;
+align-items: center;
+padding: 45px 20px 45px 20px;
+}
+
+article {
+  width: 22%;
+  //display: flex;
+  //justify-content: center;
+}
+
+.pic {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0px;
+}
+
+h2 {
+color: white;
+font-size: 200%;
+text-align: center;
+}
+
+p {
+  color: white;
+  text-align: center;
+  font-family: "Calibri";
+}
+
+@media (max-width: 767px) {
+
+  header {
+    background-color: rgb(55,170,224);
+    width: 100%;
+    padding-left: 50px;
+    padding-right: 50px;
+    box-sizing: border-box;
+  }
+
+  main {
+    background-color: rgb(220,220,220);
+    width: 100%;
+    flex-direction: column;
+  }
+
+  article {
+    width: 280px;
+    padding-bottom: 50px;
+  }
+
+  h2 {
+    color: black;
+  }
+
+  p {
+    color: black;
+  }
+}
+*/
diff --git a/Checkpoints/final/index.html b/Checkpoints/final/index.html
new file mode 100644
index 000000000..5384b39d9
--- /dev/null
+++ b/Checkpoints/final/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="style.css" />
+  <title>Weather</title>
+</head>
+<body>
+  <div id="blog"></div>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
+  <script type="text/babel" src="./script.js"></script>
+</body>
+</html>
diff --git a/Checkpoints/final/script.js b/Checkpoints/final/script.js
new file mode 100644
index 000000000..98a99ed7c
--- /dev/null
+++ b/Checkpoints/final/script.js
@@ -0,0 +1,104 @@
+'use strict';
+
+class Blog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      list: []
+    }
+
+    this.locationSearch = this.locationSearch.bind(this);
+  }
+
+  /*This function fetches appends the inputted latitude and longitude and appends them to the API url to fetch the data.
+  */
+  locationSearch() {
+    const proxyurl = "https://cors-anywhere.herokuapp.com/";
+    const dataList = [];
+      let url = `https://api.darksky.net/forecast/84e636b4f181398b4c799662fd1d9914/${this.myLatitude()},${this.myLongitude()}`;
+      //console.log("URL: ",url);
+    fetch(proxyurl+url).then((result) => {
+      return result.json();
+      //debugger;
+    }).then((response) => {
+      //debugger;
+      dataList.push(response);
+      this.setState({
+        list: dataList
+      })
+      console.log("Post-fetch state: ",this.state);
+      //debugger;
+    });
+}
+
+/*This function renders the state info as an html element
+*/
+renderWeather() {
+  return this.state.list.map(function($city) {
+    return (<article>
+              <div className="title">
+                <h2>{$city.timezone}</h2>
+              </div>
+              <div>
+                <p>Temperature: {$city.currently.temperature}</p>
+                <p>Today: {$city.hourly.summary}</p>
+                <p>This Week: {$city.daily.summary}</p>
+              </div>
+            </article>)
+  });
+}
+
+/*This function takes the inputted latitude
+*/
+myLatitude () {
+  let latInput, Lati;
+  latInput = document.getElementById('myLatID');
+  Lati = latInput.value;
+  console.log("Lati: ",Lati);
+  return Lati;
+}
+
+/*This function takes the inputted longitude
+*/
+myLongitude () {
+  let longInput, Longi;
+  longInput = document.getElementById('myLongID');
+  Longi = longInput.value;
+  console.log("Longi: ",Longi);
+  return Longi;
+}
+
+render() {
+  if (this.state.list.length !== 0) {
+  willRender = 1;
+  console.log("First things in list: ",this.state.list[0].latitude);
+}
+
+  return (
+    <div>
+      <header>
+        <h1>Quick Weather</h1>
+      </header>
+      <div className="inputdiv">
+        <input type="text" className="myInput" id="myLatID" onKeyUp={this.myLatitude} placeholder="Latitude: -90 (S) to 90 (N)"></input>
+      </div>
+      <div className="inputdiv">
+        <input type="text" className="myInput" id="myLongID" onKeyUp={this.myLongitude} placeholder="Longitude: -180 (W) to 180 (E)"></input>
+      </div>
+      <div id="buttondiv">
+        <button type="button" className="btn btn-info" onClick={this.locationSearch}>Search</button>
+      </div>
+      <div id="paragraphdiv">
+          <p>(Examples --- New York: 42.3601,-71.0589, Los Angeles: 37.8267,-122.4233, Chicago: 41.8781,-87.6298)</p>
+      </div>
+      <main>
+        {this.renderWeather()}
+      </main>
+    </div>
+  );
+
+}
+}
+
+ReactDOM.render(<Blog />, document.getElementById('blog'));
diff --git a/Checkpoints/final/style.css b/Checkpoints/final/style.css
new file mode 100644
index 000000000..6b3f02645
--- /dev/null
+++ b/Checkpoints/final/style.css
@@ -0,0 +1,56 @@
+header {
+background-color: rgb(194,192,189);
+width: 900px;
+height: 150px;
+margin: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+h1 {
+color: black;
+font-size: 300%;
+font-family: "Impact";
+}
+
+main {
+background-color: black;
+color: white;
+width: 900px;
+margin: auto;
+box-sizing: border-box;
+display: flex;
+align-items: center;
+justify-content: center;
+padding: 45px 20px 45px 20px;
+}
+
+.myInput {
+    width: 100%; /* Full-width */
+    font-size: 16px; /* Increase font-size */
+    padding: 12px 20px 12px 40px; /* Add some padding */
+    border: 1px solid #ddd; /* Add a grey border */
+    margin-bottom: 12px; /* Add some space below the input */
+}
+
+.inputdiv {
+  margin: auto;
+  width: 900px;
+  background-color: black;
+}
+
+#buttondiv, #paragraphdiv {
+  background-color: black;
+  color: white;
+  margin: auto;
+  width: 900px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+button {
+  margin: auto;
+  width: 700px;
+}