Skip to content

Instantly share code, notes, and snippets.

@zaimazhar
Created February 15, 2021 02:10
Show Gist options
  • Save zaimazhar/51f6cbc648162ad110d93d75935711f9 to your computer and use it in GitHub Desktop.
Save zaimazhar/51f6cbc648162ad110d93d75935711f9 to your computer and use it in GitHub Desktop.
Tambah Ke Troli (Siri JomBina)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/6204fff83b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Tambah Ke Troli (Add to Cart)</title>
</head>
<body>
<div class="utama">
<div class="pertama">
<table>
<tr>
<th>Barang</th>
<th>Harga</th>
</tr>
<tr>
<td>Ayam</td>
<td>RM15.00</td>
<td><button class="beli" onclick="tambahData({nama: 'Ayam', harga: 15})"><i class="fas fa-shopping-cart"></i> Beli</button></td>
</tr>
<tr>
<td>Ikan</td>
<td>RM30.00</td>
<td><button class="beli" onclick="tambahData({nama: 'Ikan', harga: 30})"><i class="fas fa-shopping-cart"></i> Beli</button></td>
</tr>
</table>
</div>
<div class="kedua">
<div class="kandungan-kedua" id="troli">
<div class="kedua-padding">Ayam (1x)</div>
<div><button class="buang"><i class="fas fa-trash"></i> Buang</button></div>
</div>
<div class="jumlah">
<p>Jumlah</p>
<div id="jumlah">
<p class="bold">RM15.00</p>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
let data = {}
let hasil
let troli = document.querySelector("#troli")
let paparjumlah = document.querySelector("#jumlah")
function tambahData(dapatkanBarang) {
if(dapatkanBarang.nama in data) {
data[dapatkanBarang.nama].jumlah++
} else {
data[dapatkanBarang.nama] = {
harga: dapatkanBarang.harga,
jumlah: 1
}
}
kiraHasil()
renderTroli()
paparJumlah()
}
function paparJumlah() {
kosongkanElemen(paparjumlah)
let p = document.createElement("p")
p.classList.add("bold")
p.innerHTML = `RM${hasil}`
paparjumlah.appendChild(p)
}
function buangBarang(barangUntukDibuang) {
delete data[barangUntukDibuang]
kiraHasil()
renderTroli()
paparJumlah()
}
function kiraHasil() {
hasil = 0
for(let key in data) {
hasil += data[key].harga * data[key].jumlah
}
}
function renderTroli() {
kosongkanElemen(troli)
for(let key in data) {
let div_barang = document.createElement("div")
let div_butang = document.createElement("div")
let i = document.createElement("i")
let butang = document.createElement("button")
butang.classList.add("buang")
butang.setAttribute("onclick", `buangBarang('${key}')`)
i.classList.add("fas")
i.classList.add("fa-trash")
div_barang.classList.add("kedua-padding")
butang.appendChild(i)
div_butang.appendChild(butang)
i.insertAdjacentHTML("afterend", "<span> Buang</span>")
div_barang.innerHTML = `${key} (${data[key].jumlah}x)`
troli.appendChild(div_barang)
troli.appendChild(div_butang)
}
}
function kosongkanElemen(elemen) {
while(elemen.firstChild) {
elemen.removeChild(elemen.firstChild)
}
}
* {
padding: 0;
margin: 0
}
body {
background-color: rgb(255, 180, 69);
padding: 200px 300px 0 300px;
font-size: 1.4rem;
}
.utama {
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 30px;
text-align: center;
}
table {
width: 100%;
}
.beli {
background-color: rgb(64, 209, 112);
border-radius: 3px;
padding: 10px 60px 10px 60px;
transition: .2s;
outline: none;
border: none;
}
.beli:hover {
cursor: pointer;
background-color: rgb(37, 224, 99);
}
.buang {
background-color: rgb(200, 32, 32);
border-radius: 3px;
padding: 10px 60px 10px 60px;
transition: .2s;
outline: none;
border: none;
}
.buang:hover {
cursor: pointer;
background-color: rgb(255, 0, 0);
}
.pertama {
background-color: rgb(18, 110, 230);
padding: 30px;
}
.kedua {
background-color: cadetblue;
}
.kandungan-kedua {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
}
.kedua-padding {
padding: 20px;
}
.jumlah {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
margin: 30px;
}
th, td {
padding: 15px;
}
.bold {
font-weight: bold;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment