ساخت Todo App بدون فریمورک با جاوااسکریپت
مقدمه
اپلیکیشن Todo یکی از ساده‌ترین و پرکاربردترین پروژه‌ها برای یادگیری برنامه‌نویسی فرانت‌اند است. در این مقاله، با استفاده از HTML، CSS و JavaScript خالص (Vanilla JS)، یک Todo App بدون هیچ فریمورکی خواهیم ساخت تا مفاهیم پایه‌ای DOM، مدیریت رویدادها و تعامل با کاربر را بهتر درک کنیم.
ساختار HTML
ابتدا ساختار اولیه HTML را ایجاد می‌کنیم. این شامل یک ورودی برای اضافه کردن وظیفه جدید، یک دکمه برای ثبت، و یک لیست برای نمایش وظایف است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Todo App</h1>
<input type="text" id="todo-input" placeholder="افزودن کار جدید...">
<button id="add-btn">افزودن</button>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>استایل‌دهی با CSS
برای زیباتر کردن ظاهر برنامه، استایل‌های ساده‌ای اضافه می‌کنیم.
body {
font-family: Tahoma, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 0.5rem;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 0.5rem;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
}
li.done {
text-decoration: line-through;
color: gray;
}نوشتن کد جاوااسکریپت
در این مرحله منطق برنامه را با جاوااسکریپت می‌نویسیم تا کاربر بتواند وظایف را اضافه، حذف و علامت‌گذاری کند.
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
addBtn.addEventListener('click', () => {
const taskText = input.value.trim();
if (taskText === '') return;
const li = document.createElement('li');
li.textContent = taskText;
const removeBtn = document.createElement('button');
removeBtn.textContent = 'حذف';
removeBtn.style.marginRight = '10px';
removeBtn.addEventListener('click', () => {
li.remove();
});
li.addEventListener('click', () => {
li.classList.toggle('done');
});
li.appendChild(removeBtn);
todoList.appendChild(li);
input.value = '';
});
});ویژگی‌های قابل گسترش
در نسخه‌های بعدی می‌توان امکاناتی مانند ذخیره‌سازی در localStorage، قابلیت ویرایش وظایف، اولویت‌بندی و فیلتر کردن کارها را اضافه کرد.
جمع‌بندی
ساخت Todo App با جاوااسکریپت خالص به ما کمک می‌کند تا مفاهیم پایه‌ای مانند مدیریت DOM، رویدادها و تعامل با کاربر را بهتر درک کنیم. این پروژه پایه‌ای خوبی برای ورود به دنیای برنامه‌نویسی وب است.
