JavaScript এবং HTMX ইন্টিগ্রেশন উদাহরণ
HTMX এবং JavaScript একত্রে ব্যবহার করে আপনি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। HTMX AJAX কলের মাধ্যমে HTML মার্কআপের মাধ্যমে কার্যকরী কাজ করে, যখন JavaScript ব্যবহার করে আপনি কাস্টম লজিক এবং ইভেন্ট হ্যান্ডলিং যোগ করতে পারেন।
নিচে একটি উদাহরণ দেয়া হলো যেখানে HTMX এবং JavaScript একত্রে কাজ করছে। আমরা একটি সরল To-Do List অ্যাপ তৈরি করব, যেখানে ব্যবহারকারী একটি টাস্ক যোগ করবেন এবং JavaScript ব্যবহার করে কিছু কাস্টম লজিক যোগ করা হবে।
১. HTML ফাইল তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript and HTMX Integration</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
<style>
body {
font-family: Arial, sans-serif;
}
.task {
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
margin-bottom: 5px;
transition: transform 0.3s ease; /* CSS Transition */
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<form id="task-form" hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<h2>Tasks</h2>
<div id="task-list">
<!-- New tasks will be added here -->
</div>
<script>
// Custom event handler for form submission
document.getElementById('task-form').addEventListener('submit', function(event) {
// Prevent default form submission
event.preventDefault();
// Log the task being added
console.log('Adding task:', this.task.value);
// Submit the form using HTMX
htmx.trigger(this, 'htmx:submit'); // Trigger HTMX to handle submission
});
document.addEventListener('htmx:afterSwap', function(event) {
// Custom logic after HTMX swap
if (event.detail.target.id === 'task-list') {
const newTaskItem = event.detail.elt.querySelector('.task:last-child');
newTaskItem.style.transform = 'scale(1.1)'; // Scale up effect
setTimeout(() => {
newTaskItem.style.transform = 'scale(1)'; // Scale back to normal
}, 300); // After 300 ms
}
});
</script>
</body>
</html>
২. সার্ভার সাইড কোড (Flask)
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<div class="task">{task}</div>' # Return new task as a div
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. টার্মিনালে সার্ভার চালান
python app.py
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - একটি টাস্ক যোগ করতে ফর্মটি ব্যবহার করুন এবং "Add Task" বোতামে ক্লিক করুন।
- দেখুন কিভাবে নতুন টাস্কটি
#task-listএ যুক্ত হচ্ছে এবং JavaScript ব্যবহার করে কিছু অ্যানিমেশন ঘটছে।
সারসংক্ষেপ
- HTMX: AJAX কলের মাধ্যমে ডাইনামিক কন্টেন্ট লোড করে এবং ইন্টারঅ্যাকটিভিটি যোগ করে।
- JavaScript: HTMX ইভেন্টগুলি হ্যান্ডল করার জন্য ব্যবহার করা হয়, যা ডাইনামিক আচরণ তৈরি করতে সহায়ক।
- ইন্টিগ্রেশন: HTMX এবং JavaScript একসাথে ব্যবহার করে আরও কার্যকরী এবং আকর্ষণীয় ওয়েব অ্যাপ্লিকেশন তৈরি করা যায়।
HTMX এবং JavaScript এর এই সংমিশ্রণ আপনাকে উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে সক্ষম করে, যা ওয়েব অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত গুরুত্বপূর্ণ।
Read more
