Html - JavaScript function to calculate numerogram not displaying master numbers (11, 22, 33)

DanN
July 25, 2023
223 views
3 votes
3 Answers

I’m working on developing a simple web app where users can choose their birthdate and the script is calculating and display the numerogram (Numerology) based on input date. The thing is in Numerology there are master numbers which do not calculate in the same way meaning that regular numbers are added up until one digit from 1 to 9 but master numbers are 11, 22, 33 and they are double digits numbers. (Have other meaning), anyway. I’ve mostly done all except "stopping" the function when detected 11, 22, 33.

Example:
Birthday date 03.04.1997
Function should do
3+4+1+9+9+7=33 (master number)
but does
3+4+1+9+9+7=6 (regular number)

My issue is that I have added a function to see if those results are going to occur before calculating them further but doesn’t seem to work.
Tested with 03.04.1997 which should be calculated as 3+4+1+9+9+7=33 but the script doesn’t stop and makes 3+3 to display the final result as 6 (one digit) instead of 2 digits (33, which is a master number in numerology)

And at the end, because the script is reading date, I’ve also added a function to assign the zodiac sign.

var documentcookie = "";

// Function to handle the button click
function handleClick() {
  calculateNumerogramAndZodiac();
  documentcookie = "divVisibility=hidden; expires=Fri, 31 Dec 9999 23:59:59 GMT"; // Save the value "hidden" in a cookie
}

// Check if there is a cookie for divVisibility
const cookieValue = documentcookie
  .split("; ")
  .find(row => row.startsWith("divVisibility="));

let divVisibility;
if (cookieValue) {
  // If there is a cookie for divVisibility, get the value from the cookie
  divVisibility = cookieValue.split("=")[1];
} else {
  // If there is no cookie for divVisibility, set the default value to "visible"
  documentcookie = "divVisibility=visible";
  divVisibility = "visible";
}

// Set the initial state of the <div> element based on the cookie value
const zacontextDiv = document.getElementById("zacontext");
if (zacontextDiv) {
  zacontextDiv.style.visibility = divVisibility;
}

// Associate the function with the click event of the button
document.getElementById("interpretButton").addEventListener("click", handleClick);

// The rest of the code remains unchanged

// Function to calculate the numerogram and zodiac sign
function calculateNumerogramAndZodiac() {
  const birthdayInput = document.getElementById("birthday");
  const birthdayDate = new Date(birthdayInput.value);
  const numerogramValue = calculateNumerogramValueFromDate(birthdayDate);
  const numerogramResult = numerogramValue < 10 ? numerogramValue : calculateSingleDigitNumerogram(numerogramValue);
  const sumOfDigits = calculateSumOfDigits(numerogramResult);
  const numerogramInterpretation = interpretNumerogram(numerogramResult);
  const zodiacData = getZodiacSign(birthdayDate);
  const zodiacSign = zodiacData.name;
  const zodiacImage = zodiacData.image;
  const zodiacLink = zodiacData.link;

  const resultDiv = document.getElementById("result");
  resultDiv.innerHTML = `
    <div class="container ttle"><h3 class="text-light">The sum of digits is: ${sumOfDigits}</h3></div>
    <div class="container">Read your Numerogram: ${numerogramInterpretation}</div>
    <div class="container bg-light p-3 mt-3 mb-4 mx-auto text-center">Your zodiac sign is: ${zodiacSign}. <a href="${zodiacLink}" target="_blank">Read more about ${zodiacSign}</a></div>
    <div class="container text-center"><a href="${zodiacLink}" target="_blank">
      <img src="${zodiacImage}" alt="${zodiacSign}" class="imgrotunda">
    </a></div>
  `;
}

// Function to calculate the single-digit numerogram
function calculateSingleDigitNumerogram(number) {
  // Check if the number is one of the master numbers (11, 22, 33)
  if (number === 11 || number === 22 || number === 33) {
    return number;
  }

  // If the number is not a master number, reduce it to a single digit
  while (number >= 10) {
    number = calculateSumOfDigits(number);
  }

  return number;
}

// Function to calculate the numerogram value from the date of birth
function calculateNumerogramValueFromDate(birthdayDate) {
  const day = birthdayDate.getDate();
  const month = birthdayDate.getMonth() + 1;
  const year = birthdayDate.getFullYear();
  const numerogramValue = day + month + year;
  return numerogramValue;
}

