Uncategorized

আপনার ওয়েবসাইটে নিজেই তৈরি করুন BMI ক্যালকুলেটর ও Age ক্যালকুলেটর

11 hours ago
11 hours ago
0 Comments

আসসালামু আলাইকুম? পরম করুনাময় মহান আল্লাহর নামে শুরু করছি। আশা করি সবাই ভালো আছেন,আর আপনাদের দোয়ায় আমিও ভালো আছি।

আজকে আবারও নতুন দুইটা পোস্ট নিয়ে হাজির হলাম আপনাদের মাঝে আমি, আসিফ। 

তার মধ্যে প্রথম পোস্টটি হবে, বিএমআই ক্যালকুলেটর তৈরির সহজ গাইড.

আজকে আমি ডেমো এবং কোড সহ দিয়ে দিব।

আর দ্বিতীয়টি হবে, বয়স গণনার ক্যালকুলেটর তৈরি করা শেখাবো।

এই পোস্টটি শুধুমাত্র তাদের জন্য যারা নতুন এবং এই বিষয়গুলো জানেন না এবং এই বিষয় জানতে আগ্রহী।

আপনি যদি আপনার ওয়েবসাইটে একটি বিএমআই (Body Mass Index) ক্যালকুলেটর যুক্ত করতে চান, তাহলে এই গাইড আপনার জন্য। খুব সহজ ভাষায় আমরা দেখাবো কিভাবে আপনি ওয়ার্ডপ্রেসে বিএমআই ক্যালকুলেটর তৈরি করতে পারেন।

বিএমআই ক্যালকুলেটর কী?

বিএমআই ক্যালকুলেটর এমন একটি টুল, যা উচ্চতা ও ওজনের উপর ভিত্তি করে আপনার শরীরের ওজন স্বাভাবিক, কম বা বেশি কিনা তা নির্ণয় করতে সাহায্য করে।

কাস্টম কোড দিয়ে বিএমআই ক্যালকুলেটর তৈরি করা

যদি আপনি নিজেই কোডিং করে বিএমআই ক্যালকুলেটর বানাতে চান, তাহলে নিচের ধাপগুলো অনুসরণ করুন।

এই কোডগুলোতে বিশেষ কিছু সুবিধা রয়েছে, এজন্য আপনাদের সাথে শেয়ার করছি।

প্রথমে ওয়ার্ডপ্রেসে একটি নতুন পেজ তৈরি করুন
ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান।

তারপর Pages > Add New-এ যান।

নতুন পেজের নাম দিন “BMI Calculator”।

তারপর HTML+CSS ও JavaScript কোড যুক্ত করুন

এবার আপনার নতুন পেজে Custom HTML Block যোগ করে নিচের কোডটি কপি-পেস্ট করুন.

প্রথমে নিচের কোডটা বসান।

যদি কোড কপি করতে কোন সমস্যা হয় তাহলে নিচের লিংক থেকে ডাউনলোড করে নেন।
Download Code





BMI ক্যালকুলেটর


তারপর javascript code বসানোর পালা, অনেক সাইটে সমস্যা হয়, ডাইরেক্ট জাভা স্ক্রিপ কোড সাপোর্ট করে না, তারা আমার মত CSS & JavaScript toolbox Plugin ব্যবহার করতে পারেন।

        function calculateBMI() {
// Get the input values
const weight = parseFloat(document.getElementById('weight').value);
const feet = parseFloat(document.getElementById('feet').value);
const inches = parseFloat(document.getElementById('inches').value);
            // Check if inputs are valid
if (isNaN(weight) || isNaN(feet) || isNaN(inches) || weight <= 0 || feet < 0 || inches < 0) {
document.getElementById('result').innerHTML = "অনুগ্রহ করে সঠিক তথ্য দিন!";
return;
}
            // Convert feet and inches to meters
const heightInInches = (feet * 12) + inches;
const heightInMeters = heightInInches * 0.0254;
            // Calculate BMI
const bmi = weight / (heightInMeters * heightInMeters);
            // Display the result
let resultText = `আপনার বিএমআই: ${bmi.toFixed(2)}`;
            if (bmi < 18.5) {
resultText += "
আপনার ওজন কম।";
} else if (bmi >= 18.5 && bmi < 24.9) {
resultText += "
আপনার ওজন স্বাভাবিক।";
} else if (bmi >= 25 && bmi < 29.9) {
resultText += "
আপনার ওজন অতিরিক্ত।";
} else {
resultText += "
আপনার ওজন অত্যধিক।";
}
            document.getElementById('result').innerHTML = resultText;
}

