| 10 days ago | Cristiano Magro |  |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
| 10 days ago | Cristiano Magro | |
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-lock.json
New file Diff too large 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/RatingControl.vue
New file @@ -0,0 +1,68 @@ <template> <ul> <li :class="{ active: activeOption === 'poor' }"> <button type="button" @click="activate('poor')">Poor</button> </li> <li :class="{ active: activeOption === 'average' }"> <button type="button" @click="activate('average')">Average</button> </li> <li :class="{ active: activeOption === 'great' }"> <button type="button" @click="activate('great')">Great</button> </li> </ul> </template> <script>export default { props: ['modelValue'], emits: ['update:modelValue'], // data() { // return { // activeOption: null, // }; // }, computed: { activeOption(){ return this.modelValue; } }, methods: { activate(option) { // this.activeOption = option; this.$emit('update:modelValue', option); } } } </script> <style scoped> .active { border-color: purple; } .active button { color: purple; } ul { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; } li { margin: 0 1rem; border: 1px solid #ccc; padding: 1rem; display: flex; align-items: center; } button { font: inherit; border: none; background-color: transparent; cursor: pointer; } </style> 11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
New file @@ -0,0 +1,196 @@ <template> <form @submit.prevent="submitForm"> <div class="form-control" :class="{ invalid: usernameValidity === 'invalid' }"> <label for="user-name">Your Name</label> <input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" /> <p v-if="usernameValidity === 'invalid'">please enter a valid name</p> </div> <div class="form-control"> <label for="age">Your Age (Years)</label> <input id="age" name="age" type="number" v-model="userAge" ref="inputAge" /> </div> <div class="form-control"> <label for="referrer">How did you hear about us?</label> <select id="referrer" name="referrer" v-model="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" value="news" v-model="interest" /> <label for="interest-news">News</label> </div> <div> <input id="interest-tutorials" name="interest" type="checkbox" value="tutorials" v-model="interest" /> <label for="interest-tutorials">Tutorials</label> </div> <div> <input id="interest-nothing" name="interest" type="checkbox" value="nothing" v-model="interest" /> <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" value="video" v-model="how" /> <label for="how-video">Video Courses</label> </div> <div> <input id="how-blogs" name="how" type="radio" value="blogs" v-model="how" /> <label for="how-blogs">Blogs</label> </div> <div> <input id="how-other" name="how" type="radio" value="other" v-model="how" /> <label for="how-other">Other</label> </div> </div> <div class="form-control"> <rating-control v-model="rating"></rating-control> </div> <div class="form-control"> <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm"> <label for="confirm-terms">Agree to terms of use?</label> </div> <div> <button>Save Data</button> </div> </form> </template> <script> import RatingControl from './RatingControl.vue'; export default { components: { RatingControl, }, data() { return { userName: '', userAge: null, referrer: 'wom', interest: [], how: null, confirm: false, usernameValidity: 'pending', rating: null, } }, methods: { submitForm() { console.log('Username: ' + this.userName); this.userName = ''; console.log('User age: '); console.log(this.userAge); //number console.log(this.$refs.inputAge.value); //string console.log(18); this.userAge = null; console.log('referrer: ' + this.referrer); this.referrer = 'wom'; console.log('Checkbox: '); console.log(this.interest); console.log('- Radio buttons: '); console.log(this.how); this.interest = []; this.how = null; console.log('- Confirm:'); console.log(this.confirm); this.confirm = false; console.log('- Rating:'); console.log(this.rating); this.rating = null; }, validateInput() { if (this.userName === '') { this.usernameValidity = 'invalid'; } else { this.usernameValidity = 'valid'; } }, } } </script> <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; } .form-control.invalid input { border-color: red; } .form-control.invalid label { color: red; } 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');
