Skip to content

Commit 3d6fa60

Browse files
AsabenehAsabeneh
committed
day 23
1 parent 3896123 commit 3d6fa60

File tree

13 files changed

+2389
-3
lines changed

13 files changed

+2389
-3
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ day9.md
1414
day10.md
1515
01_02_03_days_backup.md
1616
test.md
17-
23_Day
1817
24_Day
1918
25_Day
2019
26_Day

‎22_Day/22_day_dom_day_2.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
</div>
1616

17-
[<< Day 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>]()
17+
[<< Day 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md)
1818

1919
![Thirty Days Of JavaScript](../images/banners/day_1_22.png)
2020
- [Day 22](#day-22)
@@ -227,4 +227,4 @@ Check the requirement of this project from both images(jpg and gif). All the dat
227227

228228
🎉 CONGRATULATIONS ! 🎉
229229

230-
[<< Day 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>]()
230+
[<< Day 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md)

‎22_Day/22_day_starters/project_3/data/challenges_info.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const asabenehChallenges2020 = {
1818
'React Hooks',
1919
'Context API',
2020
'React Router',
21+
'Web Storage',
22+
'localStorage',
23+
'sessionStorage',
2124
'Redux',
2225
'Node',
2326
'MongoDB',

‎23_Day/23_day_dom_day_3.md‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
<div align="center">
2+
<h1> 30 Days Of JavaScript</h1>
3+
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
4+
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
5+
</a>
6+
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
7+
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
8+
</a>
9+
10+
<sub>Author:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<small> January, 2020</small>
13+
</sub>
14+
15+
</div>
16+
17+
[<< Day 22](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/22_Day/22_day_dom_day_2.md) | [Day 24 >>]()
18+
19+
![Thirty Days Of JavaScript](../images/banners/day_1_23.png)
20+
21+
- [Day 22](#day-22)
22+
- [DOM(Document Object Model)-Day 3](#domdocument-object-model-day-3)
23+
- [Event Listeners](#event-listeners)
24+
- [Click](#click)
25+
- [Double Click](#double-click)
26+
- [Mouse enter](#mouse-enter)
27+
- [Getting value from an input element](#getting-value-from-an-input-element)
28+
- [input value](#input-value)
29+
- [input event and change](#input-event-and-change)
30+
- [blur event](#blur-event)
31+
- [keypress, keydow and keyup](#keypress-keydow-and-keyup)
32+
- [Exercises](#exercises)
33+
- [Exercise: Level 1](#exercise-level-1)
34+
35+
# Day 22
36+
37+
## DOM(Document Object Model)-Day 3
38+
39+
### Event Listeners
40+
41+
Common HTML events:onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload.
42+
We can add event listener method to any DOM object. We use **_addEventListener()_** method to listen different event types on HTML elements. The _addEventListener()_ method takes two arguments, an event listener and a callback function.
43+
44+
```js
45+
selectedElement.addEventListener('eventlistner', function(e) {
46+
// the activity you want to occur after the event will be in here
47+
})
48+
// or
49+
50+
selectedElement.addEventListener('eventlistner', e => {
51+
// the activity you want to occur after the event will be in here
52+
})
53+
```
54+
55+
#### Click
56+
57+
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
58+
59+
The following is an example of click type event.
60+
61+
**Example: click**
62+
63+
```html
64+
<!DOCTYPE html>
65+
<html>
66+
<head>
67+
<title>Document Object Model</title>
68+
</head>
69+
70+
<body>
71+
<button>Click Me</button>
72+
73+
<script>
74+
const button = document.querySelector('button')
75+
button.addEventListener('click', e => {
76+
console.log('e gives the event listener object:', e)
77+
console.log('e.target gives the selected element: ', e.target)
78+
console.log(
79+
'e.target.textContent gives content of selected element: ',
80+
e.target.textContent
81+
)
82+
})
83+
</script>
84+
</body>
85+
</html>
86+
```
87+
88+
An event can be also attached directly to the HTML element as inline script.
89+
90+
**Example: onclick**
91+
92+
```html
93+
<!DOCTYPE html>
94+
<html>
95+
<head>
96+
<title>Document Object Model</title>
97+
</head>
98+
99+
<body>
100+
<button onclick="clickMe()">Click Me</button>
101+
<script>
102+
const clickMe = () => {
103+
alert('We can attach event on HTML element')
104+
}
105+
</script>
106+
</body>
107+
</html>
108+
```
109+
110+
#### Double Click
111+
112+
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
113+
114+
The following is an example of click type event.
115+
**Example: dblclick**
116+
117+
```html
118+
<!DOCTYPE html>
119+
<html>
120+
<head>
121+
<title>Document Object Model</title>
122+
</head>
123+
124+
<body>
125+
<button>Click Me</button>
126+
127+
<script>
128+
const button = document.querySelector('button')
129+
button.addEventListener('dblclick', e => {
130+
console.log('e gives the event listener object:', e)
131+
console.log('e.target gives the selected element: ', e.target)
132+
console.log(
133+
'e.target.textContent gives content of selected element: ',
134+
e.target.textContent
135+
)
136+
})
137+
</script>
138+
</body>
139+
</html>
140+
```
141+
142+
#### Mouse enter
143+
144+
To attach an event listener to an element, first we select the element then we attach the addEventListener method. The event listener takes event type and callback functions as argument.
145+
146+
The following is an example of click type event.
147+
148+
**Example: mouseenter**
149+
150+
```html
151+
<!DOCTYPE html>
152+
<html>
153+
<head>
154+
<title>Document Object Model</title>
155+
</head>
156+
157+
<body>
158+
<button>Click Me</button>
159+
160+
<script>
161+
const button = document.querySelector('button')
162+
button.addEventListener('mouseenter', e => {
163+
console.log('e gives the event listener object:', e)
164+
console.log('e.target gives the selected element: ', e.target)
165+
console.log(
166+
'e.target.textContent gives content of selected element: ',
167+
e.target.textContent
168+
)
169+
})
170+
</script>
171+
</body>
172+
</html>
173+
```
174+
175+
By now you are familiar with addEventListen method and how to attach event listener. There are many types of event listeners. But in this challenge we will focus the most common important events.
176+
List of events:
177+
178+
- click - when the element clicked
179+
- dbclick - when the element double clicked
180+
- mouseenter - when the mouse point enter to the element
181+
- mouseleave - when the mouse pointer leave the element
182+
- mousemove - when the mouse pointer move on the element
183+
- mouseover - when the mouse pointer move on the element
184+
- mouseout -when the mouse pointer out from the element
185+
- input -when value enter to input field
186+
- change -when value change on input field
187+
- blur -when the element is not focused
188+
- keydown - when a key is down
189+
- keyup - when a key is up
190+
- keypress - when we press any key
191+
- onload - when the browser has finished loading a page
192+
193+
Test the above event types by replacing event type in the above snippet code.
194+
195+
### Getting value from an input element
196+
197+
We usually fill forms and forms accept data. Form fields are created using input HTML element. Let us build a small application which allow us to calculate body mas index of a person using two input fields, one button and one p tag.
198+
199+
### input value
200+
201+
```html
202+
<!DOCTYPE html>
203+
<html>
204+
<head>
205+
<title>Document Object Model:30 Days Of JavaScript</title>
206+
</head>
207+
208+
<body>
209+
<h1>Body Mass Index Calculator</h1>
210+
211+
<input type="text" id="mass" placeholder="Mass in Kilogram" />
212+
<input type="text" id="height" placeholder="Height in meters" />
213+
<button>Calculate BMI</button>
214+
215+
<script>
216+
const mass = document.querySelector('#mass')
217+
const height = document.querySelector('#height')
218+
const button = document.querySelector('button')
219+
220+
let bmi
221+
button.addEventListener('click', () => {
222+
bmi = mass.value / height.value ** 2
223+
alert(`your bmi is ${bmi.toFixed(2)}`)
224+
console.log(bmi)
225+
})
226+
</script>
227+
</body>
228+
</html>
229+
```
230+
231+
#### input event and change
232+
233+
In the above example, we managed to get input values from two input fields by clicking button. How about if we want to get value without click the button. We can use the _change_ or _input_ event type to get data right away from the input field when the field is on focus. Let us see how we will handle that.
234+
235+
```html
236+
<!DOCTYPE html>
237+
<html>
238+
<head>
239+
<title>Document Object Model:30 Days Of JavaScript</title>
240+
</head>
241+
242+
<body>
243+
<h1>Data Binding using input or change event</h1>
244+
245+
<input type="text" placeholder="say something" />
246+
<p></p>
247+
248+
<script>
249+
const input = document.querySelector('input')
250+
const p = document.querySelector('p')
251+
252+
input.addEventListener('input', e => {
253+
p.textContent = e.target.value
254+
})
255+
</script>
256+
</body>
257+
</html>
258+
```
259+
260+
#### blur event
261+
262+
In contrast to _input_ or _change_, the _blur_ event occur when the input field is not on focus.
263+
264+
```js
265+
<!DOCTYPE html>
266+
<html>
267+
268+
<head>
269+
<title>Document Object Model:30 Days Of JavaScript</title>
270+
</head>
271+
272+
<body>
273+
<h1>Giving feedback using blur event</h1>
274+
275+
<input type="text" id="mass" placeholder="say something" />
276+
<p></p>
277+
278+
<script>
279+
const input = document.querySelector('input')
280+
const p = document.querySelector('p')
281+
282+
input.addEventListener('blur', (e) => {
283+
p.textContent = 'Field is required'
284+
p.style.color = 'red'
285+
286+
})
287+
</script>
288+
</body>
289+
290+
</html>
291+
```
292+
293+
#### keypress, keydow and keyup
294+
295+
We can access all the key numbers of the keyboard using different event listener types. Let us use keypress and get the keyCode of each keyboard keys.
296+
297+
```html
298+
<!DOCTYPE html>
299+
<html>
300+
<head>
301+
<title>Document Object Model:30 Days Of JavaScript</title>
302+
</head>
303+
304+
<body>
305+
<h1>Key events: Press any key</h1>
306+
307+
<script>
308+
document.body.addEventListener('keypress', e => {
309+
alert(e.keyCode)
310+
})
311+
</script>
312+
</body>
313+
</html>
314+
```
315+
316+
---
317+
318+
🌕 You are so special, you are progressing everyday. Now, you knew how handle any kind of DOM events. . You are left with only seven days to your way to greatness. Now do some exercises for your brain and for your muscle.
319+
320+
## Exercises
321+
322+
### Exercise: Level 1
323+
324+
![Number Generator](./../images/projects/dom_min_project_number_generator_day_3.1.gif)
325+
326+
![Keyboard key](./../images/projects/dom_min_project_keycode_day_3.2.gif)
327+
328+
🎉 CONGRATULATIONS ! 🎉
329+
330+
[<< Day 22](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/22_Day/22_day_dom_day_2.md) | [Day 24 >>]()

0 commit comments

Comments
 (0)