SHARE
TWEET

Untitled

a guest Sep 11th, 2019 105 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div id="app">  
  3.     <div class="todo-app">
  4.       <div class="todo-header">{{ message }}</div>
  5.       <div class="form-group" >
  6.         <input class="todo-input" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add text and hit enter" />
  7.       </div>    
  8.       <ul class="list-container" v-if="todos">      
  9.         <li class="todo" :class="todo.completed?'complete':''" v-for="todo, index in todos" :key="index" @click.ctrl="completeIt(todo)" kept2dblclick="removeTodo(index)"> {{todo.text}} <span class="close" @click="removeTodo(index)"></li>      
  10.       </ul>
  11.       <p class="list-container" v-if="!todos.length">No todos</p>
  12.       <div class="footer">
  13.         <div class="badge-count">{{todoCount}}</div>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </template>
  18. <script>
  19. var app = new Vue({
  20.   el: '#app',
  21.   data: {
  22.     message: 'Todo App',
  23.     newTodo:'',
  24.     todos: [
  25.       { text: 'Learn JavaScript', completed: false },
  26.       { text: 'Learn Vue' , completed: true},
  27.       { text: 'Build something awesome', completed: false}
  28.     ]
  29.   },
  30.   computed:{
  31.     todoCount(){return this.todos.length}
  32.   },
  33.   methods:{
  34.     addTodo(){
  35.       console.log(this.newTodo)
  36.       if(this.newTodo.trim()){
  37.         this.todos.push({text:this.newTodo.trim(), completed:false})
  38.       }
  39.       this.newTodo='';
  40.     },
  41.     completeIt(todo){
  42.       todo.completed=!todo.completed;
  43.     },
  44.     removeTodo(index){
  45.       this.todos.splice(index, 1)
  46.       //this.todos = this.todos.filter((todo,i)=> index!=i)
  47.     }
  48.   }
  49. });
  50.  
  51.  
  52.  
  53.  
  54. </script>
  55. <style scoped>
  56. $base-color : #2cb3b9;
  57. $border-color : #e8e8e8;
  58. $border-hover-color : #7CDDcc;
  59. $base-width: 32px;
  60. $text-color : #444;
  61.  
  62. $base-x-width: $base-width*12;
  63. $base-half-width: $base-width/2;
  64. @mixin base-x-width-mix{
  65.   width: $base-x-width*.9;
  66. }
  67.  
  68. *{padding: 0; margin: 0;}
  69. body{
  70.   font-family: Tahoma;
  71.   font-size:14px;  
  72.   color: $text-color;
  73.   letter-spacing: 1px;
  74. }
  75. #app{
  76.   padding:$base-half-width;
  77. }
  78. .todo-app{
  79.   width: $base-x-width;
  80.   padding: $base-half-width 5px;
  81.   box-shadow:$base-half-width/4 $base-half-width/2 $base-half-width  $base-half-width/2 $border-color ;
  82.   .todo-header{
  83.     color:$base-color;
  84.     font-size:1.4em;
  85.     letter-spacing: 3px;
  86.     padding: $base-half-width;
  87.     margin-bottom: $base-half-width;
  88.     border-bottom:1px solid $base-color;
  89.   }
  90.   .form-group{
  91.      padding-left: $base-half-width;
  92.      @include base-x-width-mix;
  93.     .todo-input{
  94.       height:$base-width;
  95.       width: 95.5%;
  96.       border: 0;
  97.       border-bottom:1px solid $border-color;
  98.       padding-left: $base-half-width;
  99.       &::focus{
  100.         border:1px solid $border-color
  101.       }
  102.     }
  103.   }
  104.   .list-container{    
  105.     @include base-x-width-mix;
  106.     box-shadow:$base-half-width/8 $base-half-width/4 $base-half-width  $base-half-width/4 $border-color inset;
  107.     margin: $base-half-width/2 $base-half-width;
  108.     .todo{
  109.       border-bottom:1px solid $border-color;
  110.       list-style:none;
  111.       padding:10px 20px;
  112.       &:hover{
  113.         padding-left: $base-half-width;
  114.         border-left: $base-half-width/4 solid $border-hover-color;  
  115.         .close{
  116.           visibility: visible;
  117.         }
  118.       }
  119.       &:first-child{
  120.         border-top:1px solid $border-color;
  121.       }
  122.       &.complete{
  123.         text-decoration: line-through;
  124.         padding-right: $base-half-width/2;
  125.         border-right: $base-half-width/2 solid $border-hover-color;
  126.       }
  127.     }
  128.     .close{
  129.       visibility: hidden;
  130.       cursor: pointer;
  131.       &::after{
  132.         float: right;
  133.         content: "X"
  134.       }
  135.       :hover{
  136.         color: $base-color;
  137.       }
  138.     }
  139.   }
  140.   p.list-container{
  141.     text-align:center;
  142.     letter-spacing: 5px;
  143.   }
  144.   .footer{
  145.     text-align: right;
  146.     display: flex;    
  147.     .badge-count{
  148.       flex-direction: right;
  149.       border-radius: 50%;
  150.       font-size: 1.3em;
  151.       line-height: 1.7em;
  152.       background-color: $base-color;
  153.       width: $base-width;
  154.       height: $base-width;
  155.       text-align: center;
  156.       vertical-align: middle;
  157.       font-weight: bold;
  158.       color: whitesmoke;
  159.       position: absolute;
  160.       top: $base-width;
  161.       left: $base-x-width - $base-half-width;
  162.     }
  163.   }
  164. }
  165. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top