feat: started lesson 3

Author: NataliaTepluhina

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

@@ -35,8 +35,8 @@ Now we created a _two-way binding_: we update `input` field on reactive property
 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="squares">
+<label for="colors">
   Enter number of colors and press Enter:
-  <input id="squares" type="number" v-model="squaresNumber" min="2" max="10" />
+  <input id="colors" type="number" v-model="colorsNumber" min="2" max="10" />
 </label>
 ```

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,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>

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

@@ -0,0 +1,74 @@
+# Conditional Rendering
+
+Now, when we have defined how many colors we will show in the game, it's time to actually make our game start. For now, we want to have two states:
+
+- game is not started: we are displaying our input field so user can define the number of colors to guess;
+- game is started: for now, we want to hide the input field and we want to display a text "Game is started".
+
+Let's start with creating one more reactive property - `gameStarted`:
+
+<div class="composition-api">
+
+```js{2}
+const colorsNumber = ref(3)
+const gameStarted = ref(false)
+```
+
+</div>
+
+<div class="options-api">
+
+```js{4}
+data() {
+  return {
+    colorsNumber: 3,
+    gameStarted: false
+  }
+}
+```
+
+</div>
+
+Now, we can add a new section to our component template:
+
+```html{4}
+<div class="panel">
+  <!-- header content -->
+</div>
+<section class="flex" v-if="gameStarted">Game is started</section>
+```
+
+Try to change `gameStarted` to `true` and you will see a text rendered below the header.
+
+Let's start our game as soon as user submits the form with pressing <kbd>Enter</kbd> on the input field. To make this more semantic, let's wrap our input in `<form>` tag:
+
+```html
+<form>
+  <label for="colors">
+    Enter number of colors and press Enter:
+    <input id="colors" type="number" v-model="colorsNumber" />
+  </label>
+</form>
+```
+
+Form with the single input will be submitted on <kbd>Enter</kbd> press automatically. We only need to listen to the form's submit event:
+
+```html
+<form @submit="gameStarted = true">
+  <label for="colors">
+    Enter number of colors and press Enter:
+    <input id="colors" type="number" v-model="colorsNumber" />
+  </label>
+</form>
+```
+
+However, if we leave it like this, page will refresh and no text will be shown. The reason is we need to _prevent a default form submit event_ and make our change instead. In JavaScript, it's done with `event.preventDefault()` method; in Vue.js we have an event modifier `.prevent` that does the same under the hood.
+
+```html
+<form @submit.prevent="gameStarted = true">
+  <label for="colors">
+    Enter number of colors and press Enter:
+    <input id="colors" type="number" v-model="colorsNumber" />
+  </label>
+</form>
+```