Планировщик задач — To‑Do List

Создание динамических и отзывчивых веб-интерфейсов больше не требует сложного кода и долгой разработки. С современными фреймворками, такими как Vue.js, реализация интерактивных компонентов становится интуитивно понятной и быстрой. Этот планировщик задач (ToDo List) — наглядное тому подтверждение. Vue берет на себя всю работу по реактивности: когда вы добавляете или отмечаете задачу, интерфейс мгновенно обновляется без перезагрузки страницы, создавая плавный и современный пользовательский опыт.

Убедитесь в этом сами! Протестируйте готовый компонент ниже: добавляйте задачи, отмечайте их как выполненные, удаляйте ненужные и смотрите, как динамически меняются счетчики.

Список задач

В работе {{ calcCurrent }}

Выполнено {{ calcDone }}

Пока задач нет

В работе

Выполнено

<div id="app" v-cloak>
  <h1 v-if="tasks.length === 0" class="app-title">Список задач</h1>
  <div v-else class="app-info">
    <div class="app-info__current">В работе <span class="app-num">{{ calcCurrent }}</span>
    </div>
    <div class="app-info__done">Выполнено <span class="app-num">{{ calcDone }}</span>
    </div>
  </div>
  <div class="app-form">
    <button class="app-form__btn" @click.prevent="clearInput">X</button>
    <input class="app-form__input" type="text" placeholder="Введите задачу..." v-model="task" @keyup.enter="addItem">
    <button class="app-form__btn" @click="addItem">&#8594;</button>
  </div>
  <div class="app-tasks">
    <div class="app-tasks__block">
      <p v-if="tasks.length === 0" class="app-tasks__title">Пока задач нет</p>
    </div>
    <div class="app-tasks__block">
      <p v-if="calcCurrent > 0" class="app-tasks__title">В работе</p>
      <div class="app-tasks__list">
        <template v-for="task in tasks" :key="task.text">
          <div v-if="!task.isActive" class="app-tasks__item">
            <input type="checkbox" class="app-tasks__checkbox" v-model="task.isActive">
            <span>{{ task.text }}</span>
            <button class="app-tasks__btn delete" @click.prevent="deleteItem(task.text)">X</button>
          </div>
        </template>
      </div>
    </div>
    <div class="app-tasks__block">
      <p v-if="calcDone > 0" class="app-tasks__title">Выполнено</p>
      <div class="app-tasks__list">
        <template v-for="task in tasks" :key="task.text">
          <div v-if="task.isActive" class="app-tasks__item">
            <input type="checkbox" class="app-tasks__checkbox" v-model="task.isActive">
            <span class="app-tasks__item-done">{{ task.text }}</span>
            <button class="app-tasks__btn delete" @click.prevent="deleteItem(task.text)">X</button>
          </div>
        </template>
      </div>
    </div>
  </div>
  <button v-if="tasks.length > 0" class="app-btn-delete-all" @click="deleteAll">Удалить все</button>
</div>

#app {    
  display: grid;
  gap: 20px 0;
  width: min(768px, 100%);
  padding-bottom: 30px;
  background-color: #fff;
  box-shadow: 0 10px 10px #A6ACAF;
}
.app-title {
  margin-top: 30px;
  font-size: 32px;
  text-align: center;
}
.app-info {
  display: flex;
}
.app-info > * {
  flex: 1 1 0;
  display: grid;
  place-items: center;  
  width: max-content;
  padding-block: 20px;
  color: #fff;
  font-size: 500;
}
.app-info__done {
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: #27AE60;
}
.app-info__done .app-num {
  color: #27AE60;
}
.app-info__current {
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: #E74C3C;
}
.app-info__current .app-num {
  color: #E74C3C;
}
.app-num {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  border-radius: 100vw;
}
.app-form {
  display: flex;
  justify-content: center;
  padding-inline: 30px;
}
.app-form__input {
  width: 100%;
  flex-grow: 1;
  padding-inline: 15px;
  border-block: 1px solid #000;
  border-inline: none;
  border-radius: 0;
}
.app-form__input::placeholder {
  color: #A6ACAF;
}
.app-form__input:focus-visible {
  outline: none;
}
.app-form__btn {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  line-height: 1;
  border: 1px solid #000;
  font-size: 24px;
}
.app-tasks {
  display: grid;
  gap: 5px 0;
  padding-inline: 30px;
}
.app-tasks__title {
  font-size: 24px;
  text-align: center;
}
.app-tasks__list {
  display: grid;
  gap: 5px 0;
}
.app-tasks__item {
  display: flex;
  align-items: center;
  gap: 0 10px;
  padding: 5px;
  border: 2px dashed #D7DBDD;
}
.app-tasks__checkbox {
  flex: 0 0;
  min-width: 24px;
  height: 24px;
  cursor: pointer;
}
.app-tasks__item-done {
  text-decoration: line-through;
}
.app-tasks__btn {
  flex: 0 0;
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  border: 1px solid #000;
}

