Initial commit

src/App.js

@@ -1,23 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import UserInput from './UserInput/UserInput';
+import UserOutput from './UserOutput/UserOutput';
+
+import ValidationComponent from './ValidationComponent/ValidationComponent';
+import CharComponent from './CharComponent/CharComponent';
 
 function App() {
+  const [text, setText] = useState("Hola");
+
+  const updateText = ev => setText(ev.target.value);
+
+  const deleteLetter = ix => {
+    const textChars = text.split('');
+    textChars.splice(ix, 1);
+    setText(textChars.join(''));
+  }
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <input onChange={updateText} value={text}></input>
+        <p>The word is {text}!</p>
+        <ValidationComponent length={text.length}></ValidationComponent>
+        {text.split('').map((c, ix) => (
+          <CharComponent 
+            key={ix} 
+            letter={c} 
+            click={() => deleteLetter(ix)}>
+            </CharComponent>)
+          )
+        }
+        {/* <UserInput  username={username} changeUsernameHandler={setUsername}></UserInput>
+        <UserOutput username={username}></UserOutput>
+        <UserOutput></UserOutput>
+        <UserOutput></UserOutput> */}
       </header>
     </div>
   );

src/CharComponent/CharComponent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const charComponent = props => {
+    const style = {
+        display: "inline-block",
+        padding: "16px",
+        textAlign: "center",
+        margin: "16px",
+        border: "1px solid black"
+    };
+
+    return <div style={style} onClick={props.click}>{props.letter}</div>
+}
+
+export default charComponent;

src/UserInput/UserInput.css

@@ -0,0 +1,3 @@
+.UserInput {
+    border-radius: 5px;
+}

src/UserInput/UserInput.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import  "./UserInput.css";
+
+const userInput = props => {
+
+    const changeUsernameHandler = event => props.changeUsernameHandler(event.target.value);
+
+    const style = {
+        width: "100%",
+        padding: "12px 20px",
+        margin: "8px 0",
+        boxSizing: "border-box"
+    }
+
+    return <input
+        className="UserInput"
+        type="text"
+        style={style}
+        value={props.username}
+        onChange={changeUsernameHandler}
+    ></input>;
+}
+
+export default userInput;

src/UserOutput/UserOutput.css

@@ -0,0 +1,7 @@
+.UserOutput {
+
+}
+
+.UserOutput > p {
+    font-size: 12px;
+}

src/UserOutput/UserOutput.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './UserOutput.css';
+
+const userOutput = props => {
+    return (
+        <div className="UserOutput">
+            <p>My first paragraph {props.username}!</p>
+            <p>My second paragrap</p>
+        </div>
+    );
+}
+
+export default userOutput;

src/ValidationComponent/ValidationComponent.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const validationComponent = props => {
+    let advice = props.length < 5? "Text too short" : "Text long enough";
+    return <p>{advice}</p>;
+}
+
+export default validationComponent;