Code Complier
Amdad
💻 Real-Time Code Compiler
Paste your HTML, CSS, and JS separately to merge them instantly, get a live preview, and copy the unified code.
📦 Unified Output Code
🌐 Live Preview Screen
Awaiting code input...
টুলটির ব্যবহার বিধি (How to Use)
এই কোড কম্পাইলারটি ব্যবহার করা অত্যন্ত সহজ। নিচে ধাপে ধাপে এর নিয়মাবলী দেওয়া হলো:
- ধাপ ১ (HTML পেস্ট করুন): আপনার তৈরি করা ওয়েবসাইটের মূল কাঠামো বা HTML কোডটুকু (যেমন: <div>, <p>, <h1> ইত্যাদি) প্রথম HTML5 বক্সে পেস্ট করুন।
- ধাপ ২ (CSS পেস্ট করুন): ডিজাইন সুন্দর করার জন্য যে স্টাইলশিট বা সিএসএস কোড রয়েছে, তা দ্বিতীয় CSS3 বক্সে পেস্ট করুন। এখানে আলাদা করে <style> ট্যাগ লেখার প্রয়োজন নেই।
- ধাপ ৩ (JavaScript পেস্ট করুন): কোনো লজিক বা ডাইনামিক ফাংশন থাকলে তা তৃতীয় JavaScript বক্সে পেস্ট করুন। এখানেও আলাদা করে <script> ট্যাগ দেওয়ার প্রয়োজন নেই।
- ধাপ ৪ (লাইভ প্রিভিউ দেখুন): আপনি কোড পেস্ট বা টাইপ করার সাথে সাথেই নিচে Live Preview Screen-এ আপনার কোডের আউটপুট দেখতে পাবেন।
- ধাপ ৫ (কোড কপি করুন): তিনটি কোড একত্রিত হয়ে মাঝের Unified Output Code বক্সে জমা হবে। এবার "Copy Full Code" বাটনে ক্লিক করলেই সম্পূর্ণ প্রোডাকশন-রেডি কোডটি আপনার ক্লিপবোর্ডে কপি হয়ে যাবে।
কারিগরি সতর্কতা (Important Precautions)
টুলটি ব্যবহার করার সময় এবং ব্লগে এটি লাইভ রাখার ক্ষেত্রে কিছু বিষয়ে সতর্ক থাকা জরুরি:
- ইনলাইন ট্যাগ পরিহার করুন: CSS ও JavaScript বক্সে কোড পেস্ট করার সময় যথাক্রমে <style> এবং <script> ট্যাগগুলো বাদ দিয়ে শুধু ভেতরের মূল কোডটুকু পেস্ট করুন। অন্যথায় কোড কম্পাইল হতে সমস্যা হতে পারে।
- এক্সটার্নাল লাইব্রেরি বা সিডিএন (CDN): এই বেসিক এডিটরে বুটস্ট্র্যাপ (Bootstrap), টেইলউইন্ড (Tailwind) বা জেকোয়েরি (jQuery)-এর মতো এক্সটার্নাল সিডিএন সরাসরি ইনপুট বক্সে কাজ করবে না। এগুলো ব্যবহার করতে চাইলে HTML বক্সের একদম ওপরে সিডিএন লিংক স্ক্রিপ্ট বা লিংক ট্যাগ আকারে যুক্ত করতে হবে।
- নিরাপত্তা ও স্যান্ডবক্সিং: এই টুলে sandbox="allow-scripts" ব্যবহার করা হয়েছে। এর ফলে ইউজারদের পেস্ট করা ক্ষতিকর স্ক্রিপ্ট আপনার মূল ব্লগের ডেটা হ্যাক করতে পারবে না। নিরাপত্তার স্বার্থে আইফ্রেমের (Iframe) এই স্যান্ডবক্স অ্যাট্রিবিউটটি কখনোই কোড থেকে রিমুভ করবেন না।
- ব্রাউজার ক্যাশ ও পারফরম্যান্স: অনেক বড় সাইজের কোড (যেমন মেগাবাইট সাইজের কোড) একসাথে পেস্ট করলে ব্রাউজার সাময়িকভাবে হ্যাং হতে পারে। এটি এড়াতে মিডিয়াম বা লাইট-ওয়েট কোড ব্লকের জন্য এটি ব্যবহার করা শ্রেয়।
সচরাচর জিজ্ঞাসিত প্রশ্নোত্তর (FAQ)
প্রশ্ন ১: এই টুলটি কি আমার ব্লগের বা সাইটের কোনো ডেটা চুরি করতে পারে?
- উত্তর: একদমই না। এটি সম্পূর্ণ ক্লায়েন্ট-সাইড (Client-side) জাভাস্ক্রিপ্ট দিয়ে তৈরি। অর্থাৎ, আপনি যে কোডই এখানে পেস্ট করুন না কেন, তা কোনো সার্ভারে জমা হয় না। সবকিছু আপনার নিজস্ব ব্রাউজারের ভেতরেই প্রসেস ও কমপাইল হয়।
প্রশ্ন ২: কপি করা কোডটি আমি কোথায় ব্যবহার করতে পারব?
- উত্তর: "Copy Full Code" বাটনে ক্লিক করে যে কোডটি পাবেন, সেটি একটি পূর্ণাঙ্গ একক এইচটিএমএল ফাইল (.html)। এটি আপনি সরাসরি ব্লগারের পোস্টে, ওয়ার্ডপ্রেসের কাস্টম এইচটিএমএল ব্লগে কিংবা যেকোনো ওয়েব হোস্টিংয়ে আপলোড করে সরাসরি রান করতে পারবেন।
প্রশ্ন ৩: জাভাস্ক্রিপ্ট কোড পেস্ট করার পর লাইভ স্ক্রিনে কোনো আউটপুট দেখা যাচ্ছে না কেন?
- উত্তর: জাভাস্ক্রিপ্টের কিছু কোড (যেমন: console.log() বা ব্যাকএন্ডের লজিক) সরাসরি স্ক্রিনে দৃশ্যমান হয় না। তবে ডম ম্যানিপুলেশন (DOM Manipulation) বা অ্যালার্ট (alert()) এর মতো কোডগুলো পেস্ট করলে তা সাথে সাথেই প্রিভিউ স্ক্রিনে কাজ করা শুরু করবে। কোডে কোনো ভুল বা সিনট্যাক্স এরর থাকলে ব্রাউজার সেটি ব্যাকএন্ডে আটকে দেয়।
প্রশ্ন ৪: এই কম্পাইলারটি কি রেসপনসিভ বা মোবাইলে ব্যবহার করা যাবে?
- উত্তর: হ্যাঁ, এটি সম্পূর্ণ রেসপনসিভ গ্রিড লেআউটে তৈরি। কম্পিউটার বা ল্যাপটপে এটি পাশাপাশি তিনটি বক্স দেখাবে এবং মোবাইল স্ক্রিনে বক্সগুলো একে অপরের নিচে সুন্দরভাবে সাজিয়ে যাবে, ফলে মোবাইল ব্যবহারকারীরাও স্বাচ্ছন্দ্যে কোড পেস্ট করতে পারবেন।
