Date difference (Monad version) 2

Countdown between 2 given dates in days, hours, minutes, seconds in a monadic fashion /w input

by KooiInc MeHere

HTML

<script src="https://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<script src="https://www.nicon.nl/genericsvc/fiddle/dateinputhelper.js"></script>
    <div class="fold">Input key combinations
        <div>
            <p>Click in the input field and use arrow keys (up <b>&#9650;</b> / down <b>&#9660;</b>) to enter the current date.</p>
            <p>
                You can also enter a date manually using dd/mm/yyyy [hh:mm] or dd-mm-yyyy [hh:mm], 
                which subsequently will act as the starting date when you use the arrow keys to 
                manipulate it.
            </p>
            <p>Use the following key combinations to increment or decrement a date fragment value:</p>
            <ul>
                <li><b>&#9650;</b> or <b>&#9660;</b> date</li>
                <li>CTRL + <b>&#9650;</b> or <b>&#9660;</b>: month</li>
                <li>SHIFT + <b>&#9650;</b> or <b>&#9660;</b>: year</li>
                <li>ALT + <b>&#9650;</b> or <b>&#9660;</b>: hour</li>
                <li>CTRL + ALT + <b>&#9650;</b> or <b>&#9660;</b>: minutes</li>
            </ul>
            <p>Other key combinations:</p>
            <ul>
                <li>CTRL+INS : add current time</li>
                <li>CTRL+DEL : remove time</li>
                <li>ALT+INS : current date (overwrites current value)</li>
                <li>CTRL-ALT+INS : current date and time (overwrites)</li>
                <li>CTRL-1 : change date to first of the month of current date (overwrites)</li>
            </ul>
        </div>
    </div>
    <p>
        <input class="dth" /> <b class="q">Input a future time</b>
    </p>
    
    <button id="start">Start countdown</button>

    <button id="pause">Pause/Resume countdown</button>
    <button id="stopsound">Stop sound</button>
    <div id="showdates"></div>

CSS

#snd {
    display: none;
}

b.red {
    color: red;
}

div {
    margin-top: 0.8em;
}

div.fold:before {
    content: '\25B6';
    color: #000066;
    font-weight: bold;
    position: absolute;
    margin-left: -16px;
}

div.fold {
    cursor: pointer
}

div.fold div {
    display: none;
    cursor: default;
}

div.fold.open:before {
    content: '\25BC';
}

div.fold.open div {
    display: block;
}

b.q {cursor: pointer;}

b.q:after {
    content: 'i';
    border-radius: 50%;
    margin-left: 0.3em;
    padding: 0 0.5em;
    background-color: green;
    color: white;
    box-shadow: -2px 2px 5px #333;
}

JavaScript

/**
 * A countdown timer, using a monad for the date values.
 * Note: the Helper pseudo namespace is from the external resource.
 * It contains a few handy helpers to manipulate dates and log
 * stuff to the screen
 */
(function() {
    var dateInputField = document.querySelector('.dth');
    var Helper;
    load();

    function load() {
        if (!window.Helpers) {
            console.log('waiting for Helpers to be loaded ...');
            return setTimeout(load, 50);
        }
        Helper = window.Helpers;
        Helpers.logbottom = false;
        dateInputField.addEventListener('focus', dateTimeInputHelper.dtf.dateKeyHandler);
        Helpers.log = function(str) {
            Helpers.logClear();
            Helpers.printDirect(str);
        };
        Helpers.extendDate();
        var dtset = new Date().add('s', 30);
        dateInputField.value = dtset.format('dd-mm-yyyy hh:mi:ss');
        dateInputField.setAttribute('data-datevalue', dtset.format('yyyy/mm/dd hh:mi:ss'));
        document.querySelector('#start').addEventListener('click', doTime);
        document.querySelector('.fold').addEventListener('click', toggleInputHelpState);
        document.querySelector('.q').addEventListener('click', toggleInputHelpState);
    }

    function toggleInputHelpState(e) {
        var from = e.target || e.srcElement;
        if (/fold|q/i.test(from.className)) {
            var helpElement = document.querySelector('.fold');
            helpElement.className = /open/i.test(helpElement.className) ? 'fold' : 'fold open';
        }
        dateInputField.focus();
    }

    function doTime() {
        var sound = new Sound();
        var dtstr = dtStrings().EN;
        var timing = MONAD()
            .lift('log', monadlog2screen)
            .lift('show', showDiffFromNow)
            .lift('initline', showValFromNow)
            .lift('valid', checkValid, true);
        var current = timing([new Date, new Date(dateInputField.getAttribute('data-dateValue'))]);
   ...