A clock but displayed as words

[ApacheTech]

Sorry. Stupid rookie mistake.

js/scripts.js:

function isPlural(n, s) { if (n > 1) { s += 's'; } return s; }

function dateToString() {
    var aDates = ["", "first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth",
                  "ninth", "tenth", "eleventh", "twelfth", "thirteenth", "fourteenth", "fifteenth",
                  "sixteenth", "seventeenth", "eighteenth", "nineteenth", "twentieth", "twenty-first",
                  "twenty-second", "twenty-third", "twenty-fourth", "twenty-fifth", "twenty-sixth",
                  "twenty-seventh", "twenty-eighth", "twenty-ninth", "thirtieth", "thirty-first"];
    var aMonths = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
    var dDate = new Date();

    var iDate = dDate.getDate();
    var iMonth = dDate.getMonth();
    var iYear = dDate.getFullYear();

    var sDate = '<span class="emphasis">' + aDates[iDate] + '</span>' + '<br />' + '<span class="basic">' + ' of ' + '</span>' + '<span class="emphasis">' + aMonths[iMonth] + '</span>' + '<span class="basic">' + iYear + '</span>'

    return sDate;
}

function timeToString() {

    var aNumbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty one', 'twenty two', 'twenty three', 'twenty four', 'twenty five', 'twenty six ', 'twenty seven', 'twenty eight', 'twenty nine', 'thirty'];
    var dTime = new Date();

    var iHours = dTime.getHours();
    var iMinutes = dTime.getMinutes();

    var sConj = ' past ';
    var sAmPm = 'in the morning';
    var sOClock = '  ';   //default

    if (iMinutes >= 30) {
        iMinutes = 60 - (minutes);
        sConj = ' to ';
        iHours++;
    }
    if (iMinutes < 1 || iMinutes > 59) {
        sOClock = " o'clock ";
    }

    /**
    * Morning: Midnight to Midday 
    * Afternoon: Midday to 6PM      
    * Evening: 6PM to 9PM         
    * Night: 9PM to Midnight    
    */
    if (iHours > 12) {
        iHours -= 12;
        sAmPm = 'in the afternoon';
        if (iHours >= 6) {
            sAmPm = 'in the evening';
            if (iHours >= 9) {
                sAmPm = 'at night';
            }
        }
    } else if (iHours == 12) {
        sAmPm = 'in the morning';
    } else if (iHours == 0) {
        iHours = 12;
    }

    var sTime = function () {
        var s = '';
        if (!iMinutes == 0) {
            s += '<p><span class="emphasis">' + aNumbers[iMinutes - 1] + ' ' + '</span>' + '<span class="basic">' + isPlural(iMinutes, 'minute') + ' </br> ' + sConj + '</span>' + ' ';
        }
        s += '<span class="emphasis">' + aNumbers[iHours - 1] + sOClock + '</span>';
        return s;
    }
    return sTime;
}

$(document).ready(function () {

    $("#timeDiv").html(timeToString());
    $("#dateDiv").html(dateToString());

    setInterval(function () {
        $("#timeDiv").html(timeToString());
        $("#dateDiv").html(dateToString());
    }, 10000);
}); 

[ukstormer]

Found a bug, works from 0 to 29 minutes but then locks on 29, doing an F5 refresh loses the date and time, once the time gets to O'clock the clock and date re-appear again until 29.

Don't know if this was a test for me 'ApacheTech' to make sure I am paying attention and learning but looked through the code and sorted it out, the error is as follows

