diff --git a/week-6/css/style.css b/week-6/css/style.css
new file mode 100644
index 0000000..248cddb
--- /dev/null
+++ b/week-6/css/style.css
@@ -0,0 +1,64 @@
+/* CSS files add styling rules to your content */
+
+* {
+ box-sizing: border-box;
+}
+
+:root {
+ --board-size: 200px;
+ --line-color: grey;
+ --gap: 5px;
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+
+}
+
+main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+}
+
+
+.gameboard {
+ width: calc( (3 * var(--board-size)) + (2 * var(--gap)) );
+ display: grid;
+ grid-template-columns: repeat(3, var(--board-size) );
+ grid-template-rows: repeat(3, var(--board-size) );
+ place-items: stretch;
+ background-color: var(--line-color);
+ grid-gap: 5px;
+
+}
+
+.square {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: white;
+ color: #333;
+ font-size: var(--board-size);
+ line-height: var(--board-size);
+ text-transform: uppercase;
+ margin:0;
+ padding:0;
+ cursor: pointer;
+
+}
+
+.square:hover {
+ background-color: #eee;
+}
+
+
+.banner {
+ background-color: lightblue;
+ position: absolute;
+ top: 0px;
+ padding: 1em;
+ width: 100%;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/week-6/index.html b/week-6/index.html
new file mode 100644
index 0000000..e6ddd46
--- /dev/null
+++ b/week-6/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ Tic Tac Toe
+
+
+
+
+
+
+
+
+
+
+
+ It's your turn, {{turn}}.
+
+
+
+
+
{{ board[0][0] }}
+
{{ board[0][1] }}
+
{{ board[0][2] }}
+
+
{{ board[1][0] }}
+
{{ board[1][1] }}
+
{{ board[1][2] }}
+
+
{{ board[2][0] }}
+
{{ board[2][1] }}
+
{{ board[2][2] }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week-6/js/tic-tac-toe.js b/week-6/js/tic-tac-toe.js
new file mode 100644
index 0000000..0a863b7
--- /dev/null
+++ b/week-6/js/tic-tac-toe.js
@@ -0,0 +1,64 @@
+var app = new Vue({
+ el: '#vue-app',
+ data: {
+ turn: 'x',
+ board: [
+ [null, null, null],
+ [null, null, null],
+ [null, null, null]
+ ]
+ },
+ methods: {
+ changeIt: function(row,column){
+
+ this.board[row][column] = this.turn
+
+ let winnerx = "Player 'X', you are a winner!";
+ let winnero = "Player 'O', you are a winner!";
+
+ if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn) {
+ this.board[0] ="Winner!";
+ alert(winnerx);
+ }else if(this.board[0,0] == 'o' && this.board[0,1] == 'o' && this.board[0,2] =='o') {
+ this.board[0] ="Winner!";
+ alert(winnero);
+ }else if(this.board[1,1] == 'x' && this.board[1,0] == 'x' && this.board[1,2] =='x') {
+ this.board[1] ="Winner!";
+ alert(winnerx);
+ }else if(this.board[1,1] == 'o' && this.board[1,0] == 'o' && this.board[1,2] =='o') {
+ this.board[1] ="Winner!";
+ alert(winnero);
+ }else if(this.board[2,1] == 'x' && this.board[2,0] == 'x' && this.board[2,2] =='x') {
+ this.board[2] ="Winner!";
+ alert(winnerx);
+ }else if(this.board[2,1] == 'o' && this.board[2,0] == 'o' && this.board[2,2] =='o') {
+ this.board[2] ="Winner!";
+ alert(winnero);
+
+
+ }else if(this.board[0][0] == 'x' && this.board[1][0] == 'x' && this.board[2][0] == 'x'){
+ this.board[0][0] = "W";
+ this.board[1][0] = "I";
+ this.board[2][0] = "N";
+ alert(winnerx);
+ }else if(this.board[0][0] == 'o' && this.board[1][0] == 'o' && this.board[2][0] == 'o'){
+ this.board[0][0] = "W";
+ this.board[1][0] = "I";
+ this.board[2][0] = "N";
+ alert(winnero);
+ }else if(this.board[1][1] == 'o' && this.board[1][0] == 'o' && this.board[1][2] == 'o'){
+ this.board[0][0] = "W";
+ this.board[1][0] = "I";
+ this.board[2][0] = "N";
+ alert(winnero);
+}else if(this.board[1][1] == 'x' && this.board[1][0] == 'x' && this.board[1][2] == 'x'){
+ this.board[0][0] = "W";
+ this.board[1][0] = "I";
+ this.board[2][0] = "N";
+ alert(winnerx);
+}
+ //correctly identifies when someone has won
+ this.turn = (this.turn == 'x') ? 'o' : 'x';
+ }
+ }
+});
\ No newline at end of file