From be413abd734cb59d1a3ae03086c66b8d32686999 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Wed, 16 Aug 2017 20:15:15 -0500 Subject: [PATCH 1/6] more TTT whiteboarding. Initial code. --- 06week/ticTacToe/script.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 9a6b571df..03688c3da 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,5 +1,26 @@ 'use strict'; document.addEventListener('DOMContentLoaded', () => { - // Your code here +/*************** WHITE BOARD NOTES *************************** +define player turns: X, O +On Click of a square... addEventListener, onclick + place playerTurn token into square. append on the div data-cell + if (!checkForWin) then + if (!checkForTie) then + toggle playerTurn + else + message: There is a tie, you idiots; + end if + else + message: Congrats player???, you won! + end if + + On Click of clear board button + remove tokens off of board + initialize any variables + set player to X + +***************************************************************/ }); + +playerTurn = playerTurn === 'X'? 'O' : 'X' From 45563226731826783a088c8f1e31a95e27b753fc Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Sat, 19 Aug 2017 11:31:46 -0500 Subject: [PATCH 2/6] Tic Tac Toe and the DOM pretty much complete --- 06week/ticTacToe/index.html | 2 +- 06week/ticTacToe/script.js | 58 ++++++++++++++++++++++++++++++++++--- 06week/ticTacToe/style.css | 6 +++- 3 files changed, 60 insertions(+), 6 deletions(-) diff --git a/06week/ticTacToe/index.html b/06week/ticTacToe/index.html index c621fcacc..b74375ada 100644 --- a/06week/ticTacToe/index.html +++ b/06week/ticTacToe/index.html @@ -23,6 +23,6 @@
- + diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 03688c3da..a87037321 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,6 +1,4 @@ 'use strict'; - -document.addEventListener('DOMContentLoaded', () => { /*************** WHITE BOARD NOTES *************************** define player turns: X, O On Click of a square... addEventListener, onclick @@ -21,6 +19,58 @@ On Click of a square... addEventListener, onclick set player to X ***************************************************************/ -}); -playerTurn = playerTurn === 'X'? 'O' : 'X' +// let mySquares = []; +document.addEventListener('DOMContentLoaded', () => { + + const wins = [ + [0,1,2], [3,4,5], [6,7,8], // horizontal wins + [0,3,6], [1,4,7], [2,5,8], // vertical wins + [0,4,8], [2,4,6] // diagonal wins + ]; + let playerTurn = 'X'; + let turnCount = 0; + + let mySquares = document.querySelectorAll("[data-cell]"); + + // document.querySelector("[data-cell='0']").addEventListener("click", (square) => { + mySquares.forEach(aSquare => { + aSquare.addEventListener("click", square => { + // display the current click count inside the clicked div + if (!square.target.textContent) { + document.getElementById('announce-winner').textContent = null; + square.target.textContent = playerTurn; + turnCount++ + if (checkForWin()) { //checkForWin returns TRUE if someone won. It returns FALSE if no win yet. + document.getElementById('announce-winner').textContent = `Congratulations ${playerTurn}. You won! Start a new game by pressing Clear Board below.`; + } else if (turnCount == 9) { // If there have been 9 turns but no winner. It is a tie. + document.getElementById('announce-winner').textContent = `We have a tie folks. Start a new game by pressing 'Clear Board' below.`; + } else { // Ok, toggle token to the opposite player. + playerTurn = playerTurn === 'X'? 'O' : 'X'; + } + } else { // Ah, the user tried to click on an occupied square. + document.getElementById('announce-winner').textContent = 'Try again please. That square is taken.'; + } + }); + }); + + // This code handles actions when player presses "Clear Board" button. + // We pretty much just initialize everything. + document.getElementById('clear').addEventListener("click", (event)=> { + playerTurn = 'X'; + turnCount = 0 + mySquares.forEach(aSquare => { + aSquare.textContent = null; + }) + document.getElementById('announce-winner').textContent = null; + }) + + + function checkForWin() { + // wins array stores all the win combinations. wincombo array is one of the wins. + // wins.some ... at least one of these win combos needs to be true. + // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) + return wins.some(winCombo => winCombo.every(index => mySquares[index].textContent === playerTurn)); + } + +}, false); diff --git a/06week/ticTacToe/style.css b/06week/ticTacToe/style.css index d550b6372..291ccba45 100644 --- a/06week/ticTacToe/style.css +++ b/06week/ticTacToe/style.css @@ -1,3 +1,7 @@ +body { + font-family: Arial; +} + div[data-cell] { width: 100px; height: 100px; @@ -14,5 +18,5 @@ div[data-cell] { #announce-winner { clear: both; - font-size: 50px; + font-size: 30px; } From 47ef5539101536489fbb7ea018f47efec5f100f0 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Mon, 21 Aug 2017 21:54:23 -0500 Subject: [PATCH 3/6] Visual Master Mind Using DOM. Displaying board. Populating pegs. Advancint to next guess --- 06week/mastermind/index.html | 105 +++++++++++++++++++ 06week/mastermind/script.js | 196 +++++++++++++++++++++++++++++++++++ 06week/mastermind/style.css | 124 ++++++++++++++++++++++ 3 files changed, 425 insertions(+) diff --git a/06week/mastermind/index.html b/06week/mastermind/index.html index ef79e3aae..fc4e31cdf 100644 --- a/06week/mastermind/index.html +++ b/06week/mastermind/index.html @@ -6,6 +6,111 @@ +

Craig's Mastermind

+
+
+

Peg choices

+
+ + +
+
+ + +
+
+
+ +
+
+ diff --git a/06week/mastermind/script.js b/06week/mastermind/script.js index 9a6b571df..21da29eb8 100644 --- a/06week/mastermind/script.js +++ b/06week/mastermind/script.js @@ -2,4 +2,200 @@ document.addEventListener('DOMContentLoaded', () => { // Your code here + const MAXGUESSES = 10; + const boardColors = ['red', 'blue', 'green', 'white', 'yellow', 'purple', 'orange', 'black']; + let turn = 0; + // let guess = 0; + + function guess() { + this.pegs = []; + this.hint = ''; + } + + let board = { + code: [], + guesses: [], + createCode: function() { + for (let i = 0; i < 4; i++) { + const randomIndex = getRandomInt(0, boardColors.length); + this.code.push(randomIndex); + } + return true; + + function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min)) + min; + } + }, // createCode() method + + showAnswer: function() { + let ansPegs = document.getElementById('answerRow').childNodes; + console.log(ansPegs); + for (let i=0; i { + if (peg == solutionArr[index]) { + exactMatch++; + // clear out value. This sets us up to look for correct peg test later. These won't be considered. + solutionArr[index] = null; + myGuessArr[index] = null; + } + }); + + // This piece of code tests for correct peg only + myGuessArr.forEach((peg) => { + if (peg) { // peg could be null from previous forEach statement. + matchIndex = solutionArr.indexOf(parseInt(peg)); // Let's find a matching peg in the solution! + if (matchIndex !== -1) { // We found a peg match in the string. + correctPeg++ + solutionArr[matchIndex] = null; // clear out value so value won't be considered with next peg tests. + } + } // closing brace for if (peg) + }); + console.log(`${exactMatch}-${correctPeg}`); + this['guesses'][this['guesses'].length-1].hint = `${exactMatch}-${correctPeg}`; + } // generateHint + } // board object + + createPegCanvas(); + addListenersToButtons(); + // console.log(board.code); + board.createCode(); + generateBoard(); + board.showAnswer(); + // viewBoard(); + + function createPegCanvas() { + const colorsCanvas = document.getElementById('boardColors'); + for(let i = 0; i < boardColors.length; i++){ + const pegColor = document.createElement('div'); + pegColor.id = i; + pegColor.className = `${boardColors[i]} box`; + // chooseSection.textContent = boardColors[i]; + pegColor.addEventListener('click', (color) => { + // console.log(color.target.textContent, color.target.id); + board.populateChoice(color.target.id); + // console.log('you clicked me'); + }); + colorsCanvas.appendChild(pegColor); + // let theBody = document.getElementsByTagName('body')[0]; + // theBody.appendChild(boardColorsCanvas); + } + } + + function addListenersToButtons() { + const checkBtn = document.getElementsByName('submit'); + checkBtn[0].addEventListener('click', () => { + board.generateHint(); + // const currentGuess = new guess(); + board['guesses'].push(new guess()); // Adding a new guess row. + + }); + + // We want the ability to clear the current prior prior to submitting. + // This will be the user the ability to change their answer. + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].addEventListener('click', () => { + // generateHint(); + board['guesses'].pop(); // removing the current guess. + board['guesses'].push(new guess()) // Adding an empty guess. + board.viewBoard(board['guesses'].length-1); + + }); + + } + function generateBoard() { + // This section creates the code breaker's guess. + const boardTable = document.createElement("table"); + boardTable.id = 'boardTbl'; + document.getElementById('board').appendChild(boardTable); + for(let i = 0; i < MAXGUESSES ; i++) { + const guessRow = document.createElement("tr"); + guessRow.className = 'guessRow'; + boardTable.appendChild(guessRow); + for (let j = 0; j < 5; j++) { + const guessCol = document.createElement("td"); + j < 4? guessCol.className = `peg` : guessCol.className = `hint`; + guessRow.appendChild(guessCol); + } + } + // Displays the Codemaker's Code. + const ansTable = document.createElement("table"); + ansTable.id = 'answer'; + document.getElementById('board').appendChild(ansTable); + const ansRow = document.createElement("tr"); + // document.cre + ansRow.id = 'answerRow'; + ansTable.appendChild(ansRow); + for (let j = 0; j < 5; j++) { + const ansCol = document.createElement("td"); + j < 4? ansCol.className = `peg` : null; + ansRow.appendChild(ansCol); + } + + } // ending to generateBoard + + + // Submit guess + // make sure all pegs are assigned. + // if guess = code then + // Congrats, you win. + // else + // Return supplyHint(). + + // Clear button + // clear current row. + }); diff --git a/06week/mastermind/style.css b/06week/mastermind/style.css index e69de29bb..b632178f8 100644 --- a/06week/mastermind/style.css +++ b/06week/mastermind/style.css @@ -0,0 +1,124 @@ +body{ + font-family: Arial; + background-color: gray; +} + +h1 { + text-align: center; +} +h3 { + text-align: center; +/*width: 100px;*/ + margin: auto; +} +.container { + display: flex; + /*justify-content: space-around;*/ + /*align-items: center;*/ + width: 50vw; + margin: auto; + +} +.control { + /*display: flex;*/ + /*display: flex;*/ + /*flex-direction: column;*/ + /*width: 25vw;*/ + /*justify-content: flex-end;*/ +} + +#boardColors { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + /*width: 35%;*/ +} + +#buttons { + display: flex; + justify-content: flex-end; + flex-direction: column; + margin: auto 10px auto 300px; + /*width: auto;*/ +} + +#buttons * { + margin-top: 20px; + /*width: 100px;*/ +} + + +.box { + width: 25px; + height: 25px; + font-size: 30px; + text-align: center; + border: 2px solid black; + border-radius: 15px; + color: white; + margin: 2px; +} + +.box:hover { + transform: scale(1.5); +} +table { + width: 300px; + border: 5px solid black; + border-radius: 10px; +} + +#answer { + margin-top: 10px; +} +.guessRow{ + background-color: darkgray; + /*height: 40px;*/ +} + +.peg { + width: 20px; + height: 20px; + border-radius: 20px; + border: 7px solid darkgray; + background-color: darkslategray; + +} +.peg:hover { + background-color: gold; + transform: scale(1.3); +} + +.red { + background-color: red; +} + +.blue { + background-color: blue; +} + +.green { + background-color: green; +} + +.white { + background-color: white; + color: black; +} + +.yellow { + background-color: yellow; + color: black; +} + +.purple { + background-color: purple; +} + +.orange { + background-color: orange; +} + +.black { + background-color: black; +} From 6d5e74ef0fe9c754f22b6e4c512167283844bc51 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Tue, 22 Aug 2017 06:20:50 -0500 Subject: [PATCH 4/6] index.html: added comments, removed commented test code, added New Game button. --- 06week/mastermind/index.html | 95 ++---------------------------------- 1 file changed, 5 insertions(+), 90 deletions(-) diff --git a/06week/mastermind/index.html b/06week/mastermind/index.html index fc4e31cdf..b89eec325 100644 --- a/06week/mastermind/index.html +++ b/06week/mastermind/index.html @@ -8,106 +8,21 @@

Craig's Mastermind

+

Peg choices

- -
+
+
-
From 6d9220559896f2934572b967e7dd7d6bb45d9898 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Tue, 22 Aug 2017 06:28:47 -0500 Subject: [PATCH 5/6] style.css: removed commented code, added comments --- 06week/mastermind/style.css | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/06week/mastermind/style.css b/06week/mastermind/style.css index b632178f8..4ffccf745 100644 --- a/06week/mastermind/style.css +++ b/06week/mastermind/style.css @@ -1,4 +1,5 @@ -body{ +/*Basic stylings to handle font and page form*/ +}body{ font-family: Arial; background-color: gray; } @@ -6,32 +7,26 @@ body{ h1 { text-align: center; } + h3 { text-align: center; -/*width: 100px;*/ margin: auto; } + .container { display: flex; - /*justify-content: space-around;*/ - /*align-items: center;*/ width: 50vw; margin: auto; } -.control { - /*display: flex;*/ - /*display: flex;*/ - /*flex-direction: column;*/ - /*width: 25vw;*/ - /*justify-content: flex-end;*/ -} +/*The following are styles within the control div*/ +/*These styles paint the skin for peg selections, and buttons*/ #boardColors { display: flex; justify-content: flex-end; flex-wrap: wrap; - /*width: 35%;*/ + } #buttons { @@ -39,12 +34,10 @@ h3 { justify-content: flex-end; flex-direction: column; margin: auto 10px auto 300px; - /*width: auto;*/ } #buttons * { margin-top: 20px; - /*width: 100px;*/ } @@ -62,6 +55,8 @@ h3 { .box:hover { transform: scale(1.5); } + +/*Styles below handle the skin of the mastermind board*/ table { width: 300px; border: 5px solid black; @@ -73,7 +68,6 @@ table { } .guessRow{ background-color: darkgray; - /*height: 40px;*/ } .peg { @@ -85,10 +79,16 @@ table { } .peg:hover { - background-color: gold; - transform: scale(1.3); + transform: scale(1.5); +} + +.hint { + text-align: center; + font-size: 20pt; + font-weight: bold; } +/*Ah, the colors!*/ .red { background-color: red; } From ef4b03bf04c31e86859beced8645967900fbb349 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Tue, 22 Aug 2017 08:21:15 -0500 Subject: [PATCH 6/6] script.js: Added lots more comments. removed commented code. changed viewBoard to displayRow. fixed Clear Row button. Added New Game button. --- 06week/mastermind/script.js | 160 +++++++++++++++++++++++------------- 06week/mastermind/style.css | 2 +- 2 files changed, 104 insertions(+), 58 deletions(-) diff --git a/06week/mastermind/script.js b/06week/mastermind/script.js index 21da29eb8..62a60f124 100644 --- a/06week/mastermind/script.js +++ b/06week/mastermind/script.js @@ -20,6 +20,8 @@ document.addEventListener('DOMContentLoaded', () => { const randomIndex = getRandomInt(0, boardColors.length); this.code.push(randomIndex); } + /**** COMMENT OUT FOR GAME ***/ + this.showAnswer(); return true; function getRandomInt(min, max) { @@ -29,7 +31,6 @@ document.addEventListener('DOMContentLoaded', () => { showAnswer: function() { let ansPegs = document.getElementById('answerRow').childNodes; - console.log(ansPegs); for (let i=0; i { currentGuess.pegs.push(selectedColor); // push our peg onto current guess this['guesses'].push(currentGuess); // push our new current guess object onto guesses array. } - console.log(this['guesses']); - // Calling viewBoard. Pass, row, col, and color. - this.viewBoard(this['guesses'].length-1, - this['guesses'][this['guesses'].length - 1].pegs.length-1, selectedColor); + // console.log(this['guesses']); + this.displayRow(); }, // populateChoice() - // viewBoard handles 2 functions a) it populates a peg. Using row, column, color, - // it will append a color class onto the td cell with same matching row, col. - // b) viewBoard also handles clearing out a row. If col, pegColor is null, - // viewBoard, will clear the pegs from the row. We accomplish this by removing - // the color class. - viewBoard: function(row, col = null, pegColor = null) { - console.log(row, col, pegColor); - let guessRows = document.getElementById('boardTbl').childNodes; + // displayRow handles 3 functions + // a) it populates a peg. + // b) handles clearing out a row. + // c) Displays the hint + // displayRow is generic and always fills in the entire row for the current Guess + // There is some slight inefficiencies since I am repopulating the colors + // for previous pegs. + displayRow: function() { //, col = null, pegColor = null) { + // console.log(row, col, pegColor); + const row = this['guesses'].length-1; + console.log(row); + const guessRows = document.getElementById('boardTbl').childNodes; console.log(guessRows[row]); const guessCols = guessRows[row].childNodes; console.log(guessCols); - if (pegColor) { // When we pass col, pegColor, we are setting a peg - guessCols[col].className = `peg ${boardColors[pegColor]}`; - } else { // here no pegColor was found. We will clear the row. - for (let i=0; i<4; i++) { + console.log(this['guesses'][row]); + for (let i=0; i<5; i++) { + if (i === 4) { + console.log('if i=4'); + guessCols[i].textContent = this['guesses'][row].hint; + } else if (this['guesses'][row].pegs[i]) { + console.log('setting peg'); + guessCols[i].className = `peg ${boardColors[this['guesses'][row].pegs[i]]}`; + } else { + console.log('clearing peg'); guessCols[i].className = `peg`; } } - }, // viewBoard() - generateHint: function() { + }, // displayRow() + // Passing in strings to GenerateHint. First off, I lifted this code + // from my first version of the game and it used strings as input, then + // converted those strings into an array. + // Second. This is my way of creating a new temp array. + // Since passing arrays are by reference, when I copied my + // my guesses and code array and manipulated those copies + // it was affecting the original array. + generateHint: function(answer, guess) { + console.log('In generate hint'); // Initializing... let exactMatch = 0; let correctPeg = 0; let matchIndex = -1; // creating arrays out of the strings. - let solutionArr = this['code']; - let myGuessArr = this['guesses'][this['guesses'].length-1].pegs; + let solutionArr = answer.split(''); + let myGuessArr = guess.split(''); console.log(solutionArr); console.log(myGuessArr); // This piece of code tests for exact match myGuessArr.forEach((peg, index) => { - if (peg == solutionArr[index]) { + if (peg === solutionArr[index]) { exactMatch++; // clear out value. This sets us up to look for correct peg test later. These won't be considered. solutionArr[index] = null; myGuessArr[index] = null; } }); + console.log('after match, before correct peg'); + console.log(solutionArr); + console.log(myGuessArr); // This piece of code tests for correct peg only myGuessArr.forEach((peg) => { if (peg) { // peg could be null from previous forEach statement. - matchIndex = solutionArr.indexOf(parseInt(peg)); // Let's find a matching peg in the solution! + matchIndex = solutionArr.indexOf(peg); // Let's find a matching peg in the solution! if (matchIndex !== -1) { // We found a peg match in the string. correctPeg++ solutionArr[matchIndex] = null; // clear out value so value won't be considered with next peg tests. } } // closing brace for if (peg) }); - console.log(`${exactMatch}-${correctPeg}`); - this['guesses'][this['guesses'].length-1].hint = `${exactMatch}-${correctPeg}`; + console.log('after correct peg'); + console.log(solutionArr); + console.log(myGuessArr); + console.log(`${exactMatch} | ${correctPeg}`); + return `${exactMatch} | ${correctPeg}`; } // generateHint } // board object createPegCanvas(); addListenersToButtons(); - // console.log(board.code); - board.createCode(); generateBoard(); - board.showAnswer(); - // viewBoard(); + board.createCode(); + // board.showAnswer(); + function createPegCanvas() { const colorsCanvas = document.getElementById('boardColors'); @@ -123,39 +145,59 @@ document.addEventListener('DOMContentLoaded', () => { const pegColor = document.createElement('div'); pegColor.id = i; pegColor.className = `${boardColors[i]} box`; - // chooseSection.textContent = boardColors[i]; pegColor.addEventListener('click', (color) => { - // console.log(color.target.textContent, color.target.id); board.populateChoice(color.target.id); - // console.log('you clicked me'); }); colorsCanvas.appendChild(pegColor); - // let theBody = document.getElementsByTagName('body')[0]; - // theBody.appendChild(boardColorsCanvas); } - } + } // createPegCanvas() function addListenersToButtons() { + //** Submit Guess button **// + // This button take the current row and first checks for a win. + // If there is a win, it congratulates the user + // If there is no win, it calls const checkBtn = document.getElementsByName('submit'); checkBtn[0].addEventListener('click', () => { - board.generateHint(); - // const currentGuess = new guess(); - board['guesses'].push(new guess()); // Adding a new guess row. - + const currentGuess = board['guesses'][board['guesses'].length-1]; + const theCode = board['code'].join(''); // makes it simpler to compare + const theGuess = currentGuess.pegs.join(''); // makes it easy to compare + if (theCode === theGuess) { + alert('Wow, you won! Press New Game to restart'); + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].disabled = true; + checkBtn[0].disabled = true; + } else { + currentGuess['hint'] = board.generateHint(theCode, theGuess); + board.displayRow(); + board['guesses'].push(new guess()); // Adding a new guess row. + } }); - // We want the ability to clear the current prior prior to submitting. - // This will be the user the ability to change their answer. + // We want the ability to clear the current row prior to submitting. + // This will give the player the ability to change their answer. const clearBtn = document.getElementsByName('clear'); clearBtn[0].addEventListener('click', () => { - // generateHint(); board['guesses'].pop(); // removing the current guess. board['guesses'].push(new guess()) // Adding an empty guess. - board.viewBoard(board['guesses'].length-1); + board.displayRow(); + }); + // New Game button. Needs to clear out code and guesses arrays. + // Needs to clear the entire board. + const newBtn = document.getElementsByName('new'); + newBtn[0].addEventListener('click', () => { + board['code'] = []; // clearing array. + board['guesses'] = []; // clearing array. + clearBoard(); + const checkBtn = document.getElementsByName('submit'); + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].disabled = false; + checkBtn[0].disabled = false; + board.createCode(); }); + } // addListenersToButtons() - } function generateBoard() { // This section creates the code breaker's guess. const boardTable = document.createElement("table"); @@ -184,18 +226,22 @@ document.addEventListener('DOMContentLoaded', () => { j < 4? ansCol.className = `peg` : null; ansRow.appendChild(ansCol); } - } // ending to generateBoard - - // Submit guess - // make sure all pegs are assigned. - // if guess = code then - // Congrats, you win. - // else - // Return supplyHint(). - - // Clear button - // clear current row. - -}); +function clearBoard() { + const guessRows = document.getElementById('boardTbl').childNodes; + console.log(guessRows); + guessRows.forEach((row) => { + const pegsAndHint = row.childNodes; + pegsAndHint.forEach((val, index) => { + index !== 4? val.className = `peg` : val.textContent = null; + }); + }); + const ansRow = document.getElementById('answerRow').childNodes; + console.log(ansRow); + ansRow.forEach((val, index) => { + index !== 4? val.className = `peg` : null; + }); +} // clearBoard() + +}); //document.addEventListener('DOMContentLoaded'... diff --git a/06week/mastermind/style.css b/06week/mastermind/style.css index 4ffccf745..7a51b80d4 100644 --- a/06week/mastermind/style.css +++ b/06week/mastermind/style.css @@ -1,5 +1,5 @@ /*Basic stylings to handle font and page form*/ -}body{ +body{ font-family: Arial; background-color: gray; }