Custom colors and reset button

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));
 };
 

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;
+}

dashboard.html

@@ -18,7 +18,11 @@ <h1 id="dob" class="age-label">When were you born?</h1>
 
     <footer>
       <input type="date" name="dob" id="dob">
-      <button type="submit">Motivate</button>
+      <h1 class = 'age-label'>Background Color</h1>
+      <input class = 'picker' type = 'color' id = "backgroundPicker">
+      <h1 class = 'age-label'>Age Color</h1>
+      <input class = 'picker' type = 'color' id = "textPicker"> 
+      <button type="submit" style = 'margin-left: 28%;'>Motivate</button>
     </footer>
   <form>
 </script>
@@ -30,6 +34,7 @@ <h2 class="count">{{year}}<sup>.{{milliseconds}}</sup></h2>
 
 <script src="js/handlebars.js"></script>
 <script src="app/app.js"></script>
+<p id = "reset">Reset</p>
 
 </body>
 </html>