Welcome to this guide which will be a companion with the pair programming workshop. This guide needs to be used alongside the youtube class
HTML
, CSS
, and JavaScript
We are going to build a palindrome birthday checker that will also show the
nearest palindrome date and how many days missed.
// 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")
Tip: Read about split()
, join()
and reverse()
// 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
// 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
Tip: Read about .toString()
method.
// 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']
Tip: Read about slice()
method.
// 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;
}
Tip: Read about .push()
array method.
// 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 }]
// Use input element for getting date
// Simply console.log the input date when the user clicks the button
// Stitch all the functions together to build the app
// 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 }]
days
even when the missed by day is 1// Use a ternary operator to decide whether 'day' or 'days' should be printed
setTimeout()
to create artificial delay and show "Processing..." text or gif to make your user experience even better