Skip to content

Commit f5c1eac

Browse files
last-endcodelast-endcode
committed
update
1 parent b334bcb commit f5c1eac

7 files changed

+148
-5
lines changed

‎ES6/21_array_of.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Array.from and Arra.of - Not on the prototype
2+
// array.from
3+
// array.of
4+
// of creates a new array instances from a variable number of
5+
// arguments
6+
7+
const example = ['one', 'two', 'three'];
8+
console.log(example); //[ 'one', 'two', 'three' ]
9+
// console.log(example.map);
10+
// console.log(example.from);
11+
// console.log(example.of);
12+
13+
const person = Array.of('shanks', 'mugiwara');
14+
console.log(person); //[ 'shanks', 'mugiwara' ]

‎ES6/22_array.from.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Array.from and Arra.of - Not on the prototype
2+
3+
// from - returns array obj from any obj with a length
4+
// property or in a iterable obj
5+
// from turns array-like/ish into array - string, nodelist,set
6+
7+
const udemy = 'udemy';
8+
console.log(Array.from(udemy)); //[ 'u', 'd', 'e', 'm', 'y' ]
9+
10+
// function
11+
function countTotal() {
12+
// this array obj can't use map
13+
// console.log(arguments); // [Arguments] { '0': 20, '1': 10, '2': 30 }
14+
// solution
15+
let total = Array.from(arguments).reduce(
16+
(total, currNum) => (total += currNum),
17+
0
18+
);
19+
console.log(total); //60
20+
}
21+
22+
countTotal(20, 10, 30);

‎ES6/23_array.from_dom.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Array.from and Arra.of - Not on the prototype
2+
3+
// from - returns array obj from any obj with a length
4+
// property or in a iterable obj
5+
// from turns array-like/ish into array - string, nodelist,set
6+
7+
const p = document.querySelectorAll('p');
8+
const result = document.querySelector('.result');
9+
const second = document.querySelector('.second');
10+
11+
// here result is node list
12+
console.log(p); // node list can't use map solution perfect use Array.from
13+
const textOne = Array.from(p) // Arra.from(p) => will get array item and you can use map
14+
.map((item) => `<span>${item.textContent.toUpperCase()}</span>`)
15+
.join(' ');
16+
result.innerHTML = textOne; // JAVASCRIPT HTML5 CSS3
17+
18+
// For Fast Way
19+
const textTwo = Array.from(document.querySelectorAll('p'), (item) => {
20+
return `<span>${item.textContent}</span>`;
21+
}).join(' ');
22+
23+
second.innerHTML = textTwo; // JavaScript html5 css3

‎ES6/24_find,findindex,every,some.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const person = [
2+
{ id: 1, name: 'john' },
3+
{ id: 2, name: 'peter' },
4+
{ id: 3, name: 'jane' },
5+
{ id: 1, name: 'anna' },
6+
];
7+
8+
// Find hanya akan menghasilkan 1 value yang match (sesuai)
9+
// jika tidak error
10+
let anna = person.find((item) => item.name === 'anna');
11+
console.log(anna.name); //anna
12+
anna = person.findIndex((item) => item.id === 2);
13+
// console.log(anna);
14+
15+
const john = person.filter((item) => item.id === 1 || item.id === 2);
16+
console.log(john);
17+
18+
const grades = ['A', 'B', 'C', 'D'];
19+
20+
let allGrades = grades.every((grade) => grade !== 'E');
21+
console.log(allGrades); // true jika tidak ada dalam grades tidak sama will true
22+
allGrades = grades.some((grade) => grade === 'E');
23+
console.log(allGrades); // true krna dlam grad ada nilai C
24+
// tapi jika misal value E maka false karena tidak ada dalam grade nilai E

‎ES6/index.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
<style></style>
88
</head>
99
<body>
10-
<h1>JavaScript</h1>
11-
<h1>html5</h1>
12-
<h1>css3</h1>
10+
<p>JavaScript</p>
11+
<p>html5</p>
12+
<p>css3</->
1313
<div class="result"></div>
14+
<div class="second"></div>
15+
1416
</body>
15-
<!-- <script src="18_spread_obj.js"></script> -->
16-
<script src="20_rest_operator.js"></script>
17+
<script src="./23_array.from_dom.js"></script>
1718
</html>

‎modules/01_setup.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// buat obj
2+
const people = [
3+
{ name: 'john', job: 'developer' },
4+
{ name: 'boby', job: 'designer' },
5+
{ name: 'jane', job: 'the boss' },
6+
];
7+
8+
const container = document.querySelector('.container');
9+
const btn = document.querySelector('.btn');
10+
11+
// addEvent if clicked
12+
btn.addEventListener('click', () => {
13+
showPeople();
14+
});
15+
16+
const showPeople = () => {
17+
const newPeople = people
18+
.map((person) => {
19+
// console.log(person); ktika diklik mnghasilkan smua obj dalam people
20+
// use destruct
21+
const { name, job } = person;
22+
return `<p>${name.toUpperCase()} <strong>${job.toUpperCase()}</strong></p>`;
23+
})
24+
.join(' ');
25+
// console.log(newPeople); just for check
26+
container.innerHTML = newPeople;
27+
// otmatis ketika diklik menghasilkan sesuai obj people
28+
// JOHN DEVELOPER
29+
// BOBY DESIGNER
30+
// JANE THE BOSS
31+
};

‎modules/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Modules</title>
7+
</head>
8+
<style>
9+
body {
10+
text-align: center;
11+
text-transform: uppercase;
12+
width: 90vw;
13+
max-width: 1170px;
14+
margin: 0 auto;
15+
}
16+
.btn {
17+
text-transform: capitalize;
18+
padding: 0.5rem 1rem;
19+
font-size: 1rem;
20+
}
21+
</style>
22+
<body>
23+
<h2>modules</h2>
24+
<div class="container"></div>
25+
<button class="btn">show people</button>
26+
<script src="./01_setup.js"></script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)