|
|
@@ -0,0 +1,66 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ru">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Заметки</title>
|
|
|
+ <link href="./css/css.css" rel="stylesheet" />
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <form @submit.prevent="add">
|
|
|
+ <h2>Добавление заметки:</h2>
|
|
|
+ <div class="form_cont tex" style="margin-bottom: 2%">
|
|
|
+ <label>Текст заметки:</label>
|
|
|
+ <input v-model="note.text" type="text" required/>
|
|
|
+ </div>
|
|
|
+ <div class="form_cont tex" style="margin-bottom: 2%">
|
|
|
+ <label class="form-label">Тема заметки:</label>
|
|
|
+ <div>
|
|
|
+ <label>Домашнее</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Домашнее" />
|
|
|
+ <label>Встреча</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Встреча" />
|
|
|
+ <label>Работа</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Работа" />
|
|
|
+ <label>Учеба</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Учеба" />
|
|
|
+ <label>Покупки</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Покупки" />
|
|
|
+ <label>Развлечение</label>
|
|
|
+ <input v-model="note.topic" type="radio" value="Развлечение" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_cont check" style="margin-bottom: 2%">
|
|
|
+ <label>Важная:</label>
|
|
|
+ <input v-model="note.important" type="checkbox"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_cont tex" style="margin-bottom: 2%">
|
|
|
+ <label>Цвет заметки:</label>
|
|
|
+ <select v-model="note.color">
|
|
|
+ <option value="white">Белая</option>
|
|
|
+ <option value="yellow">Желтая</option>
|
|
|
+ <option value="blue">Голубая</option>
|
|
|
+ <option value="pink">Розовая</option>
|
|
|
+ <option value="purple">фиолетовая</option>
|
|
|
+ <option value="green">зеленая</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="submit" class="">Добавить заметку</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div class="notes">
|
|
|
+ <div v-for="(note, index) in getNotes" class="note" v-bind:style="{ backgroundColor: note.color, borderColor: note.important ? 'red' : note.color }">
|
|
|
+ <h3>{{ note.text }}</h3>
|
|
|
+ <div class="topic_box">
|
|
|
+ <div>{{ note.topic }}</div>
|
|
|
+ <button @click="remove(index)" name="button">удалить заметку</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
|
+ <script src="./scripts/script.vue"></script>
|
|
|
+ </body>
|
|
|
+</html>
|
