neoG Camp 2023 waitlist is open

Need Help?

lessonNine: palindrome birthday app

This guide needs to be used alongside the lesson video.

problem statement

  1. Ask the user to input his/her birth date
  2. Check if the entered birthdate is a palindrome, if yes, show a message
  3. If the entered birthdate is not a palindrome:
  • Find the nearest palindrome date
  • Find how many days they missed

tech stack used: HTMLCSS, and JavaScript

what are we building?

Live app

We are going to build a palindrome birthday checker that will also show the
nearest palindrome date and how many days missed.

step 1: building the logic

ex01: write a function in JS that takes a string and reverses it

// You can use inbuilt javascript methods like split, reverse and join

var str = 'hello';

// split
var charList = str.split(''); // -> ['h', 'e', 'l', 'l', 'o']

// reverse
var reversedList = charList.reverse() // -> ['o', 'l', 'l', 'e', 'h']

// join
reversedList.join('') // -> 'olleh'

// Input: a string (Example: "hello")
// Output: reverse of the input string (Example: "olleh")

Solution

Tip: Read about [split() , join()](https://javascript.info/array-methods#split-and-join) and [reverse()](https://javascript.info/array-methods#reverse)

ex02: write a JS function to check for palindrome

// Use the reverse string function you made in Ex.1 for this
// Input: a string "racecar"
// Output: a boolean(true/false) stating whether the string is palindrome or not

Solution

ex03: write a function that converts the date from number to string

// Input: { day: 14, month: 9, year: 2020 }
// Output: { day: '14', month: '09', year: '2020' }

// Take care of '0' when day/month is less than 10

Solution

Tip: Read about .toString() method.

ex-04: Write a JS function that takes a date and returns all variations of it

// Your function will return an array of strings for these date formats

// DD-MM-YYYY
// MM-DD-YYYY
// YYYY-MM-DD
// DD-MM-YY
// MM-DD-YY
// YY-MM-DD

// The hyphen (-) is for representation only, return the strings without hyphens

// Input: { day: 10, month: 9, year: 2020 }
// output: ['10092020', '09102020', '20200910', '091020', '100920', '200910']

Solution

Tip: Read about [slice()](https://javascript.info/array-methods#slice) method.

ex-05: write a function that checks palindrome for all the date formats

// Hint: Use the previous function to get all formats and loop through it

// Input: { day: '10', month: '09', year: '2020' }

// Output: Array of six elements having boolean value for each date format
  > [false, false, false, false, false, false]

// live implementation

function checkPalindromeForAllDateFormats(date){
  var listOfPalindromes = getAllDateFormats(date);

  var flag = false;

  for(var i=0; i < listOfPalindromes.length; i++){
    if(isPalindrome(listOfPalindromes[i])){
      flag = true;
      break;
    }
  }

  return flag;
}

Solution

Tip: Read about [.push()](https://javascript.info/array#methods-pop-push-shift-unshift) array method.

ex-06: find the next palindrome date, also how many days are in between

// If the current date is not a palindrome, find the next palindrome date

// Input: { day: 5, month: 1, year: 2020 }
// Output: [28, { day: 2, month: 2, year: 2020 }]

Solution


step 2: building the UI

ex08: get date from user and console.log it on button click

// Use input element for getting date
// Simply console.log the input date when the user clicks the button

Solution

ex09: joining all the dots

// Stitch all the functions together to build the app

Solution


bonus (Optional)

  • Find the previous palindrome date, also how many days are in between
// If the current date is not a palindrome, find the next palindrome date

// Input: { day: 4, month: 2, year: 2020 }
// Output: [2, { day: 2, month: 2, year: 2020 }]

Solution

  • Currently, we are showing days even when the missed by day is 1
// Use a ternary operator to decide whether 'day' or 'days' should be printed
  • Use CSS to style the web app, you can use SVG for background, cakes, and balloon images for a more attractive look
  • Use setTimeout() to create artificial delay and show "Processing..." text or gif to make your user experience even better

**assignments for markThirteen**

Use this guide to build a "palindrome birthdays" app in VanillaJS or React and this would be your markThirteen project from the mark15 checklist.

And for markFifteen, which is optional, you can write 2 blogs, on your own, of 200 words minimum and host it on your portfolio's blog page section if you wish.


stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.