├── .gitignore
├── README.md
├── calculator
    ├── README.md
    ├── calculator-app
    │   ├── .browserslistrc
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   └── src
    │   │   ├── App.vue
    │   │   ├── assets
    │   │       └── logo.png
    │   │   ├── components
    │   │       └── Calculator.vue
    │   │   └── main.js
    └── calculator.png
├── drum-machine
    ├── README.md
    ├── drum-app
    │   ├── .browserslistrc
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── App.vue
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── clips.js
    │   │   └── main.js
    │   └── vue.config.js
    ├── mockups
    │   └── drum_machine.png
    └── sounds
    │   ├── alarm.aiff
    │   ├── baseball_glove.aiff
    │   ├── basketball.aiff
    │   ├── clown_horn.aiff
    │   ├── crash.aiff
    │   ├── crash_kick.aiff
    │   ├── crash_snare.aiff
    │   ├── crash_symbol.aiff
    │   ├── cymbal_kick.aiff
    │   ├── deflate.aiff
    │   ├── door_close.aiff
    │   ├── drill_gear.aiff
    │   ├── drum_roll.aiff
    │   ├── glass_crash.aiff
    │   ├── hammer_cement.aiff
    │   ├── hand_clap.aiff
    │   ├── tin_drum.aiff
    │   └── tympani_bing.aiff
├── markdown-previewer
    ├── README.md
    ├── markdown-previewer
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── src
    │   │   ├── App.vue
    │   │   ├── assets
    │   │   │   └── logo.png
    │   │   ├── components
    │   │   │   └── HelloWorld.vue
    │   │   └── main.js
    │   └── vue.config.js
    └── mockups
    │   └── markdown_previewer.png
├── pomodoro-clock
    ├── README.md
    ├── mockups
    │   └── pomodoro_clock.png
    └── pomodoro-app
    │   ├── .browserslistrc
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   ├── src
    │       ├── App.vue
    │       ├── assets
    │       │   ├── logo.png
    │       │   └── logo.svg
    │       ├── components
    │       │   ├── Pomodoro.vue
    │       │   └── SettingsDialog.vue
    │       ├── main.js
    │       └── plugins
    │       │   └── vuetify.js
    │   └── vue.config.js
└── quote-machine
    ├── README.md
    ├── image
        ├── pen-fancy-solid.svg
        ├── pointer.png
        ├── quote-machine.png
        ├── quote_paper.png
        ├── sad.png
        ├── screenshot.png
        └── wave.svg
    ├── index.html
    ├── script
        ├── main.js
        └── quotes.js
    └── style
        └── main.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by https://www.toptal.com/developers/gitignore/api/vuejs,macos,vim
 2 | # Edit at https://www.toptal.com/developers/gitignore?templates=vuejs,macos,vim
 3 | 
 4 | ### macOS ###
 5 | # General
 6 | .DS_Store
 7 | .AppleDouble
 8 | .LSOverride
 9 | 
10 | # Icon must end with two \r
11 | Icon
12 | 
13 | # Thumbnails
14 | ._*
15 | 
16 | # Files that might appear in the root of a volume
17 | .DocumentRevisions-V100
18 | .fseventsd
19 | .Spotlight-V100
20 | .TemporaryItems
21 | .Trashes
22 | .VolumeIcon.icns
23 | .com.apple.timemachine.donotpresent
24 | 
25 | # Directories potentially created on remote AFP share
26 | .AppleDB
27 | .AppleDesktop
28 | Network Trash Folder
29 | Temporary Items
30 | .apdisk
31 | 
32 | ### Vim ###
33 | # Swap
34 | [._]*.s[a-v][a-z]
35 | !*.svg  # comment out if you don't need vector files
36 | [._]*.sw[a-p]
37 | [._]s[a-rt-v][a-z]
38 | [._]ss[a-gi-z]
39 | [._]sw[a-p]
40 | 
41 | # Session
42 | Session.vim
43 | Sessionx.vim
44 | 
45 | # Temporary
46 | .netrwhist
47 | *~
48 | # Auto-generated tag files
49 | tags
50 | # Persistent undo
51 | [._]*.un~
52 | 
53 | ### Vuejs ###
54 | # Recommended template: Node.gitignore
55 | 
56 | node_modules/
57 | dist/
58 | npm-debug.log
59 | yarn-error.log
60 | 
61 | # End of https://www.toptal.com/developers/gitignore/api/vuejs,macos,vim
62 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Freecodecamp Projects Vue
 2 | 
 3 | Building all the freeCodeCamp projects in Vue.js.
 4 | 
 5 | ## Projects
 6 | 
 7 | * [Quote Machine](quote-machine/README.md)
 8 | * [Markdown Previewer](markdown-previewer/README.md)
 9 | * [Drum Machine](drum-machine/README.md)
10 | * [Calculator](calculator/README.md)
11 | * [Pomodoro Clock](pomodoro-clock/README.md)
12 | 
13 | 


