DEV Community

Cover image for How to build simple todo list with Vue.js - Part 2
Jakhongir
Jakhongir

Posted on

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" />
Enter fullscreen mode Exit fullscreen mode

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%);
}

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

After that the final result should look like this:
Image description

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!

Top comments (0)