JSFiddle - React, Tailwind, and code Playground

by yoyosan

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>
    <input id="input" type="text" v-model="newTitle" placeholder="記事標題"/>
    <br>
    <textarea id="content" v-model="newContent" placeholder="記事內容" ref="noteTextarea"></textarea>
    <br>
    <select id="select" v-model="newColor">
      <option value="red">紅色</option>
      <option value="green">綠色</option>
      <option value="blue">藍色</option>

    </select>
    <br>
    <button id="sumitbutton" @click="addNote">新增</button>
  </div>

  <div class="note" v-for = "(note, index) in notes" :key="index" :style = "{color:note.color}">
    <h3 class="title">
      {{ note.title }}
    </h3>
    <p class="content">
      {{ note.content }}
    </p>
    <button @click="deleteNote(index)">刪除</button>
  </div>

</div>

CSS

.note {
  border: 1px solid #eee;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  width: 500px;
}

#input {
  width: 400px;
  height: 25px;
  margin: 20px;
}

#content {
  width: 400px;
  height: 200px;
  margin: 20px;
}

#select {
  width: 50px;
  height: 25px;
  margin: 5px 20px;

}

#sumitbutton {
  margin: 5px 20px;
}

JavaScript

const maincontent = Vue.createApp({
  data() {
    return {
      notes: JSON.parse(localStorage.getItem('notes')) ||  [
        {
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red"
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green"
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue"
        },
      ],
      newTitle:'',
      newContent:'',
      newColor:'black',

      suredata:0


    };
  },
  mounted() {
    this.notes[0].content = '多出門、到處走走、也要多運動';
    autosize(this.$refs.noteTextarea);


  },
  methods: {
    addNote() {
      if (this.newTitle && this.newContent) {
        this.notes.push ({
          title:this.newTitle,
          content:this.newContent,
          color:this.newColor
        });
        this.newTitle = "";
        this.newContent = "";
        this.newColor = "black";
      }
    },

    deleteNote(index) {
      this.notes.splice(index, 1);
    }
  },

  watch: {
    notes: {
      handler(newValue, oldValue) {
        localStorage.setItem('notes', JSON.stringify(this.notes));
      },
      deep: true
    }
  }

}).mount('#app')