ContinuumIO · stephig85 · Mar 8, 2017
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,7 @@ __conda_version__.txt
 
 ui/node_modules/
 ui/static/
+ui
+backend
+environment.yml
+run.py
diff --git a/backend/templates/index.html b/backend/templates/index.html
diff --git a/tic-tac-toe/css/styles.css b/tic-tac-toe/css/styles.css
@@ -0,0 +1,65 @@
+html {
+  background-color: #F7F3EF;
+  color: ##006989;
+  line-height: 1.4;
+  font-size: 15px;
+}
+
+body {
+  text-align: center;
+  font-family: 'Shadows Into Light Two', cursive;
+}
+
+header {
+  margin-top: 3em;
+}
+
+h1 {
+  font-size: 4em;
+  color: #006989;
+}
+
+#alert {
+  font-size: 25px;
+}
+
+table {
+  margin: 2em auto;
+}
+
+table.board {
+  border-collapse: collapse;
+  font-size: 50px;
+}
+
+.board td {
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  border: 5px solid black;
+  cursor: pointer;
+}
+
+.board tr td:first-child {
+  border-left: none;
+}
+
+.board tr td:last-child {
+  border-right: none;
+}
+
+.board tr:first-child td {
+  border-top: none;
+}
+
+.board tr:last-child td {
+  border-bottom: none;
+}
+
+#reset-btn {
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 8em;
+  font-size: 10px;
+  background-color: #F7F5FB;
+}
diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <title>Continuum UI Coding Challenge</title>
+
+      <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
+      <link rel="stylesheet" href="css/styles.css" media="screen" charset="utf-8">
+    </head>
+    <body>
+      <header>
+        <h1>Tic Tac Toe</h1>
+        <h2>Current Player: <span id="playerNumber"></span></h2>
+      </header>
+
+      <div id="alert"></div>
+
+      <table class="board">
+        <tbody>
+          <tr>
+            <td id="1" class="box"></td>
+            <td id="2" class="box"></td>
+            <td id="3" class="box"></td>
+          </tr>
+          <tr>
+            <td id="4" class="box"></td>
+            <td id="5" class="box"></td>
+            <td id="6" class="box"></td>
+          </tr>
+          <tr>
+            <td id="7" class="box"></td>
+            <td id="8" class="box"></td>
+            <td id="9" class="box"></td>
+          </tr>
+        </tbody>
+      </table>
+
+
+      <button id="reset-btn" type="button" name="Reset">Reset Board</button>
+
+      <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
+
+      <script src="js/main.js" charset="utf-8"></script>
+    </body>
+</html
diff --git a/tic-tac-toe/js/main.js b/tic-tac-toe/js/main.js
@@ -0,0 +1,67 @@
+console.log('Connected');
+
+$(function() {
+
+  // DOM has loaded
+
+  var playerOne = 'X', playerTwo = 'O';
+  var currentPlayer = playerOne;
+  var turns = 0, maxTurns = 9;
+
+  $('#playerNumber').text(currentPlayer);
+
+  $('.box').on('click', function() {
+    // Set the current player's marker
+    $(this).text(currentPlayer);
+
+
+    // Increment the number of turns taken
+    turns++;
+
+    // Check if the user is a winner
+    if (isWinner('#1', '#2', '#3') || // row 1
+      isWinner('#4', '#5', '#6') || // row 2
+      isWinner('#7', '#8', '#9') || // row 3
+      isWinner('#1', '#4', '#7') || // col 1
+      isWinner('#2', '#5', '#8') || // col 2
+      isWinner('#3', '#6', '#9') || // col 3
+      isWinner('#1', '#5', '#9') || // diagonal 1
+      isWinner('#3', '#5', '#7')) { // diagonal 2
+      $('#alert').append("Winner!");
+    } else {
+      // Did we reach the maximum number of tries
+      if (turns >= maxTurns) {
+        $('#alert').append("We have a Cat's Game!");
+        return;
+      }
+
+      // Switch to the other player
+      switchPlayer();
+    }
+
+    // Removes the event handler so they can't click it again
+    $(this).off('click');
+  });
+
+  function isWinner(square1, square2, square3) {
+    return $(square1).text() && $(square1).text() === $(square2).text() && $(square2).text() === $(square3).text();
+  }
+
+  function switchPlayer() {
+    if (currentPlayer === playerOne) {
+      currentPlayer = playerTwo;
+      $('#playerNumber').text(currentPlayer);
+
+    } else {
+      currentPlayer = playerOne;
+      $('#playerNumber').text(currentPlayer);
+    }
+  }
+
+  // Reload page
+  $('#reset-btn').on('click', function(){
+    window.location.reload(true);
+    // $('#board')location.reload(true);
+  });
+
+}); // End of dom
diff --git a/ui/src/index.scss b/ui/src/index.scss
diff --git a/ui/src/main.js b/ui/src/main.js