1 Answer

0 votes
by (487 points)

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.....

312 questions

91 answers

6 comments

5,034 users

2 Online Users
0 Member 2 Guest
Today Visits : 7761
Yesterday Visits : 2524
Total Visits : 6983551
...