some progress

src/App.js

@@ -1,12 +1,61 @@
 import React from 'react'
 import Form from './components/Form'
+import Result from './components/Result'
+import getStateFromStorage from './helpers/getStateFromStorage'
+import saveStateToStorage from './helpers/saveStateToStorage'
 
 class App extends React.Component {
   state = {}
+
+  handleChange = event => {
+    this.setState({
+      [event.target.id]: event.target.value
+    })
+
+    saveStateToStorage(event.target.id, event.target.value)
+  }
+
+  handleSubmit = event => {
+    // get data from all state fields
+    const weeklyHours = this.state.weeklyHours
+    const holidays = this.state.holidays
+    const monthlyIncome = this.state.monthlyIncome
+    const itemCost = this.state.itemCost
+
+    // calculate
+    const actualMonthlyWorkedDays = (5 * 52 - 10 - holidays) / 12 // 19,1
+    const hoursInAMonth = (weeklyHours / 5) * actualMonthlyWorkedDays // 153
+    const minutesInAMonth = hoursInAMonth * 60 // 9180
+    const realPayPerMinute = monthlyIncome / minutesInAMonth // 0,32
+    const roundedPayPerMinute = realPayPerMinute.toFixed(3) // 0,327 > pay per minute
+    const costinMinutes = Math.floor(itemCost / roundedPayPerMinute) // 91
+
+    const totalHours = Math.floor(costinMinutes / 60)
+    const totalMinutes = costinMinutes % 60
+
+    const result = `${totalHours} hour(s) and ${totalMinutes} minutes`
+
+    // show
+    this.setState({
+      result: result
+    })
+  }
+
+  componentDidMount() {
+    this.setState(getStateFromStorage())
+  }
+
   render() {
     return (
       <div>
-        <Form monthlyAmount="" weeklyHours="40" />
+        <Form
+          monthlyIncome={this.state.monthlyIncome}
+          holidays={this.state.holidays}
+          weeklyHours={this.state.weeklyHours}
+          handleChange={this.handleChange}
+          handleSubmit={this.handleSubmit}
+        />
+        <Result result={this.state.result} />
       </div>
     )
   }

src/components/Form.js

@@ -1,31 +1,66 @@
 import React from 'react'
 
 class Form extends React.Component {
-  state = {}
+  handleSubmit = event => {
+    event.preventDefault()
+    this.props.handleSubmit(event)
+  }
+
+  handleChange = event => {
+    this.props.handleChange(event)
+  }
+
   render() {
-    console.log(this.props)
     return (
       <div>
-        <fieldset id="forms__input">
-          <legend>Input fields</legend>
-          <p>
-            <label htmlFor="input__text">Monthly Net Salary</label>{' '}
-            <input id="input__text" placeholder="Monthly amount" type="text" />
-          </p>
-          <p>
-            <label htmlFor="input__text">Weekly hours</label>{' '}
-            <input
-              id="input__text"
-              placeholder="Hours per week"
-              type="text"
-              value={this.props.weeklyHours}
-            />
-          </p>
-          <p>
-            <label htmlFor="input__text">Cost of the Item</label>{' '}
-            <input id="input__text" placeholder="Cost of item" type="text" />
-          </p>
-        </fieldset>
+        <form onSubmit={this.handleSubmit}>
+          <fieldset id="forms__input">
+            <legend>Input fields</legend>
+            <div>
+              <label htmlFor="monthlyIncome">Monthly Net Salary</label>{' '}
+              <input
+                id="monthlyIncome"
+                placeholder="Monthly amount"
+                type="text"
+                defaultValue={this.props.monthlyIncome}
+                onChange={this.handleChange}
+              />
+            </div>
+            <div>
+              <label htmlFor="weeklyHours">Weekly hours</label>{' '}
+              <input
+                id="weeklyHours"
+                placeholder="Hours per week"
+                type="text"
+                defaultValue={this.props.weeklyHours}
+                onChange={this.handleChange}
+              />
+            </div>
+            <div>
+              <label htmlFor="holidays">Number of holidays per year</label>{' '}
+              <input
+                id="holidays"
+                placeholder="Number of holidays"
+                type="text"
+                defaultValue={this.props.holidays}
+                onChange={this.handleChange}
+              />
+            </div>
+            <div>
+              <label htmlFor="itemCost">Cost of the Item</label>{' '}
+              <input
+                id="itemCost"
+                placeholder="Cost of item"
+                type="text"
+                defaultValue="0"
+                onChange={this.handleChange}
+              />
+            </div>
+            <div>
+              <input id="submit" type="submit" defaultValue="Calculate" />
+            </div>
+          </fieldset>
+        </form>
       </div>
     )
   }

src/components/Result.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+class Result extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className="result">{this.props.result}</div>
+      </div>
+    )
+  }
+}
+
+export default Result

src/helpers/getStateFromStorage.js

@@ -0,0 +1,13 @@
+function retrieveData(key) {
+  return localStorage.getItem(key) ? localStorage.getItem(key) : 0
+}
+
+export default function() {
+  const localStorageState = {
+    weeklyHours: retrieveData('weeklyHours'),
+    monthlyIncome: retrieveData('monthlyIncome'),
+    holidays: retrieveData('holidays')
+  }
+
+  return localStorageState
+}

src/helpers/saveStateToStorage.js

@@ -0,0 +1,3 @@
+export default function(key, value) {
+  localStorage.setItem(key, value)
+}