How do I make a day of the week calculator?-CodePudding

I am currently in the process of making a webpage where, when a user enters a standard date in the Gregorian calendar, the program will return the day of the week it falls on. I have tried the longer, brutal approach of take a code number assigned to the day, month, year, and century (as well as leap year, which took a few nested if-else blocks). That one did end up working, but the day of the week was wrong and would shift dramatically as you went up or down a day.

My next method was this method by the University of Waterloo in Ontario, which had stated that this method was more efficient for computer programming. Here is my current code, which does not output anything

I am open to any comments, suggestions, or concerns and feel free to yell at me for my incompetence.

let innerHTMLText = "";

function calculateDay() {
  const day = document.getElementById("dayInput").value;
  let month = document.getElementById("monthInput").value;
  const year = document.getElementById("yearInput").value;

  let lastYearDigits = parseInt(year.substr(2, 2));
  const centuryCode = parseInt(year.substr(0, 2));
  if (month === "1" || month.toLowerCase() === "january" || month === "2" || month.toLowerCase() === "february") {
    lastYearDigits -= 1
  }

  switch (month.toLowerCase()) {
    case "january":
      month = 11;
      break;
    case "february":
      month = 12;
      break;
    case "march":
      month = 1;
      break;
    case "april":
      month = 2;
      break;
    case "may":
      month = 3;
      break;
    case "june":
      month = 4;
      break;
    case "july":
      month = 5;
      break;
    case "august":
      month = 6;
      break;
    case "september":
      month = 7;
      break;
    case "october":
      month = 8;
      break;
    case "november":
      month = 9;
      break;
    case "december":
      month = 10;
      break;
    default:
      if (Number.isInteger(parseInt(month))) {
        month = parseInt(month);
      } else {
        innerHTMLText = "buh please enter a valid month";
      }
  }

  const result = (day   Math.floor((2.6 * month) - 0.2) - (2 * centuryCode)   lastYearDigits   Math.floor(lastYearDigits / 4)   Math.floor(centuryCode / 4)) % 7;

  switch (result) {
    case 0:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Sunday`;
      break;
    case 1:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Monday`;
      break;
    case 2:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Tuesday`;
      break;
    case 3:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Wednesday`;
      break;
    case 4:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Thursday`;
      break;
    case 5:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Friday`;
      break;
    case 6:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Saturday`;
      break;
    default:
      return;
  }
}

document.getElementById("buh").innerHTML = innerHTMLText;

<p><strong>Input any day from 1 Jan 1700 to 31 Dec 2999 below and figure out what day of the week it was, is, or will be on.</strong></p>
<form autocomplete="off" action="/DotW" onsubmit="calculateDay()">
  <label for="day">Day:</label><br />
  <input type="number" min="1" max="31" id="dayInput" name="day" required><br /><br />
  <label for="month">Month:</label><br />
  <input type="text" id="monthInput" name="month" required><br /><br />
  <label for="year">Year:</label><br />
  <input type="number" min="1700" max="2999" id="yearInput" name="year" required><br /><br />
  <input type="submit" class="fancy-button">
</form>
<br /><br />
<p id="buh"> - </p>

CodePudding user response：

You can use also.

document.getElementById("form").addEventListener("submit", (e) => {
  e.preventDefault();
  var dateString = document.getElementById('date').value;
  var date = new Date(dateString);
  
  var day = date.getDay();
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  alert("The day is "   days[day]);
});

<form id="form">
<input id="date" placeholder="mm/dd/yyyy" />
<button type="submit">Submit</button>
</form>

Very efficient!

CodePudding user response：

Several issues

set the inner HTML inside the function
Cancel the submit

Here I use eventListeners

window.addEventListener("load", function() {
  document.getElementById("calcForm").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    let innerHTMLText = "";


    const day = document.getElementById("dayInput").value;
    let month = document.getElementById("monthInput").value;
    const year = document.getElementById("yearInput").value;

    let lastYearDigits = parseInt(year.substr(2, 2));
    const centuryCode = parseInt(year.substr(0, 2));
    if (month === "1" || month.toLowerCase() === "january" || month === "2" || month.toLowerCase() === "february") {
      lastYearDigits -= 1
    }

    switch (month.toLowerCase()) {
      case "january":
        month = 11;
        break;
      case "february":
        month = 12;
        break;
      case "march":
        month = 1;
        break;
      case "april":
        month = 2;
        break;
      case "may":
        month = 3;
        break;
      case "june":
        month = 4;
        break;
      case "july":
        month = 5;
        break;
      case "august":
        month = 6;
        break;
      case "september":
        month = 7;
        break;
      case "october":
        month = 8;
        break;
      case "november":
        month = 9;
        break;
      case "december":
        month = 10;
        break;
      default:
        if (Number.isInteger(parseInt(month))) {
          month = parseInt(month);
        } else {
          innerHTMLText = "buh please enter a valid month";
        }
    }

    const result = (day   Math.floor((2.6 * month) - 0.2) - (2 * centuryCode)   lastYearDigits   Math.floor(lastYearDigits / 4)   Math.floor(centuryCode / 4)) % 7;

    switch (result) {
      case 0:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Sunday`;
        break;
      case 1:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Monday`;
        break;
      case 2:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Tuesday`;
        break;
      case 3:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Wednesday`;
        break;
      case 4:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Thursday`;
        break;
      case 5:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Friday`;
        break;
      case 6:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Saturday`;
        break;
      default:
        return;
    }


    document.getElementById("buh").innerHTML = innerHTMLText;
  })
})

<p><strong>Input any day from 1 Jan 1700 to 31 Dec 2999 below and figure out what day of the week it was, is, or will be on.</strong></p>
<form autocomplete="off" action="/DotW" id="calcForm">
  <label for="day">Day:</label><br />
  <input type="number" min="1" max="31" id="dayInput" name="day" required><br /><br />
  <label for="month">Month:</label><br />
  <input type="text" id="monthInput" name="month" required><br /><br />
  <label for="year">Year:</label><br />
  <input type="number" min="1700" max="2999" id="yearInput" name="year" required><br /><br />
  <input type="submit" class="fancy-button">
</form>
<br /><br />
<p id="buh"> - </p>

CodePudding user response：

Before inventing the wheel, I would give existing solutions a go. My personal favourite, when it comes to date-related javascript functions, is this: https://date-fns.org/

It has a built-in method to do exactly what you are trying to achieve: https://date-fns.org/v2.25.0/docs/getDay

Combining this with a regular date input field gives you a very solid and easy to maintain solution.