Today I am sharing a nice tips for new web developer. And the topics is English callendar date code for html webpage. For this we need three files like-
cdate.js, styleed.css and index.html.
Here's the code for cdate.js file
// Function to convert English digits to Bengali digits
function convertToBengaliDigits(number) {
const bengaliDigits = '০১২৩৪৫৬৭৮৯';
return number.toString().replace(/\d/g, (digit) => bengaliDigits[digit]);
}
// Function to get the Bengali name of the day
function getBengaliDayName(dayIndex) {
const days = ['রবিবার', 'সোমবার', 'মঙ্গলবার', 'বুধবার', 'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার'];
return days[dayIndex];
}
// Function to get the Bengali name of the month
function getBengaliMonthName(monthIndex) {
const months = ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে', 'জুন', 'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর'];
return months[monthIndex];
}
// Get the current date
const today = new Date();
const day = convertToBengaliDigits(today.getDate());
const month = getBengaliMonthName(today.getMonth());
const year = convertToBengaliDigits(today.getFullYear()) + (' খ্রিস্টাব্দ ');
// Format the date in Bengali
const formattedDate = `${day} ${month} ${year}`;
// Display the date in the div
document.getElementById('date').innerText = formattedDate;
Here's the code for styleed.css file
@font-face {
font-family: 'SutonnyOMJ';
src: url('SutonnyOMJ.ttf') format('truetype');
}
.edate {
font-size: 40px; /* Make the font size larger */
color: black; /* Set text color */
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; /* Add white outline */
font-family: 'SutonnyOMJ', sans-serif; /* Apply SutonnyOMJ font */
}
Here's the code for
<head>
...........
</head>
in the index.html
Please insert this line between <head> and </head> tag of the date index file.
<link rel="stylesheet" href="css/styleed.css" />
And the date publish code for index.html
<div class="edate" id="date"></div>
Please copy this code and paste into your date index.html file where you want to show the date.
Now enjoy the script.....