diff --git a/app/app.js b/app/app.js index fd7fb9a..f2c1f4b 100644 --- a/app/app.js +++ b/app/app.js @@ -21,15 +21,19 @@ var App = function($el){ App.fn = App.prototype; App.fn.load = function(){ - var value; - - if (value = localStorage.dob) - this.dob = new Date(parseInt(value)); + var val = localStorage.dob; + if (val != 'null'){ + this.dob = new Date(parseInt(val)); + } }; App.fn.save = function(){ if (this.dob) localStorage.dob = this.dob.getTime(); + if(this.textColor) + localStorage.textColor = this.textColor; + if(this.backgroundColor) + localStorage.backgroundColor = this.backgroundColor; }; App.fn.submit = function(e){ @@ -39,8 +43,15 @@ App.fn.submit = function(e){ if ( !input.valueAsDate ) return; this.dob = input.valueAsDate; + this.backgroundColor = $('backgroundPicker').value; + this.textColor = $('textPicker').value; this.save(); + + document.body.style.backgroundColor = this.backgroundColor; + document.body.style.color = this.textColor; + this.renderAgeLoop(); + location.reload(); }; App.fn.renderChoose = function(){ @@ -49,6 +60,8 @@ App.fn.renderChoose = function(){ App.fn.renderAgeLoop = function(){ this.interval = setInterval(this.renderAge.bind(this), 100); + document.body.style.backgroundColor = localStorage.backgroundColor; + document.body.style.color = localStorage.textColor; }; App.fn.renderAge = function(){ @@ -63,6 +76,16 @@ App.fn.renderAge = function(){ year: majorMinor[0], milliseconds: majorMinor[1] })); + document.getElementById('reset').onclick = function(){ + this.dob = null; + this.textColor = null; + this.backgroundColor = null; + localStorage.backgroundColor = null; + localStorage.textColor = null; + localStorage.dob = null; + location.reload(); + }; + document.getElementById('reset').style.opacity = '1'; }.bind(this)); }; diff --git a/css/style.css b/css/style.css index 550c999..f1d4f15 100644 --- a/css/style.css +++ b/css/style.css @@ -18,7 +18,6 @@ html { body { -moz-osx-font-smoothing: grayscale; -webkit-align-items: center; - -webkit-flex-direction: column; -webkit-font-smoothing: antialiased; -webkit-justify-content: center; } @@ -32,11 +31,11 @@ body, input { color: #B0B5B9; font-size: 1.2rem; line-height: 1; - margin: 0 0 0 2px; + margin: 0 0 1 2px; + text-align: center; } .count { - color: #494949; margin: 0; font-size: 6rem; line-height: 1; @@ -53,22 +52,27 @@ label { } input, button { - padding: 0.375rem 0.75rem; + /*padding: 0.375rem 0.75rem;*/ font-size: 1.5rem; appearance: none; -webkit-appearance: none; } input { - margin-right: 0.5rem; + /*margin-right: 0.5rem;*/ box-sizing: border-box; border-width: 1px; border-style: solid; border-radius: 0.25rem; border-color: #CCC; background-color: #FFF; + margin-bottom: 10%; +} +input[type='color']{ + width:100%; + height:50px; + border-width: 0px; } - button { outline: none; display: block; @@ -81,7 +85,15 @@ button { footer { padding-top: 0.5rem; - display: -webkit-flex; - -webkit-flex-direction: row; - -webkit-justify-content: center; } + +#reset{ + position: fixed !important; + bottom: 0; + font-size: 12px; + cursor: pointer; + opacity: 0; +} +#reset:hover{ + text-decoration: underline; +} \ No newline at end of file diff --git a/dashboard.html b/dashboard.html index c35b6f7..d3b1502 100644 --- a/dashboard.html +++ b/dashboard.html @@ -18,7 +18,11 @@

When were you born?

@@ -30,6 +34,7 @@

{{year}}.{{milliseconds}}

+

Reset