diff --git a/behind-scenes-01-starting-setup/app.js b/behind-scenes-01-starting-setup/app.js new file mode 100644 index 0000000..82167ad --- /dev/null +++ b/behind-scenes-01-starting-setup/app.js @@ -0,0 +1,18 @@ +const app = Vue.createApp({ + data() { + return { + currentUserInput: '', + message: 'Vue is great!', + }; + }, + methods: { + saveInput(event) { + this.currentUserInput = event.target.value; + }, + setText() { + this.message = this.currentUserInput; + }, + }, +}); + +app.mount('#app'); diff --git a/behind-scenes-01-starting-setup/index.html b/behind-scenes-01-starting-setup/index.html new file mode 100644 index 0000000..76619bb --- /dev/null +++ b/behind-scenes-01-starting-setup/index.html @@ -0,0 +1,26 @@ + + + + + + Vue Basics + + + + + + +
+

Vue Behind The Scenes

+
+
+

How Vue Works

+ + +

{{ message }}

+
+ + diff --git a/behind-scenes-01-starting-setup/styles.css b/behind-scenes-01-starting-setup/styles.css new file mode 100644 index 0000000..936d76f --- /dev/null +++ b/behind-scenes-01-starting-setup/styles.css @@ -0,0 +1,78 @@ +* { + 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; +} + +#app { + 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; +} + +#app h2 { + font-size: 2rem; + border-bottom: 4px solid #ccc; + color: #4fc08d; + margin: 0 0 1rem 0; +} + +#app p { + font-size: 1.25rem; + font-weight: bold; + border: 1px solid #4fc08d; + background-color: #4fc08d; + color: white; + padding: 0.5rem; + border-radius: 25px; +} + +#app input { + font: inherit; + border: 1px solid #ccc; +} + +#app input:focus { + outline: none; + border-color: #1b995e; + background-color: #d7fdeb; +} + +#app 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); +} + +#app button:hover, +#app button:active { + background-color: #ec3169; + border-color: #ec3169; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); +}