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..0c948a5
--- /dev/null
+++ b/week-6/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+ Tic Tac Toe
+
+
+
+
+
+
+
+
+
+
+
+ {{topText}}{{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..66bfadb
--- /dev/null
+++ b/week-6/js/tic-tac-toe.js
@@ -0,0 +1,136 @@
+var app = new Vue({
+ el: '#vue-app',
+ data: {
+ topText: 'It\'s your turn, ',
+ turn: 'x',
+ win1: null,
+ win2: null,
+ win3: null,
+ board:[
+ [null, null, null],
+ [null, null, null],
+ [null, null, null]
+ ],
+ gameOver: false
+ },
+ methods:{
+ checkSquareClick: function(row, column){
+ if(this.board[row][column] == null){
+
+ this.board[row][column] = this.turn;
+ //could have put the content of all these conditionals into a separate function to make it less cluttered, but eh
+ if(this.board[0][0] == this.board[0][1] && this.board[0][0] == this.board[0][2] && this.board[0][0] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "00";
+ this.win2 = "01";
+ this.win3 = "02";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[1][0] == this.board[1][1] && this.board[1][0] == this.board[1][2] && this.board[1][0] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "10";
+ this.win2 = "11";
+ this.win3 = "12";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[2][0] == this.board[2][1] && this.board[2][0] == this.board[2][2] && this.board[2][0] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "20";
+ this.win2 = "21";
+ this.win3 = "22";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[0][0] == this.board[1][0] && this.board[0][0] == this.board[2][0] && this.board[0][0] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "00";
+ this.win2 = "10";
+ this.win3 = "20";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[0][1] == this.board[1][1] && this.board[0][1] == this.board[2][1] && this.board[0][1] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "01";
+ this.win2 = "11";
+ this.win3 = "21";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[0][2] == this.board[1][2] && this.board[0][2] == this.board[2][2] && this.board[0][2] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "02";
+ this.win2 = "12";
+ this.win3 = "22";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[0][0] == this.board[1][1] && this.board[0][0] == this.board[2][2] && this.board[0][0] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "00";
+ this.win2 = "11";
+ this.win3 = "22";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ else if (this.board[0][2] == this.board[1][1] && this.board[0][2] == this.board[2][0] && this.board[0][2] != null){
+ this.topText = 'The winner is: ';
+ this.win1 = "02";
+ this.win2 = "11";
+ this.win3 = "20";
+ document.getElementById(this.win1).style.backgroundColor = "green";
+ document.getElementById(this.win2).style.backgroundColor = "green";
+ document.getElementById(this.win3).style.backgroundColor = "green";
+ this.gameOver = true;
+ return;
+ }
+ if(this.turn == 'x'){
+ this.turn = 'o';
+ }
+ else{
+ this.turn = 'x';
+ }
+ }
+
+ },
+ clearBoard: function(){
+ for(i = 0; i < 3; i++){
+ for(j = 0; j < 3; j++){
+ this.board[i][j] = null;
+ }
+ }
+ document.getElementById(this.win1).style.backgroundColor = "white";
+ document.getElementById(this.win2).style.backgroundColor = "white";
+ document.getElementById(this.win3).style.backgroundColor = "white";
+ this.win1 = null;
+ this.win2 = null;
+ this.win3 = null;
+ this.gameOver = false;
+ this.topText = 'It\'s your turn, ';
+ this.turn = 'x';
+ }
+ }
+});
\ No newline at end of file