১৬ই মে, ২০২৪ খ্রিস্টাব্দ
সংস্করণ:
স্বগতো আমার আজকের পোস্টে।
তো আজকের পোস্টে দেখাতে চলেছি কিভাবে খুব সহজে 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>
<html lang=“en-US”>
<head>
<title> Word Counter </title>
</head>
<body>
<div class=“container”>
<h1>Word Counter</h1>
<textarea id=“input” rows=“10”></textarea>
<button onclick=“myFunc()”>Count Words</button>
<div>
Words: <span id=“wordCountResult”>0</span>
</div>
</div>
</body>
</html>
তো এর পর আমরা CSS লিখবো কাউন্টারটাকে সুন্দর দেখানোর জন্য।
আমার লেখা CSS গুলো:
<style>
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 কোডগুলো হলো:
<script type=“text/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/অ্যাক্সেসের অনুরোধ করুন বাটনে ক্লিক দিবেন। আক্সেস দেওয়ার পর ডাউনলোড করতে পারবেন।
মূলতো Spam এড়াতে এই ব্যবস্থা। (মাফ করবেন)
এক ক্লিকে আপনার মোবাইল এর সকল Apps এর Cache ক্লিয়ার করতে চাইলে এই ভিডিওটি দেখতে পারেন।
তো বরাবরের মতো ধন্যবাদ আমার এই পোস্টটি পড়ার জন্য।
পরবর্তিতে আবারো অন্য পোস্টে কথা হবে।
