From 7d96c79f762bb07fc51a8e1324e6049de2e38e7d Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Wed, 1 Nov 2017 18:17:15 -0500 Subject: [PATCH 01/11] Space file started --- 05week/spaceTravelToMars.js | 50 ++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js index ce258a382..92592796d 100644 --- a/05week/spaceTravelToMars.js +++ b/05week/spaceTravelToMars.js @@ -2,6 +2,8 @@ let assert = require('assert'); +let good2go = null; + let jobTypes = { pilot: 'MAV', mechanic: 'Repair Ship', @@ -9,7 +11,53 @@ let jobTypes = { programmer: 'Any Ship!' }; -// Your code here +class CrewMember { + constructor(name, job, specialSkill){ + this.name = name; + this.job = job; + this.specialSkill = specialSkill; + this.ship = null; + } + enterShip(x){ + this.ship = x; + x.crew.push(this); + } +} + +class Ship { + constructor(name, type, ability){ + this.name = name; + this.type = type; + this.ability = ability; + this.crew = []; + } + missionStatement() { + console.log("Begin Mission Statement"); + //console.log("Ship Type: "+(this.type)); + for (let i=0; i Date: Fri, 3 Nov 2017 20:49:22 -0500 Subject: [PATCH 02/11] Space Update --- 05week/spaceTravelToMars.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js index 92592796d..93b31f2c3 100644 --- a/05week/spaceTravelToMars.js +++ b/05week/spaceTravelToMars.js @@ -43,8 +43,10 @@ class Ship { } if (good2go==true){ return this.ability; + console.log(this.ability); }else{ return "Can't perform a mission yet." + console.log("Can't perform a mission yet."); } } // returns the ship's ability as a string if there is a crewmember whose job matches the ship, otherwise should return "Can't perform a mission yet." } From fa33e5d8426e1089d438ff3043200b77496201ae Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Fri, 3 Nov 2017 20:58:26 -0500 Subject: [PATCH 03/11] Space HW Finished --- 05week/spaceTravelToMars.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js index 93b31f2c3..ef861aca7 100644 --- a/05week/spaceTravelToMars.js +++ b/05week/spaceTravelToMars.js @@ -31,7 +31,7 @@ class Ship { this.ability = ability; this.crew = []; } - missionStatement() { + missionStatement() { //This function returns the mission of the ship if properly crewed and "Can't perform a mission yet." if not console.log("Begin Mission Statement"); //console.log("Ship Type: "+(this.type)); for (let i=0; i Date: Wed, 8 Nov 2017 18:02:43 -0600 Subject: [PATCH 04/11] Checkers but thrown errors fail tests --- 05week/checkers.js | 117 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 114 insertions(+), 3 deletions(-) diff --git a/05week/checkers.js b/05week/checkers.js index 8f33a089c..eb0da804b 100644 --- a/05week/checkers.js +++ b/05week/checkers.js @@ -7,9 +7,26 @@ const rl = readline.createInterface({ output: process.stdout }); +let playerTurn = 'O'; -function Checker() { - // Your code here +/*function Checker() { + this.king = no; + this.symbol = + //define Checker attributes + //checker.create per checker +}*/ + +class Checker { + constructor(symbol, king){ + this.symbol = symbol; + this.king = king; + //this.row = game.board.grid[row]; + //this.column = game.board.grid[column]; + //this.where = this.row.tostring() + this.column.tostring(); + } + moveChecker(whichPiece, toWhere){ + + } } function Board() { @@ -21,7 +38,16 @@ function Board() { this.grid[row] = []; // push in 8 columns of nulls for (let column = 0; column < 8; column++) { - this.grid[row].push(null); + if (((row%2==0)&&(column%2!=0))||((row%2!=0)&&(column%2==0))) { + if (row<3){ + this.grid[row].push(new Checker('X',false)); + } + if (row>4){ + this.grid[row].push(new Checker('O',false)); + } + }else{ + this.grid[row].push(null); + } } } }; @@ -57,15 +83,100 @@ function Board() { function Game() { this.board = new Board(); + this.moveChecker = function(whichPiece, toWhere){ + let x1 = Number(whichPiece.charAt(0)); + let y1 = Number(whichPiece.charAt(1)); + let x2 = Number(toWhere.charAt(0)); + let y2 = Number(toWhere.charAt(1)); + //If the player enters an empty square as whichPiece + if (game.board.grid[y1][x1]===null){ + console.log("The square you specified in response to 'Which piece?' has no piece in it. Please try again.") + return; + } + + //If the 'O' player enters a square with the wrong piece as whichPiece + if (playerTurn==='O'){ + if(game.board.grid[y1][x1].symbol==='X'){ + console.log("The square you specified in response to 'Which piece?' has an 'X' piece in it. Please try again.") + return; + }else{ + if(game.board.grid[y2][x2]!=null){ + console.log("The square you are trying to move to is already occupied. Please try again.") + return; + }else{ +// if (((y2!=y1+1)&&(Math.abs(x2-x1)!=1))|| +// (((y2!=y1+2)&&(Math.abs(x2-x1)!=2))&& +// (((x2>x1)&&(game.board.grid[y1+1][x1+1].symbol!='X'))|| +// ((x1>x2)&&(game.board.grid[y1+1][x1-1].symbol!='X'))))){ +// console.log("The square you want to move to is not diagonal from the square with the piece in it. Please try again."); +// return; +// }else{ + let currentChecker = game.board.grid[y1][x1]; + game.board.grid[y2].splice(x2,1,currentChecker); + game.board.grid[y1].splice(x1,1,null); + if (Math.abs(x2-x1)==2){ + let deadx = (x1+x2)/2; + let deady = (y1+y2)/2; + game.board.grid[deady].splice(deadx,1,null); + } + +// } + } + + //if toWhere is diagonal and empty, move piece + //if toWhere is diagonal and occupied by same piece, console.log error + //if toWhere is diagonal and occupied by opposite piece and the space diagonal from THAT is empty, capture piece + //if toWhere row is 0, king + //if king, allow backwards moves + //repetitive captures (if possible) + } + playerTurn='X'; + return; + } + + //If the 'X' player enters a square with the wrong piece as whichPiece + if (playerTurn==='X'){ + if(game.board.grid[y1][x1].symbol==='O'){ + console.log("The square you specified in response to 'Which piece?' has an 'X' piece in it. Please try again.") + return; + }else{ + if(game.board.grid[y2][x2]!=null){ + console.log("The square you are trying to move to is already occupied. Please try again.") + return; + }else{ + let currentChecker = game.board.grid[y1][x1]; + game.board.grid[y2].splice(x2,1,currentChecker); + game.board.grid[y1].splice(x1,1,null); + if (Math.abs(x2-x1)==2){ + let deadx = (x1+x2)/2; + let deady = (y1+y2)/2; + game.board.grid[deady].splice(deadx,1,null); + } + } + //if toWhere is diagonal and empty, move piece + //if toWhere is diagonal and occupied by same piece, console.log error + //if toWhere is diagonal and occupied by opposite piece and the space diagonal from THAT is empty, capture piece + //if toWhere row is 0, king + //if king, allow backwards moves + //repetitive captures (if possible) + } + playerTurn='O'; + return; + } + } + //define moveChecker function + //flip between players this.start = function() { this.board.createGrid(); + console.log('Refer to each piece/space by the column number then row number such as "10" or "67"') // Your code here }; } function getPrompt() { game.board.viewGrid(); + console.log("It's Player " + playerTurn + "'s turn."); rl.question('which piece?: ', (whichPiece) => { rl.question('to where?: ', (toWhere) => { game.moveChecker(whichPiece, toWhere); From dbc1996a5708952cb631d79d9147f4a4a3b31b3e Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Wed, 15 Nov 2017 15:39:44 -0600 Subject: [PATCH 05/11] Higher Order HW complete --- 06week/higherOrder.js | 175 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 158 insertions(+), 17 deletions(-) diff --git a/06week/higherOrder.js b/06week/higherOrder.js index 73926e3dc..1c3e4a535 100644 --- a/06week/higherOrder.js +++ b/06week/higherOrder.js @@ -2,32 +2,173 @@ const assert = require('assert'); -function forEach(arr, callback) { - // Your code here +let array = [1,2,3,4,5]; + +/* +*This function returns true if the input is even +* +* @param num the input number +*/ +let evenFilter = function(num){ + return num%2 === 0; +}; + +/* +*This function returns true if the input is odd +* +* @param num the input number +*/ +let oddFilter = function(num){ + return !evenFilter(num); +} + +let expected = [2,4]; + +/* +*This function acts as the higher order function "filter," returning an array of values from the input array that satisfy the callback function +* +* @param arr the input array +* @param callback the function being implemented on the input array +*/ +function myFilterImpl(arr, callback){ + let blank = []; + for(let i=0; i=90)&&(num<=100)){ + return 'A'; + }else if((num>=80)&&(num<90)){ + return 'B'; + }else if((num>=75)&&(num<80)){ + return 'C'; + }else if((num>=70)&&(num<75)){ + return 'D'; + }else if(num<70){ + return 'F'; + } } -function filter(arr, callback) { - // Your code here +let grades = [99,87,23,67,13,77]; + +let converted = myMapImpl(grades,gradeConverter); +console.log(converted); + +/* +*This function detects whether the input number is positive +* +* @param num the number to be tested on whether is positive or negative +*/ +let detectPositive = function(num){ + if(num>0){ + return true; + } } -function some(arr, callback) { - // Your code here +/* +*This function acts as the higher order function "some," returning true if at least one element in the input array fulfills the callback's requirements +* +* @param arr the input array +* @param callback the function being implemented on the input array +*/ +function mySomeImpl(arr, callback){ + for (let i=0; i { it('should call the callback the array.length number of times', () => { let count = 0; - forEach([1, 2, 3], () => { + myForEachImpl([1, 2, 3], () => { count++; }); assert.equal(count, 3); @@ -36,7 +177,7 @@ if (typeof describe === 'function') { describe('#map()', () => { const arr = [1, 2, 3]; - const mapped = map(arr, (num) => { + const mapped = myMapImpl(arr, (num) => { return num * num; }); it('should return new array with mapped items', () => { @@ -49,7 +190,7 @@ if (typeof describe === 'function') { describe('#filter()', () => { it('should return an array of items that pass the predicate test', () => { - const filtered = filter([1, 2, 3], (num) => { + const filtered = myFilterImpl([1, 2, 3], (num) => { return num % 2 === 0; }); assert.deepEqual(filtered, [2]); @@ -58,7 +199,7 @@ if (typeof describe === 'function') { describe('#some()', () => { let count = 0; - const somed = some([1, 2, 3, 4], (num) => { + const somed = mySomeImpl([1, 2, 3, 4], (num) => { count++; return num % 2 === 0; }); @@ -69,7 +210,7 @@ if (typeof describe === 'function') { assert.equal(count, 2); }); it('should return false if no items pass the predicate test', () => { - const somed = some([1, 3, 5], (num) => { + const somed = mySomeImpl([1, 3, 5], (num) => { return num % 2 === 0; }); assert.equal(somed, false); @@ -78,13 +219,13 @@ if (typeof describe === 'function') { describe('#every()', () => { it('should return true if at all passes the predicate test', () => { - const everied = every([2, 4, 6], (num) => { + const everied = myEveryImpl([2, 4, 6], (num) => { return num % 2 === 0; }); assert.equal(everied, true); }); let count = 0; - const everied = every([2, 3, 4, 5], (num) => { + const everied = myEveryImpl([2, 3, 4, 5], (num) => { count++; return num % 2 === 0; }); From 3109d5d8edcd94130b9f2ebbf39fc4668e21dc28 Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Sat, 25 Nov 2017 22:08:57 -0600 Subject: [PATCH 06/11] Checkpoint2 --- Checkpoints/checkpoint2.js | 51 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 Checkpoints/checkpoint2.js diff --git a/Checkpoints/checkpoint2.js b/Checkpoints/checkpoint2.js new file mode 100644 index 000000000..b5548aa43 --- /dev/null +++ b/Checkpoints/checkpoint2.js @@ -0,0 +1,51 @@ +'use strict'; + +let printStuff = function(x){ + console.log(x.customer.customerName+" paid $"+x.customer.productPrice+" for "+x.customer.product+" in "+x.customer.customerCity+", "+x.customer.customerState+"."); +}; + + +let userArray = [ + { + "customer": { + "id": 1, + "customerName":"Marilyn Monroe", + "customerCity":"New York City", + "customerState":"NY", + "product":"Yellow Chair", + "productPrice": 19.99 + } + }, + { + "customer": { + "id": 2, + "customerName":"Abraham Lincoln", + "customerCity":"Boston", + "customerState":"MA", + "product":"Movie Tickets", + "productPrice": 27.00 + } + }, + { + "customer": { + "id": 3, + "customerName":"John F. Kennedy", + "customerCity":"Dallas", + "customerState":"TX", + "product":"Mustang Convertible", + "productPrice": 24999.99 + } + }, + { + "customer": { + "id": 4, + "customerName":"Martin Luther King", + "customerCity":"Burmingham", + "customerState":"AL", + "product":"Sandwiches", + "productPrice": 7.99 + } + }, +]; + +const map1 = userArray.map(printStuff); From 751ecb79d568322484fc54ef8a4a8ac55ebfc1ac Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Mon, 27 Nov 2017 16:38:42 -0600 Subject: [PATCH 07/11] TicTacToe --- 07week/ticTacToe/script.js | 124 ++++++++++++++++++++++++++++++++++--- 1 file changed, 115 insertions(+), 9 deletions(-) diff --git a/07week/ticTacToe/script.js b/07week/ticTacToe/script.js index d0bc4bd52..8355e32a1 100644 --- a/07week/ticTacToe/script.js +++ b/07week/ticTacToe/script.js @@ -3,25 +3,131 @@ class TicTacToe extends React.Component { constructor(props) { super(props); + this.state = { + playerTurn: "X", + board: [null,null,null,null,null,null,null,null,null] + } + this.placeSymbol = this.placeSymbol.bind(this); + } + + +/* +*This function puts symbols on the Board +* +*@param event The object being clicked on +*/ + placeSymbol(event) { + console.log("The event object: ", event); + console.log("The element clicked: ", event.target); + console.log("The value is: ", event.target.getAttribute("data-cell")); + +/* +*This function checks for a horizontal win +* +*@param x The component to check for a win on +*/ + function horizontalWin(x) { + if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[1])&&(x.state.board[0]===x.state.board[2]))) || //top row + ((x.state.board[3]!=null)&&((x.state.board[3]===x.state.board[4])&&(x.state.board[3]===x.state.board[5]))) || //middle row + ((x.state.board[6]!=null)&&((x.state.board[6]===x.state.board[7])&&(x.state.board[6]===x.state.board[8])))){ //bottom row + return true + } + } + + +/* +*This function checks for a vertical win +* +*@param x The component to check for a win on +*/ + function verticalWin(x) { + if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[3])&&(x.state.board[0]===x.state.board[6]))) || //left column + ((x.state.board[1]!=null)&&((x.state.board[1]===x.state.board[4])&&(x.state.board[1]===x.state.board[7]))) || //middle column + ((x.state.board[2]!=null)&&((x.state.board[2]===x.state.board[5])&&(x.state.board[2]===x.state.board[8])))){ //right column + return true + } + } + +/* +*This function checks for a diagonal win +* +*@param x The component to check for a win on +*/ + function diagonalWin(x) { + if (((x.state.board[0]!=null)&&((x.state.board[0]===x.state.board[4])&&(x.state.board[0]===x.state.board[8]))) || + ((x.state.board[6]!=null)&&((x.state.board[6]===x.state.board[4])&&(x.state.board[6]===x.state.board[2])))){ + return true + } + } + +/* +*This function checks for a win on the Board +* +*@param y The component to check for a win on +*/ + function checkForWin(y) { + if (horizontalWin(y)||verticalWin(y)||diagonalWin(y)){ + let myFunction = function(){ + alert("Player "+y.state.playerTurn+" Wins!"); + } + setTimeout(myFunction,200); //this is so that the winning symbol shows up on the board before the alert + //y.state.board = [null,null,null,null,null,null,null,null,null]; Couldn't get this to easily reset the board after a win + return true; + } + } + + + let task = event.target.getAttribute("data-cell"); + + if ((this.state.playerTurn==="X")&&(this.state.board[task]===null)){ + console.log("Orig Board: "+this.state.board); + this.state.board[task] = "X"; + let newBoard = this.state.board; + const newState = { + board: newBoard + } + console.log("Task: "+task); + console.log("Board: "+this.state.board); + this.setState(newState); + checkForWin(this); + if (!((horizontalWin(this)||verticalWin(this)||diagonalWin(this)))) { //if no wins + this.state.playerTurn="O"; + } + + }else if ((this.state.playerTurn==="O")&&(this.state.board[task]===null)){ + this.state.board[task] = "O"; + let newBoard = this.state.board; + const newState = { + board: newBoard + } + console.log("Task: "+task); + console.log("Board: "+this.state.board); + this.setState(newState); + checkForWin(this); + if (!((horizontalWin(this)||verticalWin(this)||diagonalWin(this)))) { //if no wins + this.state.playerTurn="X"; + } + } + } render() { return (
-
-
-
+
{this.state.board[0]}
+
{this.state.board[1]}
+
{this.state.board[2]}
-
-
-
+
{this.state.board[3]}
+
{this.state.board[4]}
+
{this.state.board[5]}
-
-
-
+
{this.state.board[6]}
+
{this.state.board[7]}
+
{this.state.board[8]}
); From 3c952d44c9c7a263a7e0ed9c8067e2ca0603ab38 Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Fri, 8 Dec 2017 18:49:47 -0600 Subject: [PATCH 08/11] FetchUsers --- 07week/towersOfHanoi/script.js | 111 ++++++++++++++++++++++++++++++--- 08week/fetch/index.html | 1 + 08week/fetch/script.js | 105 +++++++++++++++++++++++++++++++ 3 files changed, 210 insertions(+), 7 deletions(-) diff --git a/07week/towersOfHanoi/script.js b/07week/towersOfHanoi/script.js index 9b156e880..9080d60a7 100644 --- a/07week/towersOfHanoi/script.js +++ b/07week/towersOfHanoi/script.js @@ -3,20 +3,117 @@ class TowersOfHanoi extends React.Component { constructor(props) { super(props); + this.state = { + $block: null, + A: [100,75,50,25], + B: [], + C: [] + } + this.movePiece = this.movePiece.bind(this); } + /* + *This function should*** move the blocks in the game. ***You can see the blocks move in the console.log statements, but the blocks do not visually move + * + *@param event Clicking on the stacks + */ + movePiece(event) { + console.log("The event object: ", event); + console.log("The element clicked: ", event.target); + console.log("The value is: ", event.target.getAttribute("data-stack")); + console.log("State Before Move: ",this.state); + + let task = event.target.getAttribute("data-stack"); + //console.log("typeof task: ",typeof task); + let $stack; + if(task==="A"){ + $stack = this.state.A; + //console.log("$stack(A): "+$stack); + }else if (task==="B") { + $stack = this.state.B; + //console.log("$stack(B): "+$stack); + }else if (task==="C") { + $stack = this.state.C; + //console.log("$stack(C): "+$stack); + } + if (this.state.$block===null) { + //this.state.$block = $stack[$stack.length-1]; + //$stack.splice(($stack.length-1),1); + this.state.$block = $stack.pop(); + //event.children().last().detach(); + let newBlock = this.state.$block; + let stillA = this.state.A; + let stillB = this.state.B; + let stillC = this.state.C; + const newState = { + $block: newBlock, + A: stillA, + B: stillB, + C: stillC + } + } else { + // console.log($block.attr("data-block"),$(this).children().last().attr("data-block")) + if(this.state.$block>$stack[$stack.length-1]) { + alert("BAD MOVE"); + } else { + //$stack.splice($stack[$stack.length-1],0,this.state.$block); + $stack.push(this.state.$block); + this.state.$block = null; + let newBlock = this.state.$block; + let newA = this.state.A; + let newB = this.state.B; + let newC = this.state.C; + const newState = { + $block: newBlock, + A: newA, + B: newB, + C: newC + } + if (newC.length===4) { + alert("You win!"); + } + //moves++; + // console.log($("#winner").children().length); + } + console.log("State After Move: ",this.state); + + } + + + } + + /* + *This function converts the arrays in state to divs + * + *@param numbers The values from the state arrays + */ + convertToDivs (numbers){ + return (
) + } + + /* + *This function should*** render the the blocks. ***You can see the blocks move in the console.log statements, but the blocks do not visually move + */ render() { + + /*function convertToDivs (numbers){ + return (
) + }*/ + + let Ablocks = this.state.A.map(this.convertToDivs); + let Bblocks = this.state.B.map(this.convertToDivs); + let Cblocks = this.state.C.map(this.convertToDivs); + return (
-
-
-
-
-
+
+ {Ablocks}
-
+
+ {Bblocks}
-
+
+ {Cblocks}
); diff --git a/08week/fetch/index.html b/08week/fetch/index.html index 6417d858f..402014273 100644 --- a/08week/fetch/index.html +++ b/08week/fetch/index.html @@ -7,6 +7,7 @@ +
diff --git a/08week/fetch/script.js b/08week/fetch/script.js index ad9a93a7c..19bc18bd8 100644 --- a/08week/fetch/script.js +++ b/08week/fetch/script.js @@ -1 +1,106 @@ +/* + 'use strict'; + +class ListUsers extends React.Component{ + + constructor(props) { + super(props); + this.state = { + user: [] + } + this.test = this.test.bind(this); + } + + test(){ + let fetchedUsers = []; + + let p = fetch('https://reqres.in/api/users?page=2'); + let jsonPromise = p.then(function(response){ + console.log("status of my respons",(response.status)); + return response.json(); + }); + + fetchedUsers = jsonPromise.then(function(data){ + console.log("the data is ", data); + //this is where you update your state + fetchedUsers.push(
QQQ
); + fetchedUsers.push(
LLL
); + return fetchedUsers; + // console.log("fetchedUsers: ", fetchedUsers); + }); + this.setState({users: fetchedUsers}); + } + + render(){ + + //console.log("result of my fetch",p); + + this.test(); + + return( +
+ {this.state.users} +
+ ) + } + + +} + +ReactDOM.render(, document.getElementById('fetch')) + +*/ + +'use strict'; + +class ListUsers extends React.Component{ + + constructor(props){ + super(props); + this.state = { + users: [] + } + this.initialDraw = this.initialDraw.bind(this); + } + + initialDraw(){ + fetch('https://reqres.in/api/users?page=2').then((response) =>{ + console.log("the status of my response ",response.status); + console.log("is this undefined? ", this); + return response.json(); + }).then((random) => { + console.log("the data is ", random); + console.log("list of users", random.data) + this.setState({ + users: random.data + }); + }); + } + + renderUsers() { + return this.state.users.map(function($user) { + //return (
  • {$user.first_name} {$user.last_name} {$user.avatar}
    • ) + return (
  • {$user.first_name} {$user.last_name}
    • ) + }); + } + + render(){ + if(this.state.users.length == 0) { + this.initialDraw(); + } + console.log("my state ", this.state) + + + return( + +
    + User List + {this.renderUsers()} +
    + ) + } + +} + +ReactDOM.render(, document.getElementById('fetch')); From f578bd453b939071f2cc71980479ece397085476 Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Sat, 9 Dec 2017 11:41:20 -0600 Subject: [PATCH 09/11] React Towers Of Hanoi - fixed --- 07week/towersOfHanoi/script.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/07week/towersOfHanoi/script.js b/07week/towersOfHanoi/script.js index 9080d60a7..95fcd309b 100644 --- a/07week/towersOfHanoi/script.js +++ b/07week/towersOfHanoi/script.js @@ -5,6 +5,7 @@ class TowersOfHanoi extends React.Component { super(props); this.state = { $block: null, + removedDiv: null, A: [100,75,50,25], B: [], C: [] @@ -18,6 +19,7 @@ class TowersOfHanoi extends React.Component { *@param event Clicking on the stacks */ movePiece(event) { + //debugger; console.log("The event object: ", event); console.log("The element clicked: ", event.target); console.log("The value is: ", event.target.getAttribute("data-stack")); @@ -40,7 +42,8 @@ class TowersOfHanoi extends React.Component { //this.state.$block = $stack[$stack.length-1]; //$stack.splice(($stack.length-1),1); this.state.$block = $stack.pop(); - //event.children().last().detach(); + //debugger; + this.state.removedDiv = event.target.removeChild(event.target.lastChild); let newBlock = this.state.$block; let stillA = this.state.A; let stillB = this.state.B; @@ -58,6 +61,7 @@ class TowersOfHanoi extends React.Component { } else { //$stack.splice($stack[$stack.length-1],0,this.state.$block); $stack.push(this.state.$block); + event.target.appendChild(this.state.removedDiv); this.state.$block = null; let newBlock = this.state.$block; let newA = this.state.A; From a3d3e42e4a4a19bae1b8a096fab41a4352e149c8 Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Mon, 11 Dec 2017 15:51:13 -0600 Subject: [PATCH 10/11] Bootstrap Styling added to Fetch Users --- 08week/fetch/index.html | 7 +++- 08week/fetch/script.js | 74 ++++++++--------------------------- 08week/fetch/style.css | 87 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 59 deletions(-) diff --git a/08week/fetch/index.html b/08week/fetch/index.html index 402014273..a5049c997 100644 --- a/08week/fetch/index.html +++ b/08week/fetch/index.html @@ -3,7 +3,12 @@ Fetch - + + + + + + diff --git a/08week/fetch/script.js b/08week/fetch/script.js index 19bc18bd8..6e4e41357 100644 --- a/08week/fetch/script.js +++ b/08week/fetch/script.js @@ -1,57 +1,3 @@ -/* - -'use strict'; - -class ListUsers extends React.Component{ - - constructor(props) { - super(props); - this.state = { - user: [] - } - this.test = this.test.bind(this); - } - - test(){ - let fetchedUsers = []; - - let p = fetch('https://reqres.in/api/users?page=2'); - let jsonPromise = p.then(function(response){ - console.log("status of my respons",(response.status)); - return response.json(); - }); - - fetchedUsers = jsonPromise.then(function(data){ - console.log("the data is ", data); - //this is where you update your state - fetchedUsers.push(
    QQQ
    ); - fetchedUsers.push(
    LLL
    ); - return fetchedUsers; - // console.log("fetchedUsers: ", fetchedUsers); - }); - this.setState({users: fetchedUsers}); - } - - render(){ - - //console.log("result of my fetch",p); - - this.test(); - - return( -
    - {this.state.users} -
    - ) - } - - -} - -ReactDOM.render(, document.getElementById('fetch')) - -*/ - 'use strict'; class ListUsers extends React.Component{ @@ -81,22 +27,34 @@ class ListUsers extends React.Component{ renderUsers() { return this.state.users.map(function($user) { //return (
  • {$user.first_name} {$user.last_name} {$user.avatar}
    • ) - return (
  • {$user.first_name} {$user.last_name}
    • ) + return (
    +
    +

    {$user.first_name} {$user.last_name}

    +
    + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    ) }); } +/*className="col-md-2 col-md-offset-5 col-lg-2 col-lg-offset-5 col-sm-2 col-sm-offset-5 col-xs-4 col-xs-offset-4"*/ + render(){ if(this.state.users.length == 0) { this.initialDraw(); } console.log("my state ", this.state) - return(
    - User List - {this.renderUsers()} +
    +

    User List

    +
    +
    + {this.renderUsers()} + {/*}*/} +
    ) } diff --git a/08week/fetch/style.css b/08week/fetch/style.css index e69de29bb..20f03d8da 100644 --- a/08week/fetch/style.css +++ b/08week/fetch/style.css @@ -0,0 +1,87 @@ +header { +background-color: rgb(43,205,192); +width: 900px; +height: 300px; +margin: auto; +display: flex; +justify-content: center; +align-items: center; +} + +h1 { +color: white; +font-size: 300%; +font-family: "Times"; +} + +main { +background-color: black; +width: 900px; +margin: auto; +box-sizing: border-box; +display: flex; +justify-content: space-around; +align-items: center; +padding: 45px 20px 45px 20px; +} + +article { + width: 22%; + /*display: flex;*/ + /*justify-content: center;*/ +} + +.pic { + display: flex; + justify-content: center; + width: 100%; +} + +.title { + display: flex; + justify-content: center; + width: 100%; + padding: 10px 0px; +} + +h2 { +color: white; +font-size: 200%; +text-align: center; +} + +p { + color: white; + text-align: center; + font-family: "Calibri"; +} + +@media (max-width: 767px) { + + header { + background-color: rgb(55,170,224); + width: 100%; + padding-left: 50px; + padding-right: 50px; + box-sizing: border-box; + } + + main { + background-color: rgb(220,220,220); + width: 100%; + flex-direction: column; + } + + article { + width: 280px; + padding-bottom: 50px; + } + + h2 { + color: black; + } + + p { + color: black; + } +} From ffc07a9471774ff255d905a2b55c32552508a686 Mon Sep 17 00:00:00 2001 From: Patrick Creamer Date: Mon, 11 Dec 2017 20:57:42 -0600 Subject: [PATCH 11/11] Hackernews HW (Forgot to change branch) --- 09week/blog/index.html | 14 ++++ 09week/blog/script.js | 53 ++++++++++++++ 09week/hackernews/index.html | 3 + 09week/hackernews/script.js | 89 +++++++++++++++++++++++ 09week/hackernews/style.css | 57 +++++++++++++++ 09week/hackernews_backup-notes/index.html | 14 ++++ 09week/hackernews_backup-notes/script.js | 44 +++++++++++ 7 files changed, 274 insertions(+) create mode 100644 09week/blog/index.html create mode 100644 09week/blog/script.js create mode 100644 09week/hackernews/style.css create mode 100644 09week/hackernews_backup-notes/index.html create mode 100644 09week/hackernews_backup-notes/script.js diff --git a/09week/blog/index.html b/09week/blog/index.html new file mode 100644 index 000000000..6d2459774 --- /dev/null +++ b/09week/blog/index.html @@ -0,0 +1,14 @@ + + + + + Air Quality + + +
    + + + + + + diff --git a/09week/blog/script.js b/09week/blog/script.js new file mode 100644 index 000000000..d4cd115c4 --- /dev/null +++ b/09week/blog/script.js @@ -0,0 +1,53 @@ +'use strict'; + +class Blog extends React.Component { + constructor(props) { + super(props); + + this.state = { + allofit: [] + } + + this.markComplete = this.Remove.bind(this); + } + + componentDidMount() { + fetch('https://api.openaq.org/v1/cities').then((result) => { + return result.json(); + }).then((numbers) => { + this.setState({ + allofit: numbers.results + }) + }); + } + +Remove(currentNumber) { + let list = this.state.results; + list.splice(currentNumber, 1); + this.setState({ + allofit: list + }) +} + +render() { + const list = []; + //debugger; + this.state.allofit.forEach((item, index) => { + list.push( +
    +

    {item.city}

    +

    {item.city}

    +

    {item.locations}

    + +
    + ); + }); + return ( +
    + {list} +
    + ) +} +} + +ReactDOM.render(, document.getElementById('blog')); diff --git a/09week/hackernews/index.html b/09week/hackernews/index.html index d8518af73..578635af7 100644 --- a/09week/hackernews/index.html +++ b/09week/hackernews/index.html @@ -2,6 +2,9 @@ + + + Hacker News diff --git a/09week/hackernews/script.js b/09week/hackernews/script.js index ad9a93a7c..3f696e41d 100644 --- a/09week/hackernews/script.js +++ b/09week/hackernews/script.js @@ -1 +1,90 @@ 'use strict'; + +class Hacker extends React.Component { + constructor(props){ + super(props); + + this.state = { + list: [] + } + } + + componentDidMount() { + const articleList = []; + for(let i=1; i<151; i++){ + const url = `https://hacker-news.firebaseio.com/v0/item/${i}.json?print=pretty`; + + const options = { //this is how we pass options to our fetch for future reference + method: 'GET', + headers: { + 'content-type': 'application/json' + } + } + + /* + *This function fetches the results of the API call + * + * @param url the url of the API + * @param options This is something that the substitute teacher showed us, and I am unclear exactly what it does, but I want to keep it in my code for future reference + */ + fetch(url, options).then((result) => { + return result.json(); + }).then((response) => { + //debugger; + if (response.type == "story") { + articleList.push(response); + } + this.setState({ + list: articleList + }) + + console.log("testing mount"); + + }); + } + } + + /* + *This function allows the search bar to filter the results for only those that match the inputted string + * + *This was boiler plate code from W3 schools tweaked to fit here + */ + mySearch(){ + let input, filter, ul, li, a, i; + input = document.getElementById('myInput'); + filter = input.value.toUpperCase(); + ul = document.getElementById("myUL"); + li = ul.getElementsByTagName('li'); + + for (i = 0; i < li.length; i++) { + a = li[i].getElementsByTagName("a")[0]; + if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { + li[i].style.display = ""; + } else { + li[i].style.display = "none"; + } + } + } + + render() { + //debugger; + return ( +
    +
    +

    Hacker News Clone

    +
    +
    + +
    +
    +
      {this.state.list.map((item, index) => { + return
    • {item.title}
      • ; + }) + }
    +
    +
    + ) + } +} + +ReactDOM.render(, document.getElementById('hacker-news')) diff --git a/09week/hackernews/style.css b/09week/hackernews/style.css new file mode 100644 index 000000000..113ecdf4d --- /dev/null +++ b/09week/hackernews/style.css @@ -0,0 +1,57 @@ +header { +background-color: rgb(215,129,40); +width: 900px; +height: 150px; +margin: auto; +display: flex; +justify-content: center; +align-items: center; +} + +h1 { +color: black; +font-size: 300%; +font-family: "Impact"; +} + +#main { +background-color: black; +width: 900px; +margin: auto; +box-sizing: border-box; +display: flex; +align-items: center; +padding: 45px 20px 45px 20px; +} + +#inputdiv { + margin: auto; + width: 900px; + background-color: black; +} + +a:link { + text-decoration: none; + color: white; +} + +a:visited { + text-decoration: none; + color: white; +} + +a:hover { + text-decoration: underline; +} + +a:active { + text-decoration: underline; +} + +#myInput { + width: 100%; /* Full-width */ + font-size: 16px; /* Increase font-size */ + padding: 12px 20px 12px 40px; /* Add some padding */ + border: 1px solid #ddd; /* Add a grey border */ + margin-bottom: 12px; /* Add some space below the input */ +} diff --git a/09week/hackernews_backup-notes/index.html b/09week/hackernews_backup-notes/index.html new file mode 100644 index 000000000..d8518af73 --- /dev/null +++ b/09week/hackernews_backup-notes/index.html @@ -0,0 +1,14 @@ + + + + + Hacker News + + +
    + + + + + + diff --git a/09week/hackernews_backup-notes/script.js b/09week/hackernews_backup-notes/script.js new file mode 100644 index 000000000..869920d91 --- /dev/null +++ b/09week/hackernews_backup-notes/script.js @@ -0,0 +1,44 @@ +'use strict'; + +class List extends React.Component { + constructor(props){ + super(props); + } + + render() { + return ( +
    +
    +
    +
    +
    +
    +
    +
    + ) + } +} + +class Article extends React.Component { + constructor(props){ + super(props); + + this.state = { + text = props.text + } + } + + render() { + return { +
    +

    {this.props.text}

    + {!this.props.title.includes('article') && +

    WARNiNG: This is not a valid article

    } +

    Lorem ipsum dolor sit amet, consectutur adipsiscing elit, sed dolo eisusmod tempor dicidndunt ut ajdf tidkc lskd te.

    +
    + } + } +} + + +ReactDOM.render(, document.getElementById('hacker-news'))