এরপর আপনার css style code বসান, বলে রাখা ভালো আপনি এই কোডগুলো আপনি নিজের মতো করে ডিজাইন করে নিতে পারবেন।


h2 {
text-align: center;
color: #4CAF50;
font-size: 24px;
margin-bottom: 20px;
}
        .input-group {
margin-bottom: 15px;
}
        label {
font-size: 16px;
color: #333;

        }
        input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
        .btn {
background-color: #4CAF50;
color: white;
padding: 12px;
width: 100%;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
        .btn:hover {
background-color: #45a049;
}
        .result {
margin-top: 20px;
font-size: 18px;
text-align: center;
color: #333;
}
        .result span {
font-weight: bold;
}

ব্যাস কাজ শেষ,

কিভাবে Age calculator তৈরী করবেন

.

নিয়ম একই চলুন এবার Age calculator এর কোড গুলো আপনাদের দিয়ে দেওয়া যাক, আমি ধাপে ধাপে এই কোডগুলো আপনাদের দিচ্ছি।

যদি কোড কপি করতে কোন সমস্যা হয় তাহলে নিচের লিংক থেকে ডাউনলোড করে নেন।
Download Code

body code





Age Calculator Online


Javascript Code

        function calculateAge() {
const day = parseInt(document.getElementById('day').value);
const month = parseInt(document.getElementById('month').value);
const year = parseInt(document.getElementById('year').value);
            if (!day || !month || !year) {
alert("Please fill in all fields.");
return;
}
            const today = new Date();
const birthDate = new Date(year, month - 1, day);
            if (birthDate > today) {
alert("The birth date cannot be in the future.");
return;
}
            let ageYears = today.getFullYear() - birthDate.getFullYear();
let ageMonths = today.getMonth() - birthDate.getMonth();
let ageDays = today.getDate() - birthDate.getDate();
            if (ageDays < 0) {
ageMonths--;
ageDays += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
}
            if (ageMonths < 0) {
ageYears--;
ageMonths += 12;
}
            const totalDays = Math.floor((today - birthDate) / (1000 * 60 * 60 * 24));
const totalWeeks = Math.floor(totalDays / 7);
const totalHours = totalDays * 24;
const totalMinutes = totalHours * 60;
const totalSeconds = totalMinutes * 60;
            const result = `
You are ${ageYears} years, ${ageMonths} months, and ${ageDays} days old.
Total Weeks: ${totalWeeks}

                Total Hours: ${totalHours}
Total Minutes: ${totalMinutes}
Total Seconds: ${totalSeconds}
`;
            const resultDiv = document.getElementById("result");
resultDiv.style.display = "block";
document.getElementById("output").innerHTML = result;
}

Css style code

        * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
        .container {
background: #fff;
padding: 2px 3px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
            width: 100%;
}
        h1 {
margin-bottom: 15px;
font-size: 24px;
color: #333;
}
        form {
display: flex;
flex-direction: column;
gap: 15px;
}
        label {
font-size: 14px;
font-weight: bold;
color: #444;
}
        .inputs {
display: flex;
gap: 10px;
}
        input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
        button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
        button:hover {
background-color: #45a049;
}
        #result {
margin-top: 20px;
font-size: 16px;
color: #333;
display: none;
}

সবাইকে ধন্যবাদ, আপনার একটি সুন্দর মন্তব্য পরবর্তী পোস্ট লিখতে অনুপ্রেরণা যোগায়। আজকের মতো এখানেই বিদায় নিলাম, হাজির হবো আরও নিত্য নতুন টিপস নিয়ে আমি আসিফ। আল্লাহ হাফেজ.

Shares:
Leave a Reply