From 077943a1992212517dca9fa607f6769b58ba2558 Mon Sep 17 00:00:00 2001 From: michaelscoggins Date: Thu, 16 Jul 2020 11:57:56 -0500 Subject: [PATCH 1/4] second commit --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 2994e56..023b3ff 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,5 @@ 'use strict'; - +// comment for first commit // brings in the assert module for unit testing const assert = require('assert'); // brings in the readline module to access the command line From 998593a67ecf0d638d854df7c2848f3ef1dc2c08 Mon Sep 17 00:00:00 2001 From: michaelscoggins Date: Thu, 16 Jul 2020 17:16:59 -0500 Subject: [PATCH 2/4] all tests passing --- main.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 023b3ff..1d1a335 100644 --- a/main.js +++ b/main.js @@ -10,7 +10,7 @@ const rl = readline.createInterface({ output: process.stdout }); -// creates and empty "board" for the user to see where marks can be placed. +// creates an empty "board" for the user to see where marks can be placed. // using let because the variable is expected to change with more 'X's and 'O's to add let board = [ [' ', ' ', ' '], @@ -22,6 +22,14 @@ let board = [ // using let because the variable is expected to change from 'X' to 'O' and back let playerTurn = 'X'; +const changeMarker = () => { + if(playerTurn === "X"){ + playerTurn = "O" + } else { + playerTurn = "X" + } +} + // is a function that print the current status of the board using the variable - board const printBoard = () => { console.log(' 0 1 2'); @@ -34,23 +42,60 @@ const printBoard = () => { const horizontalWin = () => { // Your code here to check for horizontal wins + if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) { + return true + } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) { + return true + } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { + return true + } else { + return false + } } const verticalWin = () => { // Your code here to check for vertical wins + if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) { + return true + } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) { + return true + } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) { + return true + } else { + return false + } } const diagonalWin = () => { // Your code here to check for diagonal wins + if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) { + return true + } else if ((board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O")) { + return true + } else { + return false + } } const checkForWin = () => { // Your code here call each of the check for types of wins + if(horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player ${playerTurn} won!`) + return true + } else { + changeMarker() + } + } const ticTacToe = (row, column) => { // Your code here to place a marker on the board // then check for a win + board[row][column] = playerTurn + + // changeMarker() + checkForWin() + } const getPrompt = () => { From e03bd9eb7073df13efa14ce6dfe48fff424bb137 Mon Sep 17 00:00:00 2001 From: michaelscoggins Date: Sat, 18 Jul 2020 17:56:31 -0500 Subject: [PATCH 3/4] all good i think --- dom-tictactoe.js | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/dom-tictactoe.js b/dom-tictactoe.js index b585e75..8d9aa34 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -30,7 +30,7 @@ const addMarker = (id) => { console.log(`We'll place a mark on square: ${id}`) // @TODO, Mix & Match. // You will need the following pieces: - + document.getElementById(id).innerHTML = currentMarker // = currentMarker // .getElementById(id) // document @@ -46,9 +46,13 @@ const updateBoard = (id) => { const row = parseInt(id.charAt(0)) const column = parseInt(id.charAt(2)) + console.log(`you clicked the sq at ${row} and ${column}`) console.log(board) + board[row][column] = currentMarker + + // @TODO, Your code here: use the above information to change the board variable(array of arrays) // HINT: in your browser open up the dev tools -> console } @@ -65,20 +69,46 @@ const checkForWin = () => { } const horizontalWin = () => { - // @TODO, Your code here: to check for horizontal wins + // @TODO, Your code here: to check for horizontal wins + if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) { + return true + } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) { + return true + } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { + return true + } else { + return false + } } const verticalWin = () => { // @TODO, Your code here: to check for vertical wins + if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) { + return true + } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) { + return true + } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) { + return true + } else { + return false + } } const diagonalWin = () => { // @TODO, Your code here: to check for diagonal wins + if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) { + return true + } else if ((board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O")) { + return true + } else { + return false + } } const changeMarker = () => { // ternary operator: if it's an X make it an O, if O make it an X currentMarker = currentMarker === "X" ? "O" : "X" + } const resetBoard = () => { @@ -93,7 +123,11 @@ const resetBoard = () => { console.log(squares[i]) squares[i].innerHTML = null } - + board = [ + ["","",""], + ["","",""], + ["","",""] + ] // @TODO, Your code here: make sure to reset the array of arrays to empty for a new game } From ac3c3dd329b11d660c7718a8829a106379f59c1b Mon Sep 17 00:00:00 2001 From: Michael Scoggins Date: Thu, 4 Feb 2021 21:20:39 -0600 Subject: [PATCH 4/4] cleaned up code. added style. added color logic --- .vscode/settings.json | 2 +- dom-tictactoe.js | 186 +++++++++++++++++------------------ index.html | 40 +++++--- main.js | 221 ++++++++++++++++++++++++------------------ tictactoe.css | 64 +++++++++++- 5 files changed, 310 insertions(+), 203 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..cbb7b3a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/dom-tictactoe.js b/dom-tictactoe.js index 8d9aa34..6f6f9aa 100644 --- a/dom-tictactoe.js +++ b/dom-tictactoe.js @@ -8,128 +8,124 @@ // next to each @TODO you will find tasks that need to be finished // 4. GET THIS GAME WORKING!! -let currentMarker = 'X' +let currentMarker = "X"; let board = [ - ['','',''], - ['','',''], - ['','',''] + ["", "", ""], + ["", "", ""], + ["", "", ""], ]; -// is called when a square is clicked. "this" = element here const handleClick = (element) => { // check to see if the square clicked has anything in it, if not continue - // this prevents an X being changed to an O - if(!document.getElementById(element.id).innerHTML){ - addMarker(element.id) - updateBoard(element.id) - checkForWin() + if (!document.getElementById(element.id).innerHTML) { + addMarker(element.id); + updateBoard(element.id); + checkForWin(); + + let cell = document.getElementById(element.id); + cell.innerHTML === "X" + ? (cell.style.color = "springgreen") + : (cell.style.color = "orange"); } -} +}; const addMarker = (id) => { - console.log(`We'll place a mark on square: ${id}`) - // @TODO, Mix & Match. - // You will need the following pieces: - document.getElementById(id).innerHTML = currentMarker - // = currentMarker - // .getElementById(id) - // document - // .innerHTML - - // Arrange the above pieces into one a single line of code - // to add an X or O to the board to the DOM so it can be scene on the screen. -} + document.getElementById(id).innerHTML = currentMarker; +}; + +const changeMarker = () => { + currentMarker = currentMarker === "X" ? "O" : "X"; +}; // passes the element's id attribute from HTML to be used const updateBoard = (id) => { - // parses the id string into a number then captures the first and last part the newly create number as row & column - const row = parseInt(id.charAt(0)) - const column = parseInt(id.charAt(2)) - - - console.log(`you clicked the sq at ${row} and ${column}`) - console.log(board) - - board[row][column] = currentMarker - - - // @TODO, Your code here: use the above information to change the board variable(array of arrays) - // HINT: in your browser open up the dev tools -> console -} + const row = parseInt(id.charAt(0)); + const column = parseInt(id.charAt(2)); + board[row][column] = currentMarker; +}; const checkForWin = () => { // calls each checkForWin possibility and if any are true gives a page alert, - if(horizontalWin() || verticalWin() || diagonalWin()) { + if (horizontalWin() || verticalWin() || diagonalWin()) { // **BONUS** you could make the dismissal of this alert window reset the board... - window.alert(`Player ${currentMarker} won!`) + window.alert(`Player ${currentMarker} won!`); } else { // if no win, change the marker from X to O, or O to X for the next player. - changeMarker() + changeMarker(); } -} +}; const horizontalWin = () => { - // @TODO, Your code here: to check for horizontal wins - if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) { - return true - } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) { - return true - } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { - return true - } else { - return false - } -} + if ( + (board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || + (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O") + ) { + return true; + } else if ( + (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || + (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") + ) { + return true; + } else if ( + (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || + (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O") + ) { + return true; + } else { + return false; + } +}; const verticalWin = () => { - // @TODO, Your code here: to check for vertical wins - if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) { - return true - } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) { - return true - } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) { - return true - } else { - return false - } -} + if ( + (board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || + (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O") + ) { + return true; + } else if ( + (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || + (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") + ) { + return true; + } else if ( + (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || + (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O") + ) { + return true; + } else { + return false; + } +}; const diagonalWin = () => { - // @TODO, Your code here: to check for diagonal wins - if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) { - return true - } else if ((board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O")) { - return true - } else { - return false - } -} - -const changeMarker = () => { - // ternary operator: if it's an X make it an O, if O make it an X - currentMarker = currentMarker === "X" ? "O" : "X" - -} + if ( + (board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || + (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O") + ) { + return true; + } else if ( + (board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || + (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O") + ) { + return true; + } else { + return false; + } +}; const resetBoard = () => { - // sanity check: this tells us the function is being called - console.log("the board was cleared!") - - // collects all of the "td"s into an HTML Collection: https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp - const squares = document.getElementsByTagName("TD") - - // loops over the HTML Collections and clears out the Xs and Os - for (i=0; i { // 2. Count number of wins for each player and display them // 3. Reset the number of wins // 4. Clear the board on alert window dismissal -// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" \ No newline at end of file +// 5. Add players names and display who wins, i.e. "Congrats Emily, you won with 0s!" diff --git a/index.html b/index.html index 10a15d1..af25956 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,52 @@ - + Tic Tac Toe - - + +
-

