diff --git a/02-props-state-component-architecture/state/.gitignore b/02-props-state-component-architecture/state/.gitignore deleted file mode 100644 index 3c3629e6..00000000 --- a/02-props-state-component-architecture/state/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/02-props-state-component-architecture/state/sean-answer-files/App.js b/02-props-state-component-architecture/state/sean-answer-files/App.js new file mode 100644 index 00000000..c5143ad3 --- /dev/null +++ b/02-props-state-component-architecture/state/sean-answer-files/App.js @@ -0,0 +1,77 @@ +import React, { Component } from 'react'; +import './App.css'; + +import ColorBox from "./color_box.js"; + +class App extends Component { + constructor(props){ + super(props); + + let boxes = []; + const boxNum = 28; + + for(let i = 0; i < boxNum; i++){ + let rColor = this.randomColor(); + boxes.push({ + id: i, + color: rColor + }); + } + this.state = {boxes}; + + setInterval(() => { + const nBoxes = this.state.boxes.slice(); + const rBoxIndx = Math.floor(Math.random() * nBoxes.length); + nBoxes[rBoxIndx] = Object.assign({}, nBoxes[rBoxIndx], { + color: this.randomColor() + }); + this.setState({ + boxes: nBoxes + }); + }, 300); + } + + randomColor(){ + let colorIndx = Math.floor(Math.random() * this.props.colors.length); + return this.props.colors[colorIndx]; + } + render() { + //Right after the RENDER is where all your LOGIC goes + const boxes = this.state.boxes.map(box => ( + + )); + + // After the RETURN is where anything that has to do with HTML in the component goes + return ( +
{boxes}
+ ); +} +} + +App.defaultProps = { + colors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond", + "Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate", + "Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod", + "DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange", + "DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey", + "DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue", + "FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod", + "Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki", + "Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan", + "LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon", + "LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow", + "Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid", + "MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise", + "MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy", + "OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen", + "PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue", + "Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen", + "SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen", + "SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke", + "Yellow","YellowGreen"] +} + +export default App; diff --git a/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js b/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js new file mode 100644 index 00000000..f6da0579 --- /dev/null +++ b/02-props-state-component-architecture/state/sean-answer-files/App_clickEvent.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react'; +import './App.css'; + +import ColorBox from "./color_box.js"; + +class App extends Component { + constructor(props){ + super(props); + + let boxes = []; + const boxNum = 28; + + for(let i = 0; i < boxNum; i++){ + let rColor = this.randomColor(); + boxes.push({ + id: i, + color: rColor + }); + } + this.state = {boxes}; + + this.changeColor = this.changeColor.bind(this); + } + + changeColor(e){ + console.log(e.target.id) + const updatedBoxes = this.state.boxes.map( box => { + if(box.id == e.target.id){ + box.color = this.randomColor(); + } + return box; + }); + this.setState({boxes: updatedBoxes}) + } + + + randomColor(){ + let colorIndx = Math.floor(Math.random() * this.props.colors.length); + return this.props.colors[colorIndx]; + } + render() { + //Right after the RENDER is where all your LOGIC goes + const boxes = this.state.boxes.map(box => ( + + )); + + // After the RETURN is where anything that has to do with HTML in the component goes + return ( +
{boxes}
+ ); +} +} + +App.defaultProps = { + colors: ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond", + "Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate", + "Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod", + "DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange", + "DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey", + "DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue", + "FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod", + "Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki", + "Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan", + "LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon", + "LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow", + "Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid", + "MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise", + "MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy", + "OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen", + "PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue", + "Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen", + "SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen", + "SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke", + "Yellow","YellowGreen"] +} + +export default App; diff --git a/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css b/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css new file mode 100644 index 00000000..449420bb --- /dev/null +++ b/02-props-state-component-architecture/state/sean-answer-files/ColorBox.css @@ -0,0 +1,7 @@ +.box { + width: 190px; + height: 190px; + display: inline-block; + margin-bottom: 0; + padding-bottom: 0; +} \ No newline at end of file diff --git a/02-props-state-component-architecture/state/sean-answer-files/color_box.js b/02-props-state-component-architecture/state/sean-answer-files/color_box.js new file mode 100644 index 00000000..c9d28648 --- /dev/null +++ b/02-props-state-component-architecture/state/sean-answer-files/color_box.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import "./ColorBox.css" + +class ColorBox extends Component { + render() { + const style = { + backgroundColor: this.props.color + }; + return ( +
+ ); + } +} + +export default ColorBox; \ No newline at end of file