Skip to content

Commit f2f6c9e

Browse files
mulithemulimulithemuli
committed
adding chapter 1 / lesson 2 in separate directories
1 parent 48f24cd commit f2f6c9e

File tree

7 files changed

+186
-0
lines changed

7 files changed

+186
-0
lines changed

‎Chapter_1/Lesson_2/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Lesson 2 – adding a counter
2+
3+
Print the number of times the button has been clicked to the bottom of the page in a specified container.
4+
5+
Covered in this lesson
6+
- Using local variables
7+
- basic DOM manipulation
8+
9+
The area where the number of times clicked is defined. Local variable storage in the script has been reduced to a minimum.

‎Chapter_1/Lesson_2/Solution/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>jQuery Tutorial Lesson one.2 – Solution</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>jQuery Tutorial Lesson one.2 – Solution</h1>
12+
<h2>
13+
<a href="https://github.com/mulithemuli/jquery-tutorial#lesson-2--adding-a-counter" target="_blank">Adding a counter</a>
14+
</h2>
15+
<p>Print the number of times the button has been clicked to the bottom of the page in a specified container.</p>
16+
<h3>Covered in this Lesson</h3>
17+
<ul class="collection">
18+
<li class="collection-item">Using local variables</li>
19+
<li class="collection-item">basic DOM manipulation</li>
20+
</ul>
21+
<blockquote>
22+
The area where the number of times clicked is defined. Local variable storage in the script has been reduced
23+
to a minimum.
24+
</blockquote>
25+
<h3>Solution</h3>
26+
<p>
27+
<a href="https://codepen.io/mulithemuli/pen/bGbwROK" target="_blank">on CodePen</a>
28+
</p>
29+
<form>
30+
<div class="row">
31+
<div class="input-field col s12">
32+
<input id="text_1" type="text">
33+
<label for="text_1">Text #1</label>
34+
<span class="helper-text">You have typed: <span class="typed-text"></span></span>
35+
</div>
36+
<div class="col s12">
37+
<button class="btn waves-effect waves-light" type="button">Show Text #1</button>
38+
</div>
39+
</div>
40+
<div class="row">
41+
<div class="input-field col s12">
42+
<input id="text_2" type="text">
43+
<label for="text_2">Text #2</label>
44+
<span class="helper-text">You have typed: <span class="typed-text"></span></span>
45+
</div>
46+
<div class="col s12">
47+
<button class="btn waves-effect waves-light" type="button">Show Text #2</button>
48+
</div>
49+
</div>
50+
</form>
51+
<p>Number of times clicked: <span class="times-clicked">0</span></p>
52+
<h3>Thoughts on the solution</h3>
53+
<p>
54+
This solution stores the number of clicks in a variable which will be incremented by each click. The value
55+
will then be written to the designated span.
56+
</p>
57+
<ul class="collection">
58+
<li class="collection-header">
59+
<h5>What have we done to make it work?</h5>
60+
</li>
61+
<li class="collection-item">Adding the counter variable</li>
62+
<li class="collection-item">Incrementing the counter</li>
63+
<li class="collection-item">Update the text of the designated output</li>
64+
</ul>
65+
</div>
66+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
67+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-ZOED+d9HxogEQwD+jFvux96iGQR9TxfJO+mPF2ZS0TuKH6eWrmvPsDpO6I0OWdiX" crossorigin="anonymous"></script>
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

‎Chapter_1/Lesson_2/Solution/script.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let clickCounter = 0;
2+
3+
$('button').on('click', e => {
4+
let container = $(e.currentTarget).closest('.row');
5+
$('.typed-text', container).text($('input', container).val());
6+
clickCounter += 1;
7+
$('.times-clicked').text(clickCounter);
8+
});

‎Chapter_1/Lesson_2/Solution/styles.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.container {
2+
margin-top: 1em;
3+
}
4+
5+
h1 {
6+
font-size: 2em;
7+
}
8+
9+
h2 {
10+
font-size: 1.75em;
11+
}
12+
13+
h3 {
14+
font-size: 1.5em;
15+
}
16+
17+
h4 {
18+
font-size: 1.25em;
19+
}

‎Chapter_1/Lesson_2/Task/index.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>jQuery Tutorial Lesson one.2 – Task</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>jQuery Tutorial Lesson one.2 – Task</h1>
12+
<h2>
13+
<a href="https://github.com/mulithemuli/jquery-tutorial#lesson-2--adding-a-counter" target="_blank">Adding a counter</a>
14+
</h2>
15+
<p>Print the number of times the button has been clicked to the bottom of the page in a specified container.</p>
16+
<h3>Covered in this Lesson</h3>
17+
<ul class="collection">
18+
<li class="collection-item">Using local variables</li>
19+
<li class="collection-item">basic DOM manipulation</li>
20+
</ul>
21+
<blockquote>
22+
The area where the number of times clicked is defined. Local variable storage in the script has been reduced
23+
to a minimum.
24+
</blockquote>
25+
<h3>Task</h3>
26+
<p>
27+
<a href="https://codepen.io/mulithemuli/pen/WNeGOaK" target="_blank">on CodePen</a>
28+
</p>
29+
<form>
30+
<div class="row">
31+
<div class="input-field col s12">
32+
<input id="text_1" type="text">
33+
<label for="text_1">Text #1</label>
34+
<span class="helper-text">You have typed: <span class="typed-text"></span></span>
35+
</div>
36+
<div class="col s12">
37+
<button class="btn waves-effect waves-light" type="button">Show Text #1</button>
38+
</div>
39+
</div>
40+
<div class="row">
41+
<div class="input-field col s12">
42+
<input id="text_2" type="text">
43+
<label for="text_2">Text #2</label>
44+
<span class="helper-text">You have typed: <span class="typed-text"></span></span>
45+
</div>
46+
<div class="col s12">
47+
<button class="btn waves-effect waves-light" type="button">Show Text #2</button>
48+
</div>
49+
</div>
50+
</form>
51+
<p>Number of times clicked: <span class="times-clicked">0</span></p>
52+
</div>
53+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
54+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-ZOED+d9HxogEQwD+jFvux96iGQR9TxfJO+mPF2ZS0TuKH6eWrmvPsDpO6I0OWdiX" crossorigin="anonymous"></script>
55+
<script src="script.js"></script>
56+
</body>
57+
</html>

‎Chapter_1/Lesson_2/Task/script.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$('button').on('click', e => {
2+
let container = $(e.currentTarget).closest('.row');
3+
$('.typed-text', container).text($('input', container).val());
4+
});

‎Chapter_1/Lesson_2/Task/styles.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.container {
2+
margin-top: 1em;
3+
}
4+
5+
h1 {
6+
font-size: 2em;
7+
}
8+
9+
h2 {
10+
font-size: 1.75em;
11+
}
12+
13+
h3 {
14+
font-size: 1.5em;
15+
}
16+
17+
h4 {
18+
font-size: 1.25em;
19+
}

0 commit comments

Comments
 (0)