🚀 ساخت یک TODO List ساده با Vanilla JavaScript (بدون فریم‌ورک)
گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓
این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage
در این مینی‌پروژه:
✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی
ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.
نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):
چند نکته‌ی کاربردی 💡
•
• همیشه قبل از push، مقدار input را
• با جداکردن تابع‌های
این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨
امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend
👤 Developix
💎 Channel: @DevelopixJavascript
گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓
این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage
در این مینی‌پروژه:
✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی
ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.
نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Todo Vanilla JS</title>
<style>
body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
li { display: flex; justify-content: space-between; margin: 4px 0; }
button { margin-right: 8px; }
</style>
</head>
<body>
<h1>Todo List</h1>
<input id="todo-input" placeholder="New task..." />
<button id="add-btn">Add</button>
<ul id="todo-list"></ul>
<script>
const input = document.querySelector("#todo-input");
const addBtn = document.querySelector("#add-btn");
const list = document.querySelector("#todo-list");
let todos = JSON.parse(localStorage.getItem("todos") || "[]");
function save() {
localStorage.setItem("todos", JSON.stringify(todos));
}
function render() {
list.innerHTML = "";
todos.forEach((text, index) => {
const li = document.createElement("li");
li.textContent = text;
const removeBtn = document.createElement("button");
removeBtn.textContent = "x";
removeBtn.addEventListener("click", () => {
todos.splice(index, 1);
save();
render();
});
li.prepend(removeBtn);
list.appendChild(li);
});
}
addBtn.addEventListener("click", () => {
const value = input.value.trim();
if (!value) return;
todos.push(value);
input.value = "";
save();
render();
});
render();
</script>
</body>
</html>
چند نکته‌ی کاربردی 💡
•
JSON.parse و JSON.stringify این‌جا برای تبدیل آرایه به string و برعکس استفاده شده؛ دقیقا مطابق چیزی که MDN برای localStorage پیشنهاد می‌دهد.• همیشه قبل از push، مقدار input را
.trim() کن تا task خالی ذخیره نشود.• با جداکردن تابع‌های
save و render، بعدا راحت می‌شود featureهایی مثل edit یا checkbox برای completed اضافه کرد.این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨
امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend
👤 Developix
💎 Channel: @DevelopixJavascript
🔥7❤3