How to build simple todo list with Vue.js - Part 2

In the last blog we created simple template and added Vue.js to our to do app. In this blog we will add styling to our app in order to make it less uglier. Let's get started.

At first let's create styles.css file and connect it to our index.html file:

<link rel="stylesheet" href="./styles.css" />

After that add following code to styles.css file:

html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #fff;
  overflow-x: hidden;
  background-image: linear-gradient(120deg, #f6d365, #fda085);
}

#app {
  text-align: center;
}

.title {
  margin-top: 50px;
  color: #fff;
}

input {
  margin-top: 100px;
  display: inline-block;
  outline: none;
  font-size: 1.1rem;
  padding: 5px 30px 5px 5px;
  border: none;
  border-radius: 2px;
}

button {
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 1.2rem;
  border-radius: 1px;
  background-color: #ff6f47;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 1px;
  left: -26px;
}

ul {
  width: 500px;
  margin: 50px auto 0;
  list-style-type: none;
  padding-left: 0;
  text-align: left;
}

li {
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}

li .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 0.8em;
  border-radius: 1px;
  background-color: salmon;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% - 28px);
  transform: translateY(-50%);
}

Then we will add title (before input field) to our app to show what kind of list this is:

<h1 class="title">Todo List</h1>

Wouldn't it be nice if we add remove todo functionality so that you can remove it from your todo list after completing. Let's add this:

At first we will add ✖ button to our todo item:

<li v-for="item in todolist" :key="item">
  {{item}} <button @click="remove(item)" 
  class="remove">✖</button>
</li>

And now we should add remove handler which should be fired when remove button clicked:

remove(value) {
  const filteredList = this.todolist.filter((t) => t !== value);
  this.todolist = filteredList;
}

After that the final result should look like this:

That's it for second part. In the next parts we will add checked functionality, filtering and implement localStorage in order to make our app refresh-proof. Thanks for reading. See you in the next blogs!

Blog

How to build simple todo list with Vue.js - Part 2

Jakhongir

Join Our Newsletter. No Spam, Only the good stuff.

Related