update

02/src/App.css

@@ -1,3 +1,11 @@
 .App {
   text-align: center;
 }
+
+.red {
+  color:red;
+}
+
+.bold {
+  font-weight: bold;
+}

02/src/App.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import './App.css';
-import Person from './Person/Person';
-
+import React from "react";
+import "./App.css";
+import Person from "./Person/Person";
 
 /*// ## Functional code generated by creat-react-app ##
 function App() {
@@ -77,26 +76,28 @@ class App extends React.Component {
   // If you need to change it, use the setState() method.
   state = {
     character: [
-      { id: 1, name: 'char1', ilvl: '100' },
-      { id: 2, name: 'char2', ilvl: '110' },
-      { id: 3, name: 'char3', ilvl: '120' }
+      { id: 1, name: "char1", ilvl: "100" },
+      { id: 2, name: "char2", ilvl: "110" },
+      { id: 3, name: "char3", ilvl: "120" }
     ],
-    somethingElse: 'something something',
+    somethingElse: "something something",
     showOrHide: false
-  }
+  };
 
-deleteCharacterHandler = (index) => {
+  deleteCharacterHandler = index => {
     const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
     // const characters = this.state.character.slice();  //<- this works, too, but use spread [...] instead
 
     characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
-  console.log('deleted character: ', this.state.character[index]);
+    console.log("deleted character: ", this.state.character[index]);
     this.setState({ character: characterCopy }); //<- state alterations should be made by this function alone (setState())
-}
+  };
 
   nameChangedHandler = (event, id) => {
     // find the index during input event
-    const charIndex = this.state.character.findIndex(c => {return c.id === id});
+    const charIndex = this.state.character.findIndex(c => {
+      return c.id === id;
+    });
 
     // copy the state item to manipulate it, state can't be directly changed.
     const char = { ...this.state.character[charIndex] };
@@ -110,24 +111,25 @@ deleteCharacterHandler = (index) => {
 
     // change the state
     this.setState({ character: characters });
-  }
+  };
 
   showOrHide = () => {
-    const doesShow = this.state.showOrHide
+    const doesShow = this.state.showOrHide;
     // showOrHide was set to start false, but here when changing state it will
     // become the opposite. So if it's true it will be false and vice-versa
-    this.setState({showOrHide: !doesShow})
-  }
+    this.setState({ showOrHide: !doesShow });
+  };
 
   render() {
     //inline CSS directives
     const style = {
-      backgroundColor: 'white',
-      font: 'inherit',
-      border: '1px solid blue',
-      padding: '8px',
-      margin: '10px',
-      cursor: 'pointer'
+      backgroundColor: "green",
+      color: "white",
+      font: "inherit",
+      border: "1px solid blue",
+      padding: "8px",
+      margin: "10px",
+      cursor: "pointer"
     };
 
     let persons = null;
@@ -142,26 +144,37 @@ deleteCharacterHandler = (index) => {
                 name={char.name}
                 ilvl={char.ilvl}
                 key={char.id}
-            changed={(event) => this.nameChangedHandler(event, char.id)}
-            />)
+                changed={event => this.nameChangedHandler(event, char.id)}
+              />
+            );
           })}
         </div>
-      )
+      );
+
+      style.backgroundColor = "red";
+    }
+
+    let classes = [];
+    if (this.state.character.length <= 2) {
+      classes.push('red');
+    }
+    if (this.state.character.length <= 1) {
+      classes.push('bold');
     }
 
     return (
-      <div className='App'>
+      <div className="App">
         <h1>Hi, I'm a React App, I'm cute.</h1>
-        <p>Created using OOP code</p>
+        <p className={classes.join(' ')}>Created using OOP code</p>
+        <p style={{color: 'blue'}}>And this is a little test in styling</p>
         <button
           style={style} // <- putting in the CSS directives set above
-          onClick={() => console.log('\"CLICK\"')} >
+          onClick={() => console.log('"CLICK"')}
+        >
           Click Me
         </button>
-        <button
-          style={style}
-          onClick={this.showOrHide} >
-          {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'}
+        <button style={style} onClick={this.showOrHide}>
+          {this.state.showOrHide ? "HIDE IT" : "SHOW IT"}
         </button>
         {persons}
       </div>

02/src/Person/Person.css

@@ -6,3 +6,9 @@
     padding: 16px;
     text-align: center;
 }
+
+@media (min-width: 500px) {
+    .Person {
+        width: 450px;
+    }
+}

02/src/Person/Person.js

@@ -1,16 +1,35 @@
-import React from 'react';
-import './Person.css';
+import React from "react";
+// import './Person.css';
+import styled from "styled-components";
 
-const person = (props) => {
+const StyledDiv = styled.div`
+  width: 500px;
+  margin: 16px auto;
+  border: 1px solid #eee;
+  color: green;
+  box-shadow: 0 2px 3px #ccc;
+  padding: 16px;
+  text-align: center;
+
+  @media (min-width: 500px) {
+    width: 450px;
+  }
+`;
+
+const person = props => {
   return (
-        <div className="Person">
-            <p>I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
+    // <div className="Person">
+    <StyledDiv>
+      <p>
+        I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!
+      </p>
       <p>{props.children}</p>
       <input type="text" onChange={props.changed} defaultValue={props.name} />
       <button onClick={props.click}>delete</button>
-            {console.log('props:', props)}
-        </div>
-    )
+      {console.log("props:", props)}
+    </StyledDiv>
+    // </div>
+  );
 };
 
 export default person;