Guest User

Untitled

a guest
Sep 11th, 2019
112
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