Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Ardywsptr committed Aug 27, 2023
0 parents commit 5f04bc6
Show file tree
Hide file tree
Showing 45 changed files with 1,446 additions and 0 deletions.
43 changes: 43 additions & 0 deletions DOM_event/event_listener.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const p3 = document.querySelector(".p3");

function gantibgp3() {
p3.style.backgroundColor = "blue";
}

//==============================================================>
//== event handler - inline HTML attribute (TIDAK DISARANKAN) ==>
//==============================================================>

// .. sudah di tambahkan di HTML ..



//====================================>
//== event handler - element method ==>
//====================================>

const p2 = document.querySelector(".p2");
p2.onclick = gantibgp2;

function gantibgp2() {
p2.style.backgroundColor = "red";
}



//===================================>
//== addEventListener (DISARANKAN) ==>
//===================================>

const p4 = document.querySelector("section#b p");

p4.addEventListener("click", function () {
const ul = document.querySelector("section#b ul");

const liBaru = document.createElement("li");
const textLiBaru = document.createTextNode("item baru");

liBaru.appendChild(textLiBaru);

ul.appendChild(liBaru);
})
Binary file added DOM_event_bubbling/img/ardy.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_event_bubbling/img/cici.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_event_bubbling/img/sandhika.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_event_bubbling/img/zahra.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions DOM_event_bubbling/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>

<head>
<title>DOM Traversal</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="container">

<div class="card">
<img src="img/sandhika.jpeg" width="96" height="96">
<span class="nama">Sandhika Galih</span>
<span class="telp">08123456789</span>
<span href="" class="close">×</span>
</div>
<div class="card">
<img src="img/ardy.jpeg" width="96" height="96">
<span class="nama">Ardy Wirasaputra</span>
<span class="telp">08123456789</span>
<span href="" class="close">×</span>

</div>
<div class="card">
<img src="img/cici.jpeg" width="96" height="96">
<span class="nama">Cici Awalia</span>
<span class="telp">08123456789</span>
<span href="" class="close">×</>
</div>
<div class="card">
<img src="img/zahra.jpeg" width="96" height="96">
<span class="nama">Zahra Devita</span>
<span class="telp">08123456789</span>
<span href="" class="close">×</>
</div>

</div>

<script src="script.js"></script>
</body>

</html>
59 changes: 59 additions & 0 deletions DOM_event_bubbling/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// event handling
// const close = document.querySelector(".close");
// const card = document.querySelector(".card");

// close.addEventListener("click", () => {
// card.style.display = "none";
// })


// DOM traversal
// const close = document.querySelectorAll(".close");

// for (let i = 0; i < close.length; i++) {
// close[i].addEventListener("click", (e) => {
// // close[i].parentElement.style.display = "none";
// e.target.parentElement.style.display = "none";
// })
// }

// DOM traversal best practice looping
// const close = document.querySelectorAll(".close");

// close.forEach((el) => {
// el.addEventListener("click", (e) => {
// e.target.parentElement.style.display = "none";
// e.preventDefault();
// console.log(e);
// });
// });


// DOM Event Bubbling
// const close = document.querySelectorAll(".close");
// const cards = document.querySelectorAll(".card");

// cards.forEach((card) => {
// card.addEventListener("click", () => {
// alert("ok");
// })
// });

// close.forEach((el) => {
// el.addEventListener("click", (e) => {
// e.target.parentElement.style.display = "none";
// e.preventDefault();
// e.stopPropagation();
// });
// });


// cara memanfaatkan event bubbling ketika ada elemen baru yg ditambahkan tanpa script -> dengan cara tambahkan event nya pada parent pembungkusnya (container)

const container = document.querySelector(".container");

container.addEventListener("click", (e) => {
if (e.target.className == "close") {
e.target.parentElement.style.display = "none";
}
})
71 changes: 71 additions & 0 deletions DOM_event_bubbling/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
body {
margin: 50px;
font-family: arial;
background-color: #666;
}

.container {
width: 900px;
margin: auto;
}

.card {
display: inline-block;
width: 220px;
padding: 0 80px;
height: 80px;
font-size: 16px;
line-height: 80px;
border-radius: 40px;
background-color: #f1f1f1;
margin: 20px;
position: relative;
text-align: center;
}

.card img {
float: left;
margin: 0 10px 0 -80px;
height: 80px;
width: 80px;
border-radius: 50%;
position: relative;
}

.card .nama,
.card .telp {
display: block;
line-height: 20px;
padding: 0 5px;
}

.card .nama {
margin-left: 20px;
margin-top: 20px;
font-size: 20px;
}

.card .telp {
margin-left: 20px;
margin-top: 5px;
font-size: 16px;
color: #aaa;
}

.card .close {
font-size: 24px;
font-weight: bold;
color: #999;
position: absolute;
top: 0;
right: 30px;
cursor: pointer;
}

