Uploaded the state exercise files

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 => (
+      <ColorBox
+        key={box.id}
+        color={box.color}
+      />
+    ));
+
+    // After the RETURN is where anything that has to do with HTML in the component goes
+  return (
+    <div className="App"> {boxes} </div>
+  );
+}
+}
+
+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;

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 => (
+      <ColorBox
+        key={box.id}
+        id={box.id}
+        color={box.color}
+        switchColor={this.changeColor}
+      />
+    ));
+
+    // After the RETURN is where anything that has to do with HTML in the component goes
+  return (
+    <div className="App"> {boxes} </div>
+  );
+}
+}
+
+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;

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;
+}

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 (
+      <div
+        className="box"
+        style={style}
+        onClick={this.props.switchColor}
+        key={this.props.id}
+      ></div>
+    );
+  }
+}
+
+export default ColorBox;