├── .editorConfig ├── .gitignore ├── .gitmodules ├── CNAME ├── README.md ├── bootstrap-starter.html ├── bulma-starter.html └── shared ├── css └── styles.css └── js └── components.js /.editorConfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | tab_style = space 8 | indent_size = 2 9 | end_of_line = crlf 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | scratchpad/ 2 | .tags 3 | .tags1 4 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "design-quotes"] 2 | path = design-quotes 3 | url = https://github.com/mikesprague/vuejs-design-quotes.git 4 | [submodule "person-lookup"] 5 | path = person-lookup 6 | url = https://github.com/mikesprague/vuejs-person-lookup.git 7 | [submodule "shopping-cart"] 8 | path = shopping-cart 9 | url = https://github.com/mikesprague/vuejs-shopping-cart.git 10 | [submodule "subreddit-feeds"] 11 | path = subreddit-feeds 12 | url = https://github.com/mikesprague/vuejs-subreddit-feeds.git 13 | [submodule "todo-list"] 14 | path = todo-list 15 | url = https://github.com/mikesprague/vuejs-todo-list.git 16 | [submodule "calculator"] 17 | path = calculator 18 | url = https://github.com/mikesprague/vuejs-calculator.git 19 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | vuejs.mikesprague.me -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js Demos 2 | Small collection of projects I'm doing while learning Vue.js 3 | 4 | ## Projects 5 | Some are original projects, if the demo is related to a particular course or 6 | tutorial it will be noted and linked to below. 7 | 8 | * Shopping Cart 9 | * [Demo](https://vuejs.mikesprague.me/shopping-cart/) | [Source](https://github.com/mikesprague/vuejs-shopping-cart) 10 | * Notes: 11 | * From Udemy Course: [Getting Started with Vue.js](https://www.udemy.com/getting-started-with-vuejs/) 12 | * Cart uses static data provded with course 13 | * Person Lookup 14 | * [Demo](https://vuejs.mikesprague.me/person-lookup/) | [Source](https://github.com/mikesprague/vuejs-person-lookup) 15 | * Notes: 16 | * Loosely based on demo from Udemy Course: [Getting Started with Vue.js](https://www.udemy.com/getting-started-with-vuejs/) 17 | * Grabs names for group of people with ability to display extended data for individual person 18 | * Made using: 19 | * Data from API at [https://randomuser.me/](https://randomuser.me/) 20 | * [Vue-resource](https://github.com/vuejs/vue-resource) plugin 21 | * To-Do List 22 | * [Demo](https://todo-list.mikesprague.me) | [Source](https://github.com/mikesprague/vuejs-todo-list) 23 | * [![Build Status](https://travis-ci.org/mikesprague/vuejs-todo-list.svg?branch=master)](https://travis-ci.org/mikesprague/vuejs-todo-list) 24 | * Notes: 25 | * Very simple to-do list app 26 | * Starts with 2 example items 27 | * Enter text and hit enter key to add new items 28 | * Click on items to toggle completed status 29 | * Each item can be removed with delete button on right-hand side 30 | * Click on priority label to change task priority 31 | * Tasks auto-sort by priority and when they were created (highest priority and newest tasks first) 32 | * To-do list uses local storage, items persist unless browser cache is cleared 33 | * Moved hosting of this app to [Firebase](https://firebase.google.com) to prepare for new features that will be added 34 | * Subreddit Feeds 35 | * [Demo](https://vuejs.mikesprague.me/subreddit-feeds/) | [Source](https://github.com/mikesprague/vuejs-subreddit-feeds) 36 | * Notes: 37 | * Based on Tutorialzine article: [Building Your First App With Vue.js](http://tutorialzine.com/2016/08/building-your-first-app-with-vue-js/) 38 | * Grabs content from predetermined list of subreddits on Reddit 39 | * No searching or filtering at this time 40 | * Makes use of [Vue-resource](https://github.com/vuejs/vue-resource) plugin 41 | * Random Design Quotes 42 | * [Demo](https://vuejs.mikesprague.me/design-quotes/) | [Source](https://github.com/mikesprague/vuejs-design-quotes) 43 | * Notes: 44 | * Very barebones random desing quote generator 45 | * Truncates quote in Tweet content if necessary 46 | * Uses API at [https://quotesondesign.com/api-v4-0/](https://quotesondesign.com/api-v4-0/) 47 | * Makes use of [Vue-resource](https://github.com/vuejs/vue-resource) plugin 48 | -------------------------------------------------------------------------------- /bootstrap-starter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Simple demo | </> by Mike Sprague 10 | 11 | 12 | 13 | 16 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 | 38 | 39 | 40 | 41 | 42 | 43 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /bulma-starter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Simple demo | </> by Mike Sprague 10 | 11 | 12 | 39 | 40 | 41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 | 58 | 59 | 60 | 61 | 62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /shared/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | text-rendering: optimizeLegibility; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | } 6 | 7 | html { 8 | position: relative; 9 | min-height: 100%; 10 | } 11 | 12 | body { 13 | margin-bottom: 60px; 14 | font-family: -apple-system, BlinkMacSystemFont, 15 | "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 16 | "Fira Sans", "Droid Sans", "Helvetica Neue", 17 | sans-serif; 18 | } 19 | 20 | .footer { 21 | position: absolute; 22 | bottom: 0; 23 | width: 100%; 24 | height: 60px; 25 | } 26 | 27 | .loading { 28 | display: inline-block; 29 | overflow: hidden; 30 | height: 1.3em; 31 | margin-top: -0.3em; 32 | line-height: 1.5em; 33 | vertical-align: text-bottom; 34 | } 35 | 36 | .loading::after { 37 | display: inline-table; 38 | white-space: pre; 39 | text-align: left; 40 | } 41 | 42 | .loading.dots2::after { 43 | content: "⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳"; 44 | animation: spin9 1s steps(9) infinite; 45 | } 46 | 47 | @keyframes spin9 { to { transform: translateY(-13.5em); } } 48 | -------------------------------------------------------------------------------- /shared/js/components.js: -------------------------------------------------------------------------------- 1 | Vue.component( "loading", { 2 | template: '

loading data

' 3 | }); 4 | 5 | Vue.component( "footer-content", { 6 | template: '
\ 7 |

\ 8 | Built by Mike Sprague. \ 9 |
\ 10 | Source available on GitHub. \ 11 |

\ 12 |
' 13 | }); 14 | --------------------------------------------------------------------------------