JSFiddle - React, Tailwind, and code Playground

by birdie2019

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
<div id="app">
  <div class="input-panel">
    <input type="text" v-model="noteTitle" placeholder="標題">
    <br>
    <textarea v-model="noteContent" ref="textareaDom" placeholder="內容"></textarea>
    <br>
    <select v-model="noteColor">
      <option disabled value="">顏色</option>
      <option value="red">紅</option>
      <option value="green">綠</option>
      <option value="blue">藍</option>
    </select>
    <br>
    <button @click="addNote">新增</button>
  </div>
  <hr>
  <div v-for="(note, index) in notes" class="note" :style="{ 'background-color': note.color }">
    <h3 class="title">
      {{ note.title }}
    </h3>
    <p class="content">
      {{ note.content }}
    </p>
    <button class="del-btn" @click="delNote(note, index)">X</button>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}

button {
  cursor: pointer;
}

.input-panel {
  width: 500px;
  margin: 50px auto;

  input,
  textarea,
  select,
  button {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
  }
}

.note {
  border: 1px solid #eee;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  position: relative;
  .del-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    background-color: transparent;
    border: none;
    color: #fff;
  }
}

JavaScript

const {
  createApp
} = Vue

createApp({
  data() {
    return {
      noteTitle: null,
      noteContent: null,
      noteColor: null,
      notes: JSON.parse(localStorage.getItem('notes')) || [{
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red",
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green",
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue",
        },
      ]
    }
  },
  mounted() {
    this.notes[0].content = '多出門、到處走走、也要多運動';
    autosize(this.$refs.textareaDom);
  },
  methods: {
    addNote() {
      if (this.noteTitle != null && this.noteContent != null && this.noteColor != null) {
        let newNote = {
          title: this.noteTitle,
          content: this.noteContent,
          color: this.noteColor
        };
        this.notes.push(newNote);
        this.noteTitle = null;
        this.noteContent = null;
        this.noteColor = null;
      }
    },
    delNote(note,index) {
    	this.notes.splice(index,1);
    },
  },
  watch: {
    notes: {
      handler(newValue, oldValue) {
      	localStorage.setItem('notes', JSON.stringify(this.notes));
      },
      deep: true
    }
  }
}).mount('#app')