├── event ├── app.css ├── index.html └── app.js ├── eventobject ├── app.css ├── index.html └── app.js ├── eventprevent ├── app.css ├── app.js └── index.html ├── randomcolor ├── app.css ├── index.html └── app.js ├── thiskeyword ├── app.css ├── app.js └── index.html ├── pokemon ├── app.css ├── index.html └── app.js └── selection ├── app.css ├── app.js └── index.html /event/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /eventobject/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /eventprevent/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /randomcolor/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /thiskeyword/app.css: -------------------------------------------------------------------------------- 1 | button { 2 | width: 100px; 3 | height: 100px; 4 | margin: 20px; 5 | } 6 | -------------------------------------------------------------------------------- /pokemon/app.css: -------------------------------------------------------------------------------- 1 | .pokemon { 2 | display: inline-block; 3 | text-align: center; 4 | } 5 | .pokemon img { 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /pokemon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pokemon 7 | 8 | 9 | 10 | 11 |

Kumpulan pokemon!

12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /eventprevent/app.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('#form'); 2 | const input = document.querySelector('input'); 3 | const list = document.querySelector('#notes'); 4 | 5 | form.addEventListener('submit', function (e) { 6 | e.preventDefault(); 7 | const noteValue = input.value; 8 | const newList = document.createElement('li'); 9 | newList.innerText = noteValue; 10 | list.append(newList); 11 | input.value = ''; 12 | }); 13 | -------------------------------------------------------------------------------- /eventobject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Latihan Event 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /randomcolor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color 8 | 9 | 10 | 11 |

Random Color Generator

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /randomcolor/app.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('button'); 2 | const h1 = document.querySelector('h1'); 3 | 4 | button.addEventListener('click', () => { 5 | const newColor = generateRandomColor(); 6 | document.body.style.backgroundColor = newColor; 7 | h1.innerText = newColor; 8 | }); 9 | 10 | const generateRandomColor = () => { 11 | const r = Math.floor(Math.random() * 255); 12 | const g = Math.floor(Math.random() * 255); 13 | const b = Math.floor(Math.random() * 255); 14 | 15 | return `rgb(${r}, ${g}, ${b})`; 16 | }; 17 | -------------------------------------------------------------------------------- /event/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Latihan Event 8 | 9 | 10 | 11 |

Event Click

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /eventprevent/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Latihan Event 8 | 9 | 10 | 11 |

Form

12 |
13 | 14 | 15 |
16 |

Notes

17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /selection/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 80%; 3 | margin: 0 auto; 4 | } 5 | 6 | #banner { 7 | width: 100%; 8 | } 9 | img.square { 10 | width: 400px; 11 | object-fit: cover; 12 | height: 400px; 13 | } 14 | 15 | #toc { 16 | background-color: #f8f9fa; 17 | border: 1px solid #a2a9b1; 18 | display: table; 19 | padding: 1em; 20 | } 21 | 22 | #toc a { 23 | text-decoration: none; 24 | } 25 | 26 | .tocnumber { 27 | color: black; 28 | } 29 | 30 | .bg-info { 31 | background-color: #17a2b8; 32 | } 33 | 34 | .text-white { 35 | color: white; 36 | } 37 | 38 | .border-danger { 39 | border: 3px rgb(148, 26, 37) solid; 40 | } 41 | -------------------------------------------------------------------------------- /event/app.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('#clickme'); 2 | 3 | button.onclick = function () { 4 | console.log('You clicked me'); 5 | }; 6 | 7 | const scream = () => { 8 | console.log('Dont touch me'); 9 | }; 10 | 11 | button.onmouseover = scream; 12 | 13 | const eventbtn = document.querySelector('#eventbtn'); 14 | eventbtn.addEventListener('click', stepSatu); 15 | eventbtn.addEventListener('click', stepDua); 16 | 17 | function stepSatu() { 18 | console.log('step satu'); 19 | } 20 | 21 | function stepDua() { 22 | console.log('step dua'); 23 | } 24 | 25 | // eventbtn.onclick = stepSatu; 26 | // eventbtn.onclick = stepDua; 27 | -------------------------------------------------------------------------------- /thiskeyword/app.js: -------------------------------------------------------------------------------- 1 | const generateRandomColor = () => { 2 | const r = Math.floor(Math.random() * 255); 3 | const g = Math.floor(Math.random() * 255); 4 | const b = Math.floor(Math.random() * 255); 5 | 6 | return `rgb(${r}, ${g}, ${b})`; 7 | }; 8 | 9 | const buttons = document.querySelectorAll('button'); 10 | 11 | for (let button of buttons) { 12 | button.addEventListener('click', colorize); 13 | } 14 | 15 | const headings = document.querySelectorAll('h1'); 16 | 17 | for (let heading of headings) { 18 | heading.addEventListener('click', colorize); 19 | } 20 | 21 | function colorize() { 22 | this.style.backgroundColor = generateRandomColor(); 23 | this.style.color = generateRandomColor(); 24 | } 25 | -------------------------------------------------------------------------------- /pokemon/app.js: -------------------------------------------------------------------------------- 1 | // https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png 2 | 3 | const container = document.querySelector('#container'); 4 | const baseImgURL = 5 | 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'; 6 | 7 | for (let i = 1; i <= 500; i++) { 8 | const pokeBall = document.createElement('div'); 9 | pokeBall.classList.add('pokemon'); 10 | 11 | const imgPokemon = document.createElement('img'); 12 | imgPokemon.src = `${baseImgURL}${i}.png`; 13 | 14 | const label = document.createElement('span'); 15 | label.innerText = `#${i}`; 16 | 17 | pokeBall.appendChild(imgPokemon); 18 | pokeBall.appendChild(label); 19 | container.appendChild(pokeBall); 20 | } 21 | -------------------------------------------------------------------------------- /eventobject/app.js: -------------------------------------------------------------------------------- 1 | document.querySelector('button').addEventListener('click', (e) => { 2 | console.log(e); 3 | }); 4 | 5 | const input = document.querySelector('input'); 6 | input.addEventListener('keydown', (e) => { 7 | switch (e.code) { 8 | case 'ArrowUp': 9 | console.log('Tombol Arah Atas'); 10 | break; 11 | case 'ArrowDown': 12 | console.log('Tombol Arah Bawah'); 13 | break; 14 | case 'ArrowLeft': 15 | console.log('Tombol Arah Kiri'); 16 | break; 17 | case 'ArrowRight': 18 | console.log('Tombol Arah Kanan'); 19 | break; 20 | default: 21 | console.log('diabaikan'); 22 | } 23 | }); 24 | 25 | // input.addEventListener('keyup', () => { 26 | // console.log('Tombol dirilis'); 27 | // }); 28 | -------------------------------------------------------------------------------- /thiskeyword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Change Color

