From 507efa5fdd082c1bd04101ab511b50236d8296fc Mon Sep 17 00:00:00 2001 From: Andreas Zweili Date: Mon, 18 Jan 2021 17:17:34 +0100 Subject: [PATCH] add files for lesson 20 --- basics-03-events-starting-code/app.js | 9 +++ basics-03-events-starting-code/index.html | 26 ++++++++ basics-03-events-starting-code/styles.css | 80 +++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 basics-03-events-starting-code/app.js create mode 100644 basics-03-events-starting-code/index.html create mode 100644 basics-03-events-starting-code/styles.css diff --git a/basics-03-events-starting-code/app.js b/basics-03-events-starting-code/app.js new file mode 100644 index 0000000..f98aec1 --- /dev/null +++ b/basics-03-events-starting-code/app.js @@ -0,0 +1,9 @@ +const app = Vue.createApp({ + data() { + return { + counter: 0, + }; + }, +}); + +app.mount('#events'); diff --git a/basics-03-events-starting-code/index.html b/basics-03-events-starting-code/index.html new file mode 100644 index 0000000..fd938f3 --- /dev/null +++ b/basics-03-events-starting-code/index.html @@ -0,0 +1,26 @@ + + + + + + Vue Basics + + + + + + +
+

Vue Events

+
+
+

Events in Action

+ + +

Result: {{ counter }}

+
+ + diff --git a/basics-03-events-starting-code/styles.css b/basics-03-events-starting-code/styles.css new file mode 100644 index 0000000..99b4c04 --- /dev/null +++ b/basics-03-events-starting-code/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); +}