Question

So I created this clock which displays Date and Time.
Is there a more elegant way to write this code, because for some reason it looks pretty messy, even though it does what i want it to do.

Thanks

Here is the code:
http://jsfiddle.net/vkramer/X4PMg/

Answer 1

Yes. Let’s ignore the nearly-minifed CSS for the moment. JavaScript has array literals. You should use those. So this:

var showClock = function(){  
   var now = new Date();
   var hours = now.getHours();  
   var minutes = now.getMinutes();  
   var seconds = now.getSeconds();

   if ( hours < 10 ){
    hours = "0" + hours;
   }
   if ( minutes < 10 ){
    minutes = "0" + minutes;
   }
   if ( seconds < 10 ){
    seconds = "0" + seconds;
   }
   document.getElementById("hours").innerHTML = hours;
   document.getElementById("minutes").innerHTML = minutes;
   document.getElementById("seconds").innerHTML = seconds;


   setTimeout("showClock();", 100);
};  

var showDate = function(){
    var now = new Date();  
    var d = now.getDay();
    var m = now.getMonth();
    var y = now.getFullYear();
    var dayOfMonth = now.getDate();

    var day_name = new Array(7);
        day_name[0]="Sunday"
        day_name[1]="Monday"
        day_name[2]="Tuesday"
        day_name[3]="Wednesday"
        day_name[4]="Thursday"
        day_name[5]="Friday"
        day_name[6]="Saturday"

    var month_name = new Array(11);
        month_name[0] = "January"
        month_name[1] = "February"
        month_name[2] = "March"
        month_name[3] = "April"
        month_name[4] = "May"
        month_name[5] = "June"
        month_name[6] = "July"
        month_name[7] = "August"
        month_name[8] = "September"
        month_name[9] = "October"
        month_name[10] = "November"
        month_name[11] = "December"



   document.getElementById("day").innerHTML = day_name[now.getDay()];
   document.getElementById("month").innerHTML = month_name[now.getMonth()];
   document.getElementById("year").innerHTML = y;
   document.getElementById("dayOf").innerHTML = dayOfMonth;

}
showClock();
showDate();

Becomes this:

var showClock = function() {  
   var now = new Date();
   var hours = now.getHours();  
   var minutes = now.getMinutes();  
   var seconds = now.getSeconds();

   if ( hours < 10 ) {
       hours = "0" + hours;
   }
   if ( minutes < 10 ) {
       minutes = "0" + minutes;
   }
   if ( seconds < 10 ){
       seconds = "0" + seconds;
   }

   document.getElementById("hours").innerHTML = hours;
   document.getElementById("minutes").innerHTML = minutes;
   document.getElementById("seconds").innerHTML = seconds;

   setTimeout("showClock();", 100);
};  

var showDate = function() {
    var now = new Date();  
    var d = now.getDay();
    var m = now.getMonth();
    var y = now.getFullYear();
    var dayOfMonth = now.getDate();

    var day_name = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    var month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];


   document.getElementById("day").innerHTML = day_name[now.getDay()];
   document.getElementById("month").innerHTML = month_name[now.getMonth()];
   document.getElementById("year").innerHTML = y;
   document.getElementById("dayOf").innerHTML = dayOfMonth;
}

showClock();
showDate();

Then, never pass a string to setTimeout. Don’t make variables and not use them.

function showClock() {  
   var now = new Date();
   var hours = now.getHours();  
   var minutes = now.getMinutes();  
   var seconds = now.getSeconds();

   if(hours < 10) {
       hours = "0" + hours;
   }

   if(minutes < 10) {
       minutes = "0" + minutes;
   }

   if(seconds < 10) {
       seconds = "0" + seconds;
   }

   document.getElementById("hours").innerHTML = hours;
   document.getElementById("minutes").innerHTML = minutes;
   document.getElementById("seconds").innerHTML = seconds;

   setTimeout(showClock, 100);
} 

function showDate() {
    var now = new Date();

    var day_name = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var month_name = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

   document.getElementById("day").innerHTML = day_name[now.getDay()];
   document.getElementById("month").innerHTML = month_name[now.getMonth()];
   document.getElementById("year").innerHTML = now.getFullYear();
   document.getElementById("dayOf").innerHTML = now.getDate();
}

showClock();
showDate();

Other stuff, too, but this makes it acceptable. Also, stop pretending to use HTML5. A <section> is completely wrong there, you should just use a <div>.