// Function to calculate the sum of digits of a number
function calculateSumOfDigits(number) {
  let sum = 0;
  while (number) {
    sum += number % 10;
    number = Math.floor(number / 10);
  }

  // Check if the sum is a master number (11, 22, 33)
  if (sum === 11 || sum === 22 || sum === 33) {
    return sum;
  }

  // If the sum is not a master number, reduce it to a single digit
  return calculateSingleDigitNumerogram(sum);
}

// Function to interpret the numerogram value
function interpretNumerogram(numerogramValue) {
  const interpretations = {
    1: "text for 1",
    2: "text for 2",
    3: "text for 3",
    4: "text for 4",
    5: "text for 5",
    6: "text for 6",
    7: "text for 7",
    8: "text for 8",
    9: "text for 9",
    11: "text for 11",
    22: "text for 22",
    33: "text for 33"
  };

  return interpretations[numerogramValue] || "The number does not have a specific interpretation.";
}

// Function to get the zodiac sign based on the date of birth
function getZodiacSign(birthdayDate) {
  const day = birthdayDate.getDate();
  const month = birthdayDate.getMonth() + 1;

  const zodiacs = {
    "Capricorn": {
      name: "Capricorn",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Aquarius": {
      name: "Aquarius",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Pisces": {
      name: "Pisces",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Aries": {
      name: "Aries",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Taurus": {
      name: "Taurus",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Gemini": {
      name: "Gemini",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Cancer": {
      name: "Cancer",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Leo": {
      name: "Leo",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Virgo": {
      name: "Virgo",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Libra": {
      name: "Libra",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Scorpio": {
      name: "Scorpio",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    },
    "Sagittarius": {
      name: "Sagittarius",
      image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
      link: "https://dascent.github.io/blogger/blog/za-numerograma.html"
    }
  };

  switch (month) {
    case 1:
      return day <= 19 ? zodiacs["Capricorn"] : zodiacs["Aquarius"];
    case 2:
      return day <= 18 ? zodiacs["Aquarius"] : zodiacs["Pisces"];
    case 3:
      return day <= 20 ? zodiacs["Pisces"] : zodiacs["Aries"];
    case 4:
      return day <= 19 ? zodiacs["Aries"] : zodiacs["Taurus"];
    case 5:
      return day <= 20 ? zodiacs["Taurus"] : zodiacs["Gemini"];
    case 6:
      return day <= 20 ? zodiacs["Gemini"] : zodiacs["Cancer"];
    case 7:
      return day <= 22 ? zodiacs["Cancer"] : zodiacs["Leo"];
    case 8:
      return day <= 22 ? zodiacs["Leo"] : zodiacs["Virgo"];
    case 9:
      return day <= 22 ? zodiacs["Virgo"] : zodiacs["Libra"];
    case 10:
      return day <= 22 ? zodiacs["Libra"] : zodiacs["Scorpio"];
    case 11:
      return day <= 21 ? zodiacs["Scorpio"] : zodiacs["Sagittarius"];
    case 12:
      return day <= 21 ? zodiacs["Sagittarius"] : zodiacs["Capricorn"];
    default:
      return {
        name: "Could not determine zodiac sign.",
        image: "https://raw.githubusercontent.com/Dascent/blogger/main/blog/images/berbec.jpg",
        link: "https://google.com/"
      };
  }
}

<div class="container-fluid p-3 mx-auto mt-4">
  <div class="container">
    <form id="birthdayForm" class="fullonmoby">
      <input type="date" id="birthday" class="form-control fullonmoby" required>
      <button type="button" id="interpretButton" class="form-control btn btn-primary fullonmoby">Show</button>
    </form>
  </div>
  <div id="result" class="mt-3 mb-5 pb-5"></div>
</div>

_{Editor’s note: Changed document.cookie to documentcookie to get past Stack Snippet’s prohibition on setting cookies.}

Demo
https://jsfiddle.net/cle_dan/a67xgyh2/3/

Tags: html javascript

Answers

