diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js
index d0bc4bd52..0ced0dd1c 100644
--- a/07week/ticTacToe/script.js
+++ b/07week/ticTacToe/script.js
@@ -1,28 +1,48 @@
 'use strict';
 
 class TicTacToe extends React.Component {
+
   constructor(props) {
     super(props);
+      this.state = {
+          turn: 'X',
+      };
+      this.message = '';
   }
+  handleClick=(cell)=>{
+      const state = {...this.state};
+      const // this.state.turn? 'X' : 'O';
+      if (!state[cell]) {
+        state[cell] = this.state.turn;
+        state['turn'] = this.state.turn === 'X'? 'O' : 'X';  // Switch between X and O
+        this.message = '';
 
+      } else {
+        this.message = 'Square occupied.  Please select a different square';
+      }
+      // toggleTurn();
+      // this.state.turn? 'X' : 'O';
+      this.setState(state)
+  };
   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.handleClick('cell0')}>{this.state.cell0}</div>
+          <div data-cell="1" onClick={() => this.handleClick('cell1')}>{this.state.cell1}</div>
+          <div data-cell="2" onClick={() => this.handleClick('cell2')}>{this.state.cell2}</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.handleClick('cell3')}>{this.state.cell3}</div>
+          <div data-cell="4" onClick={() => this.handleClick('cell4')}>{this.state.cell4}</div>
+          <div data-cell="5" onClick={() => this.handleClick('cell5')}>{this.state.cell5}</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.handleClick('cell6')}>{this.state.cell6}</div>
+          <div data-cell="7" onClick={() => this.handleClick('cell7')}>{this.state.cell7}</div>
+          <div data-cell="8" onClick={() => this.handleClick('cell8')}>{this.state.cell8}</div>
         </div>
+        <div id='announce-winner'>{this.message}</div>
       </div>
     );
   }
diff --git a/07week/towersOfHanoi/Block.js b/07week/towersOfHanoi/Block.js
new file mode 100644
index 000000000..fdb3a8e3a
--- /dev/null
+++ b/07week/towersOfHanoi/Block.js
@@ -0,0 +1,11 @@
+// import React from 'react';
+
+// This functional component renders a block.  We pass the size
+// of the block in props.
+const Block = (props) => {
+  return (
+    <div data-block={props.size} />
+  );
+};
+
+// export default Block;
diff --git a/07week/towersOfHanoi/Pop.js b/07week/towersOfHanoi/Pop.js
new file mode 100644
index 000000000..fad743029
--- /dev/null
+++ b/07week/towersOfHanoi/Pop.js
@@ -0,0 +1,9 @@
+// This functional component renders the Popped block line.
+const Pop = (props) => {
+  return (
+    <div id="pop">
+      <div>Popped Block:&nbsp;</div>
+      <div data-block={props.block} />
+    </div>
+  );
+};
diff --git a/07week/towersOfHanoi/Stack.js b/07week/towersOfHanoi/Stack.js
new file mode 100644
index 000000000..e088f8327
--- /dev/null
+++ b/07week/towersOfHanoi/Stack.js
@@ -0,0 +1,28 @@
+// import React from 'react';
+// import Block from './Block.js';
+
+// This functional component renders the Stacks.  It uses an array map to display
+// all the blocks assigned in stacks arrays.
+const Stack = (props) => {
+
+  // const updateMe = ;
+
+  return (
+    <div
+      data-stack={props.id}
+      onClick={() => props.handleStackClick(props.id)}
+      >
+      {
+        props.blocks.map((blockSize,index) =>
+          <Block
+            size={blockSize}
+            key={index}
+          />
+        )
+      }
+    </div>
+  );
+
+};
+
+// export default Stack;
diff --git a/07week/towersOfHanoi/index.html b/07week/towersOfHanoi/index.html
index 37d057527..9955c4445 100644
--- a/07week/towersOfHanoi/index.html
+++ b/07week/towersOfHanoi/index.html
@@ -10,6 +10,11 @@
   <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>
+  <!-- React objects... Pop, Block, Stack -->
+  <script type="text/babel" src="./Pop.js"></script>
+  <script type="text/babel" src="./Block.js"></script>
+  <script type="text/babel" src="./Stack.js"></script>
   <script type="text/babel" src="./script.js"></script>
+
 </body>
 </html>
diff --git a/07week/towersOfHanoi/script.js b/07week/towersOfHanoi/script.js
index 9b156e880..fd9c395a9 100644
--- a/07week/towersOfHanoi/script.js
+++ b/07week/towersOfHanoi/script.js
@@ -1,26 +1,166 @@
 'use strict';
 
+/****************** WHITE BOARD NOTES **********************
+// Given: the board, stacks and blocks.  Board Display.
+//
+// create object with 3 arrays?
+//
+// Create functional components: Stack and Block
+//
+// Click on a stack
+// Test for popped block.
+// If popped block then
+//   If validMove() then
+//     *** Comparing last block in current stack, test
+//     movePiece()
+//     if checkForWin() then
+//       Announce winner!
+//     else
+//       Continue playing the game.
+//   else
+//     alert user, 'Cannot move larger block onto smaller one'
+//   end if
+// else
+//   If !popOffBlock() then
+//     alert user, 'select a stack with a block'
+//   End if
+//
+// validMove(sourceStack, targetStack)  // the tests expect this function to take in 2 values.
+//  if source stack array.last < target stack array.last then
+//    return true
+//  end if
+//  return false
+//
+// movePiece()
+//  target stack array.push(source stack array.pop)
+//  return
+//
+// checkForWin()
+//  if b.array.length === 4 || c.array.length === 4 then
+//    return true
+//  end if
+//  return false
+//
+// popOffBlock(sourceStack)
+//   if sourceStack > 0  // has blocks
+//     Pop off top block.
+//     return true;
+//   else
+//     return false;
+//   end if
+
+***********************************************************/
+
+// Main driver class.
 class TowersOfHanoi extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+    const startArr = [100,75,50,25];
