From 4dc0625c39addf11caba2b546e90d973f6415e0b Mon Sep 17 00:00:00 2001 From: Liga Daine Date: Mon, 17 Sep 2018 00:21:45 +0200 Subject: [PATCH] Finished app --- package-lock.json | 117 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- public/index.html | 1 + src/App.css | 5 ++ src/App.jsx | 12 +++-- src/Clock.jsx | 16 +++++-- 6 files changed, 144 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 18052c1..34e9493 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,22 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/runtime-corejs2": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.0.0.tgz", + "integrity": "sha512-Yww0jXgolNtkhcK+Txo5JN+DjBpNmmAtD7G99HOebhEjBzjnACG09Tip9C8lSOF6PrhA56OeJWeOZduNJaKxBA==", + "requires": { + "core-js": "2.5.7", + "regenerator-runtime": "0.12.1" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, "abab": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", @@ -2025,6 +2041,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -2876,6 +2897,11 @@ } } }, + "dom-helpers": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz", + "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg==" + }, "dom-serializer": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", @@ -5858,6 +5884,11 @@ "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz", "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=" }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8175,6 +8206,15 @@ "object-assign": "4.1.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "16.5.1", + "warning": "3.0.0" + } + }, "proxy-addr": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", @@ -8370,6 +8410,25 @@ "schedule": "0.4.0" } }, + "react-bootstrap": { + "version": "0.32.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz", + "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==", + "requires": { + "@babel/runtime-corejs2": "7.0.0", + "classnames": "2.2.6", + "dom-helpers": "3.3.1", + "invariant": "2.2.4", + "keycode": "2.2.0", + "prop-types": "15.6.2", + "prop-types-extra": "1.1.0", + "react-overlays": "0.8.3", + "react-prop-types": "0.4.0", + "react-transition-group": "2.4.0", + "uncontrollable": "5.1.0", + "warning": "3.0.0" + } + }, "react-dev-utils": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.2.tgz", @@ -8411,6 +8470,37 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz", "integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==" }, + "react-is": { + "version": "16.5.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.1.tgz", + "integrity": "sha512-Q7S+9y2lJA9oJCMqLt045f+kLRhsMLA1wW2DAGXA6b7wcTQRHnUDMc5oR49tn0Z4swvnfV+/t8iZFXY74IQmpA==" + }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz", + "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==", + "requires": { + "classnames": "2.2.6", + "dom-helpers": "3.3.1", + "prop-types": "15.6.2", + "prop-types-extra": "1.1.0", + "react-transition-group": "2.4.0", + "warning": "3.0.0" + } + }, + "react-prop-types": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz", + "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=", + "requires": { + "warning": "3.0.0" + } + }, "react-scripts": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.5.tgz", @@ -8457,6 +8547,17 @@ "whatwg-fetch": "2.0.3" } }, + "react-transition-group": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz", + "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==", + "requires": { + "dom-helpers": "3.3.1", + "loose-envify": "1.4.0", + "prop-types": "15.6.2", + "react-lifecycles-compat": "3.0.4" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -10159,6 +10260,14 @@ } } }, + "uncontrollable": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz", + "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==", + "requires": { + "invariant": "2.2.4" + } + }, "union-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", @@ -10443,6 +10552,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.4.0" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index 62f8bf9..41337bc 100644 --- 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" } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index ed0ebaf..c3ce2d0 100644 --- 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`. --> + React App diff --git a/src/App.css b/src/App.css index 5d45cef..a1c4b02 100644 --- a/src/App.css +++ b/src/App.css @@ -12,3 +12,8 @@ display: inline; margin: 10px; } + +.Deadline-input { + font-size: 25px; + margin: 5px; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 2aec4f1..a84b556 100644 --- 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 {
Countdown to {this.state.deadline}
- this.setState({newDeadline: event.target.value})}/> - +
+ this.setState({newDeadline: event.target.value})}/> + +
) } diff --git a/src/Clock.jsx b/src/Clock.jsx index cd6471e..45304e3 100644 --- a/src/Clock.jsx +++ b/src/Clock.jsx @@ -21,9 +21,14 @@ 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); @@ -31,13 +36,14 @@ class Clock extends Component { this.setState({days, hours, minutes, seconds}); } + render() { return (
-
{this.state.days} Days
-
{this.state.hours} hours
-
{this.state.minutes} minutes
-
{this.state.seconds} seconds
+
{this.leading0(this.state.days)} Days
+
{this.leading0(this.state.hours)} hours
+
{this.leading0(this.state.minutes)} minutes
+
{this.leading0(this.state.seconds)} seconds
) }