✨ ساخت یک Todo List ساده با JavaScript خالص (بدون Framework)
خیلی وقت‌ها برای تمرین JavaScript و DOM، یک پروژه کوچیک و واقعی مثل Todo List بهترین گزینه‌ست. هم رویدادها رو لمس می‌کنی، هم کار با DOM و هم مدیریت state ساده رو.
یکی از بهترین رفرنس‌ها برای کار با DOM و رویدادها، مستندات MDN هست:
MDN DOM Introduction
در این تمرین، با چند مفهوم مهم سر و کار داریم:
✅ گرفتن elementها با
✅ گوش دادن به eventها مثل
✅ جلوگیری از refresh فرم با
✅ دستکاری DOM با
مثال زیر یک Todo List خیلی ساده ولی عملی است. کافی‌ست یک فایل
نکته‌های ریز 👇
• استفاده از
• با
• با
این تمرین پایه خوبی برای قدم‌های بعدی مثل ذخیره‌سازی در
امتحانش روی یک فایل ساده لوکال حس خوبی از «کار کردن کد» می‌دهد و درک DOM را خیلی محکم‌تر می‌کند. اگر به درد دوستی می‌خورد که تازه JavaScript را شروع کرده، برایش بفرست 💚
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #Todo #Frontend #ES6 #VanillaJS
👤 Developix
💎 Channel: @DevelopixJavascript
خیلی وقت‌ها برای تمرین 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
🔥6
Forwarded from ابر ویراک
ویراک کلود | تجربه‌ی ابری بدون محدودیت ☁️🚀
🎁 ۲۰٪ شارژ هدیه روی اولین واریزی
مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷
💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ
همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻
📞 تماس سریع: 02191555530
🔗 https://virakcloud.com
🎁 ۲۰٪ شارژ هدیه روی اولین واریزی
مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷
💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ
همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻
📞 تماس سریع: 02191555530
🔗 https://virakcloud.com