Personality Check with Date of Birth using JavaScript

In this tutorial, we will create a simple web page for conducting a personality check based on a person’s date of birth.

The personality check web page allows users to input their date of birth and receive a personality assessment based on numerology’s concept of life path numbers. When the user enters their date of birth and clicks “Get Result,” the system calculates their life path number.

This calculation involves adding together the digits of the date of birth until a single-digit number (between 0 and 9) is obtained. Once the life path number is determined, the corresponding personality description is fetched from the HTML content and displayed to the user.

Follow this video for complete guidance :

The page employs JavaScript to handle the logic for calculating the life path number and displaying the personality result. Additionally, it utilizes the TypeIt library to create a typing effect, enhancing the visual presentation of the personality descriptions. Overall, the page provides an interactive and engaging way for users to explore their personality traits based on their date of birth.

Full Source Code

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<style type="text/css">
  .result{
    display: none;
    font-size: 24px;
    line-height: 45px;
    height:350px;
    padding:25px;
  }
  .box{
    background: rgba(0,0,0,.4);
  }
  h3{
    text-align: center;
    margin-bottom: 20px;
    font-size: 40px;
  }
  body{
    color:#fff;
    background-image:url('space.png');
  }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>

<div class="container">
    <h1 class="text-center mt-4">Personality Check with Date of Birth</h1>
    <hr>
    <div class="row">
      <div class="col-4 form">
        <div class="box p-4">
          <div class="form-group">
            <label class="mb-2">Date of Birth</label>
            <input class="form-control" type="date" id="dob">
          </div>
          <button class="mt-4 btn w-100 btn-primary" onclick="getResult();">Get Result</button>
        </div>
      </div>
      <div class="col-12">
        <div class="box">
          <div class="result result0">
            <h3>Life Path : 0</h3>
            Life Path 0 individuals are seen as having a special connection to the spiritual realm. They possess immense potential for growth and transformation. While they may face challenges in finding their direction, they often serve as catalysts for change and enlightenment. They are intuitive, compassionate, and deeply connected to the universe.
          </div>
          <div class="result result1">
            <h3>Life Path : 1</h3>
            Life Path 1 individuals are natural-born leaders with a strong sense of independence and self-reliance. They are determined, ambitious, and have a pioneering spirit. They thrive on challenges and are not afraid to take risks to achieve their goals. They possess strong willpower and have the ability to inspire others with their vision and drive.
          </div>
          <div class="result result2">
            <h3>Life Path : 2</h3>
            Life Path 2 individuals are peacemakers who thrive in partnerships and collaborations. They are empathetic, diplomatic, and sensitive to the needs of others. They excel in situations that require cooperation and harmony. They are excellent communicators and have a knack for resolving conflicts and finding common ground.
          </div>
          <div class="result result3">
            <h3>Life Path : 3</h3>
            Life Path 3 individuals are creative and expressive souls who find joy in self-expression. They are optimistic, enthusiastic, and have a natural charm that draws others to them. They are gifted with communication skills and often excel in the arts, writing, or performance. They have a playful and youthful energy that makes them magnetic and fun to be around.
          </div>
          <div class="result result4">
            <h3>Life Path : 4</h3>
            Life Path 4 individuals are practical and hardworking individuals who value stability and security. They are disciplined, reliable, and have a strong sense of responsibility. They excel in environments that require organization and structure. They are methodical in their approach to tasks and have a keen eye for detail. They are dedicated to their goals and are willing to put in the effort to achieve them.
          </div>
          <div class="result result5">
            <h3>Life Path : 5</h3>
            Life Path 5 individuals are adventurous and freedom-loving souls who crave variety and excitement in life. They are versatile, adaptable, and thrive in situations that offer change and challenge. They are curious by nature and love to explore new ideas and experiences. They are independent and dislike feeling tied down or restricted in any way.
          </div>
          <div class="result result6">
            <h3>Life Path : 6</h3>
            Life Path 6 individuals are nurturing and compassionate souls who excel in caretaking roles. They are family-oriented and place a high value on love and relationships. They are responsible, reliable, and always willing to lend a helping hand. They have a strong sense of duty and take pride in their ability to provide support and stability to those they care about.
          </div>
          <div class="result result7">
            <h3>Life Path : 7</h3>
            Life Path 7 individuals are introspective and spiritual seekers who are driven by a quest for knowledge and understanding. They are analytical, insightful, and have a deep appreciation for the mysteries of life. They are drawn to intellectual pursuits and enjoy spending time alone in contemplation. They are often seen as wise and insightful, with a unique perspective on the world.
          </div>
          <div class="result result8">
            <h3>Life Path : 8</h3>
            Life Path 8 individuals are ambitious and driven souls who are destined for success. They are natural leaders with a strong sense of authority and confidence. They are goal-oriented and possess a powerful sense of determination and resilience. They have a talent for managing finances and excel in positions of power and influence.
          </div>
          <div class="result result9">
            <h3>Life Path : 9</h3>
            Life Path 9 individuals are humanitarian and compassionate souls who are driven by a desire to make the world a better place. They are selfless, generous, and deeply empathetic towards others. They possess a strong sense of idealism and are committed to serving humanity in some way. They are wise beyond their years and often serve as mentors or guides to others on their spiritual journey.
          </div>
        </div>
      </div>
    </div>
    
    
  </div>
</div>

<script type="text/javascript">
  function reload(){
    window.location.reload();
  }
  
  function getResult(){
    $(".form").hide();
    lifepath = calculateLifePath();
    result = $(".result"+lifepath);
    text = result.html();
    text += '<button class="btn btn-primary" onclick="reload()">Check Another</button>';
    result.html('').show();
    new TypeIt(".result"+lifepath, {
      strings: text,
      speed: 20,
      waitUntilVisible: true,
    }).go();
  }
  function calculateLifePath(){
    dob = document.getElementById('dob').value;
    dob = dob.split('-');
    dob = dob[0]+dob[1]+dob[2];
    lifepath = getSum(dob);
    return lifepath;
  }

  function getSum(number){
    if(number>9){
      number = number.toString();
      sum = 0;
      for(i=0;i<number.length;i++) {
        sum += parseInt(number[i]);
      }
      return getSum(sum);
    }else{
      return number;
    }
  }
</script>