Menu Makanan Dinamis Dengan Javascript

Halo sahabat Hanna Annisa!

Dalam sebuah kasus, seorang dosen memberikan tugas untuk membuat sebuah praktek coding menggunakan javascript murni dalam pembuatan aplikasi rumah makan.

Alurnya, pelanggan atau konsumen dapat melihat daftar menu berdasarkan gambar pada seuah halaman statis. Ketika salah satu gambar di klik maka pelanggan dapat melihat detail dari menu makanan yang disediakan pada halaman tersebut!

Detail makanan tersebut menampilkan, Nama Makanan, Harga per porsi dan Bonus yang disediakan oleh rumah makan dalam setiap pembelian menu tersebut.

Langsung saja,

Persiapkan 3 buah gambar atau lebih sebagai gambar dari menu makanan yang akan ditampilkan pada halaman rumah makan tersebut.

Tampilkan menggunakan html :

<img src="bakso.jpg" width="320" height="250">
<img src="sate.jpg" width="320" height="250">
<img src="soto.jpg" width="320" height="250">

Kemudian buatlah tabel yang nantinya akan digunakan sebagai tempat untuk menampilkan detail dari makanan yang dipilih.

Jangan lupa untuk memberikan id pada kolom yang akan digunakan untuk menampilkan detail menu makanan tersebut.

<table border="1" cellpadding="5" cellspacing="0" width="75%">
<tr>
<th>Nama Makanan</th>
<th>Harga/Porsi</th>
<th>Bonus</th>
</tr>

<tr>
<td id="nama"></td>
<td id="harga"></td>
<td id="bonus"></td>
</tr>
</table>

Selanjutnya buatlah coding javascript untuk menjalankan aplikasi agar berjalan sempurna.

<script type="text/javascript">
function menu(pilihan) {
if (pilihan == "bakso") {
nama_makanan = "Bakso Beranak Jumbo";
harga_makanan = "Rp. 25.000";
bonus_makanan = "Teh Botol/Es Jeruk/Kopi Susu";
}
else if (pilihan == "sate") {
nama_makanan = "Sate Madura";
harga_makanan = "Rp. 28.000";
bonus_makanan = "Teh Botol/Es Jeruk/Kopi Susu";
} else {
nama_makanan = "Soto Madura";
harga_makanan = "Rp. 18.500";
bonus_makanan = "Teh Gelas/Es Jeruk/Kopi Susu";
}

document.getElementById('nama').innerHTML = nama_makanan;
document.getElementById('harga').innerHTML = harga_makanan;
document.getElementById('bonus').innerHTML = bonus_makanan;
}
</script>

Tambahkan juga even klik pada gambar yang ditampilkan sehinggan ketika di klik akan menampilkan detail makanan pada tabelnya.

<img onclick="menu('bakso');" src="bakso.jpg" width="320" height="250">
<img onclick="menu('sate');" src="sate.jpg" width="320" height="250">
<img onclick="menu('soto');" src="soto.jpg" width="320" height="250">

Alhamdulillah, saat ini program dapat berjalan dengan sempurna.
Untuk mendapatkan contoh berupa script dan file pendukung seperti gambar kamu bisa mengunduhnya pada link dibawah ini :

» Script Menu Makanan Dinamis Dengan Javascript via Google Drive

Berikut ini hasil sebelum dan sesudah salah satu menu di klik :

Sebelum

Sesudah