Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement