11 - Forms/xno-forms-01-starting-setup/.browserslistrc
New file @@ -0,0 +1,3 @@ > 1% last 2 versions not dead 11 - Forms/xno-forms-01-starting-setup/.eslintrc.js
New file @@ -0,0 +1,17 @@ module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/vue3-essential', 'eslint:recommended' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } } 11 - Forms/xno-forms-01-starting-setup/.gitignore
New file @@ -0,0 +1,22 @@ .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? 11 - Forms/xno-forms-01-starting-setup/.prettierrc
New file @@ -0,0 +1,3 @@ { "singleQuote": true } 11 - Forms/xno-forms-01-starting-setup/HOW-TO-USE.pdfBinary files differ
11 - Forms/xno-forms-01-starting-setup/babel.config.js
New file @@ -0,0 +1,5 @@ module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } 11 - Forms/xno-forms-01-starting-setup/package.json
New file @@ -0,0 +1,23 @@ { "name": "vue-first-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0-0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0" } } 11 - Forms/xno-forms-01-starting-setup/public/favicon.ico
New file @@ -0,0 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 11 - Forms/xno-forms-01-starting-setup/src/App.vue
New file @@ -0,0 +1,28 @@ <template> <the-form></the-form> </template> <script> import TheForm from './components/TheForm.vue'; export default { components: { TheForm } } </script> <style> * { box-sizing: border-box; } html { font-family: sans-serif; } body { margin: 0; background-color: #292929; } </style> 11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
New file @@ -0,0 +1,117 @@ <template> <form> <div class="form-control"> <label for="user-name">Your Name</label> <input id="user-name" name="user-name" type="text" /> </div> <div class="form-control"> <label for="age">Your Age (Years)</label> <input id="age" name="age" type="number" /> </div> <div class="form-control"> <label for="referrer">How did you hear about us?</label> <select id="referrer" name="referrer"> <option value="google">Google</option> <option value="wom">Word of mouth</option> <option value="newspaper">Newspaper</option> </select> </div> <div class="form-control"> <h2>What are you interested in?</h2> <div> <input id="interest-news" name="interest" type="checkbox" /> <label for="interest-news">News</label> </div> <div> <input id="interest-tutorials" name="interest" type="checkbox" /> <label for="interest-tutorials">Tutorials</label> </div> <div> <input id="interest-nothing" name="interest" type="checkbox" /> <label for="interest-nothing">Nothing</label> </div> </div> <div class="form-control"> <h2>How do you learn?</h2> <div> <input id="how-video" name="how" type="radio" /> <label for="how-video">Video Courses</label> </div> <div> <input id="how-blogs" name="how" type="radio" /> <label for="how-blogs">Blogs</label> </div> <div> <input id="how-other" name="how" type="radio" /> <label for="how-other">Other</label> </div> </div> <div> <button>Save Data</button> </div> </form> </template> <style scoped> form { margin: 2rem auto; max-width: 40rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); padding: 2rem; background-color: #ffffff; } .form-control { margin: 0.5rem 0; } label { font-weight: bold; } h2 { font-size: 1rem; margin: 0.5rem 0; } input, select { display: block; width: 100%; font: inherit; margin-top: 0.5rem; } select { width: auto; } input[type='checkbox'], input[type='radio'] { display: inline-block; width: auto; margin-right: 1rem; } input[type='checkbox'] + label, input[type='radio'] + label { font-weight: normal; } button { font: inherit; border: 1px solid #0076bb; background-color: #0076bb; color: white; cursor: pointer; padding: 0.75rem 2rem; border-radius: 30px; } button:hover, button:active { border-color: #002350; background-color: #002350; } </style> 11 - Forms/xno-forms-01-starting-setup/src/main.js
New file @@ -0,0 +1,5 @@ import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
