Total hours is now added

app/public/index.html

@@ -14,7 +14,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <h1 class="title">MyHours</h1>
-    <p class="subtitle">Fill in your working hours:</p>
+    <p class="subtitle">When and where did you work?</p>
     <div id="root"></div>
   </body>
 </html>

app/src/App.js

@@ -1,9 +1,19 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 import "./App.css";
 import HourObject from "./HourObject";
 import TotalHours from "./TotalHours";
 import Input from "./Input";
 
+const calculateTotal = (start, end) => {
+  return end - start;
+};
+
+calculateTotal.propTypes = {
+  start: PropTypes.number.isRequired,
+  end: PropTypes.number.isRequired
+};
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -12,7 +22,7 @@ class App extends Component {
     this.state = {
       name: "Café Devine",
       location: "Budafabriek",
-      start: "7",
+      start: "9",
       end: "19"
     };
   }
@@ -21,29 +31,39 @@ class App extends Component {
     this.setState({ [name]: value });
   };
 
-  calculateTotal = (start, end) => {
-    return start + end;
-  }
-
   render() {
     const { name, location, start, end } = this.state;
-    const total = this.calculateTotal(start, end);
+    const total = calculateTotal(parseFloat(start), parseFloat(end));
     return (
       <div className="App">
         <form>
           <Input
             value={name}
+            type="text"
             name="Name:"
             onChange={e => this.handleInputChange("name", e)}
           />
           <Input
             value={location}
+            type="text"
             name="Location:"
             onChange={e => this.handleInputChange("location", e)}
           />
+          <Input
+            value={start}
+            type="number"
+            name="Start hour:"
+            onChange={e => this.handleInputChange("start", e)}
+          />
+          <Input
+            value={end}
+            type="number"
+            name="End hour:"
+            onChange={e => this.handleInputChange("end", e)}
+          />
         </form>
 
-        <HourObject name={name} location={location} />
+        <HourObject name={name} location={location} startHour={start} endHour={end} />
 
         <TotalHours totalHours={total} totalAmount="€ 96" />
       </div>

app/src/HourObject.jsx

@@ -9,8 +9,8 @@ const HourObject = ({ name, location, date, startHour, endHour, total }) => {
             <th>Name</th>
             <th>Location</th>
             <th>Date</th>
-            <th>Start</th>
-            <th>End</th>
+            <th>Start hour</th>
+            <th>End hour</th>
             <th>Total</th>
           </tr>
         </thead>

app/src/Input.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Input = ({ value, name, onChange }) => {
+const Input = ({ value, name, type, onChange }) => {
 
   const changeInput = e => {
     const { value } = e.currentTarget;
@@ -10,14 +10,14 @@ const Input = ({ value, name, onChange }) => {
 
   return (
      <label>{name}
-     <input type="text" onChange={changeInput} />
+     <input type={type} onChange={changeInput} />
      </label>
   )
 
 }
 
 Input.propTypes = {
-  value: PropTypes.number.isRequired,
+  value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired
 }