JavaScript Countdown Timer

My girlfriend and I are planning a trip to Montreal in a couple weeks and I’m out of town until then. I thought I would create this for her. In doing so I was able to practise using the Date() and Math() objects. The code is below,

 

var countdown = function () {

var future = new Date(2014, 4, 8, 13, 0, 0, 0);  //trip date
var now = new Date(); //time right now
var difference = future – now; 

var days = parseInt(difference / (86400000));
var hours = Math.floor((difference – (days * 86400000 ))/3600000);
var minutes = Math.floor((difference/1000 – (days * 86400 ) – (hours *3600 ))/60);
var secs = Math.floor((difference/1000 – (days * 86400 ) – (hours *3600 ) – (minutes*60)));

 

//add a zero is only one digit appears

if (days < 10) {
days = “0” + days;
}
if (hours < 10) {
hours = “0” + hours;
}
if (minutes < 10) {
minutes = “0” + minutes;
}
if (secs < 10) {
secs = “0” + secs;
}

document.getElementById(“timer”).firstChild.nodeValue = days + ” : ” + hours + ” : ” + minutes + ” : ” + secs; //used to display countdown on page

}

var playKiss = function() {
document.getElementById(“playsound”).play();
}

document.getElementById(“heart”).addEventListener(“click”, playKiss, false); // display when page loads

window.addEventListener(“load”, setInterval(countdown, 10), false);

 

The code can be cleaned up but it gets the job done. She liked it. 

Take Your Pick

Here’s something I whipped up the last couple of days. This is made up of three pages – make picks, location and profile page. The picks page using drag and drop HTML5 so you can pick a winner. When you choose a team some audio of fans cheering plays which I thought was pretty funny. There is also a form that lets you choose three players. Press update picks and this data is stored locally. You can view the picks by clicking on the view picks button which takes you to the profile page. 

The profile page is a dashboard showing various leaderboard and picks. i added some SVG and canvas elements for effect. 

The map page is used with Mapbox. I’m still getting used to the API but right now I have geolocation set up so the user can see their position on the map. When a user clicks of a pin information on that pin appears. I added some JS to the buttons on the left hand side. When you click on the buttons the corresponding sports games appear. After added overflow to this section you can scroll through the options. 

The idea behind this is that I’d like to see what bars are playing what games at any given time. Why doesn’t that exist yet?!

Learn Thinking and The Scientific Method

This is taken from the Lean Startup. In hard to understand some of the terms out of context but the jist is important. 

This is the pattern: poor quantitative results force us to declare failure and create the motivation, context, and space for more qualitative research. These investigations produce new ideas – new hypotheses – to be tested, leading to a possible pivot. Each pivot unlocks new opportunities for further experimentation, and the cycle repeats. Each time we repeat this simple rhythm: establish the baseline, turn the engine, and make a decision to pivot or persevere. 

 

Hypotheses – Create Test – Experiment – Collect/Analyze Data – Rinse and Repeat

Genchi Gembutsu

The importance of basing strategic decisions of firsthand understanding of customers is on the core principles that underlies the Toyota Production System. At Toyota, this goes by the Japanese term genchi gembutsu, which is one of the most important phrases in the lean manufacturing vocabulary. In English, it is usually translated as a directive to “go and see for yourself” so that business decisions can be based of deep first hand knowledge. Jeffrey Liker, who has extensively documented the “Toyota Way,” explains is this way:

In my Toyota interviews, when asked what distinguishes the Toyota Way from other management approaches, the most common first response was genchi gembustsu – whether I was in manufacturing, product development, sales, distribution, or public affairs. You cannot be sure you really understand any part of any business problem unless you go and see for yourself firsthand. It is unacceptable to take anything for granted or to rely on the reports of others. 

Poka Dota

This page demonstrates some of the things I’ve been working on using the HTML5 API. Keeping with the poka dota theme I added a canvas directly under the navigation which creates blue circles when the user’s mouse passes over the canvas area. 

I used the drag and drop API to show an interesting way you could have the user choose which sock they would like to by. You can drag a sock over to the shopping cart and a cash register sound rings. 

I used SVG elements to show how a user could create their own customized sock. Using some simple JS a user can change the colours on the SVG sock. 

It’s interesting but their are some issues when using HTML5. The canvas has to have a fixed width which makes it difficult to create a responsive design. Drag and drop don’t work on phones( until it does I probably won’t use it again). If’s hard to draw using SVGs. I would use everything sparingly but each effect does make the user experience more enjoyable. 

The Lean Startup and House M.D.

Recently I’ve been reading the lean startup written by Eric Ries. It discusses how today’s entrepreneurs use continuous innovation to create radically successful businesses. The book has many real world examples of applying lean practises in management. His most interesting example being his work at IMVU. His team was trying to predict what the customers wanted before delivering their product to market. The product was a complete failure but this process taught them the true needs of their costumers. They were able to take what they learned and create a product that a potential customer would actually use and enjoy. This lead to their success.

I see parallels with this methodology and House M.D. This is a great show on Netflix. House uses his genius to diagnose rare and lethal diseases. In every episode his initial diagnosis is always wrong and the patient has a dramatic hit to their health. Just when you think House is a complete failure he uses what he has learned from the failed test and comes up with a new diagnosis. They do this process over and over until they can cure the patient. It seems to me that a start up is much like curing a patient. Often our first diagnosis is always wrong but what we learn for this is necessary when trying to find the right solution.  

Rails Pub Nite

This is a link to an awesome Rails meet up in Toronto. I haven’t been yet but Pete Forde says it’s awesome so I’ll definitely check it out next month. This month I’ll be traveling. http://peteforde.com/

I think its a great idea to host an event like this at a Pub. In my experience alcohol helps the creative process. It allows us to break down the barriers and think outside the box.