সুন্দর করে আর্টিকেল লিখলেন কিন্তু আর্টিকেলের ওয়ার্ড কাউন্টার নেই। ওয়ার্ড কাউন্টার তৈরি করে নিন খুব সহজে।

আব্দুল্লাহ January 15, 2024 কোন মন্তব্য নেই Trickbd.com

আব্দুল্লাহ

স্বগতো আমার আজকের পোস্টে।

তো আজকের পোস্টে দেখাতে চলেছি কিভাবে খুব সহজে HTML, CSS, JavaScript দিয়ে খুব সহযে একটি আর্টিকেল কাউন্টার বানানো যায়।

তো এর জন্য আপনাদের উপরের Programing Language গুলো সম্পর্কে হালকা জ্ঞান থাকলেই হবে।

না থাকলেও সমস্যা নাই আমি তো আছি।

তো প্রথমে আমাদের একটা HTML এটিটরে বা যে কোনো এটিটরে একটা HTML ফাইল ওপেন করতে হবে।

এবং HTML বয়লারপ্লেট টা ভালোকর লেখার পর সেখানে একটা ডিভ (<div></div>) নিতে হবে।

এরপর আমরা সব কাজ এই ডিভ এর ভিতরে করবো।

আমরা একটা হেডিং নিবো, হেডিং ট্যাগ এর ভিতরে Word Counter লিখবো।

এরপর কোড এটিটর এর জন্য আমাদের একটা টেক্সট এরিয়া (<textarea></textarea>) নিতে হবে। টেক্সট এরিয়াতে (<textarea id=”text”></textarea>) আইডি দিতে হবে JavaScript এ পয়েন্ট করার জন্য।

এর পর আমাদেরকে একটা বাটন নিতে হবে এবং একটা স্পান (<span></span>) নিতে হবে ওয়ার্ড কতোগুলো হয়েছে সেটা দেখানোর জন্য।

span এ textarea এর মতো করে একটা আইডি যুক্ত করবো JavaScript এ পয়েন্ট করার জন্য।

textarea তে onclick এট্রিবিউট এর মদ্ধে একটা ফাংশন রাখবো ওয়ার্ড কাউন্ট করার জন্য।

তো এপর্যন্ত আমি যা যা লিখলাম সে কোডগুলো:

<!DOCTYPE html>

<head>

<title> Word Counter </title>

</head>

<body>

<h1>Word Counter</h1>

<button onclick=“myFunc()”>Count Words</button>

<div>

Words: <span id=“wordCountResult”>0</span>

</div>

</body>

</html>

তো এর পর আমরা CSS লিখবো কাউন্টারটাকে সুন্দর দেখানোর জন্য।

আমার লেখা CSS গুলো:

<style>

/* CSS CODE */

body {

margin: 0;

padding: 0;

background-color: #f0fcfc;

}

* {

font-family: “Arial”, sans-serif;

}

h1{text-align: center;}

.container {

padding: 100px 25%;

display: flex;

flex-direction: column;

line-height: 2rem;

font-size: 1.2rem;

color: #202C39;

}

textarea {

padding: 20px;

font-size: 1rem;

margin-bottom: 40px;

}

button {

padding: 10px;

margin-bottom: 40px;

}

</style>

CSS লেখার পর আমার কোড এডিটরটি দেখতে নিচের মতো হয়েছে:

তো এবার আমরা JavaScript লিখবো ওয়ার্ড কাউন্ট করার জন্য।

আমার লেখা JavaScript কোডগুলো হলো:

//JavaScript CODE

function myFunc() {

let wordCountResult = document.getElementById(“wordCountResult”);

let inputValue = document.getElementById(“input”).value;

let wordsList = inputValue.trim().replace(/[\s]+/gim, ‘ ‘).split(” “);//.replace(/[ ]{2,}/gi,” “)

let count = wordsList.length;

wordCountResult.innerHTML = count;

};

</script>

JavaScript সংযুক্ত করার পর কাউন্টারে ওয়ার্ড কাউন্ট করলে নিচের মতো দেখাবে:

তো যারা এগুলো করতে পারবেন না, তারা সরাসরি নিচে থেকে কোডগুলো ডাউনলোড করে নিতে পারেন। ডাউনলোড করে Browser এ ওপেন করবেন বা যে কোনো HTML কোড ভিওয়ার এ ওপেন করলেই পেয়ে যাবেন আপনার কাঙ্ক্ষিত ওয়ার্ড কাউন্টারটি।

কোডগুলো কিভাবে ডাউনলোড করবো?

আপনি নিচের Download বাটনে ক্লিক করে কোডগুলো ডাউনলোড করতে পারবেন।

Download বাটনে ক্লিক করার পর নিচের মতো দেখতে পাবেন তখন বক্সে TrickBD লিখে Request Access/অ্যাক্সেসের অনুরোধ করুন বাটনে ক্লিক দিবেন। আক্সেস দেওয়ার পর ডাউনলোড করতে পারবেন।