مدونة مقالة للمعلوميات

In this tutorial, you'll learn to create a modern, interactive To-Do List application using HTML, CSS, and JavaScript. Perfect for beginners!

Step 1: HTML Structure

<div class="todo-container">
  <input type="text" id="todo-input" placeholder="Add a new task...">
  <button id="add-btn">Add Task</button>
  <ul id="todo-list"></ul>
</div>
      

Step 2: CSS Styling

.todo-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#todo-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #3498db;
  border-radius: 6px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  margin-bottom: 8px;
  border-radius: 6px;
}
      

Step 3: JavaScript Functionality

document.getElementById('add-btn').addEventListener('click', addTodo);

function addTodo() {
  const input = document.getElementById('todo-input');
  const todoText = input.value.trim();
  
  if (todoText === '') return;
  
  const li = document.createElement('li');
  li.className = 'todo-item';
  li.innerHTML = `
    ${todoText}
    
  `;
  
  li.querySelector('.delete-btn').addEventListener('click', () => {
    li.remove();
  });
  
  document.getElementById('todo-list').appendChild(li);
  input.value = '';
}
      

Step 4: Add Features (Optional)

Enhance your app with these features:

• Local Storage for persistence
• Edit existing tasks
• Due dates and priorities
• Dark mode toggle

Final Result