Admissions for neoG Camp 2022 are OPEN NOW.

is your birthday lucky?

Welcome to this guide which will be a companion with the pair programming workshop. This guide needs to be used alongside the youtube class

Problem Statement

  • Take user's complete birthday
  • And his/her lucky number.
  • Now, find out if the sum of digits of birthday is divisible by the lucky number.
  • Show the result to the user.
  • Here's the link to the actual problem statement.

How will we complete this? 🤔

We will be using HTML, CSS, and Vanilla Javascript to complete this assignment, but you can also complete this using REACT 😄

Our end goal is to complete this assignment and build our logic.

So let's START!!!

ex.0: Input date of birth and the lucky number to check

Challenge:

Input date of birth and the lucky number to check then console the values.

Understand:

There are multiple ways to take user input for date like:

  • Using select and option elements for taking inputs for Date, Month and Year.
  • or by using the input element.

Use Input element for date and define its type.

  • Define two input elements one for date of birth and another for lucky number.
  • add type attributes to both as date and number
  • Create a button and trigger an event using querySelector and addEventListener on click of that button console the values.

Input element can be used in multiple ways based on its types.

// Expected Output:
"2021-05-12" 2

Solution

ex: 01 calculate the sum of digits of the date.

Challenge:

Notice the value you get from date input, we get that as a string with a special character i.e hyphen but we need to calculate the sum of digits which are basically numbers.

The challenge here is to remove any special character from the input value.

Understand:

  • Use replaceAll to replace the special characters from the string.
  • Read about replaceAll and good to know other available methods which we can use for string manipulation.
  • Once you remove them sum up all the digits.
  • Use for loop for adding all the digits, use charAt to index each value. Make sure you typecast character to Number.
  • Read about typecasting here which datatypes can be typecasted from and to what type.
  • You can also sum the digits using while loop using modulus

Solution

Extra:

Read about how to traverse index and values using in and of in for loop.

for(let value of date)
for(let index in date)

for...of - JavaScript | MDN

for...in - JavaScript | MDN

ex02: Check if the birthday is lucky?

Challenge:

We have calculated the sum of digits and have taken user input for the lucky number to check. Now check whether the birthday is lucky or not.

Understand:

  • Use modulus % operator to check whether the sum of digits is divisible by the input number or not.
  • If true display a message like your birthday is lucky else your birthday is NOT lucky, so sad using a textarea element.

Solution

Wasn't that simple? 😃

  • Customize your display message. Try to make it attractive and beautify it using CSS.
  • Add validations for input fields.

Additional:

  • Create this as a website, put a privacy notice. Say that you're not storing data.
  • Use the footer to redirect to your social media accounts and your portfolio.