Singular VS Plural Words with Javascript?

Question

This is the code I'm using for a Javascript countdown timer:

<script type="text/javascript">
function ShowTimes1() {
    var now = new Date();
    if (now.getHours() < 6) {
        newVar = 5
    } else if (now.getHours() < 12) {
        newVar = 11
    } else if (now.getHours() < 18) {
        newVar = 17
    } else {
        newVar = 23
    }
    var hrs = newVar - now.getHours();
    var mins = 59 - now.getMinutes();
    var secs = 59 - now.getSeconds();
    var str = '';
    str += '<b><a href="discount.php" style="text-decoration:none;cursor:default;"><span style="color:#FF9600;">Limited Time Offer!</span> <span style="color:#489FDC;">' + hrs + ' Hours ' + mins + ' Minutes ' + secs + ' Seconds</span></a></b>';
    document.getElementById('countdownToMidnight').innerHTML = str
}
var _cntDown;

function StopTimes() {
    clearInterval(_cntDown)
}
</script>

It works almost perfectly, except for one thing. It always shows "hours", "minutes", and "seconds" instead of the singular version when there is only 1. For example, I want it to show "1 second" instead of "1 seconds".

This is the specific part of the code that handles displaying that text:

'+hrs+' Hours '+mins+' Minutes '+secs+' Seconds

Is there any simple way to fix my code to make this happen?

Answer 1

Use Ternary operator to simplify your job.

Try,

'+ hrs +' Hour' + ((hrs>1)?'s':'') +mins+' Minute' + ((mins>1)?'s':'') +secs+' Second' + ((secs>1)?'s':'')

Full line code:

str += '<b><a href="discount.php" style="text-decoration:none;cursor:default;"><span style="color:#FF9600;">Limited Time Offer!</span> <span style="color:#489FDC;">'+ hrs +' Hour' + ((hrs>1)?'s':'') +mins+' Minute' + ((mins>1)?'s':'') +secs+' Second' + ((secs>1)?'s':'')+ ' Seconds</span></a></b>';

Answer 2

' + hrs + ' Hours ' + mins + ' Minutes ' + secs + ' Seconds to become

// ...
' + hrs + ' Hour' + (1===hrs) ? ' ' : 's ' 
 + mins + ' Minute' + (1===mins) ? ' ' : 's ' 
 + secs + ' Second' +  (1===secs) ? ' ' : 's' 
// ...

Answer 3

It's fine to use ternary operator for such trivial case. However it will not work for multiple languages and it will be very difficult to translate your app.

To address such use cases, I've implemented a small library that can be used to pluralize words in JavaScript. It transparently uses CLDR database for multiple locales, so it supports almost any language you would like to use. It's API is very minimalistic and integration is extremely simple. I've called it — Numerous .

Here's a small introductory article on it: « How to pluralize any word in different languages using JavaScript? ».

Feel free to use it in your project. I will also be glad to receive your feedback on it!