JSFiddle - React, Tailwind, and code Playground

by aadil hasan

HTML

<script src="https://cdn.jsdelivr.net/npm/mini-js/build/mini.min.js"></script>
<div id="app">
  <h1>Mini JS Todo App!</h1>
  <input placeholder="Start typing.." autofocus m-on:change="onChange" />
  <ul>
    <li m-for="todo, index in todos">
      <div>
        <span>{{todo}} </span>
        <button m-on:click="removeItem(index)">
          x
        </button>
      </div>
    </li>
  </ul>
  <h3 m-if="todos.length === 0"> No todo found ! </h3>

</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");

body {
  font-family: "Inter", sans-serif;
  padding: 50px;
}

#app {
  max-width: 500px;
}

h1 {
  text-align: center;
}

input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #32485F;
  border-radius: 2px;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

button {
  margin-left: 10px;
}

JavaScript

var app = new Mini({
  el: '#app',
  data: {
    todos: ['Learn Rust', 'Write more examples for Mini JS', 'Exercise']

  },
  methods: {
    onChange: function(e) {
      const _todos = [e.target.value, ...this.todos];
      this.todos = _todos;
      e.target.value = "";
    },
    removeItem: function(index) {
      const _todos = [...this.todos]
      _todos.splice(index, 1);
      this.todos = _todos;
    }
  }
})