SW 2022-04-06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Date...</title>
    <script src="amutil.js"></script><!-- promotes code reuse -->
    <script src="about_dates.js"></script><!-- project specific -->
</head>
<body>
<!-- form for users to input year, month, day -->
<form
    id="idFormDate"
>
    <fieldset>
        <legend>Your date:</legend>
        <label for="idYear">Year:</label>
        <input type="number" min="1" id="idYear" value="1969">
        <br>
        <label for="idMonth">Month:</label>
        <input type="number" min="1" max="12" value="6" id="idMonth">
        <br>
        <label for="idDay">Day:</label>
        <input type="number" min="1" max="31" value="21" id="idDay">
    </fieldset>
    <input type="submit" value="confirm date">
</form>
<hr>
<section id="idSectionFeedback"></section>
</body>
</html>

***********************

window.onload=boot;

const DAYS_OF_WEEK = [
    "Domingo", "Segunda", "Terça", "Quarta",
    "Quinta", "Sexta", "Sábado"
]

const
    ID_YEAR="idYear",
    ID_MONTH="idMonth",
    ID_DAY="idDay",
    ID_FORM_DATE="idFormDate",
    ID_SECTION_FEEDBACK="idSectionFeedback";

var oYear, oMonth, oDay, oFormDate, oSectionFeedback;

function boot(){
    //1 - associations/bridging HTML to JS
    oYear=id(ID_YEAR);
    oMonth=id(ID_MONTH);
    oDay=id(ID_DAY);
    oFormDate=id(ID_FORM_DATE);
    oSectionFeedback=id(ID_SECTION_FEEDBACK);
    /*
    var theRelevant = new Array();
    theRelevant.push(oYear);
     */
    var theRelevant = [
        oYear, oMonth, oDay, oFormDate, oSectionFeedback
    ]

    //quality control
    var bQC = qualityControl(theRelevant);

    if (!bQC){
        window.alert("Critical Error. System halted.");
        exit();
    }
    else{
        //v1
        //window.alert("System OK, can proceed.");

        //v2
        //NOTHING
    }

    //2 - set behaviors
    oFormDate.onsubmit = ehDoSomethingWithTheDate;
    //oFormDate.onsubmit = theFunctionThatReallyDoesTheJob;

    oYear.onchange = oMonth.onchange = oDay.onchange =
        ehDoSomethingWithTheDate;

    ehDoSomethingWithTheDate();
}//boot

/*
function ehDoSomethingWithTheDate(){
    return theFunctionThatReallyDoesTheJob;
}

function theFunctionThatReallyDoesTheJob(){

}
 */

function ehDoSomethingWithTheDate(){
    const iYear = Number(oYear.value);
    const iMonth = Number(oMonth.value);
    const iDay = Number(oDay.value);

    /*
    var o1 = new Date(); //agora!
    var o2 = new Date(2022, 12-1, 25, 0, 0, 0)
     */
    var theUserDate = new Date(
        iYear,
        iMonth-1,
        iDay
    );
    var zeroBasedDayOfWeek = theUserDate.getDay();

    //v1
    //oSectionFeedback.innerHTML = zeroBasedDayOfWeek;

    //v2
    var strDayOfWeek =
        DAYS_OF_WEEK[zeroBasedDayOfWeek];

    var distance = distanceBetweenDatesInMultipleUnits(
        theUserDate,
        new Date()
    );
    var simplifiedDistance =
        distance['d'].toFixed(2)

    strDistance = simplifiedDistance +
        " is day(s) distant.";
    oSectionFeedback.innerHTML = strDayOfWeek +
        "<br>"+strDistance;

    return false; //stopped the event bubbling up
    /*
    no more query string formation
    no document reload
    so, the result was kept visible
     */
}

function distanceBetweenDatesInMultipleUnits(
    pD1, //the 1st of the dates
    pD2 //the 2nd of the dates
){
    //bad approach
    //var d = pD2.getMilliseconds() - pD1.getMilliseconds();

    var distanceInMs = pD2-pD1;
    var distanceInSec = distanceInMs/1000;
    var distanceInMinutes = distanceInSec/60;
    var distanceInHours = distanceInMinutes/60;
    var distanceInDays = distanceInHours/24;

    //v1
    //return distanceInDays;

    //v2
    var oJSON = {
        "ms" : distanceInMs,
        "s" : distanceInSec,
        "m" : distanceInMinutes,
        "h" : distanceInHours,
        "d" : distanceInDays
    }
    return oJSON;
}//distanceBetweenDatesInMultipleUnits


****************
function id(pId){
    return document.getElementById(pId);
}//id

//_.~^~._.~^~._.~^~._.~^~._.~^~._.~^~._.~^~._.~^~._.~^~._.~^~.
function qualityControl(pColRelevant){
    for (o of pColRelevant) {
        if (o == null){
            return false;
        }//if
    }//for
    return true;
}//qualityControl