How to Customize the Countdown Display: Show Minutes and Seconds Separately

This guide will walk you through the steps to modify the default template of the Countdown Joomla! Module to display time in the format "XX Minutes and YY Seconds" instead of the default "XX:YY Minutes." By making these changes, you can achieve a more user-friendly and precise countdown display.

Steps to Fix the Countdown Display:

Locate the Override Directory:
Navigate to your Joomla template override directory where the module's override files are located. The path is typically:
```
<code>templates/CURRENT_TEMPLATE_NAME/html/mod_countdown/
```
Edit the Default Template File:
Open the default.php file in the above directory. If it does not exist, create an override by copying the original file from:
```
<code>modules/mod_countdown/tmpl/default.php
```
Paste it into the override directory:
```
<code>templates/CURRENT_TEMPLATE_NAME/html/mod_countdown/default.php
```

Add or Replace the Code:

Modify the code in default.php to display minutes and seconds in the desired format. Replace or update the relevant part of the file with the following code snippet:

<?php
use Joomla\CMS\Language\Text;

defined('_JEXEC') or die('Restricted access');

// CSS Style from File
$document->addStyleSheet($host . 'modules/mod_countdown/tmpl/default.css');

// CSS Style from File for HTML template overrides
// $document->addStyleSheet($host.'templates/CURRENT_TEMPLATE_NAME/html/mod_countdown/default.css');

// Add Style Declaration
$css_styles = '';

$document->addStyleDeclaration($css_styles);

if (isset($_SERVER['HTTP_USER_AGENT']) && preg_match("/(?i)msie|trident|edge/", $_SERVER['HTTP_USER_AGENT'])) {
    // Browsers IE 8 and below
} else {
    ?>
    <div id='cntdwn<?php echo $module->id ?>' class='mod_countdown'></div>
    <?php
}
?>

<script language="JavaScript" type="text/javascript">
(function (moduleId) {
    var targetDate = "<?php echo $dateformat; ?>";
    var countActive = true;
    var countStepper = -1;

    var frontText = "<?php echo $fronttext; ?>";
    var endText = "<?php echo $endtext; ?>";
    var finishMessage = "<?php echo $finish; ?>";

    function calcAge(secs, num1, num2, addLeadingZero = false) {
        var s = ((Math.floor(secs / num1)) % num2).toString();
        if (addLeadingZero && s.length < 2) {
            s = "0" + s;
        }
        return "<b>" + s + "</b>";
    }

    function getUnitText(value, singular, plural) {
        return value === 1 ? singular : plural;
    }

    function countBack(secs) {
        if (secs < 0) {
            document.getElementById("cntdwn" + moduleId).innerHTML = finishMessage;
            return;
        }

        var years = Math.floor(secs / (86400 * 365)); // Calculate years
        var days = Math.floor((secs % (86400 * 365)) / 86400); // Remaining days after years
        var hours = Math.floor((secs % 86400) / 3600);
        var minutes = Math.floor((secs % 3600) / 60);
        var seconds = secs % 60;

        var displayStr = frontText + " "; // Start the display string with fronttext

        // Add years if they exist
        if (years > 0) {
            displayStr += `<b>${years}</b> ` + getUnitText(years, "<?php echo Text::_('MOD_COUNTDOWN_YEAR'); ?>", "<?php echo Text::_('MOD_COUNTDOWN_YEARS'); ?>");
        }

        // Add days only if they exist
        if (days > 0) {
            if (years > 0) {
                displayStr += ", "; // Add a comma if years are also displayed
            }
            displayStr += `<b>${days}</b> ` + getUnitText(days, "<?php echo Text::_('MOD_COUNTDOWN_DAY'); ?>", "<?php echo Text::_('MOD_COUNTDOWN_DAYS'); ?>");
        }

        // Add hours if they exist
        if (hours > 0) {
            if (years > 0 || days > 0) {
                displayStr += ", "; // Add a comma if years or days are also displayed
            }
            displayStr += `<b>${hours}</b> ` + getUnitText(hours, "<?php echo Text::_('MOD_COUNTDOWN_HOUR'); ?>", "<?php echo Text::_('MOD_COUNTDOWN_HOURS'); ?>");
        }

        // minutes
        displayStr += `, <b>${minutes}</b> ` + getUnitText(minutes, "<?php echo Text::_('Minute'); ?>", "<?php echo Text::_('Minutes'); ?>");

        // seconds
        displayStr += ` and <b>${seconds}</b> ` + getUnitText(seconds, "<?php echo Text::_('Second'); ?>", "<?php echo Text::_('Seconds'); ?>");

        // Add endText at the end
        displayStr += endText;

        // Update the countdown display
        document.getElementById("cntdwn" + moduleId).innerHTML = displayStr;

        // Continue the countdown if countActive is true
        if (countActive) {
            setTimeout(function () {
                countBack(secs + countStepper);
            }, 1000); // Set timeout to update every second
        }
    }

    if (typeof targetDate === "undefined")
        targetDate = "12/31/2020 5:00 AM";
    if (typeof countStepper !== "number")
        countStepper = -1;

    var dthen = new Date(targetDate.replace(/-/g, "/")); // Safari-compatible date format
    var dnow = new Date();
    var gsecs;
    if (countStepper > 0)
        gsecs = Math.floor((dnow - dthen) / 1000);
    else
        gsecs = Math.floor((dthen - dnow) / 1000);
    countBack(gsecs);
})('<?php echo $module->id ?>'); // Immediately invoke the function with the module ID
</script>

Save and Test:

Save your changes and refresh your site to verify that the countdown now displays in the format "XX Minutes and YY Seconds."