Skip to content

Commit 9969d0f

Browse files
NataliaTepluhinayyx990803
authored andcommitted
feat: split lesson 3
1 parent 5cc2524 commit 9969d0f

File tree

16 files changed

+287
-112
lines changed

16 files changed

+287
-112
lines changed
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Conditional Rendering
2+
3+
It's time to actually make our game start. For now, we want to have two states:
4+
5+
- game is not started: we are displaying our input field so user can define the number of colors to guess;
6+
- game is started: for now, we want to hide the input field and we want to display a text "Game is started".
7+
8+
Let's start with creating one more reactive property - `gameStarted`:
9+
10+
<div class="composition-api">
11+
12+
```js{2}
13+
const colorsNumber = ref(3)
14+
const gameStarted = ref(false)
15+
```
16+
17+
</div>
18+
19+
<div class="options-api">
20+
21+
```js{4}
22+
data() {
23+
return {
24+
colorsNumber: 3,
25+
gameStarted: false
26+
}
27+
}
28+
```
29+
30+
</div>
31+
32+
Let's display a new `section` only when game is started. We will use `v-if` directive for this:
33+
34+
```html{4}
35+
<div class="panel">
36+
<!-- header content -->
37+
</div>
38+
<section class="flex" v-if="gameStarted">Game is started</section>
39+
```
40+
41+
Try to change `gameStarted` to `true` and you will see a text rendered below the header.
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ref } from 'vue'
2+
3+
export default {
4+
name: 'App',
5+
setup() {
6+
const colorsNumber = ref(3)
7+
const gameStarted = ref(false)
8+
9+
return { colorsNumber, gameStarted }
10+
}
11+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
name: 'App',
3+
data() {
4+
return {
5+
colorsNumber: 3,
6+
gameStarted: false
7+
}
8+
}
9+
}
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
#app {
7+
font-family: Avenir, Helvetica, Arial, sans-serif;
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
text-align: center;
11+
color: #2c3e50;
12+
}
13+
14+
label {
15+
font-size: 18px;
16+
}
17+
18+
input {
19+
font-size: 18px;
20+
padding-left: 5px;
21+
width: 35px;
22+
}
23+
24+
.panel {
25+
color: white;
26+
background-color: teal;
27+
transition: background 0.5s;
28+
}
29+
30+
nav {
31+
display: flex;
32+
height: 30px;
33+
justify-content: space-between;
34+
align-items: center;
35+
padding: 0 20px;
36+
background-color: white;
37+
color: teal;
38+
font-size: 16px;
39+
text-transform: uppercase;
40+
}
41+
42+
nav button {
43+
text-transform: uppercase;
44+
padding: 0 8px;
45+
height: 100%;
46+
font-size: 16px;
47+
background-color: white;
48+
border: none;
49+
cursor: pointer;
50+
color: teal;
51+
}
52+
53+
nav button:hover {
54+
background-color: teal;
55+
color: white;
56+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<main>
2+
<div class="panel">
3+
<h1>Guess the Color</h1>
4+
<h2>Number of colors: {{ colorsNumber }}</h2>
5+
<form @submit.prevent="gameStarted = true">
6+
<label for="colors">
7+
Enter number of colors and press Enter:
8+
<input id="colors" type="number" v-model="colorsNumber" />
9+
</label>
10+
</form>
11+
</div>
12+
<section class="flex" v-if="gameStarted">Game is started</section>
13+
</main>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Conditional Rendering - 2
2+
3+
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:
4+
5+
```html{1-3}
6+
<nav>
7+
<button @click="gameStarted = false">Change squares number</button>
8+
</nav>
9+
<form @submit.prevent="gameStarted = true">
10+
<label for="colors">
11+
Enter number of colors and press Enter:
12+
<input id="colors" type="number" v-model="colorsNumber" />
13+
</label>
14+
</form>
15+
```
16+
17+
Now, let's display the `<nav>` conditionally when game is started:
18+
19+
```html{1-3}
20+
<nav v-if="gameStarted">
21+
<button @click="gameStarted = false">Change squares number</button>
22+
</nav>
23+
```
24+
25+
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:
26+
27+
```html
28+
<nav v-if="gameStarted">
29+
<button @click="gameStarted = false">Change squares number</button>
30+
</nav>
31+
<form v-else @submit.prevent="gameStarted = true">
32+
<label for="colors">
33+
Enter number of colors and press Enter:
34+
<input id="colors" type="number" v-model="colorsNumber" />
35+
</label>
36+
</form>
37+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ref } from 'vue'
2+
3+
export default {
4+
name: 'App',
5+
setup() {
6+
const colorsNumber = ref(3)
7+
const gameStarted = ref(false)
8+
9+
return { colorsNumber, gameStarted }
10+
}
11+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
name: 'App',
3+
data() {
4+
return {
5+
colorsNumber: 3,
6+
gameStarted: false
7+
}
8+
}
9+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
#app {
7+
font-family: Avenir, Helvetica, Arial, sans-serif;
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
text-align: center;
11+
color: #2c3e50;
12+
}
13+
14+
label {
15+
font-size: 18px;
16+
}
17+
18+
input {
19+
font-size: 18px;
20+
padding-left: 5px;
21+
width: 35px;
22+
}
23+
24+
.panel {
25+
color: white;
26+
background-color: teal;
27+
transition: background 0.5s;
28+
}
29+
30+
nav {
31+
display: flex;
32+
height: 30px;
33+
justify-content: space-between;
34+
align-items: center;
35+
padding: 0 20px;
36+
background-color: white;
37+
color: teal;
38+
font-size: 16px;
39+
text-transform: uppercase;
40+
}
41+
42+
nav button {
43+
text-transform: uppercase;
44+
padding: 0 8px;
45+
height: 100%;
46+
font-size: 16px;
47+
background-color: white;
48+
border: none;
49+
cursor: pointer;
50+
color: teal;
51+
}
52+
53+
nav button:hover {
54+
background-color: teal;
55+
color: white;
56+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<main>
2+
<div class="panel">
3+
<h1>Guess the Color</h1>
4+
<h2>Number of colors: {{ colorsNumber }}</h2>
5+
<input type="number" :value="colorsNumber" @input="colorsNumber = $event.target.value" />
6+
</div>
7+
<section class="flex" v-if="gameStarted">Game is started</section>
8+
</main>
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Event Modifiers
2+
3+
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:
4+
5+
```html
6+
<form>
7+
<label for="colors">
8+
Enter number of colors and press Enter:
9+
<input id="colors" type="number" v-model="colorsNumber" />
10+
</label>
11+
</form>
12+
```
13+
14+
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:
15+
16+
```html
17+
<form @submit="gameStarted = true">
18+
<label for="colors">
19+
Enter number of colors and press Enter:
20+
<input id="colors" type="number" v-model="colorsNumber" />
21+
</label>
22+
</form>
23+
```
24+
25+
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.
26+
27+
```html
28+
<form @submit.prevent="gameStarted = true">
29+
<label for="colors">
30+
Enter number of colors and press Enter:
31+
<input id="colors" type="number" v-model="colorsNumber" />
32+
</label>
33+
</form>
34+
```
35+
36+
Now, whenever user enter a number in the input field and presses <kbd>Enter</kbd>, we can see that game is started.

0 commit comments

Comments
 (0)