21 |

Change Color

22 |

Change Color

23 |

Change Color

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /selection/app.js: -------------------------------------------------------------------------------- 1 | // const allImages = document.getElementsByTagName('img'); 2 | 3 | // for (let img of allImages) { 4 | // // console.log(img.src); 5 | // img.src = 6 | // 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1920px-Cat_August_2010-4.jpg'; 7 | // } 8 | 9 | // const squareImages = document.getElementsByClassName('square'); 10 | 11 | // for (let img of squareImages) { 12 | // img.src = 13 | // 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1920px-Cat_August_2010-4.jpg'; 14 | // } 15 | 16 | const links = document.querySelectorAll('a'); 17 | 18 | for (let link of links) { 19 | link.style.color = 'rgb(0, 108, 134)'; 20 | link.style.textDecorationColor = 'magenta'; 21 | link.style.textDecorationStyle = 'wavy'; 22 | } 23 | -------------------------------------------------------------------------------- /selection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM Selecting 7 | 8 | 9 | 10 | 11 |

Cat

12 | 17 |

18 | The cat (Felis catus) is a 20 | domestic 23 | species of small 24 | carnivorous 27 | mammal.[1][2] 34 | It is the only domesticated species in the family 35 | Felidae and is commonly 36 | referred to as the domestic cat or house cat to distinguish 37 | it from the wild members of the family.[4] 42 | Cats are commonly kept as house pets but can also be 43 | farm cats or 44 | feral cats; the feral cat 45 | ranges freely and avoids human contact.[5] 50 | Domestic cats are valued by humans for companionship and their ability to 51 | kill rodents. About 60 52 | cat breeds 55 | are recognized by various 56 | cat registries.[6] 61 |

62 | 63 | 340 | 341 |

342 | Etymology and naming 345 |

346 |

347 | The origin of the English word cat, 348 | Old English 349 | catt, is thought to be the 352 | Late Latin word 353 | cattus, which was first used at the beginning of the 6th century.[21] 359 | It was suggested that 360 | cattus is 361 | derived from an 362 | Egyptian 363 | precursor of 364 | Coptic 365 | ϣⲁⲩ 375 | šau, "tomcat", or its feminine form suffixed with 377 | -t.[22] 382 | The Late Latin word may be derived from another 383 | Afro-Asiatic[23] 388 | or 389 | Nilo-Saharan 392 | language. The 393 | Nubian word 394 | kaddîska 397 | "wildcat" and 398 | Nobiin 399 | kadīs 402 | are possible sources or cognates.[24] 405 | The Nubian word may be a loan from 406 | Arabic 412 | قَطّ‎ 415 | qaṭṭ ~ 416 | قِطّ 419 | qiṭṭ. 421 |

422 | 423 | 428 | 433 | 438 | 439 | 440 | 441 | 442 | --------------------------------------------------------------------------------