if (iMinutes >= 30) {
        iMinutes = 60 - (minutes);
        sConj = ' to ';
        iHours++; 

Should read

if (iMinutes >= 30) {
        iMinutes = 60 - (iMinutes);
        sConj = ' to ';
        iHours++; 

Will keep an eye on it over the next few hours but pretty sure it should be OK now.

[ajfmrf]

Okay,so what is the whole code look like now.After all adjustments?

I am just curious lol

[ukstormer]

OK, been up and running now with no apparent bugs, below are the final scripts, the only changes I have made are I downloaded the jquery.min.js and re referenced it in the HTML file and you will have to add your own image at 1024x768.

A big thank you to 'ApacheTech' for all your help and to others that have contributed along the way on this thread and the other thread 'date to words'.

Index.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/scripts.js" type="text/javascript"></script>
    <link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="timeDiv"></div>
    <div id="dateDiv"></div>
</body>
</html> 

Scripts.js

function isPlural(n, s) { if (n > 1) { s += 's'; } return s; }

function dateToString() {
    var aDates = ["", "first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth",
                  "ninth", "tenth", "eleventh", "twelfth", "thirteenth", "fourteenth", "fifteenth",
                  "sixteenth", "seventeenth", "eighteenth", "nineteenth", "twentieth", "twenty-first",
                  "twenty-second", "twenty-third", "twenty-fourth", "twenty-fifth", "twenty-sixth",
                  "twenty-seventh", "twenty-eighth", "twenty-ninth", "thirtieth", "thirty-first"];
    var aMonths = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
    var dDate = new Date();

    var iDate = dDate.getDate();
    var iMonth = dDate.getMonth();
    var iYear = dDate.getFullYear();

    var sDate = '<span class="emphasis">' + aDates[iDate] + '</span>' + '<br />' + '<span class="basic">' + ' of ' + '</span>' + '<span class="emphasis">' + aMonths[iMonth] + '</span>' + '<span class="basic">' + iYear + '</span>'

    return sDate;
}

function timeToString() {

    var aNumbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty one', 'twenty two', 'twenty three', 'twenty four', 'twenty five', 'twenty six ', 'twenty seven', 'twenty eight', 'twenty nine', 'thirty'];
    var dTime = new Date();

    var iHours = dTime.getHours();
    var iMinutes = dTime.getMinutes();

    var sConj = ' past ';
    var sAmPm = 'in the morning';
    var sOClock = '  ';   //default

    if (iMinutes >= 30) {
        iMinutes = 60 - (iMinutes);
        sConj = ' to ';
        iHours++;
    }
    if (iMinutes < 1 || iMinutes > 59) {
        sOClock = " o'clock ";
    }

    /**
    * Morning: Midnight to Midday 
    * Afternoon: Midday to 6PM      
    * Evening: 6PM to 9PM         
    * Night: 9PM to Midnight    
    */
    if (iHours > 12) {
        iHours -= 12;
        sAmPm = 'in the afternoon';
        if (iHours >= 6) {
            sAmPm = 'in the evening';
            if (iHours >= 9) {
                sAmPm = 'at night';
            }
        }
    } else if (iHours == 12) {
        sAmPm = 'in the morning';
    } else if (iHours == 0) {
        iHours = 12;
    }

    var sTime = function () {
        var s = '';
        if (!iMinutes == 0) {
            s += '<p><span class="emphasis">' + aNumbers[iMinutes - 1] + ' ' + '</span>' + '<span class="basic">' + isPlural(iMinutes, 'minute') + ' </br> ' + sConj + '</span>' + ' ';
        }
        s += '<span class="emphasis">' + aNumbers[iHours - 1] + sOClock + '</span>';
        return s;
    }
    return sTime;
}

$(document).ready(function () {

    $("#timeDiv").html(timeToString());
    $("#dateDiv").html(dateToString());

    setInterval(function () {
        $("#timeDiv").html(timeToString());
        $("#dateDiv").html(dateToString());
    },1000);
}); 

Styles.css

/** 
* Page Styles 
*/ 

*, html { 
    padding: 0px; 
    margin: 0px; 
} 

body 
{ 
    background-image: url(../img/image.jpg);  
    background-repeat: no-repeat;      
    background-position: left top;   
}  

/** 
* Date and Time Syles 
*/ 

#timeDiv 
{ 
    position: absolute; 
    left: 5px; 
    top: 610px;   
}  

#dateDiv 
{ 
    position: absolute; 
    left: 610px; 
    top: 610px; 
}  

span.basic  
{ 
    font-family: "LubalGraph Bd BT";  
    color: #EA3030; 
    font-weight :normal; 
    font-size: 30px; 
} 
       
span.emphasis  
{ 
    font-family: "LubalGraph Bd BT";  
    color: #EA3030; 
    font-size: 60px; 
} 

/** 
* Other CSS Here 
*/ 

As this project is aimed at creating an unusual wall clock and at present has a static single image I can see that the next step would be to make the background a photo gallery but I am now going to make the frame for the screen and components.

Any other ideas would be welcomed.

Enjoy

[bernie1227]

sounds like an upclass electronic picture frame