- SyedUzairBukhari
- July 25, 2023 at 6:47 pm
- 0 votes
0
As per my problem understanding. We need to modify the calculateSumOfDigits function to correctly handle master numbers. If the sum is a master number, we should return that number directly without further processing. So, we can try this solution:
function calculateSumOfDigits(number) { let sum = 0; while (number) { sum += number % 10; number = Math.floor(number / 10); } // Check if the sum is a master number (11, 22, 33) if (sum === 11 || sum === 22 || sum === 33) { return sum; } // If the sum is not a master number, reduce it to a single digit return sum < 10 ? sum : calculateSingleDigitNumerogram(sum); }
Login or Signup to reply.

I think the issue is that calculateSumOfDigits is not stopping once it’s added all the digits together, its continuing to do it with the final result, because you are using and affecting your original value.

Additionally, the value coming out of calculateNumerogramValueFromDate for the date you metioned is 2004 as it adds the values together, of 3 + 4 + 1997, rather than making a string which is comprised of the digits.

If you fixup calculateNumerogramValueFromDate to return them as a string together (using string interpolation), that will get you partway there

Then within calculateSumOfDigits we can take the string, turn it into an array of the numbers, and add them all together.

let sum = number.toString().split('').map((i) => parseInt(i, 10)).reduce((acc, val) => acc + val, 0);

Additionally in calculateSingleDigitNumerogram you are not doing the master check within your while to reduce the number, so I have moved that check within the while branch.

// Function to calculate the numerogram and zodiac sign
function calculateNumerogramAndZodiac() {
    const birthdayInput = document.getElementById("birthday");
    const birthdayDate = new Date(birthdayInput.value);
    const numerogramValue = calculateNumerogramValueFromDate(birthdayDate);
    const numerogramResult = numerogramValue < 10 ? numerogramValue : calculateSingleDigitNumerogram(numerogramValue);
    const sumOfDigits = numerogramResult; // calculateSumOfDigits(numerogramValue);
    const numerogramInterpretation = interpretNumerogram(numerogramResult);
    const zodiacData = getZodiacSign(birthdayDate);
    const zodiacSign = zodiacData.name;
    const zodiacImage = zodiacData.image;
    const zodiacLink = zodiacData.link;

    const resultDiv = document.getElementById("result");
    resultDiv.innerHTML = `
<div class="container ttle"><h3 class="text-light">The sum of digits is: ${sumOfDigits}</h3></div>
<div class="container">Read your Numerogram: ${numerogramInterpretation}</div>
<div class="container bg-light p-3 mt-3 mb-4 mx-auto text-center">Your zodiac sign is: ${zodiacSign}. <a href="${zodiacLink}" target="_blank">Read more about ${zodiacSign}</a></div>
<div class="container text-center"><a href="${zodiacLink}" target="_blank">
    <img src="${zodiacImage}" alt="${zodiacSign}" class="imgrotunda">
</a></div>
`;
}

// Function to calculate the single-digit numerogram
function calculateSingleDigitNumerogram(number) {
    // If the number is not a master number, reduce it to a single digit
    while (number >= 10) {
        // Check if the number is one of the master numbers (11, 22, 33)
        if (number === 11 || number === 22 || number === 33) {
            return number;
        }

        number = calculateSumOfDigits(number.toString());
    }

    return number;
}

// Function to calculate the numerogram value from the date of birth
function calculateNumerogramValueFromDate(birthdayDate) {
    const day = birthdayDate.getDate();
    const month = birthdayDate.getMonth() + 1;
    const year = birthdayDate.getFullYear();
    const numerogramValue = `${day}${month}${year}`;
    return numerogramValue;
}

// Function to calculate the sum of digits of a number
function calculateSumOfDigits(number) {
    return number.toString().split('').map((i) => parseInt(i, 10)).reduce((acc, val) => acc + val, 0);
}

You should stop making the recursive call when you have detected one of the master values.

I found that you had too much code for this logic, so I started from scratch, and got this:

function reduceDigits(digits) {
    // Turn argument to string and remove non-digits:
    digits = String(digits).replace(/D/g, "");
    let sum = 0;
    for (const digit of digits) {
        sum += +digit;
    }
    // Base case
    if (sum < 10 || [11, 22, 33].includes(sum)) return sum;
    // Recursive case:
    return reduceDigits(sum);
}

// I/O handing
document.getElementById("interpretButton").addEventListener("click", handleClick);
const result = document.getElementById("result");
const birthInput = document.getElementById("birthday");

function handleClick() {
    const birthDate = birthInput.value;
    result.textContent = reduceDigits(birthDate);
}

<input type="date" id="birthday" class="form-control fullonmoby" required>
<button type="button" id="interpretButton" class="form-control btn btn-primary fullonmoby">Show</button>
<div id="result" class="mt-3 mb-5 pb-5"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – JavaScript function to calculate numerogram not displaying master numbers (11, 22, 33)

Answers