Vedinsoh

/*
  Calculates the time from now to a given time in the future or past
*/

// Name: Time from now
// Author: Vedinsoh
// Description: Calculates the time from now to a given time in the future or past
// GitHub: @Vedinsoh

import "@johnlindquist/kit";

const [startDay, startHour, startMinute, startSecond] = await fields([
  {
    name: "day",
    label: "Day",
    type: "number",
    value: 0,
  },
  {
    name: "hour",
    label: "Hour",
    type: "number",
    value: 0,
  },
  {
    name: "minute",
    label: "Minute",
    type: "number",
    value: 0,
  },
  {
    name: "second",
    label: "Second",
    type: "number",
    value: 0,
  },
]);

function parseNumber(value) {
  const parsed = parseInt(value, 10);
  return Number.isNaN(parsed) ? 0 : parsed;
}

const values = {
  day: parseNumber(startDay),
  hour: parseNumber(startHour),
  minute: parseNumber(startMinute),
  second: parseNumber(startSecond),
};

function calculate() {
  const now = new Date();
  const future = new Date(now);

  future.setDate(future.getDate() + values.day);
  future.setHours(future.getHours() + values.hour);
  future.setMinutes(future.getMinutes() + values.minute);
  future.setSeconds(future.getSeconds() + values.second);

  return future.toLocaleString();
}

function displayInputs() {
  const formatDisplayValue = (value, label = "") => {
    if (value !== 0) {
      return `${value} ${label}${Math.abs(value) !== 1 ? "s" : ""}`;
    }
    return "";
  };

  const displayDay = formatDisplayValue(values.day, "day");
  const displayHour = formatDisplayValue(values.hour, "hour");
  const displayMinute = formatDisplayValue(values.minute, "minute");
  const displaySecond = formatDisplayValue(values.second, "second");

  return [displayDay, displayHour, displayMinute, displaySecond]
    .filter((value) => value)
    .join(", ");
}

div(
  `<div>
      <div class="text-center text-2xl m-16">
        ${displayInputs()} from now:
      </div>
      <div class="text-center text-4xl p-10 font-semibold">
        ${calculate()}
      </div>
    </div>`
);