feat: added instructions for lesson 3

Author: NataliaTepluhina

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

@@ -26,3 +26,31 @@ input {
   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-3/description.md

@@ -72,3 +72,41 @@ However, if we leave it like this, page will refresh and no text will be shown.
   </label>
 </form>
 ```
+
+Now, whenever user enter a number in the input field and presses <kbd>Enter</kbd>, we can see that game is started.
+
+The last thing we want to implement in this lesson is hiding the input field when the game is already started and showing a button `Change colors number`. Clicking on the button will set the game to "not-started" and show the input again. First, let's add the button to our template:
+
+```html{1-3}
+<nav>
+  <button @click="gameStarted = false">Change squares number</button>
+</nav>
+<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>
+```
+
+Now, let's display the `<nav>` conditionally when game is started:
+
+```html{1-3}
+<nav v-if="gameStarted">
+  <button @click="gameStarted = false">Change squares number</button>
+</nav>
+```
+
+Just like you can use `if...else` in JavaScript, you can use `v-if` and `v-else` in Vue. So when `gameStarted` is `true`, we're displaying `<nav>`, else we're displaying the form:
+
+```html
+<nav v-if="gameStarted">
+  <button @click="gameStarted = false">Change squares number</button>
+</nav>
+<form v-else @submit.prevent="gameStarted = true">
+  <label for="colors">
+    Enter number of colors and press Enter:
+    <input id="colors" type="number" v-model="colorsNumber" />
+  </label>
+</form>
+```