yulya_Shabanova
/
vueJs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!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>