приложение создание чеклистов с сохранением в локал сторадж
<!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>