fisrt exercise complete

03/src/App.css

@@ -2,21 +2,12 @@
   text-align: center;
 }
 
-.App-logo {
+h1 {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
   color: white;
+  color: lightgreen;
 }
 
-.App-link {
+body {
-  color: #09d3ac;
+  background-color: black;
+  color: aquamarine;
 }

03/src/App.js

@@ -1,12 +1,33 @@
-import React from 'react';
+import React from 'react'
-import './App.css';
+import UserInput from './UserInput/UserInput'
+import UserOutput from './UserOutput/UserOutput'
+import './App.css'
 
-function App() {
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {username: "Placeholder"}
+  }
+
+  handleUsernameChange(event) {
+    this.setState({
+      username: event.target.value
+    })
+    console.log(this.state.username)
+    console.log(event.target.value)
+  }
+
+  render() {
     return (
       <div className="App">
-    <h1>Oh hay, I'm a React App. Chap.</h1>
+      <h1>Oy mate</h1>
+      <UserInput change={this.handleUsernameChange.bind(this)} username={this.state.username} />
+      <UserOutput username={this.state.username} />
+      <UserOutput username={this.state.username} />
+      <UserOutput username={this.state.username} />
       </div>
-  );
+    )
+  }
 }
 
-export default App;
+export default App

03/src/UserInput/UserInput.css

@@ -0,0 +1,3 @@
+.UserInput {
+    border: 2px solid red;
+}

03/src/UserInput/UserInput.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import './UserInput.css'
+
+class UserInput extends React.Component {
+    constructor(props) {
+        super(props)
+        console.log("UserInput", props)
+    }
+
+    style = {backgroundColor:"green"}
+
+    render() {
+        return (
+            <div>
+                <input 
+                    className="UserInput"
+                    type="text" 
+                    onChange={this.props.change} 
+                    value={this.props.username} 
+                    style={this.style}
+                />
+            </div>
+        )
+    }
+}
+
+export default UserInput

03/src/UserOutput/UserOutput.css

@@ -0,0 +1,8 @@
+.UserOutput {
+    width: 60%;
+    padding: 16px;
+    margin: 16px;
+    border: 2px solid black;
+    background-color: gray;
+    text-align: center;
+}

03/src/UserOutput/UserOutput.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import './UserOutput.css'
+
+class UserOutput extends React.Component {
+    constructor(props) {
+        super(props)
+        console.log("UserOutput", props)
+    }
+    render() {
+        return (
+            <div className="UserOutput">
+                <p>Original username: Nevermind</p>
+                <p>New username: {this.props.username}</p>
+            </div>
+        )
+    }
+}
+
+export default UserOutput;