+    const winCount = startArr.length;
+    this.state = {
+      stacks: {               // My stacks object has 3 arrays for each stack
+        1: startArr.slice(),  // a place to store the popped block and the
+        2: [],                // winning count.
+        3: [],
+        popped: null,
+        winCount: winCount
+      },
+      message: '',           // message used to display messages to the user.
+      youWon: false          // Used to shut game down after win.
+    }
+  }  // Constructor
+
+  // Need to ensure player is not placing a larger block on top of a smaller one.
+  validMove(popped, stack) {
+    if (stack.length === 0 || popped < stack[stack.length - 1]) {
+      return true;
+    }
+    return false;
   }
 
+  // Check for a win.  If stack 2 or 3 has all the blocks, then WIN.
+  checkForWin(stacks) {
+    // console.log('in checkForWin');
+    // console.log('Win criteria',stacks.winCount, stacks[2].length, stacks[3].length);
+    if (stacks[2].length === stacks.winCount || stacks[3].length === stacks.winCount) {
+      return true;
+    }
+    return false;
+  } // checkForWin()
+
+  // All the TOH logic is in here.
+  handleClick(sKey) {
+    console.log('In handleClick!');
+    // Creating an exact copy of stacks... one that is not by reference.
+    const stacks = {1:[],2:[],3:[],popped:null,winCount:null};
+    stacks[1] = this.state.stacks[1].slice();
+    stacks[2] = this.state.stacks[2].slice();
+    stacks[3] = this.state.stacks[3].slice();
+    stacks['popped'] = this.state.stacks['popped'];
+    stacks['winCount'] = this.state.stacks['winCount'];
+
+    let message = this.state.message;
+    let youWon = this.state.youWon;
+
+    if(stacks['popped']) {  // We have a popped block.  Need to push block
+      if (this.validMove(stacks['popped'], stacks[sKey])) {
+        stacks[sKey].push(stacks['popped']);
+        stacks['popped'] = null;
+        message = '';
+        if (this.checkForWin(stacks) && !youWon) {
+          message = 'Congratulations, you solved Towers of Hanoi!';
+          youWon = true;
+          this.setState({stacks: stacks, message: message, youWon: youWon});
+        }
+      } else {
+        message = 'Invalid move.  Cannot place larger block on smaller one';
+      }
+    } else {  // We need to pop a block off the selected stack.
+      if (stacks[sKey].length > 0) {
+        stacks['popped'] = stacks[sKey].pop();
+        message = '';
+      } else {
+        message = 'You selected an empty stack.  Please try again.';
+      }
+    }
+    youWon? null : this.setState({stacks: stacks, message: message, youWon: youWon});
+
+  }  // handleClick()
+
+  // This is the main display for the game.  I display a Stack object.
+  // The stack objects display the block objects.
   render() {
     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>
+          <h2>Towers of Hanoi by Craig... React version!</h2>
+          <Pop block={this.state.stacks['popped']} />
         </div>
-        <div data-stack="2">
+        <div id="board">
+          <Stack
+            id="1"
+            blocks={this.state.stacks[1]}
+            handleStackClick={this.handleClick.bind(this)}
+          />
+          <Stack
+            id="2"
+            blocks={this.state.stacks[2]}
+            handleStackClick={this.handleClick.bind(this)}
+          />
+          <Stack
+            id="3"
+            blocks={this.state.stacks[3]}
+            handleStackClick={this.handleClick.bind(this)}
+          />
         </div>
-        <div data-stack="3">
+        <div>
+          <h2>{this.state.message}</h2>
         </div>
+
       </div>
     );
   }
 }
 
+// Rendering TowersOfHanoi class within div id=towers-of-hanoi
 ReactDOM.render(<TowersOfHanoi />, document.getElementById('towers-of-hanoi'));
diff --git a/07week/towersOfHanoi/style.css b/07week/towersOfHanoi/style.css
index 2fc698923..6dad59966 100644
--- a/07week/towersOfHanoi/style.css
+++ b/07week/towersOfHanoi/style.css
@@ -1,34 +1,53 @@
-[data-stack] {
+#towers-of-hanoi {
+  display: flex;
+  font-family: Arial;
+  }
+
+#board {
+  display: flex;
+
+  }
+
+#pop {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  height: 30px;
+  align-items: center;
+}
+  [data-stack] {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  height: 101px;
+  height: 150px;
+  width: 200px;
   background-color: aliceblue;
   margin: 25px;
+  flex-direction: column-reverse;
 }
 
 [data-block] {
-  width: 25px;
+  height: 25px;
   float: left;
 }
 
 [data-block="25"] {
-  height: 25px;
+  width: 25px;
   background-color: blue;
 }
 
 [data-block="50"] {
-  height: 50px;
+  width: 50px;
   background-color: green;
 }
 
 [data-block="75"] {
-  height: 75px;
+  width: 75px;
   background-color: red;
 }
 
 [data-block="100"] {
-  height: 100px;
+  width: 100px;
   background-color: yellow;
 }