JSFiddle - React, Tailwind, and code Playground

by Narek Tarverdyan

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <label>
    Text
    <input type="text" v-model="text">
  </label>
  <label>
    Color
    <input type="text" v-model="color">
  </label>
  <label>
    Marker
    <select v-model="marker">
      <option value="disc">disc</option>
      <option value="circle">circle</option>
      <option value="square">square</option>
    </select>
  </label>
  <hr>
  <button @click="createElement">Create</button>
  <button @click="updateElement">Change current</button>
  <button @click="deleteElement">Delete current</button>
  <hr>
  <ul>
    <li v-for="(element, index) in elements" @click="toggleFocused(index)" :class="{ focused: element.focused }" :style="{ color: element.color, listStyleType: element.marker }">
      {{element.text}}
    </li>
  </ul>
</div>

CSS

.focused {
  border: 1px solid blue;
}

li {
  margin-bottom: 5px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    elements: [],
    text: '',
    color: '',
    marker: 'disc',
  },
  methods: {
    createElement() {
        if (this.text) {
          this.elements.push({
            text: this.text,
            color: this.color,
            marker: this.marker,
            focused: false,
          });
        } else {
          alert('Please, fill text input')
        }
        this.backToNormalState()
      },
      toggleFocused(index) {
        this.text = this.elements[index].text;
        this.color = this.elements[index].color;
        this.marker = this.elements[index].marker;
        for (let i = 0; i < this.elements.length; i++) {
          this.elements[i].focused = false;
        }
        this.elements[index].focused = true;
      },
      deleteElement() {
        var needToDeleteIndex, nothingToDelete = true;
        for (let i = 0; i < this.elements.length; i++) {
          if (this.elements[i].focused === true) {
            needToDeleteIndex = i;
            this.elements.splice(needToDeleteIndex, 1);
            nothingToDelete = false;
            this.backToNormalState()
          }
        }
        if (nothingToDelete) alert('Nothing to delete')
      },
      updateElement() {
        var nothingToUpdate = true;
        for (let i = 0; i < this.elements.length; i++) {
          if (this.elements[i].focused) {
            this.elements[i].text = this.text;
            this.elements[i].color = this.color;
            this.elements[i].marker = this.marker;
            nothingToUpdate = false;
          }
        }
        if (nothingToUpdate) alert('Nothing to update')
      },
      backToNormalState() {
        this.text = '';
        this.color = '';
        this.marker = 'disc';
      }
  }
})