| کانال توسعه‌دهندگان جاوااسکریپت |
✨ ساخت یک Todo List ساده با JavaScript خالص (بدون Framework)
خیلی وقت‌ها برای تمرین JavaScript و DOM، یک پروژه کوچیک و واقعی مثل Todo List بهترین گزینه‌ست. هم رویدادها رو لمس می‌کنی، هم کار با DOM و هم مدیریت state ساده رو.
یکی از بهترین رفرنس‌ها برای کار با DOM و رویدادها، مستندات MDN هست:
MDN DOM Introduction
در این تمرین، با چند مفهوم مهم سر و کار داریم:
✅ گرفتن elementها با querySelector
✅ گوش دادن به eventها مثل submit و click
✅ جلوگیری از refresh فرم با event.preventDefault()
✅ دستکاری DOM با createElement و appendChild
مثال زیر یک Todo List خیلی ساده ولی عملی است. کافی‌ست یک فایل index.html بسازی و این کد را داخلش قرار بدهی و در مرورگر باز کنی:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Todo</title>
<style>
body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
form { display: flex; gap: 8px; }
ul { padding: 0; list-style: none; }
li { display: flex; justify-content: space-between; margin: 4px 0; }
button { cursor: pointer; }
</style>
</head>
<body>
<h1>Todo List</h1>
<form id="todo-form">
<input id="todo-input" placeholder="New task..." required />
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
<script>
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');
form.addEventListener('submit', function (event) {
event.preventDefault();
const text = input.value.trim();
if (!text) return;
const li = document.createElement('li');
const span = document.createElement('span');
span.textContent = text;
const removeBtn = document.createElement('button');
removeBtn.textContent = 'x';
removeBtn.addEventListener('click', function () {
list.removeChild(li);
});
li.appendChild(span);
li.appendChild(removeBtn);
list.appendChild(li);
input.value = '';
input.focus();
});
</script>
</body>
</html>
نکته‌های ریز 👇
• استفاده از trim() جلوی اضافه شدن تسک خالی را می‌گیرد.
• با event.preventDefault() فرم صفحه را reload نمی‌کند و کنترل دست ما می‌ماند.
• با addEventListener روی خود دکمه حذف کار می‌کنیم تا ساختار کد تمیزتر بماند.
این تمرین پایه خوبی برای قدم‌های بعدی مثل ذخیره‌سازی در localStorage، اضافه کردن فیلتر (Completed / Active) یا بعداً پیاده‌سازی همین ایده در React یا Vue است.
امتحانش روی یک فایل ساده لوکال حس خوبی از «کار کردن کد» می‌دهد و درک DOM را خیلی محکم‌تر می‌کند. اگر به درد دوستی می‌خورد که تازه JavaScript را شروع کرده، برایش بفرست 💚
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #Todo #Frontend #ES6 #VanillaJS
👤 Developix
💎 Channel: @DevelopixJavascript
14 · 1.5K ·