# приложение создание чеклистов с сохранением в локал сторадж

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Создание чеклистов с сохранением в локальном хранилище</title>
<!-- Tailwind CSS -->
<script src="https://app.aisearch.ru/static/tailwind/tailwind.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body class="bg-gray-100 font-['Roboto'] min-h-screen flex items-center justify-center p-4">
<div id="app" class="w-full max-w-xl bg-white rounded-lg shadow-lg p-6">
  <h1 class="text-2xl font-bold mb-4 text-center text-gray-800">Создание чеклистов</h1>
  <!-- Поле для добавления нового пункта -->
  <div class="flex mb-4">
    <input v-model="newItem" @keyup.enter="addItem" type="text" placeholder="Новый пункт" class="flex-1 border border-gray-300 rounded-l px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"/>
    <button @click="addItem" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r flex items-center">
      <i class="fas fa-plus"></i>
    </button>
  </div>
  <!-- Список пунктов -->
  <ul class="divide-y divide-gray-200 mb-4">
    <li v-for="(item, index) in items" :key="index" class="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded">
      <div class="flex items-center space-x-2">
        <input type="checkbox" v-model="item.completed" @change="saveItems" class="form-checkbox h-5 w-5 text-blue-600"/>
        <span :class="{'line-through text-gray-400': item.completed, 'text-gray-800': !item.completed}">
          {{ item.text }}
        </span>
      </div>
      <button @click="removeItem(index)" class="text-red-500 hover:text-red-700 flex items-center">
        <i class="fas fa-trash-alt"></i>
      </button>
    </li>
  </ul>
  <!-- Кнопки управления -->
  <div class="flex justify-between space-x-2">
    <button @click="clearAll" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded flex items-center justify-center w-full">
      <i class="fas fa-trash"></i> Очистить все
    </button>
    <button @click="saveItems" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center justify-center w-full">
      <i class="fas fa-save"></i> Сохранить
    </button>
  </div>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  mounted() {
    this.loadItems();
  },
  methods: {
    addItem() {
      const text = this.newItem.trim();
      if (text !== '') {
        this.items.push({ text: text, completed: false });
        this.newItem = '';
        this.saveItems();
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
      this.saveItems();
    },
    clearAll() {
      this.items = [];
      this.saveItems();
    },
    saveItems() {
      localStorage.setItem('checkboxList', JSON.stringify(this.items));
    },
    loadItems() {
      const data = localStorage.getItem('checkboxList');
      if (data) {
        try {
          this.items = JSON.parse(data);
        } catch(e) {
          this.items = [];
        }
      }
    }
  }
}).mount('#app');
</script>
</body>
</html>
