dev

.env

@@ -0,0 +1 @@
+INLINE_RUNTIME_CHUNK=false

public/manifest.json

@@ -1,25 +1,14 @@
 {
-  "short_name": "React App",
+  "manifest_version": 2,
-  "name": "Create React App Sample",
+  "version": "1.0",
-  "icons": [
+  "name": "Convert time to h",
-    {
+  "icons": {
-      "src": "favicon.ico",
+    "192": "logo192.png",
-      "sizes": "64x64 32x32 24x24 16x16",
+    "512": "logo512.png"
-      "type": "image/x-icon"
   },
-    {
+  "browser_action": {
-      "src": "logo192.png",
+    "default_icon": "logo192.png",
-      "type": "image/png",
+    "default_title": "Converttime",
-      "sizes": "192x192"
+    "default_popup": "index.html"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
   }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
 }

src/App.js

@@ -1,24 +1,30 @@
-import React from 'react';
+import React, {useState} from 'react';
-import logo from './logo.svg';
 import './App.css';
 
-function App() {
+const parseTime = time => {
+  const parsed = parseInt(time, 10);
+  if (isNaN(parsed)) return 0;
+  return parsed;
+};
+
+const App = () => {
+  const [hours, setHours] = useState(0)
+  const [minutes, setMinutes] = useState(0)
+  const [seconds, setSeconds] = useState(0)
+
+  const result = hours + minutes / 60 + seconds / (60 * 60)
+
   return (
     <div className="App">
-      <header className="App-header">
+      <div>
-        <img src={logo} className="App-logo" alt="logo" />
+        <input id="hours" type="text" value={hours} onChange={e => setHours(parseTime(e.target.value, 10))} />
-        <p>
+        <input id="minutes" type="text" value={minutes} onChange={e => setMinutes(parseTime(e.target.value, 10))} />
-          Edit <code>src/App.js</code> and save to reload.
+        <input id="seconds" type="text" value={seconds} onChange={e => setSeconds(parseTime(e.target.value, 10))} />
-        </p>
+      </div>
-        <a
+      <br />
-          className="App-link"
+      <div>
-          href="https://reactjs.org"
+        <pre>{result} h</pre>
-          target="_blank"
+      </div>
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }