Tutorial lessons 1-7

src/tutorial/src/step-1/description.md

@@ -1,25 +1,38 @@
-# Adding Data
+# Adding Reactive Properties
 
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
-
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+:::tip WIP
+The tutorial is currently work in progress. Check back later!
+:::
 
 For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
 
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+How to make it dynamic? We need to create our first _reactive_ property `colorsNumber`
 
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
+<div class="options-api">
 
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+```js
+data() {
+  return {
+    colorsNumber: 3
+  }
+}
+```
 
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
+</div>
 
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+<div class="composition-api">
 
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
+```js
+import { ref } from 'vue'
+const colorsNumber = ref(3)
+```
 
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+</div>
 
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes.
+Now, we can use it in our template instead of a static number:
+
+```html
+<h2>Number of colors: {{ colorsNumber }}</h2>
+```
 
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`.
+Try to change the `colorsNumber` and check how it immediately updates the rendered HTML.

src/tutorial/src/step-2/App/composition.js

@@ -2,5 +2,9 @@ import { ref } from 'vue'
 
 export default {
   name: 'App',
-  setup() {}
+  setup() {
+    const colorsNumber = ref(3)
+
+    return { colorsNumber }
+  }
 }

src/tutorial/src/step-2/App/options.js

@@ -1,6 +1,8 @@
 export default {
   name: 'App',
   data() {
-    return {}
+    return {
+      colorsNumber: 3
+    }
   }
 }

src/tutorial/src/step-2/App/style.css

@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+label {
+  font-size: 18px;
+}
+
+input {
+  font-size: 18px;
+  padding-left: 5px;
+  width: 35px;
+}
+
+.panel {
+  color: white;
+  background-color: teal;
+  transition: background 0.5s;
+}

src/tutorial/src/step-2/App/template.html

@@ -1 +1,6 @@
-<h1>Step 2!</h1>
+<main>
+  <div class="panel">
+    <h1>Guess the Color</h1>
+    <h2>Number of colors: {{ colorsNumber }}</h2>
+  </div>
+</main>

src/tutorial/src/step-2/description.md

@@ -1 +1,17 @@
-# Two-way Binding
+# Binding Dynamic Attributes
+
+Let's make our example more interactive! What if we could allow user to change `colorsNumber` from the UI? To implement this, we need to start with adding an `<input>` field to our component template
+
+```html{4}
+<div class="panel">
+  <h1>Guess the Color</h1>
+  <h2>Number of colors: 3</h2>
+  <input type="number">
+</div>
+```
+
+Now, we have to provide some initial value to our input, and we want to display `colorsNumber` there. In Vue, we can use a `v-bind` directive or its shorthand `:` to bind the component reactive property to the element attribute:
+
+```html
+<input type="number" :value="colorsNumber" />
+```

src/tutorial/src/step-3/App/composition.js

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+
+export default {
+  name: 'App',
+  setup() {
+    const colorsNumber = ref(3)
+
+    return { colorsNumber }
+  }
+}

src/tutorial/src/step-3/App/options.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'App',
+  data() {
+    return {
+      colorsNumber: 3
+    }
+  }
+}

src/tutorial/src/step-3/App/style.css

@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+label {
+  font-size: 18px;
+}
+
+input {
+  font-size: 18px;
+  padding-left: 5px;
+  width: 35px;
+}
+
+.panel {
+  color: white;
+  background-color: teal;
+  transition: background 0.5s;
+}

src/tutorial/src/step-3/App/template.html

@@ -0,0 +1,7 @@
+<main>
+  <div class="panel">
+    <h1>Guess the Color</h1>
+    <h2>Number of colors: {{ colorsNumber }}</h2>
+    <input type="number" :value="colorsNumber"/>
+  </div>
+</main>

src/tutorial/src/step-3/description.md

@@ -0,0 +1,15 @@
+# Listening to Events
+
+Now we can see that `colorsNumber` is displayed on the input field. However, when we change the number in the input, we don't see any changes on `Number of colors` in the template 🤔. It happens because we only have _one-way binding_ now, displaying reactive property in the input field but not _changing_ it on user input.
+
+To make this change, we need to listen to the `input` DOM event on the `<input>` field and update `colorsNumber` on it. This can be done with Vue's `v-on` directive or its shorthand `@`:
+
+```html
+<input
+  type="number"
+  :value="colorsNumber"
+  @input="colorsNumber = $event.target.value"
+/>
+```
+
+`$event` is the HTML native [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)(in our case it's `input`).

src/tutorial/src/step-4/App/composition.js

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+
+export default {
+  name: 'App',
+  setup() {
+    const colorsNumber = ref(3)
+
+    return { colorsNumber }
+  }
+}

src/tutorial/src/step-4/App/options.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'App',
+  data() {
+    return {
+      colorsNumber: 3
+    }
+  }
+}

src/tutorial/src/step-4/App/style.css

@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+label {
+  font-size: 18px;
+}
+
+input {
+  font-size: 18px;
+  padding-left: 5px;
+  width: 35px;
+}
+
+.panel {
+  color: white;
+  background-color: teal;
+  transition: background 0.5s;
+}

src/tutorial/src/step-4/App/template.html

@@ -0,0 +1,7 @@
+<main>
+  <div class="panel">
+    <h1>Guess the Color</h1>
+    <h2>Number of colors: {{ colorsNumber }}</h2>
+    <input type="number" :value="colorsNumber" @input="colorsNumber = $event.target.value" />
+  </div>
+</main>

src/tutorial/src/step-4/description.md

@@ -0,0 +1,16 @@
+# Two-Way Binding
+
+In the previous step we created a _two-way binding_: we update `input` field on reactive property change and vice versa. Vue.js has a `v-model` directive to make two-way binding less verbose. Let's replace out `:value` and `@input` with it:
+
+```html
+<input type="number" v-model="colorsNumber" />
+```
+
+Now, we can choose how many colors we'll have in our guessing game! As a last touch, let's add a label to our input field and set up minimum and maximum for it:
+
+```html
+<label for="colors">
+  Enter number of colors and press Enter:
+  <input id="colors" type="number" v-model="colorsNumber" min="2" max="10" />
+</label>
+```

src/tutorial/src/step-5/App/composition.js

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+
+export default {
+  name: 'App',
+  setup() {
+    const colorsNumber = ref(3)
+
+    return { colorsNumber }
+  }
+}

src/tutorial/src/step-5/App/options.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'App',
+  data() {
+    return {
+      colorsNumber: 3
+    }
+  }
+}

src/tutorial/src/step-5/App/style.css

@@ -0,0 +1,56 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+label {
+  font-size: 18px;
+}
+
+input {
+  font-size: 18px;
+  padding-left: 5px;
+  width: 35px;
+}
+
+.panel {
+  color: white;
+  background-color: teal;
+  transition: background 0.5s;
+}
+
+nav {
+  display: flex;
+  height: 30px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  background-color: white;
+  color: teal;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+nav button {
+  text-transform: uppercase;
+  padding: 0 8px;
+  height: 100%;
+  font-size: 16px;
+  background-color: white;
+  border: none;
+  cursor: pointer;
+  color: teal;
+}
+
+nav button:hover {
+  background-color: teal;
+  color: white;
+}

src/tutorial/src/step-5/App/template.html

@@ -0,0 +1,10 @@
+<main>
+  <div class="panel">
+    <h1>Guess the Color</h1>
+    <h2>Number of colors: {{ colorsNumber }}</h2>
+    <label for="colors">
+      Enter number of colors and press Enter:
+      <input id="colors" type="number" v-model="colorsNumber" min="2" max="10" />
+    </label>
+  </div>
+</main>