add task 6

src/exercise/05.js

@@ -39,10 +39,10 @@ import '../box-styles.css'
 //   </div>
 // )
 
-function Box({className, style, ...otherProps}) {
+function Box({size, style, ...otherProps}) {
   return (
     <div
-      className={`box ${className}`}
+      className={`box box--${size}`}
       style={{fontStyle: 'italic', ...style}}
       {...otherProps}
     ></div>
@@ -52,13 +52,13 @@ function Box({className, style, ...otherProps}) {
 function App() {
   return (
     <div>
-      <Box className="box--small" style={{backgroundColor: 'lightblue'}}>
+      <Box size="small" style={{backgroundColor: 'lightblue'}}>
         small lightblue box
       </Box>
-      <Box className="box--medium" style={{backgroundColor: 'pink'}}>
+      <Box size="medium" style={{backgroundColor: 'pink'}}>
         medium pink box
       </Box>
-      <Box className="box--large" style={{backgroundColor: 'orange'}}>
+      <Box size="large" style={{backgroundColor: 'orange'}}>
         large organge box
       </Box>
     </div>

src/exercise/06.js

@@ -5,6 +5,12 @@ import * as React from 'react'
 
 function UsernameForm({onSubmitUsername}) {
   // 🐨 add a submit event handler here (`handleSubmit`).
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    const value = e.target.elements[0].value
+    onSubmitUsername(value)
+  }
   // 💰 Make sure to accept the `event` as an argument and call
   // `event.preventDefault()` to prevent the default behavior of form submit
   // events (which refreshes the page).
@@ -20,10 +26,10 @@ function UsernameForm({onSubmitUsername}) {
   // 🐨 make sure to associate the label to the input.
   // to do so, set the value of 'htmlFor' prop of the label to the id of input
   return (
-    <form>
+    <form onSubmit={handleSubmit}>
       <div>
-        <label>Username:</label>
-        <input type="text" />
+        <label htmlFor="user">Username:</label>
+        <input name="user" type="text" />
       </div>
       <button type="submit">Submit</button>
     </form>