জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল এনকোডার এবং ডিকোডার টুল তৈরি করতে হয় কিভাবে

আপনাদের মধ্যে অনেকেই আছেন যারা ব্লগে আমার মতো কোড সম্পর্কিত পোষ্ট করে থাকেন। ব্লগে এইচটিএমএল কোড দেওয়ার ক্ষেত্রে অবশ্যই কোড এনকোড করে ব্যবহার করতে হয় তা না হলে কোড দেখানোর পরিবর্তে কোডের রেজাল্ট দেখায়। কোড এনকোড করার জন্য বেশিরভাগই অনলাইন টুল ব্যবহার করে থাকেন। অনলাইন টুল ব্যবহার করতে হলে যখন ইন্টারনেট থাকে না তখন এনকোড করতে পারবেন না। আজকের পোস্টে আমি আপনাদের দেখাবো কিভাবে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি এইচটিএমএল এনকোড এবং ডিকোড করার টুল তৈরি করা যায় যেটা আপনারা লোকাল স্টোরেজ থেকে অফলাইনে অ্যাকসেস করতে পারবেন এবং প্রয়োজনে আপনার সাইটে অন্যদের ব্যবহার করার জন্য এরকম একটি টুল হোস্ট করতে পারবেন। তাহলে চলুন আর কথা না বাড়িয়ে জাম্প করা যাক মূল পোস্টে।

Required JS Files

টুলটি ব্যবহার করার জন্য আপনার এইচটিএমএল এর মধ্যে যেকুয়েরী ইনস্টল থাকতে হবে এবং htmlencode নামে আরো একটি জাভাস্ক্রিপ্ট ফাইলের দরকার হবে যেটাতে কোন ক্যারেক্টার এর জন্য কোন কোড আসবে সেটা ডিফাইন করা থাকবে। আপনারা এই জাভাস্ক্রিপ্ট ফাইলটি নিচের লিংকে গিয়ে গিটহাব থেকে ডাউনলোড করতে পারবেন অথবা আমি শেষে পুরো প্রজেক্ট এর যে লিঙ্ক দেব সেই প্রজেক্ট এর মধ্যেও ফাইলটি থাকবে।

Download htmlencode.js

HTML

যেকুয়েরী এবং htmlencode.js আপনার এইচটিএমএল এর মধ্যে ইনস্টল করার পর এবার নিচের এইচটিএমএল কোডগুলো কপি করে আপনি যে জায়গায় টুলটি বসাতে চান সেখানে পেস্ট করে দিন।

<div class="container">
    <div class="input">
        <textarea rows="12" id="input" placeholder="Input"></textarea>
    </div>
    <div class="action">
        <button onclick="method = htmlEncode; execute()">Encode</button>
        <button onclick="method = htmlDecode; execute()">Decode</button>
    </div>
    <div class="output">
        <textarea rows="12" id="output" placeholder="Output" readonly></textarea>
    </div>
</div>

CSS

যদিও সিএসএস ছাড়াও টুলটি কাজ করবে। তারপরেও টুলটিকে একটি ম্যাটেরিয়াল লুক দেওয়া উচিত। এইচটিএমএল সঠিক জায়গায় প্লেস করার পর এবার টুলটি ডিজাইন করার জন্য নিচের সিএসএস কোডগুলো আপনার সিএসএস ফাইল এর মধ্যে যুক্ত করে দিন অথবা এইচটিএমএল এর মধ্যে স্টাইল ট্যাগ এর ভিতরে পেস্ট করে দিন।

.container {
  padding: 20px;
}
.input textarea,
.output textarea {
  width: 100%;
  border: 20px solid white;
  background: none;
  color: black;
  box-shadow:
    0 0 1px #555,
    0 0 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  outline: none
}
textarea:focus {
  box-shadow: 
    0 0 1px teal,
    0 0 8px rgba(0,128,128,0.2);
}
.action {
  margin: 20px 0;
  display: flex;
  justify-content: center
}
.action button {
  line-height: 40px;
  padding: 0 15px;
  margin: 0 10px;
  background: white;
  color: teal;
  border: 1px solid teal;
  border-radius: 3px;
  font-size: 18px;
  font-weight: bold;
  outline: none;
  user-select: none;
  transition: all 0.2s
}
.action button:active {
    background: rgba(0,128,128,0.2)
}

JavaScript

টুল এর ডিজাইন শেষে এবার পালা টুলটি রান করার যেটা আমরা করবো জাভাস্ক্রিপ্ট ব্যবহার করে। তো এবার নিচের জাভাস্ক্রিপ্ট কোডগুলো কপি করে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করে সেখানে পেস্ট করে দিন এবং এইচটিএমএল এর সাথে লিঙ্ক করে দিন। আর হ্যা এই ফাইলটি লিঙ্ক করার সময় অবশ্যই যেকুয়েরী এবং htmlencode.js এই দুটি ফাইলের নিচে লিঙ্ক করবেন।

function hexToString(hex) {
    if (!hex.match(/^[0-9a-fA-F]+$/)) {
        throw new Error('is not a hex string.');
    }
    if (hex.length % 2 !== 0) {
        hex = '0' + hex;
    }
}
var input = $('#input');
var output = $('#output');
var option = $('[data-option]');
var inputType = $('#input-type');
    
function execute() {
    try {
        var type = 'text';
        var val = input.val();
        if (inputType.length) {
            type = inputType.val();
        }
        if (type === 'hex') {
            val = hexToString(val);
        }
        output.val(method(val, option.val()));
    }
    catch (e) {
        output.val(e);
    }
}

Download Project

তো পোস্ট মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।

Download Project