HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko Online Saya - Beranda</title>
</head>
<body>
<header>
<h1>Kedai Digital</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h2>Solusi Belanja Hemat dan Berkualitas</h2>
<p>Temukan berbagai produk unggulan dengan harga bersahabat hanya di sini.</p>
</section>
</main>
<footer>
<p>© 2024 Kedai Digital - Powered by Qwords</p>
</footer>
<section id="menu-makanan">
<div class="container">
<h2 style="text-align: center;">Menu Spesial Hari Ini</h2>
<div class="product-grid" style="display: flex; gap: 20px; justify-content: center;">
<article class="card-produk" style="border: 1px solid #ddd; padding: 15px; border-radius:
10px; width: 250px;">
<img src="[Link] alt="Nasi Goreng Spesial"
style="width: 100%; border-radius: 5px;">
<h3>Nasi Goreng Jawa</h3>
<p>Nasi goreng bumbu otentik dengan topping telur dan ayam suwir.</p>
<p><strong>Harga: Rp25.000</strong></p>
<a href="[Link] style="background-color: #25d366; color:
white; padding: 10px; text-decoration: none; display: block; text-align: center; border-radius:
5px;">Pesan via WhatsApp</a>
</article>
<article class="card-produk" style="border: 1px solid #ddd; padding: 15px; border-radius:
10px; width: 250px;">
<img src="[Link] alt="Ayam Bakar Madu" style="width:
100%; border-radius: 5px;">
<h3>Ayam Bakar Madu</h3>
<p>Ayam empuk dengan olesan madu murni, disajikan dengan sambal bajak.</p>
<p><strong>Harga: Rp35.000</strong></p>
<a href="[Link] style="background-color: #25d366; color:
white; padding: 10px; text-decoration: none; display: block; text-align: center; border-radius:
5px;">Pesan via WhatsApp</a>
</article>
</div>
</div>
</section>
</body>
</html>
CSS
body { font-family: 'Segoe UI', sans-serif; background-color: #f9f9f9; margin: 0; }
.product-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding:
20px; }
.card-produk { background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition:
transform 0.3s ease; }
.card-produk:hover { transform: translateY(-5px); }
.btn-beli { background-color: #27ae60; color: white; padding: 10px; display: block; text-
align: center; border-radius: 5px; text-decoration: none; }
KASIR
[Link]
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Aplikasi Kasir Sederhana</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Aplikasi Kasir Sederhana</h1>
<!-- Form untuk menambahkan produk -->
<div class="input-section">
<h2>Tambah Produk</h2>
<label for="product-name">Nama Produk:</label>
<input type="text" id="product-name" placeholder="Masukkan
nama produk">
<label for="product-price">Harga Produk:</label>
<input type="number" id="product-price" placeholder="Masukkan
harga produk">
<button id="add-product-btn">Tambah Produk</button>
</div>
<!-- Tabel produk untuk transaksi -->
<table>
<thead>
<tr>
<th>Nama Produk</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="cart-items">
<!-- Produk akan ditambahkan di sini -->
</tbody>
</table>
<div class="total-section">
<h2>Total Bayar: <span id="total-price">0</span></h2>
</div>
<button id="checkout-btn">Bayar</button>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
*{
box-sizing: border-box;
margin: 0;
padding: 0;
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
.container {
width: 80%;
margin: 50px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1, h2 {
text-align: center;
margin-bottom: 20px;
.input-section {
margin-bottom: 30px;
text-align: center;
.input-section label {
display: block;
margin-bottom: 5px;
.input-section input {
padding: 10px;
margin-bottom: 10px;
width: 100%;
max-width: 400px;
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
button:hover {
background-color: #218838;
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
table, th, td {
border: 1px solid #ddd;
th, td {
padding: 12px;
text-align: center;
}
[Link] {
width: 50px;
.total-section {
text-align: right;
margin-top: 20px;
[Link]
[Link]('DOMContentLoaded', () => {
const cartItems = [Link]('cart-items');
const totalPriceElement = [Link]('total-price');
let totalPrice = 0;
// Fungsi untuk menambahkan produk ke tabel
[Link]('add-product-btn').addEventListener('click', ()
=> {
const productName = [Link]('product-name').value;
const productPrice = [Link]('product-price').value;
if (productName === "" || productPrice === "") {
alert("Silakan masukkan nama produk dan harga.");
return;
const newRow = [Link]('tr');
[Link] = `
<td>${productName}</td>
<td>${productPrice}</td>
<td><input type="number" value="1" min="1"
class="quantity"></td>
<td class="item-total">${productPrice}</td>
<td><button class="delete-btn">Hapus</button></td>
`;
[Link](newRow);
// Update total saat jumlah produk berubah
updateTotal();
// Tambahkan event listener untuk menghapus produk
[Link]('.delete-btn').addEventListener('click', function()
{
[Link]();
updateTotal();
});
// Tambahkan event listener untuk mengubah kuantitas
[Link]('.quantity').addEventListener('input',
updateTotal);
});
// Fungsi untuk menghitung total harga
function updateTotal() {
totalPrice = 0;
const rows = [Link]('tr');
[Link](row => {
const price = parseInt([Link][1].textContent);
const quantity = parseInt([Link]('.quantity').value);
const itemTotal = price * quantity;
[Link]('.item-total').textContent = itemTotal;
totalPrice += itemTotal;
});
[Link] = totalPrice;
// Event listener untuk tombol checkout
[Link]('checkout-btn').addEventListener('click', () =>
{
if (totalPrice > 0) {
alert('Total yang harus dibayar: Rp ' + totalPrice);
} else {
alert('Keranjang belanja kosong.');
});
});