Finished app

ldaine · Sep 16, 2018 · 4dc0625 · 4dc0625
1 parent 0aadf04
commit 4dc0625
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "react": "^16.5.1",
+    "react-bootstrap": "^0.32.4",
     "react-dom": "^16.5.1",
     "react-scripts": "1.1.5"
   },
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -19,6 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -12,3 +12,8 @@
     display: inline;
     margin: 10px; 
 }
+
+.Deadline-input {
+    font-size: 25px; 
+    margin: 5px; 
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'; 
 import './App.css'
 import Clock from './Clock.jsx'
+import { Form, FormControl, Button } from 'react-bootstrap'; 
 
 class App extends Component {
     constructor(props){
@@ -20,10 +21,13 @@ class App extends Component {
             <div className="App">
                 <div className="App-title">Countdown to {this.state.deadline}</div>
                 <Clock deadline={this.state.deadline}/>
-                <input type="text" 
-                        placeholder="New Date"
-                        onChange={event=> this.setState({newDeadline: event.target.value})}/>
-                <button onClick={() => this.changeDeadline()}>Submit</button>
+                <Form inline>
+                    <FormControl
+                            className="Deadline-input" 
+                            placeholder="New Date" 
+                            onChange={event=> this.setState({newDeadline: event.target.value})}/>
+                    <Button onClick={() => this.changeDeadline()}>Submit</Button>
+                </Form>
             </div>
         )
     }

diff --git a/src/Clock.jsx b/src/Clock.jsx
@@ -21,23 +21,29 @@ class Clock extends Component {
         setInterval(()=> this.getTimeUntil(this.props.deadline), 1000)
     }
 
+    leading0(num){
+        return num < 10 ? '0' + num : num; 
+
+    }
+
     getTimeUntil(deadline) {
         const time = Date.parse(deadline) - Date.parse(new Date()); 
-        console.log('time', time); 
+
         const days = Math.floor(time/(1000*60*60*24)); 
         const hours = Math.floor((time/(1000*60*60))%24); 
         const minutes = Math.floor((time/1000/60)%60); 
         const seconds = Math.floor((time/1000)%60); 
 
         this.setState({days, hours, minutes, seconds}); 
     }
+
     render() {
         return (
             <div>
-                <div className="Clock-days">{this.state.days} Days</div>
-                <div className="Clock-hours">{this.state.hours} hours</div>
-                <div className="Clock-minutes">{this.state.minutes} minutes</div>
-                <div className="Clock-seconds">{this.state.seconds} seconds</div>
+                <div className="Clock-days">{this.leading0(this.state.days)} Days</div>
+                <div className="Clock-hours">{this.leading0(this.state.hours)} hours</div>
+                <div className="Clock-minutes">{this.leading0(this.state.minutes)} minutes</div>
+                <div className="Clock-seconds">{this.leading0(this.state.seconds)} seconds</div>
             </div>
         )
     }