From 4fc96365f639294833b12a3b5f6a887d443b8179 Mon Sep 17 00:00:00 2001 From: Andreas Zweili Date: Mon, 18 Jan 2021 20:47:58 +0100 Subject: [PATCH] add files for lesson 26 --- .../app.js | 22 +++++ .../index.html | 28 +++++++ .../styles.css | 80 +++++++++++++++++++ 3 files changed, 130 insertions(+) create mode 100644 basics-05-using-the-native-event-object/app.js create mode 100644 basics-05-using-the-native-event-object/index.html create mode 100644 basics-05-using-the-native-event-object/styles.css diff --git a/basics-05-using-the-native-event-object/app.js b/basics-05-using-the-native-event-object/app.js new file mode 100644 index 0000000..719c807 --- /dev/null +++ b/basics-05-using-the-native-event-object/app.js @@ -0,0 +1,22 @@ +const app = Vue.createApp({ + data() { + return { + counter: 0, + name: '' + }; + }, + methods: { + setName(event, lastName) { + this.name = event.target.value + ' ' + lastName; + }, + add(num) { + this.counter = this.counter + num; + }, + reduce(num) { + this.counter = this.counter - num; + // this.counter--; + } + } +}); + +app.mount('#events'); diff --git a/basics-05-using-the-native-event-object/index.html b/basics-05-using-the-native-event-object/index.html new file mode 100644 index 0000000..e894f75 --- /dev/null +++ b/basics-05-using-the-native-event-object/index.html @@ -0,0 +1,28 @@ + + + + + + Vue Basics + + + + + + +
+

Vue Events

+
+
+

Events in Action

+ + +

Result: {{ counter }}

+ +

Your Name: {{ name }}

+
+ + diff --git a/basics-05-using-the-native-event-object/styles.css b/basics-05-using-the-native-event-object/styles.css new file mode 100644 index 0000000..99b4c04 --- /dev/null +++ b/basics-05-using-the-native-event-object/styles.css @@ -0,0 +1,80 @@ +* { + box-sizing: border-box; +} + +html { + font-family: 'Jost', sans-serif; +} + +body { + margin: 0; +} + +header { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 3rem auto; + border-radius: 10px; + padding: 1rem; + background-color: #4fc08d; + color: white; + text-align: center; + width: 90%; + max-width: 40rem; +} + +#events { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 3rem auto; + border-radius: 10px; + padding: 1rem; + text-align: center; + width: 90%; + max-width: 40rem; +} + +#events h2 { + font-size: 2rem; + border-bottom: 4px solid #ccc; + color: #4fc08d; + margin: 0 0 1rem 0; +} + +#events p { + font-size: 1.25rem; + font-weight: bold; + border: 1px solid #4fc08d; + background-color: #4fc08d; + color: white; + padding: 0.5rem; + border-radius: 25px; +} + +#events input { + font: inherit; + border: 1px solid #ccc; +} + +#events input:focus { + outline: none; + border-color: #1b995e; + background-color: #d7fdeb; +} + +#events button { + font: inherit; + cursor: pointer; + border: 1px solid #ff0077; + background-color: #ff0077; + color: white; + padding: 0.05rem 1rem; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); + border-radius: 20px; + margin: 0 1rem; +} + +#events button:hover, +#events button:active { + background-color: #ec3169; + border-color: #ec3169; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); +}