🚀 Веб-разработка с нуля: Урок 13 - Создаем модальное окно

Привет, разработчики! 👨💻👩💻
Сегодня научимся создавать профессиональные модальные окна для нашего To-Do List.

🔥 Что нового изучим:
1. Создание модальных окон на чистом CSS/JS
2. Работу с CSS-анимациями
3. Лучшие практики UX для модальных окон

💻 Практика: добавляем редактирование задач

1. Обновляем HTML:

<!-- Добавляем перед закрывающим </body> -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Редактировать задачу</h2>
    <input type="text" id="editInput">
    <button id="saveEdit">Сохранить</button>
  </div>
</div>

2. Добавляем новые стили:

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s;
}

.modal-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  animation: slideDown 0.3s;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { 
    transform: translateY(-50px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

3. Модернизируем JavaScript:

// Добавляем в script.js
const modal = document.getElementById('modal');
const editInput = document.getElementById('editInput');
const saveEditBtn = document.getElementById('saveEdit');
let currentEditingTask = null;

// Показываем модальное окно при клике на задачу
document.querySelectorAll('#taskList li span').forEach(span => {
  span.addEventListener('click', function() {
    currentEditingTask = this;
    editInput.value = this.textContent;
    modal.style.display = 'block';
  });
});

// Закрытие модального окна
document.querySelector('.close').addEventListener('click', closeModal);
window.addEventListener('click', function(e) {
  if (e.target == modal) closeModal();
});

saveEditBtn.addEventListener('click', function() {
  if (editInput.value.trim() !== '') {
    currentEditingTask.textContent = editInput.value;
    closeModal();
    saveTasks();
  }
});

function closeModal() {
  modal.style.display = 'none';
  editInput.value = '';
}

🎯 Что мы получили:
✅ Плавные анимации открытия/закрытия
✅ Возможность редактирования задач
✅ Затенение фона при открытии модалки
✅ Закрытие по клику вне окна

💡 Профессиональные советы:
1. Всегда добавляйте анимации для плавности интерфейса
2. Реализуйте закрытие по ESC:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeModal();
});

3. Фокусируйте input при открытии:

editInput.focus();

👉 В следующем уроке:
Создадим drag&drop сортировку для нашего списка задач!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пишите, какие элементы интерфейса хотите научиться создавать! 💬

#вебразработка #javascript #модальноеокно #CSSанимации #UX

🚀 Веб-разработка с нуля: Урок 14 - Drag&Drop сортировка

Привет, будущие гуру интерфейсов! 👨💻👩💻
Сегодня добавим в наш To-Do List профессиональную сортировку задач перетаскиванием — как в лучших менеджерах задач!

🔥 Что нового освоим:
1. HTML5 Drag and Drop API
2. Работу с событиями перетаскивания
3. Сохранение порядка задач в localStorage

🖱 Основные события Drag&Drop:
- dragstart — начало перетаскивания
- dragover — элемент над областью сброса
- drop — сброс элемента
- dragend — завершение перетаскивания

💻 Реализуем сортировку:

1. Обновляем HTML (добавляем атрибуты draggable):

<ul id="taskList">
  <!-- Для каждого li добавляем -->
  <li draggable="true" data-id="1">...</li>
</ul>

2. Добавляем стили для перетаскивания:

/* В styles.css */
li[draggable="true"] {
  cursor: grab;
}

li.dragging {
  opacity: 0.5;
  background: #f8f9fa;
  border: 2px dashed #007bff;
}

li.drag-over {
  border-top: 2px solid #28a745;
}

3. Модернизируем JavaScript:

// В script.js
let draggedItem = null;

function setupDragAndDrop() {
  const items = document.querySelectorAll('#taskList li');
  
  items.forEach(item => {
    item.addEventListener('dragstart', function() {
      draggedItem = this;
      setTimeout(() => this.classList.add('dragging'), 0);
    });

    item.addEventListener('dragend', function() {
      this.classList.remove('dragging');
    });

    item.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('drag-over');
    });

    item.addEventListener('dragleave', function() {
      this.classList.remove('drag-over');
    });

    item.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('drag-over');
      
      if (draggedItem !== this) {
        const allItems = document.querySelectorAll('#taskList li');
        const thisIndex = [...allItems].indexOf(this);
        const draggedIndex = [...allItems].indexOf(draggedItem);
        
        if (draggedIndex < thisIndex) {
          this.after(draggedItem);
        } else {
          this.before(draggedItem);
        }
        
        saveTasks();
      }
    });
  });
}

// Вызываем после загрузки задач
loadTasks();
setupDragAndDrop();

4. Обновляем функции save/load:

function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#taskList li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed'),
      id: Date.now() + Math.random() // Уникальный ID
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = '';
    JSON.parse(savedTasks).forEach(task => {
      addTask(task.text, task.completed, task.id);
    });
  }
}

🎯 Что мы получили:
✅ Плавную сортировку перетаскиванием
✅ Визуальные подсказки при перетаскивании
✅ Сохранение порядка между сеансами
✅ Полноценный менеджер задач уровня PRO

💡 Профессиональные лайфхаки:
1. Добавьте ограничение перетаскивания по вертикали:

item.addEventListener('dragover', function(e) {
  e.preventDefault();
  const dragY = e.clientY;
  const rect = this.getBoundingClientRect();
  const middleY = rect.top + rect.height / 2;
  
  if (dragY < middleY) {
    this.classList.add('drag-over-top');
  } else {
    this.classList.remove('drag-over-top');
  }
});

2. Используйте более плавную анимацию:

li {
  transition: transform 0.2s, opacity 0.2s;
}

👉 В следующем уроке:
Превратим наше приложение в PWA (Progressive Web App) с оффлайн-работой!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими реализациями в комментариях! 💬

#вебразработка #javascript #DragAndDrop #UI #UX