.app-btn-delete-all {
  justify-self: center;
  padding: 10px 30px;
  color: #fff;
  background-color: #3498DB;
  font-weight: 700;
}
[v-cloak] {
  display: none;
}

const {createApp, ref, computed} = Vue
createApp({
	setup(){
		const tasks = ref([])
		const task = ref('')
		function addItem() {
			if (task.value === '') return			
			tasks.value.push({ id: task.value, text: task.value, isActive: false })
			task.value = ''
		}
		function clearInput() {
			task.value = ''
		}		
		function deleteItem(text) {
			for (let item of tasks.value) {
				if (text === item.text) {
					let index = tasks.value.indexOf(item)
					tasks.value.splice(index, 1)
				}
			}			
		}
		function deleteAll() {
			tasks.value = []
		}
		const calcCurrent = computed(()=>{
			let current = 0
			for (let task of tasks.value) {
				if(!task.isActive) current++
			}
			return current
		})
		const calcDone = computed(()=>{		
			let done = 0
			for (let task of tasks.value) {
				if(task.isActive) done++
			}
			return done			
		})
		return{tasks, task, addItem, clearInput, deleteItem, deleteAll, calcCurrent, calcDone}
	}
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода компонента

Чтобы вы лучше поняли, как устроен этот компонент, ниже представлены комментарии к его коду.

HTML-структура (Vue Template)

Этот шаблон определяет, как выглядит наш планировщик. Vue-директивы (атрибуты, начинающиеся с v-) делают его «живым».

v-cloak: Прячет нескомпилированные шаблоны до загрузки Vue, чтобы пользователь не видел «сырых» Mustache-тегов {{ }}.
v-if / v-else: Условный рендеринг. Заголовок «Список задач» показывается только когда список пуст. Как только появляется первая задача, показывается блок с счетчиками app-info.
v-model="task": Создает «двустороннюю привязку» между полем ввода и данными в скрипте. Когда пользователь печатает, значение переменной task автоматически обновляется.
@keyup.enter и @click: Обработчики событий. Vue реагирует на нажатие клавиши Enter или клик по кнопке и вызывает соответствующий метод addItem.
v-for="task in tasks": Цикл для отрисовки списка задач. Для каждого элемента в массиве tasks создается блок HTML.
v-bind:key="task.text": Помогает Vue однозначно идентифицировать каждый узел в списке для корректного обновления.
v-model="task.isActive": Связывает чекбокс со свойством isActive каждой задачи. При клике состояние автоматически меняется в данных, что сразу влияет на отображение (задача перемещается между «В работе» и «Выполнено»).

Стили (CSS)

Стили обеспечивают адаптивный и визуально приятный интерфейс.

Адаптивность: Используются современные единицы измерения, такие как clamp() и min(), чтобы компонент хорошо выглядел на всех устройствах — от мобильных телефонов до десктопов.
CSS Grid и Flexbox: Эти технологии макета используются для создания структурированного, гибкого и выровненного дизайна.
Состояния элементов: Псевдокласс :focus-visible улучшает доступность, а селектор [v-cloak] скрывает необработанный контент.

Логика (Vue 3 Composition API)

Это «мозг» нашего приложения, написанный с использованием современного Composition API.

Реактивные данные:

tasks — это реактивный массив, где хранятся все наши задачи. Каждая задача — это объект с текстом и статусом выполнения.
task — реактивная строка, которая хранит текст новой задачи из поля ввода.

Методы:

addItem() — добавляет новую задачу в массив tasks, если поле ввода не пустое.
deleteItem(text) — находит и удаляет задачу по ее текстовому содержимому.
deleteAll() — полностью очищает список задач.
clearInput() — очищает поле ввода.

Вычисляемые свойства computed:

calcCurrent — автоматически вычисляет количество невыполненных задач. Vue сам следит за зависимостями, и значение пересчитывается только при изменении массива tasks.
calcDone — аналогично вычисляет количество выполненных задач.

Использование Composition API делает код модульным и легко расширяемым. Вся логика сосредоточена в функции setup(), что упрощает ее повторное использование и организацию.

Готовы оживить ваш проект?

Вам нужен не просто планировщик, а уникальный интерактивный элемент для вашего сайта или веб-приложения? Этот пример — лишь малая часть того, что мы можем создать.

Наша веб-студия специализируется на разработке креативных, быстрых и пользовательских интерфейсов. Мы готовы воплотить в жизнь любую вашу идею — от сложных дашбордов и анимированных виджетов до полноценных веб-приложений.

Свяжитесь с нами для бесплатной консультации!

Предыдущий Следующий