├── .gitignore ├── README.md ├── index.html └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js Fundamentals 2 | 3 | [![](https://vueschool.s3.amazonaws.com/089f25af6e0e1f678474f10e98fdb6d0/vuejs-fundamentals.png)](https://vueschool.io/courses/vuejs-fundamentals) 4 | 5 | This repository contains the example code for the [Vue.js Fundamentals](https://vueschool.io/courses/vuejs-fundamentals) course. 6 | 7 | This Vue.js course will teach you and get you up and running with the fundamental concepts of Vue.js. Perfect if you haven't touched Vue before or you just getting started! 8 | 9 | #### Topics covered: 10 | 11 | - Introduction to two-way data binding 12 | - Template syntax and expressions 13 | - Vue directives, loops and conditional rendering 14 | - Vue Devtools 15 | - Handling user Inputs 16 | - Handling Events 17 | - Vue.js Methods and Computed Properties 18 | - Attribute Bindings and dynamic classes 19 | - Components 20 | 21 | The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue. 22 | 23 | The course is free. [Enroll at Vue School!](https://vueschool.io/courses/vuejs-fundamentals) 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shopping List App 6 | 7 | 8 | 9 |
10 |
11 |

{{ header.toLocaleUpperCase() }}

12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 | 22 |

Nice job! You've bought all your items.

23 |
24 | 25 | 73 | 74 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #EFF8FF; 3 | height: 100vh; 4 | width: 100vw; 5 | font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | #shopping-list { 14 | background: #FFF; 15 | padding: 2rem; 16 | margin: 1rem; 17 | border-radius: 3px; 18 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08); 19 | width: 95%; 20 | max-width: 900px; 21 | } 22 | 23 | h1 { 24 | color: #3D4852; 25 | } 26 | 27 | ul { 28 | list-style: none; 29 | padding: 0; 30 | } 31 | 32 | a { 33 | color: #6CB2EB; 34 | font-size: 1.25rem; 35 | transition: all .1s ease-in; 36 | margin-top: .5rem; 37 | display: block; 38 | } 39 | 40 | a:hover { 41 | color: #3490DC; 42 | } 43 | 44 | li, p { 45 | display: flex; 46 | align-items: center; 47 | line-height: 1.75; 48 | letter-spacing: .5px; 49 | color: #3D4852; 50 | font-size: 1.25rem; 51 | cursor: pointer; 52 | transition: all .1s ease-in; 53 | } 54 | 55 | li:hover { 56 | color: #22292F; 57 | } 58 | 59 | li input { 60 | margin: 0 .5rem 0; 61 | } 62 | 63 | #shopping-list > input, #shopping-list > select { 64 | width: 100%; 65 | border-radius: 3px; 66 | box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10); 67 | border: 1px solid #F1F5F8; 68 | color: #606F7B; 69 | padding: .5rem .75rem; 70 | box-sizing: border-box; 71 | font-size: 1rem; 72 | letter-spacing: .5px; 73 | margin: .5rem 0 74 | } 75 | 76 | .add-item-form, .header { 77 | display: flex; 78 | align-items: center; 79 | justify-content: space-between; 80 | } 81 | 82 | .add-item-form input { 83 | width: 70%; 84 | border-radius: 3px; 85 | box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10); 86 | border: 1px solid #F1F5F8; 87 | color: #606F7B; 88 | padding: .5rem .75rem; 89 | box-sizing: border-box; 90 | font-size: 1rem; 91 | letter-spacing: .5px; 92 | margin: .5rem 0; 93 | } 94 | 95 | .btn { 96 | border: none; 97 | border-radius: 3px; 98 | margin: auto 0; 99 | padding: .5rem .75rem; 100 | flex-shrink: 0; 101 | cursor: pointer; 102 | font-size: .9rem; 103 | letter-spacing: .5px; 104 | transition: all .1s ease-in; 105 | } 106 | 107 | .btn[disabled] { 108 | background: #8795A1; 109 | } 110 | 111 | .btn[disabled]:hover { 112 | background: #606F7B; 113 | } 114 | 115 | .btn-primary { 116 | background: #6CB2EB; 117 | color: #fff; 118 | } 119 | 120 | .btn-primary:hover { 121 | background: #3490DC; 122 | } 123 | 124 | .btn-cancel { 125 | background: #EF5753; 126 | color: #fff; 127 | } 128 | 129 | .btn-cancel:hover { 130 | background: #E3342F; 131 | color: #fff; 132 | } 133 | 134 | .strikeout { 135 | text-decoration: line-through; 136 | color: #B8C2CC; 137 | } 138 | 139 | .strikeout:hover { 140 | color: #8795A1; 141 | } 142 | 143 | .priority { 144 | color: #DE751F; 145 | } --------------------------------------------------------------------------------