Skip to content

Commit 12f1aa0

Browse files
AsabenehAsabeneh
committed
day 22
1 parent 4bc164d commit 12f1aa0

22 files changed

+961
-2
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-
22_Day
1817
23_Day
1918
24_Day
2019
25_Day

‎21_Day/21_day_dom.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
- [Adding Text to HTML element](#adding-text-to-html-element)
3434
- [Adding Text content using textContent](#adding-text-content-using-textcontent)
3535
- [Adding Text Content using innHTML](#adding-text-content-using-innhtml)
36+
- [Text Content](#text-content)
37+
- [Inner HTML](#inner-html)
3638
- [Adding style](#adding-style)
3739
- [Adding Style Color](#adding-style-color)
3840
- [Adding Style Background Color](#adding-style-background-color)
@@ -216,11 +218,78 @@ titles[3].textContent = 'Fourth Title'
216218

217219
Most people get confused between _textContent_ and _innerHTML_. _textContent_ is meant to add text to an HTML element, however innerHTML can add a text or HTML element or elements as a child.
218220

221+
##### Text Content
222+
223+
We assign *textContent* HTML object property to a text
224+
219225
```js
220226
const titles = document.querySelectorAll('h1')
221227
titles[3].textContent = 'Fourth Title'
222228
```
223229

230+
##### Inner HTML
231+
232+
We use innerHTML property when we like to replace or a completely new children content to a parent element.
233+
It value we assign is going to be a string of HTML elements.
234+
235+
```html
236+
<!DOCTYPE html>
237+
<html>
238+
<head>
239+
<title>JavaScript for Everyone:DOM</title>
240+
</head>
241+
<body>
242+
<div class="wrapper">
243+
<h1>Asabeneh Yetayeh challenges in 2020</h1>
244+
<h2>30DaysOfJavaScript Challenge</h2>
245+
<ul></ul>
246+
</div>
247+
<script>
248+
const lists = `
249+
<li>30DaysOfPython Challenge Done</li>
250+
<li>30DaysOfJavaScript Challenge Ongoing</li>
251+
<li>30DaysOfReact Challenge Coming</li>
252+
<li>30DaysOfFullStack Challenge Coming</li>
253+
<li>30DaysOfDataAnalysis Challenge Coming</li>
254+
<li>30DaysOfReactNative Challenge Coming</li>
255+
<li>30DaysOfMachineLearning Challenge Coming</li>`
256+
const ul = document.querySelector('ul')
257+
ul.innerHTML = lists
258+
</script>
259+
</body>
260+
</html>
261+
```
262+
263+
The innerHTML property can allow us also to remove all the children of a parent element. Instead of using removeChild() I would recommend the following method.
264+
265+
```html
266+
<!DOCTYPE html>
267+
<html>
268+
<head>
269+
<title>JavaScript for Everyone:DOM</title>
270+
</head>
271+
<body>
272+
<div class="wrapper">
273+
<h1>Asabeneh Yetayeh challenges in 2020</h1>
274+
<h2>30DaysOfJavaScript Challenge</h2>
275+
<ul>
276+
<li>30DaysOfPython Challenge Done</li>
277+
<li>30DaysOfJavaScript Challenge Ongoing</li>
278+
<li>30DaysOfReact Challenge Coming</li>
279+
<li>30DaysOfFullStack Challenge Coming</li>
280+
<li>30DaysOfDataAnalysis Challenge Coming</li>
281+
<li>30DaysOfReactNative Challenge Coming</li>
282+
<li>30DaysOfMachineLearning Challenge Coming</li>
283+
</ul>
284+
</div>
285+
<script>
286+
const ul = document.querySelector('ul')
287+
ul.innerHTML = ''
288+
</script>
289+
</body>
290+
</html>
291+
```
292+
224293
### Adding style
225294

226295
#### Adding Style Color

‎22_Day/22_day_dom_day_2.md‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
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 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>]()
18+
19+
![Thirty Days Of JavaScript](../images/banners/day_1_22.png)
20+
- [Day 22](#day-22)
21+
- [DOM(Document Object Model)-Day 2](#domdocument-object-model-day-2)
22+
- [Creating an Element](#creating-an-element)
23+
- [Creating elements](#creating-elements)
24+
- [Appending child to a parent element](#appending-child-to-a-parent-element)
25+
- [Removing a child element from a parent node](#removing-a-child-element-from-a-parent-node)
26+
- [Exercises](#exercises)
27+
- [Exercises: Level 1](#exercises-level-1)
28+
- [Exercises: Level 2](#exercises-level-2)
29+
- [Exercises: Level 3](#exercises-level-3)
30+
31+
# Day 22
32+
33+
## DOM(Document Object Model)-Day 2
34+
35+
### Creating an Element
36+
37+
To create an HTML element we use tag name. Creating an HTML element using JavaScript is very simple and straight forward. We use the method _document.createElement()_. The method takes an HTML element tag name as a string parameter.
38+
39+
```js
40+
// syntax
41+
document.createElement('tagname')
42+
```
43+
44+
```html
45+
<!DOCTYPE html>
46+
<html>
47+
48+
<head>
49+
<title>Document Object Model:30 Days Of JavaScript</title>
50+
</head>
51+
52+
<body>
53+
54+
<script>
55+
let title = document.createElement('h1')
56+
title.className = 'title'
57+
title.style.fontSize = '24px'
58+
title.textContent = 'Creating HTML element DOM Day 2'
59+
60+
console.log(title)
61+
</script>
62+
</body>
63+
64+
</html>
65+
```
66+
67+
### Creating elements
68+
69+
To create multiple elements we should use loop. Using loop we can create as many HTML elements as we want.
70+
After we create the element we can assign value to the different properties of the HTML object.
71+
72+
```html
73+
<!DOCTYPE html>
74+
<html>
75+
76+
<head>
77+
<title>Document Object Model:30 Days Of JavaScript</title>
78+
</head>
79+
80+
<body>
81+
82+
<script>
83+
let title
84+
for (let i = 0; i < 3; i++) {
85+
title = document.createElement('h1')
86+
title.className = 'title'
87+
title.style.fontSize = '24px'
88+
title.textContent = i
89+
console.log(title)
90+
}
91+
</script>
92+
</body>
93+
94+
</html>
95+
```
96+
97+
### Appending child to a parent element
98+
99+
To see a created element on the HTML document we should append it to the parent as a child element. We can access the HTML document body using *document.body*. The *document.body* support the *appendChild()* method. See the example below.
100+
101+
```html
102+
<!DOCTYPE html>
103+
<html>
104+
105+
<head>
106+
<title>Document Object Model:30 Days Of JavaScript</title>
107+
</head>
108+
109+
<body>
110+
111+
<script>
112+
// creating multiple elements and appending to parent element
113+
let title
114+
for (let i = 0; i < 3; i++) {
115+
title = document.createElement('h1')
116+
title.className = 'title'
117+
title.style.fontSize = '24px'
118+
document.body.appendChild(title)
119+
}
120+
</script>
121+
</body>
122+
</html>
123+
```
124+
125+
### Removing a child element from a parent node
126+
127+
After creating an HTML, we may want to remove element or elements and we can use the *removeChild()* method.
128+
129+
**Example:**
130+
131+
```html
132+
<!DOCTYPE html>
133+
<html>
134+
135+
<head>
136+
<title>Document Object Model:30 Days Of JavaScript</title>
137+
</head>
138+
139+
<body>
140+
<h1>Removing child Node</h1>
141+
<h2>Asabeneh Yetayeh challenges in 2020</h1>
142+
<ul>
143+
<li>30DaysOfPython Challenge Done</li>
144+
<li>30DaysOfJavaScript Challenge Done</li>
145+
<li>30DaysOfReact Challenge Coming</li>
146+
<li>30DaysOfFullStack Challenge Coming</li>
147+
<li>30DaysOfDataAnalysis Challenge Coming</li>
148+
<li>30DaysOfReactNative Challenge Coming</li>
149+
<li>30DaysOfMachineLearning Challenge Coming</li>
150+
</ul>
151+
152+
<script>
153+
const ul = document.querySelector('ul')
154+
const lists = document.querySelectorAll('li')
155+
for (const list of lists) {
156+
ul.removeChild(list)
157+
158+
}
159+
</script>
160+
</body>
161+
162+
</html>
163+
```
164+
165+
As we have see in the previous section there is a better way to eliminate all the inner HTML elements or the children of a parent element using the method *innerHTML* properties.
166+
167+
```html
168+
<!DOCTYPE html>
169+
<html>
170+
171+
<head>
172+
<title>Document Object Model:30 Days Of JavaScript</title>
173+
</head>
174+
175+
<body>
176+
<h1>Removing child Node</h1>
177+
<h2>Asabeneh Yetayeh challenges in 2020</h1>
178+
<ul>
179+
<li>30DaysOfPython Challenge Done</li>
180+
<li>30DaysOfJavaScript Challenge Done</li>
181+
<li>30DaysOfReact Challenge Coming</li>
182+
<li>30DaysOfFullStack Challenge Coming</li>
183+
<li>30DaysOfDataAnalysis Challenge Coming</li>
184+
<li>30DaysOfReactNative Challenge Coming</li>
185+
<li>30DaysOfMachineLearning Challenge Coming</li>
186+
</ul>
187+
188+
<script>
189+
const ul = document.querySelector('ul')
190+
ul.innerHTML = ''
191+
</script>
192+
</body>
193+
194+
</html>
195+
```
196+
197+
The above snippet of code cleared all the child elements.
198+
199+
---
200+
201+
🌕 You are so special, you are progressing everyday. Now, you knew how to destroy a created DOM element when it is needed. You learned DOM and now you have the capability to build and develop applications. You are left with only eight days to your way to greatness. Now do some exercises for your brain and for your muscle.
202+
203+
## Exercises
204+
205+
### Exercises: Level 1
206+
207+
1. Create a div container on HTML document and create 100 to 100 numbers dynamically and append to the container div.
208+
- Even numbers background is green
209+
- Odd numbers background is yellow
210+
- Prime numbers background is red
211+
212+
![Number Generator](./../images/projects/dom_min_project_day_number_generators_2.1.png)
213+
214+
### Exercises: Level 2
215+
216+
1. Use the countries array to display all the countries.See the design
217+
218+
![World Countries List](./../images/projects/dom_min_project_countries_aray_day_2.2.png)
219+
220+
### Exercises: Level 3
221+
222+
Check the requirement of this project from both images(jpg and gif). All the data and CSS has been implemented using JavaScript only. The data is found on starter folder project_3.
223+
224+
![Challenge Information](./22_day_starter/design/dom_mini_project_challenge_info_day_2.3.png)
225+
226+
![Challenge Information](./22_day_starter/design/dom_mini_project_challenge_info_day_2.3.gif)
227+
228+
🎉 CONGRATULATIONS ! 🎉
229+
230+
[<< Day 21](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/21_Day/21_day_dom.md) | [Day 23 >>]()

‎22_Day/22_day_starter/design/dom_min_project_countries_aray_day_2.2.png‎

866 KB
Loading

‎22_Day/22_day_starter/design/dom_min_project_day_number_generators_2.1.png‎

315 KB
Loading

‎22_Day/22_day_starter/design/dom_mini_project_challenge_info_day_2.3.gif‎

1.69 MB
Loading

‎22_Day/22_day_starter/design/dom_mini_project_challenge_info_day_2.3.png‎

373 KB
Loading

‎22_Day/22_day_starter/project_1/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>30DaysOfJavaScript:22 Day: Number Generator </title>
6+
</head>
7+
8+
<body>
9+
<h1>Number Generator</h1>
10+
<h2>30DaysOfJavaScript:DOM Day 2</h2>
11+
<h3>Author: Asabeneh Yetayeh</h3>
12+
<div class="wrapper">
13+
14+
</div>
15+
16+
17+
18+
<script src="./scripts/main.js"></script>
19+
20+
</body>
21+
22+
</html>

‎22_Day/22_day_starter/project_1/scripts/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
console.log(countries)
2+
alert('Open the console and check if the countries has been loaded')

0 commit comments

Comments
 (0)