A Simple Birthday Check Example For React
birthday-check
made by ??
Feature:DaysToCome ✅
- YearsOld Function Return How old The Person is in a Number:
birthDay.YearsOld(user.DOB)
- DaysToBirthDay Function Return How Many Days Left to BirthDay Date in it’s String:
birthDay.DaysToBirthDay(user.DOB,'15')
Feature:DaysGone ✅
- DaysGoneBirthDay Function Return How Many Days Gone By From BirthDay Date in it’s String:
birthGone.DaysGoneBirthDay(user.DOB,'15')
Notes: This is Beta Release
?
Use:
This module package is For FrontEnd and BackEnd You Must Use Import To Work With it, You Can’t use Require With import Caution it Will Break your Code, This information is Those newbie Developers.
Install the Package by:?
npm i birthday-check
Note ? Don’t Forget To add Your HTML File Like this Example:
<script type="module" src="script.js"></script>
type="module"
How To import in to your project FrontEnd Javascript Vanilla:
import {DaysToCome} from './node_modules/birthday-check/dist/birthday-check.esm.js'
How To import in to your project ReactJs: : and NodeJs:
import {DaysToCome} from 'birthday-check'
CustomText if you need Different text you can add like this Example or leave Empty String Except textGreeting if you want to show Today is your BirthDay or make it Empty as you Wish ,
Initialization the class In the following Example the constructor customTexts.
const customTextDaysToCome ={
textGreeting:'Today is Your BirthDay',
textDaysLeft:'Days Left',
textDayLeft:'Day Left',
textBirthDay:'BirthDay:'
}
const customTextDaysGone ={
textDaysGone:'Days Ago',
textDayGone:'Day Ago',
textBirthDayGone:'BirthDayGone:'
}
instance class
const birthDay = new DaysToCome(customTextDaysToCome)
const birthGone = new DaysGone(customTextDaysGone)
#if you dont want customText and you happy the default Empty put string Importand Example:
const birthDay = new DaysToCome('')
const birthGone = new DaysGone('')
What is For This Package Do For You At The Moment:
you need to calculate the user’s date of birth from today. It will return how many days left from now on or 1 day left or today is your birthday also Age, and how many Days Gone from birthday you can customize the Text as I already mentioned it above.
Note: This is For Browser Javascript Vanilla Tag Element and ClassName,
birthDay.DaysToBirthDay(user.DOB,'15','h1','customClass')
birthGone.DaysGoneBirthDay(user.DOB,'45','h1','customClass')
For Reactjs Choose your Tag Element ?:
<h1>
{birthDay.DaysToBirthDay(user.DOB,'15')}
</h1>
<h1>
{birthGone.DaysGoneBirthDay(user.DOB,'15')}
</h1>
This is how you can use in Reactjs to Refresh The Birthday
const [birth,setBirth] = useState('')
const [CurrentDate, setCurrentDate] = useState(new Date())
useEffect(() => {
const birthDay = new DaysToCome('')
setTimeout(() => setCurrentDate(new Date()), new Date().getDate());
setBirth(birthDay.DaysToBirthDay('2000-12-4','15'))
}, [CurrentDate]);
user.DOB: string (2000-10-05)
’15’ string or number:
you can change different number this will help you to show how many days you want to remind the user it will calculate from now date to his/her days to come to their birthday date #Note: if empty or 0 only show today is your birthday, if there is a any user birthday is today.
This is for JS Vanilla Browser to use
‘h1’
you can use any Tag element Note ? This is good when you use for loop in javascript vanilla if you wrap your own tag you may see an empty background if there is no data so it is better to use my solution only in javascript vanilla. This solution you don’t need in ReactJs
This is for JS Vanilla Browser to use
‘customClass’:
you can add a custom class with h1 or any Tag you choose.
birthday-check:
Feature:DaysToCome ✅
- YearsOld Function Return How old The Person:
birthDay.YearsOld(user.DOB)
- DaysToBirthDay Function Return How Many Days Left to BirthDay Date:
birthDay.DaysToBirthDay(user.DOB,'15')
Feature:DaysGone ✅
- DaysGoneBirthDay Function Return How Many Days Gone By From BirthDay Date:
birthGone.DaysGoneBirthDay(user.DOB,'15')
You can Use With Browser
I am working on Another Feature: JointDay