Welcome to Tic Tac Toe

+

Tic Tac Toe

Get ready to play!

- +
- - - + + + - - - + + + - - - + + +
diff --git a/main.js b/main.js index 1d1a335..aad3c8d 100644 --- a/main.js +++ b/main.js @@ -1,147 +1,184 @@ -'use strict'; +"use strict"; // comment for first commit // brings in the assert module for unit testing -const assert = require('assert'); +const assert = require("assert"); // brings in the readline module to access the command line -const readline = require('readline'); +const readline = require("readline"); // use the readline module to print out to the command line const rl = readline.createInterface({ input: process.stdin, - output: process.stdout + output: process.stdout, }); // creates an empty "board" for the user to see where marks can be placed. // using let because the variable is expected to change with more 'X's and 'O's to add let board = [ - [' ', ' ', ' '], - [' ', ' ', ' '], - [' ', ' ', ' '] + [" ", " ", " "], + [" ", " ", " "], + [" ", " ", " "], ]; // assigns the first mark as 'X' // using let because the variable is expected to change from 'X' to 'O' and back -let playerTurn = 'X'; +let playerTurn = "X"; const changeMarker = () => { - if(playerTurn === "X"){ - playerTurn = "O" - } else { - playerTurn = "X" - } -} - -// is a function that print the current status of the board using the variable - board -const printBoard = () => { - console.log(' 0 1 2'); - console.log('0 ' + board[0].join(' | ')); - console.log(' ---------'); - console.log('1 ' + board[1].join(' | ')); - console.log(' ---------'); - console.log('2 ' + board[2].join(' | ')); -} - -const horizontalWin = () => { - // Your code here to check for horizontal wins - if((board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O")) { - return true - } else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) { - return true - } else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) { - return true - } else { - return false - } -} - -const verticalWin = () => { - // Your code here to check for vertical wins - if((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) { - return true - } else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) { - return true - } else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) { - return true - } else { - return false - } -} - -const diagonalWin = () => { - // Your code here to check for diagonal wins - if((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) { - return true - } else if ((board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O")) { - return true - } else { - return false - } -} + playerTurn === "X" ? (playerTurn = "O") : (playerTurn = "X"); + // if (playerTurn === "X") { + // playerTurn = "O"; + // } else { + // playerTurn = "X"; + // } +}; const checkForWin = () => { // Your code here call each of the check for types of wins - if(horizontalWin() || verticalWin() || diagonalWin()) { - console.log(`Player ${playerTurn} won!`) - return true + if (horizontalWin() || verticalWin() || diagonalWin()) { + console.log(`Player ${playerTurn} won!`); + return true; } else { - changeMarker() - } - -} + changeMarker(); + } +}; const ticTacToe = (row, column) => { // Your code here to place a marker on the board // then check for a win - board[row][column] = playerTurn - - // changeMarker() - checkForWin() + board[row][column] = playerTurn; -} + // changeMarker() + checkForWin(); +}; const getPrompt = () => { printBoard(); console.log("It's Player " + playerTurn + "'s turn."); - rl.question('row: ', (row) => { - rl.question('column: ', (column) => { + rl.question("row: ", (row) => { + rl.question("column: ", (column) => { ticTacToe(row, column); getPrompt(); }); }); -} +}; +// is a function that print the current status of the board using the variable - board +const printBoard = () => { + console.log(" 0 1 2"); + console.log("0 " + board[0].join(" | ")); + console.log(" ---------"); + console.log("1 " + board[1].join(" | ")); + console.log(" ---------"); + console.log("2 " + board[2].join(" | ")); +}; + +const horizontalWin = () => { + // Your code here to check for horizontal wins + if ( + (board[0][0] == "X" && board[0][1] == "X" && board[0][2] == "X") || + (board[0][0] == "O" && board[0][1] == "O" && board[0][2] == "O") + ) { + return true; + } else if ( + (board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X") || + (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O") + ) { + return true; + } else if ( + (board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X") || + (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O") + ) { + return true; + } else { + return false; + } +}; + +const verticalWin = () => { + if ( + (board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X") || + (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O") + ) { + return true; + } else if ( + (board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X") || + (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O") + ) { + return true; + } else if ( + (board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X") || + (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O") + ) { + return true; + } else { + return false; + } +}; + +const diagonalWin = () => { + if ( + (board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X") || + (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O") + ) { + return true; + } else if ( + (board[2][0] == "X" && board[1][1] == "X" && board[2][0] == "X") || + (board[2][0] == "O" && board[1][1] == "O" && board[2][0] == "O") + ) { + return true; + } else { + return false; + } +}; // Unit Tests // You use them run the command: npm test main.js // to close them ctrl + C -if (typeof describe === 'function') { - - describe('#ticTacToe()', () => { - it('should place mark on the board', () => { +if (typeof describe === "function") { + describe("#ticTacToe()", () => { + it("should place mark on the board", () => { ticTacToe(1, 1); - assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [ + [" ", " ", " "], + [" ", "X", " "], + [" ", " ", " "], + ]); }); - it('should alternate between players', () => { + it("should alternate between players", () => { ticTacToe(0, 0); - assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); + assert.deepEqual(board, [ + ["O", " ", " "], + [" ", "X", " "], + [" ", " ", " "], + ]); }); - it('should check for vertical wins', () => { - board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; + it("should check for vertical wins", () => { + board = [ + [" ", "X", " "], + [" ", "X", " "], + [" ", "X", " "], + ]; assert.equal(verticalWin(), true); }); - it('should check for horizontal wins', () => { - board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; + it("should check for horizontal wins", () => { + board = [ + ["X", "X", "X"], + [" ", " ", " "], + [" ", " ", " "], + ]; assert.equal(horizontalWin(), true); }); - it('should check for diagonal wins', () => { - board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; + it("should check for diagonal wins", () => { + board = [ + ["X", " ", " "], + [" ", "X", " "], + [" ", " ", "X"], + ]; assert.equal(diagonalWin(), true); }); - it('should detect a win', () => { + it("should detect a win", () => { assert.equal(checkForWin(), true); }); }); } else { - getPrompt(); - } diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..e1dd883 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,7 +1,69 @@ -td{ +/* td{ height:150px; width:150px; text-align: center; border: 5px solid black; font-size: 100px; +} */ +@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap"); + +body { + background-color: steelblue; + color: darkblue; + font-family: "Potta One", sans-serif; +} + +.jumbotron { + text-align: center; + background-color: orange; + /* margin: auto; */ + /* margin-left: 43%; */ +} + +td { + height: 150px; + width: 150px; + text-align: center; + border: 5px solid black; + font-size: 100px; + color: springgreen; +} + +table { + margin: auto; +} + +h1 { + font-size: 7rem; + margin: 0; +} + +h3 { + color: darkmagenta; + margin-top: 5px; + font-size: 3rem; +} + +button { + font-family: "Potta One", sans-serif; + font-size: 1.5rem; + font-weight: 600; + background-color: bisque; + color: steelblue; + border-radius: 0.75rem; + border: 5px solid red; + text-decoration: none; + outline: none; + transition-duration: 0.4s; +} + +button:hover { + background-color: thistle; + border: 5px solid darkmagenta; +} + +button:active { + background-color: springgreen; + box-shadow: 0 2px orange; + transform: translateY(2px); }