Created
February 15, 2021 02:10
-
-
Save zaimazhar/51f6cbc648162ad110d93d75935711f9 to your computer and use it in GitHub Desktop.
Tambah Ke Troli (Siri JomBina)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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