diff --git a/app/app.js b/app/app.js
index fd7fb9a..88b3426 100644
--- a/app/app.js
+++ b/app/app.js
@@ -6,18 +6,10 @@ var $$ = document.querySelectorAll.bind(document);
var App = function($el){
this.$el = $el;
this.load();
-
- this.$el.addEventListener(
- 'submit', this.submit.bind(this)
- );
-
- if (this.dob) {
- this.renderAgeLoop();
- } else {
- this.renderChoose();
- }
+ this.renderAgeLoop();
};
+
App.fn = App.prototype;
App.fn.load = function(){
@@ -27,38 +19,19 @@ App.fn.load = function(){
this.dob = new Date(parseInt(value));
};
-App.fn.save = function(){
- if (this.dob)
- localStorage.dob = this.dob.getTime();
-};
-
-App.fn.submit = function(e){
- e.preventDefault();
-
- var input = this.$$('input')[0];
- if ( !input.valueAsDate ) return;
-
- this.dob = input.valueAsDate;
- this.save();
- this.renderAgeLoop();
-};
-
-App.fn.renderChoose = function(){
- this.html(this.view('dob')());
-};
-
App.fn.renderAgeLoop = function(){
this.interval = setInterval(this.renderAge.bind(this), 100);
};
App.fn.renderAge = function(){
- var now = new Date
+ var now = new Date;
var duration = now - this.dob;
- var years = duration / 31556900000;
+ var seconds = duration / 1000;
- var majorMinor = years.toFixed(9).toString().split('.');
+ var majorMinor = seconds.toFixed(4).toString().split('.');
requestAnimationFrame(function(){
+ // console.log(this.view('age'), "<= thisviewage");
this.html(this.view('age')({
year: majorMinor[0],
milliseconds: majorMinor[1]
@@ -66,19 +39,20 @@ App.fn.renderAge = function(){
}.bind(this));
};
-App.fn.$$ = function(sel){
- return this.$el.querySelectorAll(sel);
-};
-
App.fn.html = function(html){
+ // console.log(html);
this.$el.innerHTML = html;
};
App.fn.view = function(name){
+
var $el = $(name + '-template');
+ // console.log($el.innerHTML, "<= $el.innerHTML");
return Handlebars.compile($el.innerHTML);
};
-window.app = new App($('app'))
-
+app = new App($('secCount'));
+console.log(app, "<=app at bottom");
+// console.log(app);
+app.dob = new Date;
})();
diff --git a/css/style.css b/css/style.css
index 550c999..e69de29 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,87 +0,0 @@
-*,
-*:before,
-*:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-body,
-html {
- margin: 0;
- padding: 0;
- height: 100%;
-}
-
-body {
- -moz-osx-font-smoothing: grayscale;
- -webkit-align-items: center;
- -webkit-flex-direction: column;
- -webkit-font-smoothing: antialiased;
- -webkit-justify-content: center;
-}
-
-body, input {
- display: -webkit-flex;
- font-family: 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-.age-label {
- color: #B0B5B9;
- font-size: 1.2rem;
- line-height: 1;
- margin: 0 0 0 2px;
-}
-
-.count {
- color: #494949;
- margin: 0;
- font-size: 6rem;
- line-height: 1;
- font-weight: 600;
-}
-
-.count sup {
- font-size: 2.4rem;
- margin-left: 7px;
-}
-
-label {
- display: block;
-}
-
-input, button {
- padding: 0.375rem 0.75rem;
- font-size: 1.5rem;
- appearance: none;
- -webkit-appearance: none;
-}
-
-input {
- margin-right: 0.5rem;
- box-sizing: border-box;
- border-width: 1px;
- border-style: solid;
- border-radius: 0.25rem;
- border-color: #CCC;
- background-color: #FFF;
-}
-
-button {
- outline: none;
- display: block;
- cursor: pointer;
- color: #FFF;
- border: none;
- border-radius: 0.25rem;
- background-color: #0BE;
-}
-
-footer {
- padding-top: 0.5rem;
- display: -webkit-flex;
- -webkit-flex-direction: row;
- -webkit-justify-content: center;
-}
diff --git a/dashboard.html b/dashboard.html
index c35b6f7..ae12574 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -1,30 +1,14 @@
+
-
-
- New Tab
-
-
-
-
-
-
-
+