.card:hover .close {
color: red;
}

.card a {
text-decoration: none;
}
55 changes: 55 additions & 0 deletions DOM_manipulation/manipulation_elemen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
// manipulation elemen


// element.innerHTML -> meyisipkkan elemen html beserta isi pada elemen yg ditentukan -> bersifat menimpa (mengubah seluruh elemen di dalam nya)

const sectionA = document.getElementById("a");

sectionA.innerHTML = "<em>ditimpa oleh innerHTML</em>"

// element.innerText -> menyisipkan hanya teks pada elemen yg ditentukan -> bersifat menimpa (mengubah seluruh elemen di dalamnya)

const em = document.querySelector("em")
em.innerText = "ditimpa oleh innerText"

// element.style.<property> -> menyisipkan style css pada elemen yg ditentukan -> jika properti terdapat dua kata maka gunakan camelCase -> nilai dari properti menggunakan tanda petik seperti string

sectionA.style.textAlign = "center";
sectionA.style.fontWeight = "bold";
sectionA.style.textTransform = "uppercase";

// element.setAttribute(nama, nilai) - menyisipkan attribute

em.setAttribute("id", "teksMiring");
em.setAttribute("name", "teksMiring");

// element.getAttribute(nama, nilai) - mendapatkan attribute

em.getAttribute("id", "teksMiring")

// element.removeAttribute(nama, nilai) - menghapus attribute

em.removeAttribute("name", "teksMiring");

// element.classList.add() -> menambahkan class barru dan tidak menimpa class yg lain

em.setAttribute("class", "teksMiring");

em.classList.add("teksMiring2");
em.classList.add("teksMiring3");

// elemet.classList.remove() -> menghapus salah satu class

em.classList.remove("teksMiring3");

// element.classList.toggle() -> jika tidak maka tambahkan, dan jika ada maka hapus atau hilangkan

em.classList.toggle("darkMode");

// element.classList.contains() -> mencari class yg ditentukan apakah ada atau tidak -> mengambalikan boolean

em.classList.contains("teksMiring2"); /** true */

// element.classList.replace("lama", "baru") -> menggantikan class

em.classList.replace("teksMiring2", "teksMiringDua")
44 changes: 44 additions & 0 deletions DOM_manipulation/manipulation_node.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// manipulation node


// node.appendChild() -> menyisipkan elemen baru ke urutan terakhir pada parent tanpa menimpa elemen lain

const pBaru = document.createElement("p")
const textPBaru = document.createTextNode("paragraph baru");

pBaru.appendChild(textPBaru);

const parentP = document.getElementById("a");
parentP.appendChild(pBaru);


// node.insertBefore() -> menyisipkan elemen baru ke urutan yang ditentukan tanpa menimpa elemen lain

const liBaru = document.createElement("li");
const textLiBaru = document.createTextNode("item baru");

liBaru.appendChild(textLiBaru);

const parentLi = document.getElementsByTagName("ul")[0];
const li2 = document.getElementsByTagName("li")[1];

parentLi.insertBefore(liBaru, li2);


// parentnode.removeChild() -> menghapus salah satu elemen child pada parent

const link = document.querySelector("a");
parentP.removeChild(link);


// parentnode.replaceChild() -> mengganti salah satu elemen child pada parent

const sectionB = document.getElementById("b");
const p4 = sectionB.querySelector("p");

const h2 = document.createElement("h2");
const judulBaru = document.createTextNode("Judul Baru!");

h2.appendChild(judulBaru);

sectionB.replaceChild(h2, p4);
Binary file added DOM_prevent_default/img/ardy.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_prevent_default/img/cici.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_prevent_default/img/sandhika.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added DOM_prevent_default/img/zahra.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions DOM_prevent_default/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>

<head>
<title>DOM Traversal</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="container">

<div class="card">
<img src="img/sandhika.jpeg" width="96" height="96">
<span class="nama">Sandhika Galih</span>
<span class="telp">08123456789</span>
<a href="" class="close">×</a>
</div>
<div class="card">
<img src="img/ardy.jpeg" width="96" height="96">
<span class="nama">Ardy Wirasaputra</span>
<span class="telp">08123456789</span>
<a href="" class="close">×</a>

</div>
<div class="card">
<img src="img/cici.jpeg" width="96" height="96">
<span class="nama">Cici Awalia</span>
<span class="telp">08123456789</span>
<a href="" class="close">×</a>
</div>
<div class="card">
<img src="img/zahra.jpeg" width="96" height="96">
<span class="nama">Zahra Devita</span>
<span class="telp">08123456789</span>
<a href="" class="close">×</a>
</div>

</div>

<script src="script.js"></script>
</body>

</html>
Loading

0 comments on commit 5f04bc6

Please sign in to comment.