DEV Community

Alhiane Lahcen
Alhiane Lahcen

Posted on

4 3

Todo List in Vue.js

  • hi there we gonna make todo list with sample code in vue js *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #app{
            margin: 45px auto;
            background: white;
            width: 400px;
            padding: 10px;
            box-shadow: 0 0 8px 3px #2222221a;
        }
        .com {
            text-decoration: line-through;
            color: #fff;
            background: #11c170;
        }
        ul {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            background: #fff;
            margin: 5px 0;
            padding: 18px;
            font-family: cairo;
            font-weight: 700;
            color: #11c170;
            border: 1px solid #11c170;
        }
        img{
            width: 20%;
        }
        button {
            /* height: 20px; */
            padding: 0;
            border-radius: 3px;
            float: right;
            border: 1px solid #11c170;
            margin-left: 5px;
            padding: 7px 2px;
            font-size: 12px;
            color: #fff;
            background: #11c170;
        }
        input[type="text"] {
            height: 36px;
            padding: 6px;
            margin: 30px 6px;
            width: 93%;
            border: 1px solid #eee;
        }
        .red , .res {
            background: red;
            height: 50px;
            width: 80px;
            margin: 20px auto;
        }
        .add {
            background: #fff;
            color: #11c170;
            padding: 20px;
            transform: translate(-143px,-19px);
            border: 4px solid;
            cursor: pointer;
            border-radius: 15px;
            box-shadow: 0 0 9px 3px #2222221a;
        }
        .vider {
            background: #fff;
            color: #6f6f6f;
            padding: 20px;
            transform: translate(-130px,-19px);
            border: 4px solid;
            cursor: pointer;
            border-radius: 15px;
            box-shadow: 0 0 9px 3px #2222221a;
        }
        .delete {
            background: #fff;
            color: red;
            padding: 20px;
            transform: translateY(-19px);
            border: 4px solid;
            cursor: pointer;
            border-radius: 15px;
            box-shadow: 0 0 9px 3px #2222221a;
        }
        button.add:hover {
            background: #11c170;
            color: #fff;
            transition: background .3s ease-in-out;
        }
        .vider:hover {
            background: #6f6f6f;;
            color: #fff;
            transition: background .3s ease-in-out;
        }
        .delete:hover {
            background: red;
            color: #fff;
            transition: background .3s ease-in-out;
        }
        .error {
            border-color: red !important;
        }
        button:disabled {
            color: #bfb9b9;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

    <div id="app">  
        <ul v-if="todos">
            <li v-for="(x,index) in todos" :class="x.doit ? 'com' : 'non'">
                {{x.name}}
                <span>{{x.Duree}}</span>
                <button @click.prevent="rem(index)">Delete</button>
                <button @click.prevent="x.doit = !x.doit">Completed</button>
            </li>
        </ul>
        <form action="">
            <label for="text"></label>
                <input v-model="titleTex" name="text" type="text" :class="!titleTex ? 'error' :'' ">            
                <button @click.prevent="deleteAll" :disabled="todos.length <= 1" class="delete">Delete All</button>
                <button @click.prevent="titleTex = ''" class="vider">Vider</button>
                <button @click.prevent="send" class="add">Add</button>

        </form>
    </div>   
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

// ** Vue js Code **


// this file must be include from cdn <script src="vue.js"></script>

        Vue.component('applica',{
            data : function(){

            }
        })
        var appa = new Vue({
            el : '#app',
            data : {
                titleTex : "",
                doit: false,
                todos :[
                    {name : "Replier Emails",doit : false}                    
                ]
            },
            methods  : {
                send : function(){
                    if(this.titleTex != ""){
                        this.todos.push({name : this.titleTex,doit: false});
                        this.titleTex = "";
                        this.desc = "";
                    }
                },
                rem : function(x){
                    this.todos.splice(x,1);
                },
                doo : function(x){
                    this.todos[x].doit = !this.todos[x].doit;
                    console.log(this.todos[x].name + this.todos[x].doit);                    
                },
                deleteAll : function(){
                    this.todos = [];
                }
            },
            computed : {

            },
            watch : {

            }
        })


Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Retry later