--------------------------------------------------------------------------------
/calculator/README.md:
--------------------------------------------------------------------------------
 1 | # Calculator
 2 | 
 3 | freeCodeCamp calculator project built with Vue.js.
 4 | 
 5 | ## Tech Stack
 6 | 
 7 | * Vue.js
 8 | * [Mathjs](https://github.com/josdejong/mathjs)
 9 | * Bootstrap Vue
10 | 
11 | ## Mockups
12 | 
13 | <img src="calculator.png">
14 | 
15 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/README.md:
--------------------------------------------------------------------------------
 1 | # calculator-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "calculator-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "4.5.0",
12 |     "bootstrap-vue": "2.15.0",
13 |     "core-js": "^3.6.5",
14 |     "mathjs": "7.0.2",
15 |     "vue": "2.6.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.4.0",
19 |     "@vue/cli-plugin-eslint": "~4.4.0",
20 |     "@vue/cli-service": "~4.4.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.2.2",
24 |     "sass": "^1.26.5",
25 |     "sass-loader": "^8.0.2",
26 |     "vue-template-compiler": "^2.6.11"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/calculator/calculator-app/public/favicon.ico


--------------------------------------------------------------------------------
/calculator/calculator-app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <b-container>
 4 |       <b-row>
 5 |         <b-col sm="6" offset-sm="3">
 6 |           <Calculator />
 7 |         </b-col>
 8 |       </b-row>
 9 |     </b-container>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import Calculator from './components/Calculator.vue'
15 | 
16 | export default {
17 |   name: 'App',
18 |   components: {
19 |     Calculator
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/calculator/calculator-app/src/assets/logo.png


--------------------------------------------------------------------------------
/calculator/calculator-app/src/components/Calculator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <b-card class="mt-4 p-0">
  3 |     <div class="output-screen p-2 d-flex align-items-center">
  4 |       {{ secondOperand || firstOperand || 0 }}
  5 |     </div>
  6 |     <div class="button-container">
  7 |       <b-row no-gutters>
  8 |         <b-col>
  9 |           <b-button block @click="clear" variant="warning">
 10 |             C
 11 |           </b-button>
 12 |         </b-col>
 13 |       </b-row>
 14 | 
 15 |       <b-row no-gutters>
 16 |         <b-button @click="appendCharacter(1)">1</b-button>
 17 |         <b-button @click="appendCharacter(2)">2</b-button>
 18 |         <b-button @click="appendCharacter(3)">3</b-button>
 19 |         <b-button
 20 |           :class="{'active-operator': operator === '+'}"
 21 |           variant="warning"
 22 |           @click="updateOperator('+')"
 23 |         >
 24 |           +
 25 |         </b-button>
 26 |       </b-row>
 27 | 
 28 |       <b-row no-gutters>
 29 |         <b-button @click="appendCharacter(4)">4</b-button>
 30 |         <b-button @click="appendCharacter(5)">5</b-button>
 31 |         <b-button @click="appendCharacter(6)">6</b-button>
 32 |         <b-button
 33 |           :class="{'active-operator': operator === '-'}"
 34 |           variant="warning"
 35 |           @click="updateOperator('-')"
 36 |         >
 37 |           -
 38 |         </b-button>
 39 |       </b-row>
 40 | 
 41 |       <b-row no-gutters>
 42 |         <b-button @click="appendCharacter(7)">7</b-button>
 43 |         <b-button @click="appendCharacter(8)">8</b-button>
 44 |         <b-button @click="appendCharacter(9)">9</b-button>
 45 |         <b-button
 46 |           :class="{'active-operator': operator === '*'}"
 47 |           variant="warning"
 48 |           @click="updateOperator('*')"
 49 |         >
 50 |           x
 51 |         </b-button>
 52 |       </b-row>
 53 | 
 54 |       <b-row no-gutters>
 55 |         <b-button @click="appendCharacter(0)">0</b-button>
 56 |         <b-button @click="appendCharacter('.')">.</b-button>
 57 |         <b-button @click="eval">=</b-button>
 58 |         <b-button
 59 |           :class="{'active-operator': operator === '/'}"
 60 |           variant="warning"
 61 |           @click="updateOperator('/')"
 62 |         >
 63 |           /
 64 |         </b-button>
 65 |       </b-row>
 66 |     </div>
 67 |   </b-card>
 68 | </template>
 69 | 
 70 | <script>
 71 | import { evaluate } from 'mathjs'
 72 | 
 73 | export default {
 74 |   data() {
 75 |     return {
 76 |       firstOperand: '',
 77 |       secondOperand: '',
 78 |       operator: ''
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     eval() {
 83 |       const { firstOperand, secondOperand, operator } = this
 84 |       this.firstOperand = evaluate(firstOperand + operator + secondOperand).toString()
 85 |       this.secondOperand = ''
 86 |       this.operator = ''
 87 |     },
 88 |     appendCharacter(char) {
 89 |       let currentOperand = this.operator ? 'secondOperand' : (
 90 |         'firstOperand'
 91 |       )
 92 | 
 93 |       if (char === '.') {
 94 |         if (!this.firstOperand.includes('.')) {
 95 |           this[currentOperand] += char
 96 |         }
 97 |       } else {
 98 |         this[currentOperand] += char
 99 |       }
100 |     },
101 |     updateOperator(op) {
102 |       if (this.operator) {
103 |         this.eval()
104 |       }
105 |       this.operator = op
106 |     },
107 |     clear() {
108 |       this.firstOperand = ''
109 |     }
110 |   }
111 | }
112 | </script>
113 | 
114 | <style lang="scss" scoped>
115 | $orange: #ffc107;
116 | $dark-gray: #6c757d;
117 | 
118 | .output-screen {
119 |   height: 60px;
120 |   border: 1px solid #000;
121 | }
122 | .btn {
123 |   width: 60px;
124 |   height: 60px;
125 |   border: 1px solid #000;
126 |   border-radius: 0;
127 |   background-color: $dark-gray;
128 |   &.btn-block {
129 |     width: 100%;
130 |   }
131 |   &:hover {
132 |     border: 1px solid #000;
133 |     background-color: darken($dark-gray, 8%);
134 |   }
135 | }
136 | .btn-warning {
137 |   background-color: $orange;
138 |   &:hover {
139 |     background-color: darken($orange, 8%);
140 |   }
141 |   &.active-operator {
142 |     background-color: darken($orange, 8%);
143 |   }
144 | }
145 | .card {
146 |   width: 242px;
147 |   border: 1px solid #000;
148 |   border-radius: 0;
149 | }
150 | .card-body {
151 |   padding: 0;
152 | }
153 | </style>
154 | 


--------------------------------------------------------------------------------
/calculator/calculator-app/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 4 | 
 5 | import 'bootstrap/dist/css/bootstrap.css'
 6 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 7 | 
 8 | Vue.use(BootstrapVue)
 9 | Vue.use(IconsPlugin)
10 | 
11 | Vue.config.productionTip = false
12 | 
13 | new Vue({
14 |   render: h => h(App),
15 | }).$mount('#app')
16 | 


--------------------------------------------------------------------------------
/calculator/calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/calculator/calculator.png


--------------------------------------------------------------------------------
/drum-machine/README.md:
--------------------------------------------------------------------------------
 1 | # Drum Machine
 2 | 
 3 | This is [freeCodeCamp's Drum Machine Project](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine), built in Vue.js!
 4 | 
 5 | *Sound clips in sounds folder are all from YouTube's audio library.*
 6 | 
 7 | ## Tech Stack
 8 | 
 9 | * Vue.js
10 | * Vue CLI
11 | * [Bootstrap Vue](https://bootstrap-vue.org/)
12 | 
13 | ## Mockups
14 | 
15 | <img src="mockups/drum_machine.png">
16 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/README.md:
--------------------------------------------------------------------------------
 1 | # drum-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "drum-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "4.5.0",
12 |     "bootstrap-vue": "2.15.0",
13 |     "core-js": "^3.6.5",
14 |     "vue": "2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.4.0",
18 |     "@vue/cli-plugin-eslint": "~4.4.0",
19 |     "@vue/cli-service": "~4.4.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "node-sass": ">=4.0.0",
24 |     "sass": "^1.26.5",
25 |     "sass-loader": "^8.0.2",
26 |     "vue-template-compiler": "^2.6.11"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/drum-app/public/favicon.ico


--------------------------------------------------------------------------------
/drum-machine/drum-app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <header>
  4 |       <h3>Drum Machine</h3>
  5 |     </header>
  6 |     <b-container>
  7 |       <b-row>
  8 |         <b-col sm="6" offset-sm="3">
  9 |           <b-card class="mt-4">
 10 |             <b-row class="justify-content-between mx-2">
 11 |               <b-form-checkbox v-model="isOn" @change="powerChange" switch size="lg">
 12 |                 Power
 13 |               </b-form-checkbox>
 14 |               <b-button @click="stop" variant="outline-info">
 15 |                 Stop
 16 |               </b-button>
 17 |               <div class="border rounded-lg px-4 py-2">
 18 |                 {{ lastPlayed }}
 19 |               </div>
 20 |             </b-row>
 21 |             <b-row class="mx-2 mt-4">
 22 |               <label for="volume">Volume</label>
 23 |               <b-form-input id="volume" v-model="volume" type="range" min="0" max="5" @change="volChange" />
 24 |             </b-row>
 25 |             <b-row class="mx-2 mt-4">
 26 |               <b-form-checkbox v-model="loop" switch @change="loopChange" size="lg" :disabled=!isOn>
 27 |                 Loop
 28 |               </b-form-checkbox>
 29 |             </b-row>
 30 |           </b-card>
 31 |           <b-card class="my-4">
 32 |             <b-row class="justify-content-center">
 33 |               <button
 34 |                 :class="['sound-button border rounded-lg m-1 button',
 35 |                   isOn ? 'border-warning' : 'button-disabled' ]"
 36 |                 v-for="clip in clips"
 37 |                 :key="clip.name"
 38 |                 @click="playClip(clip)">
 39 |                 {{ clip.name }} <br/>
 40 |                 {{ clip.icon }}
 41 |               </button>
 42 |             </b-row>
 43 |           </b-card>
 44 |         </b-col>
 45 |       </b-row>
 46 |     </b-container>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   import clips from './clips'
 52 | 
 53 |   export default {
 54 |     name: 'App',
 55 |     components: {
 56 |     },
 57 |     data() {
 58 |       return {
 59 |         clips,
 60 |         volume: 2,
 61 |         isOn: true,
 62 |         loop: false,
 63 |         lastPlayed: '🎧 No Sound',
 64 |         currentAudio: {},
 65 |         audio : null
 66 |       }
 67 |     },
 68 |     methods: {
 69 |       powerChange(){
 70 |         //while the sound is on loop and the power is tur
 71 |         stop()
 72 |       },
 73 |       playClip({ name, icon, url }) {
 74 |         this.audio = new Audio(url)
 75 |         if (this.isOn) {
 76 |           this.stop()
 77 | 
 78 |           this.audio.volume = this.volume / 5
 79 |           this.audio.loop = this.loop
 80 |           this.audio.play()
 81 |           this.currentAudio = this.audio
 82 |           this.lastPlayed = icon +"\xa0\xa0"+ name
 83 |         }
 84 |       },
 85 |       volChange(){
 86 |        //while the sound is on loop and if volumn is modified
 87 |        this.audio.volume = this.volume / 5
 88 |       },
 89 |       stop() {
 90 |         try {
 91 |           this.currentAudio.pause()
 92 |         } catch (err) {
 93 |           console.log(err)
 94 |         }
 95 |       },
 96 |       loopChange(){
 97 |         //if loop is disabled while sound is being played on a loop
 98 |         //stop the music
 99 |         this.loop = false;
100 |         try {
101 |           this.currentAudio.pause()
102 |         } catch (err) {
103 |           console.log(err)
104 |         }
105 |       }
106 |     }
107 |   }
108 | </script>
109 | <style lang="scss">
110 |   body{
111 |    background: lightblue;
112 |    font-family: sans-serif;
113 |   }
114 |   header{
115 |    text-align: center;
116 |   }
117 |   .sound-button {
118 |     width: 160px;
119 |     height: 160px;
120 |     display: flex;
121 |     justify-content: center;
122 |     align-items: center;
123 |     text-align: center;
124 |     background: #fcf6e3;
125 |     &:hover {
126 |       cursor: pointer;
127 |       font-size: 28px;
128 |     }
129 |   }
130 |   .button-disabled {
131 |     border-color: gray !important;
132 |     background-color: lightgray;
133 |     &:hover {
134 |       cursor: not-allowed;
135 |       font-size: 1rem;
136 |     }
137 |   }
138 |   .custom-control .custom-control-input:checked::after {
139 |     background-color: green!important;
140 |   }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/drum-app/src/assets/logo.png


--------------------------------------------------------------------------------
/drum-machine/drum-app/src/clips.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     name: 'Horse',
 4 |     icon: '🐎',
 5 |     url: 'https://soundbible.com/mp3/horse_blow-stephan_schutze-1678740304.mp3'
 6 |   },
 7 |   {
 8 |     name: 'Van Door',
 9 |     icon: '🚪',
10 |     url: 'http://soundbible.com/mp3/van-sliding-door-daniel_simon.mp3'
11 |   },
12 |   {
13 |     name: 'Poker Chips',
14 |     icon: '🎰',
15 |     url: 'http://soundbible.com/mp3/poker-chips-daniel_simon.mp3'
16 |   },
17 |   {
18 |     name: 'Light Chain',
19 |     icon: '💡⛓️',
20 |     url: 'http://soundbible.com/mp3/light-switch-pull-chain-daniel_simon.mp3'
21 |   },
22 |   {
23 |     name: 'Alert',
24 |     icon: '🚨',
25 |     url: 'http://soundbible.com/mp3/sms-alert-5-daniel_simon.mp3'
26 |   },
27 |   {
28 |     name: 'Puppy',
29 |     icon: '🐕',
30 |     url: 'http://soundbible.com/mp3/puppy-barking_ds.mp3'
31 |   },
32 |   {
33 |     name: 'Dragon',
34 |     icon: '🐉',
35 |     url: 'http://soundbible.com/mp3/European_Dragon_Roaring_and_breathe_fire-daniel-simon.mp3'
36 |   },
37 |   {
38 |     name: 'Shoot Arrow',
39 |     icon: '🏹',
40 |     url: 'http://soundbible.com/mp3/fire_bow_sound-mike-koenig.mp3'
41 |   },
42 |   {
43 |     name: 'Splash',
44 |     icon: '💦',
45 |     url: 'http://soundbible.com/mp3/Video_Game_Splash-Ploor-699235037.mp3'
46 |   }
47 | ]
48 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 3 | 
 4 | import 'bootstrap/dist/css/bootstrap.css'
 5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 6 | 
 7 | import App from './App.vue'
 8 | 
 9 | Vue.use(BootstrapVue)
10 | Vue.use(IconsPlugin)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | new Vue({
15 |   render: h => h(App),
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/drum-machine/drum-app/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | };


--------------------------------------------------------------------------------
/drum-machine/mockups/drum_machine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/mockups/drum_machine.png


--------------------------------------------------------------------------------
/drum-machine/sounds/alarm.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/alarm.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/baseball_glove.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/baseball_glove.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/basketball.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/basketball.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/clown_horn.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/clown_horn.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/crash.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/crash.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/crash_kick.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/crash_kick.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/crash_snare.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/crash_snare.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/crash_symbol.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/crash_symbol.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/cymbal_kick.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/cymbal_kick.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/deflate.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/deflate.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/door_close.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/door_close.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/drill_gear.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/drill_gear.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/drum_roll.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/drum_roll.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/glass_crash.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/glass_crash.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/hammer_cement.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/hammer_cement.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/hand_clap.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/hand_clap.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/tin_drum.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/tin_drum.aiff


--------------------------------------------------------------------------------
/drum-machine/sounds/tympani_bing.aiff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/drum-machine/sounds/tympani_bing.aiff


--------------------------------------------------------------------------------
/markdown-previewer/README.md:
--------------------------------------------------------------------------------
 1 | # Markdown Previewer
 2 | 
 3 | This is [freeCodeCamp's markdown previewer project](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer), built in Vue.js!
 4 | 
 5 | ## Tech Stack
 6 | 
 7 | * Vue.js
 8 | * Vue CLI
 9 | * [Inkline Design Framework](https://inkline.io/)
10 | 
11 | ## Mockups
12 | 
13 | <img src="mockups/markdown_previewer.png">
14 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/README.md:
--------------------------------------------------------------------------------
 1 | # markdown-previewer
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "markdown-previewer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@inkline/inkline": "^2.0.0",
12 |     "babel-runtime": "6.26.0",
13 |     "core-js": "^3.6.5",
14 |     "vue": "^2.6.11",
15 |     "vue-markdown": "2.2.4"
16 |   },
17 |   "devDependencies": {
18 |     "@inkline/vue-cli-plugin-inkline": "2.2.3",
19 |     "@vue/cli-plugin-babel": "~4.4.0",
20 |     "@vue/cli-plugin-eslint": "~4.4.0",
21 |     "@vue/cli-service": "~4.4.0",
22 |     "babel-eslint": "^10.1.0",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-vue": "^6.2.2",
25 |     "node-sass": ">=4.0.0",
26 |     "sass-loader": ">=8.0.0",
27 |     "vue-template-compiler": "^2.6.11"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     },
41 |     "rules": {}
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions",
46 |     "not dead"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/markdown-previewer/markdown-previewer/public/favicon.ico


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <i-container class="container">
 4 |       <i-row>
 5 |         <i-column class="border-right" sm="6">
 6 |           <h1>Markdown</h1>
 7 |           <i-textarea
 8 |             :class="$style.textarea"
 9 |             v-model="text"
10 |             placeholder="Enter markdown here"
11 |           />
12 |         </i-column>
13 |         <i-column sm="6">
14 |           <h1>Formatted Text</h1>
15 |           <vue-markdown :source="text">
16 |           </vue-markdown>
17 |         </i-column>
18 |       </i-row>
19 |     </i-container>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import VueMarkdown from 'vue-markdown'
25 | 
26 | export default {
27 |   name: 'App',
28 |   components: {
29 |     VueMarkdown
30 |   },
31 |   data() {
32 |     return {
33 |       text: 'Hello **there**'
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style scoped>
40 | .container {
41 |   margin-top: 40px;
42 | }
43 | .border-right {
44 |   border-right: 1px solid;
45 | }
46 | </style>
47 | 
48 | <style module>
49 | .textarea {
50 |   height: 400px;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/markdown-previewer/markdown-previewer/src/assets/logo.png


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import { Inkline } from '@inkline/inkline/src';
 4 | import * as components from '@inkline/inkline/src/components';
 5 | import '@inkline/inkline/src/inkline.scss';
 6 | 
 7 | Vue.use(Inkline, { components });
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | new Vue({
12 |   render: h => h(App),
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/markdown-previewer/markdown-previewer/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     transpileDependencies: [
3 |         '@inkline/inkline'
4 |     ]
5 | };


--------------------------------------------------------------------------------
/markdown-previewer/mockups/markdown_previewer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/markdown-previewer/mockups/markdown_previewer.png


--------------------------------------------------------------------------------
/pomodoro-clock/README.md:
--------------------------------------------------------------------------------
 1 | # Pomodoro Clock
 2 | 
 3 | This is [freeCodeCamp's Pomodoro Clock Project](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock), built in Vue.js!
 4 | 
 5 | ## Requirements
 6 | 
 7 | 1. User can start timer
 8 | 2. User can stop timer
 9 | 3. User can choose timer, short break, or long break
10 | 4. User can see progress bar
11 | 5. User can see seconds count down
12 | 6. User can set number of minutes for each type of timer
13 | 7. Optional: add tasks at the bottom
14 | 8. Optional: dark theme and light theme
15 | 
16 | ## Tech Stack
17 | 
18 | * Vue.js
19 | * Vue CLI
20 | * Vuetify
21 | 
22 | ## Colors
23 | 
24 | FF8C42 - FFF275 - FF3C38 - 6699CC - 011627
25 | 
26 | ## Mockups
27 | 
28 | <img src="mockups/pomodoro_clock.png">
29 | 


--------------------------------------------------------------------------------
/pomodoro-clock/mockups/pomodoro_clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/pomodoro-clock/mockups/pomodoro_clock.png


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/README.md:
--------------------------------------------------------------------------------
 1 | # pomodoro-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pomodoro-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vuetify": "^2.2.11"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.4.0",
17 |     "@vue/cli-plugin-eslint": "~4.4.0",
18 |     "@vue/cli-service": "~4.4.0",
19 |     "babel-eslint": "^10.1.0",
20 |     "eslint": "^6.7.2",
21 |     "eslint-plugin-vue": "^6.2.2",
22 |     "sass": "^1.26.5",
23 |     "sass-loader": "^8.0.2",
24 |     "vue-cli-plugin-vuetify": "2.0.6",
25 |     "vue-template-compiler": "^2.6.11",
26 |     "vuetify-loader": "^1.3.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/pomodoro-clock/pomodoro-app/public/favicon.ico


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <v-container>
 5 |         <v-row>
 6 |           <v-col sm="6" offset-sm="3">
 7 |             <Pomodoro :dialog="dialog" :closeDialog="closeDialog" />
 8 |           </v-col>
 9 |           <v-btn
10 |             @click="dialog = true"
11 |             color="secondary"
12 |             dark
13 |             small
14 |             top
15 |             right
16 |             fab
17 |           >
18 |             <v-icon>mdi-cog-outline</v-icon>
19 |           </v-btn>
20 |         </v-row>
21 |       </v-container>
22 |     </v-main>
23 |   </v-app>
24 | </template>
25 | 
26 | <script>
27 | import Pomodoro from './components/Pomodoro';
28 | 
29 | export default {
30 |   name: 'App',
31 | 
32 |   components: {
33 |     Pomodoro,
34 |   },
35 | 
36 |   data() {
37 |     return {
38 |       dialog: false
39 |     }
40 |   },
41 |   methods: {
42 |     closeDialog() {
43 |       this.dialog = false
44 |     }
45 |   }
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/pomodoro-clock/pomodoro-app/src/assets/logo.png


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/components/Pomodoro.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-card class="mt-8">
  3 |     <v-tabs @change="changeCurrentTimer" v-model="currentTimer" grow>
  4 |       <v-tab
  5 |         v-for="timer in timers"
  6 |         :key="timer.name"
  7 |       >
  8 |         {{ timer.name }}
  9 |       </v-tab>
 10 |     </v-tabs>
 11 | 
 12 |     <v-card
 13 |       class="pa-5 d-flex flex-column justify-center align-center"
 14 |       flat
 15 |     >
 16 |       <h1 class="time">
 17 |         {{ displayMinutes }}:{{ displaySeconds }}
 18 |       </h1>
 19 | 
 20 |       <div class="button-group">
 21 |         <v-btn @click="start" color="primary">
 22 |           <v-icon left small>mdi-play-circle-outline</v-icon>
 23 |           Start
 24 |         </v-btn>
 25 |         <v-btn @click="stop" color="error">
 26 |           <v-icon left small>mdi-stop-circle-outline</v-icon>
 27 |           Stop
 28 |         </v-btn>
 29 |         <v-btn @click="reset(timers[currentTimer].minutes)" :disabled="isRunning">
 30 |           <v-icon left small>mdi-restart</v-icon>
 31 |           Reset
 32 |         </v-btn>
 33 |       </div>
 34 |     </v-card>
 35 | 
 36 |     <SettingsDialog
 37 |       :dialog="dialog"
 38 |       :closeDialog="closeDialog"
 39 |       :timers="timers"
 40 |       :save="save"
 41 |     />
 42 |   </v-card>
 43 | </template>
 44 | 
 45 | <script>
 46 | import SettingsDialog from './SettingsDialog.vue'
 47 | 
 48 | export default {
 49 |   components: {
 50 |     SettingsDialog
 51 |   },
 52 |   props: {
 53 |     dialog: {
 54 |       type: Boolean,
 55 |       required: true
 56 |     },
 57 |     closeDialog: {
 58 |       type: Function,
 59 |       required: true
 60 |     }
 61 |   },
 62 |   data() {
 63 |     return {
 64 |       isRunning: false,
 65 |       timerInstance: null,
 66 |       totalSeconds: 25 * 60,
 67 |       currentTimer: 0,
 68 |       timers: [
 69 |         {
 70 |           name: 'Pomodoro',
 71 |           minutes: 25
 72 |         },
 73 |         {
 74 |           name: 'Short Break',
 75 |           minutes: 5
 76 |         },
 77 |         {
 78 |           name: 'Long Break',
 79 |           minutes: 10
 80 |         }
 81 |       ]
 82 |     }
 83 |   },
 84 |   computed: {
 85 |     displayMinutes() {
 86 |       const minutes = Math.floor(this.totalSeconds / 60)
 87 |       return this.formatTime(minutes)
 88 |     },
 89 |     displaySeconds() {
 90 |       const seconds = this.totalSeconds % 60
 91 |       return this.formatTime(seconds)
 92 |     }
 93 |   },
 94 |   methods: {
 95 |     formatTime(time) {
 96 |       if (time < 10) {
 97 |         return '0' + time
 98 |       }
 99 |       return time.toString()
100 |     },
101 |     start() {
102 |       this.stop()
103 |       this.isRunning = true
104 |       this.timerInstance = setInterval(() => {
105 |         if (this.totalSeconds <= 0) {
106 |           this.stop()
107 |           return
108 |         }
109 |         this.totalSeconds -= 1
110 |       }, 1000)
111 |     },
112 |     stop() {
113 |       this.isRunning = false
114 |       clearInterval(this.timerInstance)
115 |     },
116 |     reset(minutes) {
117 |       this.stop()
118 |       this.totalSeconds = minutes * 60
119 |     },
120 |     changeCurrentTimer(num) {
121 |       this.currentTimer = num
122 |       this.reset(this.timers[num].minutes)
123 |     },
124 |     save(updatedTimers) {
125 |       this.timers = this.timers.map((timer, i) => {
126 |         return { ...timer, minutes: parseInt(updatedTimers[i]) }
127 |       })
128 | 	  this.totalSeconds = this.timers[this.currentTimer].minutes * 60;
129 |       this.closeDialog()
130 |     }
131 |   }
132 | }
133 | </script>
134 | 
135 | <style lang="sass" scoped>
136 | .v-card
137 |   width: 600px
138 | .v-btn
139 |   margin: 0 2px
140 | .time
141 |   font-size: 80px
142 |   font-weight: 400
143 |   text-align: center
144 | </style>
145 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/components/SettingsDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog v-model="dialog" persistent max-width="600px">
 3 |     <v-card>
 4 |       <v-card-title>
 5 |         <span class="headline">Settings</span>
 6 |       </v-card-title>
 7 | 
 8 |       <v-card-text>
 9 |         <v-text-field
10 |           v-for="(timer, i) in updatedTimers"
11 |           :key="i"
12 |           label="Pomodoro"
13 |           v-model="updatedTimers[i]"
14 |           type="number"
15 |         />
16 |       </v-card-text>
17 | 
18 |       <v-card-actions>
19 |         <v-spacer></v-spacer>
20 |         <v-btn color="blue darken-1" text @click="closeDialog">
21 |           Close
22 |         </v-btn>
23 |         <v-btn color="blue darken-1" text @click="save(updatedTimers)">
24 |           Save
25 |         </v-btn>
26 |       </v-card-actions>
27 |     </v-card>
28 |   </v-dialog>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   props: {
34 |     dialog: {
35 |       type: Boolean,
36 |       require: true
37 |     },
38 |     closeDialog: {
39 |       type: Function,
40 |       required: true
41 |     },
42 |     timers: {
43 |       type: Array,
44 |       required: true
45 |     },
46 |     save: {
47 |       type: Function,
48 |       required: true
49 |     }
50 |   },
51 |   data() {
52 |     return {
53 |       updatedTimers: []
54 |     }
55 |   },
56 |   mounted() {
57 |     this.updatedTimers = this.timers.map((timer) => {
58 |       return timer.minutes
59 |     })
60 |   }
61 | }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify';
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   vuetify,
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib';
 3 | 
 4 | Vue.use(Vuetify);
 5 | 
 6 | export default new Vuetify({
 7 |   icons: {
 8 |     iconfont: 'mdi'
 9 |   }
10 | });
11 | 


--------------------------------------------------------------------------------
/pomodoro-clock/pomodoro-app/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/quote-machine/README.md:
--------------------------------------------------------------------------------
 1 | # Random Quote Machine
 2 | 
 3 | This is build with HTML, CSS, and Vue.js via CDN imports. Bootstrap also provides some styling assistance.
 4 | 
 5 | ## Mockups
 6 | 
 7 | <img src="quote-machine.png" alt="mockup of simple quote machine interface">
 8 | 
 9 | ## Screenshot
10 | 
11 | <img src="screenshot.png">
12 | 


--------------------------------------------------------------------------------
/quote-machine/image/pen-fancy-solid.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-fancy" class="svg-inline--fa fa-pen-fancy fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M79.18 282.94a32.005 32.005 0 0 0-20.24 20.24L0 480l4.69 4.69 92.89-92.89c-.66-2.56-1.57-5.03-1.57-7.8 0-17.67 14.33-32 32-32s32 14.33 32 32-14.33 32-32 32c-2.77 0-5.24-.91-7.8-1.57l-92.89 92.89L32 512l176.82-58.94a31.983 31.983 0 0 0 20.24-20.24l33.07-84.07-98.88-98.88-84.07 33.07zM369.25 28.32L186.14 227.81l97.85 97.85 199.49-183.11C568.4 67.48 443.73-55.94 369.25 28.32z"></path></svg>


--------------------------------------------------------------------------------
/quote-machine/image/pointer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/quote-machine/image/pointer.png


--------------------------------------------------------------------------------
/quote-machine/image/quote-machine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/quote-machine/image/quote-machine.png


--------------------------------------------------------------------------------
/quote-machine/image/quote_paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/quote-machine/image/quote_paper.png


--------------------------------------------------------------------------------
/quote-machine/image/sad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/quote-machine/image/sad.png


--------------------------------------------------------------------------------
/quote-machine/image/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwenf/freecodecamp-projects-vue/870c1fb6d4a6b5b711086c8268bb7729e002f158/quote-machine/image/screenshot.png


--------------------------------------------------------------------------------
/quote-machine/image/wave.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#6f3399" fill-opacity="1" d="M0,64L0,224L120,224L120,96L240,96L240,288L360,288L360,96L480,96L480,128L600,128L600,96L720,96L720,224L840,224L840,128L960,128L960,256L1080,256L1080,128L1200,128L1200,96L1320,96L1320,64L1440,64L1440,320L1320,320L1320,320L1200,320L1200,320L1080,320L1080,320L960,320L960,320L840,320L840,320L720,320L720,320L600,320L600,320L480,320L480,320L360,320L360,320L240,320L240,320L120,320L120,320L0,320L0,320Z"></path></svg>


--------------------------------------------------------------------------------
/quote-machine/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Random Quote Machine</title>
 6 |     <link
 7 |       rel="stylesheet"
 8 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
 9 |       integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
10 |       crossorigin="anonymous"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link rel="stylesheet" href="./style/main.css" />
17 |   </head>
18 |   <body>
19 |     <div id="app">
20 |       <div class="backimg">
21 |         <img src="./image/wave.svg" alt="wave" style="width: 100%" />
22 |       </div>
23 |       <div
24 |         class="container-fluid w-100 h-100 d-flex align-items-center justify-content-center"
25 |       >
26 |         <div class="main-content">
27 |           <img
28 |             src="./image/quote_paper.png"
29 |             alt="quote_background"
30 |             id="quote_background"
31 |           />
32 |           <div class="card-text">
33 |             <p v-bind:class="{animate: animating}" :disabled="animating">
34 |               "{{ currentQuote }}"
35 |             </p>
36 |             <p v-bind:class="{animate: animating}" :disabled="animating">
37 |               - {{ currentQuoteAuthor }}
38 |             </p>
39 |           </div>
40 |           <div class="changeQuote" @click="newQuote()"></div>
41 |         </div>
42 |       </div>
43 |     </div>
44 |     <footer>
45 |       <a href="https://gwenfaraday.com/" target="_blank"
46 |         >Quote Machine By Gwen</a
47 |       >
48 |     </footer>
49 |     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
50 |     <script src="./script/quotes.js"></script>
51 |     <script src="./script/main.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/quote-machine/script/main.js:
--------------------------------------------------------------------------------
 1 | new Vue({
 2 |   el: "#app",
 3 |   data: {
 4 |     quotes: [],
 5 |     currentQuote: "",
 6 |     currentQuoteAuthor: "",
 7 |     animating: false,
 8 |     quotes_api_url: "https://type.fit/api/quotes"
 9 |   },
10 |   methods: {
11 |     newQuote: function () {
12 |       this.randomizeQuote()
13 |       this.animating = true
14 |       setTimeout(() => {
15 |         this.animating = false
16 |       }, 1000)
17 |     },
18 |     randomizeQuote: function() {
19 |       const num = Math.floor(Math.random() * this.quotes.length)
20 |       this.currentQuote = this.quotes[num].text
21 |       this.currentQuoteAuthor = this.quotes[num].author
22 |     }
23 |   },
24 |   mounted: function() {
25 |    fetch(this.quotes_api_url)
26 |     .then(response => response.json())
27 |     .then(quotes => {
28 |       this.quotes = quotes
29 |       this.randomizeQuote()
30 |     });
31 |   }
32 | })
33 | 


--------------------------------------------------------------------------------
/quote-machine/script/quotes.js:
--------------------------------------------------------------------------------
 1 | var quotes = [
 2 | "There's nothing wrong with having a tree as a friend.",
 3 | "The secret to doing anything is believing that you can do it. Anything that you believe you can do strong enough, you can do. Anything. As long as you believe.",
 4 | "We don't make mistakes. We just have happy accidents.",
 5 | "I think there's an artist hidden at the bottom of every single one of us." ,
 6 | "You too can paint almighty pictures.",
 7 | "No pressure. Just relax and watch it happen.",
 8 | "Don’t forget to make all these little things individuals -- all of them special in their own way.",
 9 | "Find freedom on this canvas.",
10 | "It’s so important to do something every day that will make you happy.",
11 | "Talent is a pursued interest. Anything that you’re willing to practice, you can do.",
12 | "Make love to the canvas.",
13 | "[Painting] will bring a lot of good thoughts to your heart.",
14 | "We artists are a different breed of people. We're a happy bunch.",
15 | "We want happy paintings. Happy paintings. If you want sad things, watch the news.",
16 | "That's a crooked tree. We'll send him to Washington.",
17 | "Every day is a good day when you paint.",
18 | "I think each of us, sometime in our life, has wanted to paint a picture.",
19 | "We tell people sometimes: We're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted.",
20 | "They say everything looks better with odd numbers of things. But sometimes I put even numbers -- just to upset the critics.",
21 | "Gotta give him a friend. Like I always say, 'Everyone needs a friend.'",
22 | "See how it fades right into nothing. That's just what you're looking for.",
23 | "If I paint something, I don't want to have to explain what it is.",
24 | "Water's like me. It's lazy. Boy, it always looks for the easiest way to do things.",
25 | "In painting, you have unlimited power. You have the ability to move mountains. You can bend rivers. But when I get home, the only thing I have power over is the garbage.",
26 | "Don’t forget to tell these special people in your life just how special they are to you.",
27 | "Didn’t you know you had that much power? You can move mountains. You can do anything.",
28 | "I like to beat the brush.",
29 | "Just let go -- and fall like a little waterfall.",
30 | "Talk to the tree, make friends with it.",
31 | "I taught my son to paint mountains like these, and guess what? Now he paints the best darn mountains in the industry.",
32 | "I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush.",
33 | "Be so very light. Be a gentle whisper.",
34 | "Use absolutely no pressure. Just like an angel’s wing.",
35 | "You need the dark in order to show the light.",
36 | "You can do anything you want to do. This is your world.",
37 | "You have to allow the paint to break to make it beautiful.",
38 | "However you think it should be, that’s exactly how it should be.",
39 | "In nature, dead trees are just as normal as live trees.",
40 | "You can have anything you want in the world -- once you help everyone around you get what they want.",
41 | "If you do too much, it’s going to lose its effectiveness.",
42 | "This is happy place; little squirrels live here and play.",
43 | "That’s where the crows will sit. But we’ll have to put an elevator to put them up there because they can’t fly, but they don’t know that, so they still try.",
44 | "Remember how free clouds are. They just lay around in the sky all day long.",
45 | "We don’t really know where this goes -- and I’m not sure we really care.",
46 | "If we’re going to have animals around we all have to be concerned about them and take care of them.",
47 | "You can do anything here -- the only prerequisite is that it makes you happy.",
48 | "Go out on a limb -- that’s where the fruit is.",
49 | "Isn’t it fantastic that you can change your mind and create all these happy things?",
50 | "Anytime you learn, you gain.",
51 | "It’s life. It’s interesting. It’s fun."
52 | ];
53 | 


--------------------------------------------------------------------------------
/quote-machine/style/main.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  3 |   /* background: url('./image/wave.svg');
  4 |   background-repeat: no-repeat;
  5 |   background-clip: content-box; */
  6 |   padding: 0px;
  7 |   margin: 0px;
  8 |   font-family: 'Kaushan Script', cursive;
  9 |   font-size: 2.81rem;
 10 | }
 11 | 
 12 | .backimg {
 13 |   position: absolute;
 14 |   width: 100%;
 15 |   height: 100%;
 16 |   z-index: -1;
 17 |   display: flex;
 18 |   align-items: flex-end;
 19 | }
 20 | 
 21 | button {
 22 |   padding: 0px 8px 0px 6px;
 23 |   height: 35px;
 24 | }
 25 | 
 26 | #app {
 27 |   display: flex;
 28 |   width: 100vw;
 29 |   height: 100vh;
 30 |   align-items: center;
 31 |   justify-content: center;
 32 | }
 33 | 
 34 | .main-content {
 35 |   position: relative;
 36 |   height: 743px;
 37 |   width: 960px;
 38 |   /* border: 2px solid blue; */
 39 |   overflow: hidden;
 40 | }
 41 | 
 42 | .changeQuote {
 43 |   height: 100%;
 44 |   width: 100%;
 45 |   position: absolute;
 46 |   top: 0%;
 47 |   left: 0%;
 48 |   cursor: url('../image/sad.png'), auto !important;
 49 | }
 50 | 
 51 | #quote_background {
 52 |   height: 100%;
 53 |   width: 100%;
 54 |   position: absolute;
 55 |   top: 0%;
 56 |   left: 0%;
 57 | }
 58 | 
 59 | .card-text {
 60 |   width: 70%;
 61 |   height: 50%;
 62 |   position: absolute;
 63 |   top: 60%;
 64 |   left: 50%;
 65 |   transform: translate(-50%, -50%);
 66 |   /* border: 2px solid red; */
 67 |   display: flex;
 68 |   flex-direction: column;
 69 |   align-items: end;
 70 |   justify-content: center;
 71 | }
 72 | 
 73 | .card-text p {
 74 |   color: rebeccapurple;
 75 |   width: 100%;
 76 |   text-align: center;
 77 | }
 78 | 
 79 | .card-text p:nth-child(2) {
 80 |   margin-top: 2rem;
 81 |   text-align: end;
 82 | }
 83 | 
 84 | footer {
 85 |   position: absolute;
 86 |   bottom: 0%;
 87 |   right: 6%;
 88 |   margin-bottom: 20px;
 89 | }
 90 | 
 91 | footer a {
 92 |   text-decoration: none;
 93 |   color: #ffffff;
 94 |   font-size: 1.2rem;
 95 | }
 96 | footer a:hover {
 97 |   color: #ffffff;
 98 |   font-size: 2.2rem;
 99 | }
100 | 
101 | /*
102 | Quote Animations
103 | */
104 | .card-text p {
105 |   transform: translateX(10px);
106 | }
107 | 
108 | .animate {
109 |   animation: fadeInTranslateX ease 1s;
110 |   -webkit-animation: fadeInTranslateX ease 1s;
111 |   -moz-animation: fadeInTranslateX ease 1s;
112 |   -o-animation: fadeInTranslateX ease 1s;
113 |   -ms-animation: fadeInTranslateX ease 1s;
114 | }
115 | 
116 | @keyframes fadeInTranslateX {
117 |   0% {
118 |     opacity: 0;
119 |     transform: translateX(-5px);
120 |   }
121 |   100% {
122 |     opacity: 1;
123 |     transform: translateX(10px);
124 |   }
125 | }
126 | 
127 | @-moz-keyframes fadeInTranslateX {
128 |   0% {
129 |     opacity: 0;
130 |     transform: translateX(-5px);
131 |   }
132 |   100% {
133 |     opacity: 1;
134 |     transform: translateX(10px);
135 |   }
136 | }
137 | 
138 | @-webkit-keyframes fadeInTranslateX {
139 |   0% {
140 |     opacity: 0;
141 |     transform: translateX(-5px);
142 |   }
143 |   100% {
144 |     opacity: 1;
145 |     transform: translateX(10px);
146 |   }
147 | }
148 | 
149 | @-o-keyframes fadeInTranslateX {
150 |   0% {
151 |     opacity: 0;
152 |     transform: translateX(-5px);
153 |   }
154 |   100% {
155 |     opacity: 1;
156 |     transform: translateX(10px);
157 |   }
158 | }
159 | 
160 | @-ms-keyframes fadeInTranslateX {
161 |   0% {
162 |     opacity: 0;
163 |     transform: translateX(-5px);
164 |   }
165 |   100% {
166 |     opacity: 1;
167 |     transform: translateX(10px);
168 |   }
169 | }
170 | 


--------------------------------------------------------------------------------