├── README.md ├── img ├── spoonNfork.png └── bg-login.svg ├── toko.html ├── css ├── style-toko.css ├── style-index.css ├── style-admin.css ├── style-checkout.css └── style-menu.css ├── index.html ├── kb.html ├── whkbt.html ├── checkout.html ├── js ├── admin.js ├── main.js ├── storage.js ├── dom.js ├── kb_menu.js └── whkbt_menu.js └── admin.html /README.md: -------------------------------------------------------------------------------- 1 | # JajanKuy.github.io -------------------------------------------------------------------------------- /img/spoonNfork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hulhay/jajan-kuy/HEAD/img/spoonNfork.png -------------------------------------------------------------------------------- /img/bg-login.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /toko.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Jajan Kuy 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 |

Jajan dimana?

17 |

18 | 19 |

20 | 21 |

22 | 23 |

Kedai Berkah

24 |

25 | 26 | 27 |

28 | 29 |

WH | Kedai Betah

30 |

31 | 32 | 33 |

34 | 35 |

Toko SMM

36 |

37 | 38 |

39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /css/style-toko.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Mukta Malar', sans-serif; 11 | } 12 | 13 | header { 14 | display: flex; 15 | align-items: center; 16 | border-bottom: 3px solid #cc080b; 17 | } 18 | 19 | header a i { 20 | font-size: 3em; 21 | text-decoration: none; 22 | color: #cc080b; 23 | } 24 | 25 | main { 26 | display: grid; 27 | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 28 | grid-gap: 10px; 29 | justify-items: center; 30 | margin: 20px; 31 | } 32 | 33 | main .toko { 34 | text-decoration: none; 35 | color: #000; 36 | } 37 | 38 | main .toko .container{ 39 | width: 150px; 40 | height: 150px; 41 | background-color: #fff; 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: center; 45 | align-items: center; 46 | border-radius: 18px; 47 | padding: 10px; 48 | text-align: center; 49 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6); 50 | } 51 | 52 | main .toko .container i { 53 | font-size: 3em; 54 | color: #cc080b; 55 | } 56 | 57 | main .toko .container h2 { 58 | font-size: 1.1em; 59 | } 60 | 61 | footer { 62 | position: fixed; 63 | bottom: 0; 64 | right: 0; 65 | margin-right: 10px; 66 | font-size: 0.8em; 67 | } -------------------------------------------------------------------------------- /css/style-index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | font-family: 'Mukta Malar', sans-serif; 16 | background: url("/img/bg-login.svg"); 17 | background-position: center; 18 | background-size: contain; 19 | background-repeat: no-repeat; 20 | } 21 | 22 | header { 23 | font-size: 1.3em; 24 | line-height: 1.5em; 25 | color: #cc080b; 26 | font-weight: bold; 27 | margin-bottom: 20px; 28 | } 29 | 30 | header p { 31 | text-align: right; 32 | font-size: 0.8em; 33 | } 34 | 35 | form { 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | } 40 | 41 | form input, form select { 42 | height: 38px; 43 | width: 100%; 44 | padding: 10px; 45 | margin-bottom: 5px; 46 | border: none; 47 | border-radius: 5px; 48 | color: grey; 49 | } 50 | 51 | form input:focus { 52 | color: #000; 53 | } 54 | 55 | #mulaiJajan { 56 | background-color: #cc080b; 57 | padding: 5px 20px; 58 | margin-top: 30px; 59 | width: 70%; 60 | text-align: center; 61 | border-radius: 10px; 62 | border: none; 63 | color: #fff; 64 | font-size: 1.2em; 65 | cursor: pointer; 66 | } 67 | 68 | footer { 69 | position: fixed; 70 | bottom: 0; 71 | margin-right: 10px; 72 | font-size: 0.8em; 73 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jajan Kuy 8 | 9 | 10 | 11 |

12 |

Jajan Kuy

13 |

beta

14 |

15 | 16 |

17 | 39 |

40 | 41 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /kb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Jajan Kuy 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 |

Mau jajan apa?

17 |

18 | 19 |

20 | 21 |

22 |

Kedai Berkah

23 |

085795377422 / 085775050379

24 |

25 |

26 | 27 |

28 | 43 |

44 | 45 |

46 |

47 |

Total Harga: 0

48 |

49 | 50 |

51 | 52 |

53 | 54 |

55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /whkbt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Jajan Kuy 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 |

Mau jajan apa?

17 |

18 | 19 |

20 | 21 |

22 |

Warung Haura dan Kedai BeTah

23 |

085220293645 / 089654358807

24 |

25 |

26 | 27 |

28 | 43 |

44 | 45 |

46 |

47 |

Total Harga: 0

48 |

49 | 50 |

51 | 52 |

53 | 54 |

55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /checkout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Jajan Kuy 10 | 11 | 12 | 13 |

14 | 17 |

Checkout

18 |

19 | 20 |

21 |

Konfirmasi Pesanan

22 | 40 |

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /css/style-admin.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Mukta Malar', sans-serif; 11 | height: 100vh; 12 | } 13 | 14 | header { 15 | border-bottom: 2px dashed #aaa; 16 | margin-bottom: 20px; 17 | } 18 | 19 | header h1{ 20 | line-height: 1.5em; 21 | color: #cc080b; 22 | font-weight: bold; 23 | padding: 20px 20px 5px; 24 | } 25 | 26 | header p { 27 | padding: 5px 20px 10px; 28 | line-height: 1.3em; 29 | } 30 | 31 | main { 32 | padding-left: 20px; 33 | margin-bottom: 20px; 34 | } 35 | 36 | main form { 37 | display: flex; 38 | flex-direction: column; 39 | width: 90%; 40 | } 41 | 42 | form th { 43 | width: 100px; 44 | text-align: left; 45 | font-weight: bold; 46 | } 47 | 48 | form input, form select { 49 | height: 38px; 50 | width: 100%; 51 | padding: 10px; 52 | margin-bottom: 7px; 53 | border: 1px solid #eee; 54 | border-radius: 5px; 55 | color: black; 56 | background-color: #eee; 57 | } 58 | 59 | form #generate-laporan { 60 | background-color: #cc080b; 61 | width: 30%; 62 | align-self: flex-end; 63 | border-radius: 5px; 64 | border: none; 65 | color: #fff; 66 | padding: 5px; 67 | font-size: 1em; 68 | font-weight: bold; 69 | cursor: pointer; 70 | } 71 | 72 | section form { 73 | display: flex; 74 | flex-direction: column; 75 | width: 90%; 76 | justify-content: center; 77 | align-items: flex-start; 78 | padding-left: 20px; 79 | /*background-color: red;*/ 80 | } 81 | 82 | section form textarea { 83 | padding: 10px; 84 | border-radius: 5px; 85 | border-color: #aaa; 86 | } 87 | 88 | .btn-action { 89 | /*background-color: blue;*/ 90 | /*width: 60%;*/ 91 | } 92 | 93 | .btn-action #salinPesan, 94 | .btn-action #resetPesan { 95 | margin: 10px 5px 0px 0px; 96 | /*width: 40%;*/ 97 | align-self: flex-end; 98 | border-radius: 5px; 99 | border: none; 100 | color: #fff; 101 | padding: 7px 15px; 102 | font-size: 1em; 103 | font-weight: bold; 104 | cursor: pointer; 105 | } 106 | 107 | .btn-action #salinPesan { 108 | background-color: #79a33d; 109 | } 110 | 111 | .btn-action #resetPesan { 112 | background-color: #cc080b; 113 | } 114 | 115 | footer { 116 | position: fixed; 117 | top: 0; 118 | right: 0; 119 | margin: 5px 10px; 120 | font-size: 0.7em; 121 | } -------------------------------------------------------------------------------- /js/admin.js: -------------------------------------------------------------------------------- 1 | const btnBuat = document.getElementById('generate-laporan'); 2 | const kamar = document.getElementById('kamar'); 3 | const tanggal = document.getElementById('tanggal'); 4 | const toko = document.getElementById('toko'); 5 | const chat = document.getElementById('laporan'); 6 | 7 | btnBuat.addEventListener('click', function() { 8 | 9 | if (kamar.value == 0 || tanggal.value == '' || toko.value == 0) { 10 | alert('Silakan isi form yang tersedia'); 11 | return null; 12 | } 13 | 14 | event.preventDefault(); 15 | btnBuat.innerText = 'Tunggu'; 16 | chat.value = ''; 17 | 18 | fetch("https://api.apispreadsheets.com/data/trkwrJHOLsYagj5n/").then(res=>{ 19 | if (res.status === 200){ 20 | // SUCCESS 21 | res.json().then(data=>{ 22 | const listPesanan = data["data"]; 23 | 24 | // console.log(listPesanan.nama_pembeli == 'Umar'); 25 | 26 | let pesananFiltered = listPesanan.filter( 27 | pesananFiltered => pesananFiltered.timestamp == tanggal.value 28 | && pesananFiltered.nama_toko == toko.value 29 | ); 30 | 31 | // console.log(pesananFiltered); 32 | if (pesananFiltered.length == 0) { 33 | alert('Tidak ada pesanan di tanggal dan/atau toko ini'); 34 | btnBuat.innerText = 'Buat'; 35 | } else { 36 | 37 | let konten = ''; 38 | for (let i=0; i form > label'); 53 | // informasi.removeAttribute('hidden'); 54 | } 55 | 56 | }).catch(err => { 57 | console.log(err); 58 | alert('Terjadi kesalahan. Coba lagi'); 59 | }) 60 | } 61 | else{ 62 | // ERROR 63 | alert('Terjadi kesalahan. Coba lagi.\nAtau hubungi Ust. Prasetyo'); 64 | } 65 | }) 66 | 67 | }) 68 | 69 | // if (chat.value != '') { 70 | // const informasi = document.querySelector('section > form > label'); 71 | // informasi.removeAttribute('hidden'); 72 | // } 73 | 74 | const btnCopy = document.getElementById('salinPesan'); 75 | btnCopy.addEventListener('click', function() { 76 | 77 | event.preventDefault(); 78 | 79 | chat.select(); 80 | chat.setSelectionRange(0, 99999); 81 | navigator.clipboard.writeText(chat.value); 82 | }) 83 | 84 | const btnReset = document.getElementById('resetPesan'); 85 | btnReset.addEventListener('click', function() { 86 | 87 | event.preventDefault(); 88 | 89 | chat.value = ''; 90 | }) -------------------------------------------------------------------------------- /css/style-checkout.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Mukta Malar', sans-serif; 11 | } 12 | 13 | header { 14 | display: flex; 15 | align-items: center; 16 | border-bottom: 3px solid #cc080b; 17 | } 18 | 19 | button { 20 | border: none; 21 | background: transparent; 22 | cursor: pointer; 23 | } 24 | 25 | button i { 26 | font-size: 4em; 27 | text-decoration: none; 28 | color: #cc080b; 29 | } 30 | 31 | main { 32 | display: flex; 33 | flex-direction: column; 34 | width: 100%; 35 | align-items: center; 36 | margin-top: 20px; 37 | } 38 | 39 | main h2 { 40 | font-size: 1.5em; 41 | letter-spacing: 1px; 42 | } 43 | 44 | main form { 45 | display: flex; 46 | flex-direction: column; 47 | } 48 | 49 | main label { 50 | border-bottom: 1px dashed #aaa; 51 | width: 25%; 52 | } 53 | 54 | main input { 55 | padding: 0px 5px; 56 | font-family: 'Mukta Malar', sans-serif; 57 | font-size: 1em; 58 | border: none; 59 | font-weight: bold; 60 | background-color: #fff; 61 | } 62 | 63 | main #total-harga, main #nama-toko { 64 | text-align: right; 65 | } 66 | 67 | main #nama-toko { 68 | color: #cc080b; 69 | } 70 | 71 | main textarea { 72 | border: none; 73 | font-size: 1em; 74 | line-height: 1.1em; 75 | font-family: 'Mukta Malar', sans-serif; 76 | background-color: #fff; 77 | resize: none; 78 | width: 100%; 79 | padding: 5px; 80 | } 81 | 82 | main #note { 83 | border: 1px solid #aaa; 84 | border-radius: 5px; 85 | } 86 | 87 | .btn-beli { 88 | display: flex; 89 | justify-content: center; 90 | width: 100px; 91 | position: fixed; 92 | bottom: 0; 93 | right: 0; 94 | border: none; 95 | color: #fff; 96 | font-size: 1.5em; 97 | border-radius: 12px; 98 | padding: 16px; 99 | margin: 20px 40px; 100 | background-color: #79a33d; 101 | cursor: pointer; 102 | } 103 | 104 | .sending { 105 | display: flex; 106 | justify-content: center; 107 | width: 130px; 108 | position: fixed; 109 | bottom: 0; 110 | right: 0; 111 | border: none; 112 | color: #fff; 113 | font-size: 1.5em; 114 | border-radius: 12px; 115 | padding: 16px; 116 | margin: 20px 40px; 117 | background-color: #cc080b; 118 | cursor: pointer; 119 | } 120 | 121 | .toHome { 122 | display: flex; 123 | justify-content: center; 124 | width: 150px; 125 | position: fixed; 126 | bottom: 0; 127 | right: 0; 128 | border: none; 129 | color: #fff; 130 | font-size: 1.5em; 131 | border-radius: 12px; 132 | padding: 16px; 133 | margin: 20px 40px; 134 | background-color: #79a33d; 135 | cursor: pointer; 136 | } 137 | 138 | .toHome a { 139 | text-decoration: none; 140 | color: #fff; 141 | } 142 | 143 | .hide { 144 | display: none; 145 | } -------------------------------------------------------------------------------- /admin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Admin - JK 8 | 9 | 10 | 11 |

12 |

Admin Jajan Kuy

13 |

Halaman ini digunakan untuk membuat laporan jajan santri dan men-generate laporan tersebut ke dalam format chat.

14 |

15 | 16 |

17 |

18 | 19 | 20 | 21 | 24 | 44 | 45 | 46 | 49 | 52 | 53 | 54 | 57 | 64 | 65 | 66 |

22 \| Kamar 23 \|	25 \| 43 \|
47 \| Tanggal 48 \|	50 \| 51 \|
55 \| Toko 56 \|	58 \| 63 \|

67 | 68 | 69 |

70 |

71 | 72 |

73 | 81 |

82 | 83 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const menuList = document.getElementById('daftarMenu'); 2 | 3 | if (menuList !== null) { 4 | for(const kategori in menu) { 5 | const newCategory = addCategory(kategori) 6 | menuList.append(newCategory); 7 | 8 | let kategoriDisplay = document.getElementById(kategori); 9 | 10 | for (let i=0; i { 31 | if (result.isConfirmed) { 32 | window.location.href = 'toko.html'; 33 | } 34 | }) 35 | }) 36 | } 37 | 38 | const scriptURL = 'https://script.google.com/macros/s/AKfycbxUPH-Pvff5GBRFQmcIAqG8XCtz6_Ky1P5QZcVlgWfhZqXbKCPkFdHJEC98txJ8jkB_GA/exec'; 39 | const form = document.forms['submit-to-google-sheet']; 40 | const btnKirim = document.querySelector('.btn-beli'); 41 | const btnLoading = document.querySelector('.sending'); 42 | const btnHome = document.querySelector('.toHome'); 43 | 44 | if (btnKirim !== null) { 45 | form.addEventListener('submit', e => { 46 | e.preventDefault(); 47 | 48 | textToko.removeAttribute('disabled'); 49 | textNama.removeAttribute('disabled'); 50 | textKamar.removeAttribute('disabled'); 51 | textRekap.removeAttribute('disabled'); 52 | textHarga.removeAttribute('disabled'); 53 | 54 | btnLoading.classList.toggle('hide'); 55 | btnKirim.classList.toggle('hide'); 56 | 57 | fetch(scriptURL, { method: 'POST', body: new FormData(form)}) 58 | .then(response => { 59 | 60 | btnLoading.classList.toggle('hide'); 61 | btnHome.classList.toggle('hide'); 62 | 63 | console.log('Success!', response); 64 | alert('Pesanan anda sudah diterima..'); 65 | // Swal.fire({ 66 | // width: 300, 67 | // color: '#000', 68 | // showCloseButton: true, 69 | // showConfirmButton: false, 70 | // position: 'top-end', 71 | // title: 'Terima Kasih', 72 | // text: 'Pesan anda sudah diterima', 73 | // timer: 2000, 74 | // showClass: { 75 | // popup: 'animate__animated animate__fadeInRight' 76 | // }, 77 | // hideClass: { 78 | // popup: 'animate__animated animate__fadeOutRight' 79 | // } 80 | // }) 81 | localStorage.clear(); 82 | form.reset(); 83 | }) 84 | .catch(error => console.error('Error!', error.message)) 85 | }) 86 | } 87 | 88 | // const body = document.getElementByTagName('body'); 89 | window.addEventListener('load', function() { 90 | const user = getUser(); 91 | 92 | if (user.length == 0) { 93 | window.location.href = 'index.html'; 94 | } 95 | 96 | }) -------------------------------------------------------------------------------- /css/style-menu.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Mukta Malar', sans-serif; 11 | padding-bottom: 100px; 12 | } 13 | 14 | header { 15 | display: flex; 16 | align-items: center; 17 | border-bottom: 3px solid #cc080b; 18 | } 19 | 20 | header a i { 21 | font-size: 3em; 22 | text-decoration: none; 23 | color: #cc080b; 24 | } 25 | 26 | .toko-container { 27 | margin: 20px; 28 | display: flex; 29 | align-items: center; 30 | } 31 | 32 | .toko-container i { 33 | font-size: 3em; 34 | color: #cc080b; 35 | } 36 | 37 | .toko-container .toko-info { 38 | line-height: 1.5em; 39 | padding-left: 10px; 40 | } 41 | 42 | main { 43 | display: flex; 44 | flex-direction: column; 45 | margin: 5px 20px; 46 | } 47 | 48 | main .category { 49 | font-size: 1.4em; 50 | border-bottom: 2px dashed #aaa; 51 | margin: 10px 0; 52 | } 53 | 54 | .menu { 55 | display: flex; 56 | align-items: center; 57 | border-radius: 18px; 58 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6); 59 | margin: 5px 0; 60 | padding: 16px; 61 | } 62 | 63 | .menu img { 64 | width: 100px; 65 | height: 100px; 66 | background-color: #f1ac18; 67 | border-radius: 16px; 68 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6); 69 | } 70 | 71 | .menu .menu-info { 72 | width: 100%; 73 | margin-left: 16px; 74 | } 75 | 76 | .menu .menu-info .btn-counter { 77 | display: flex; 78 | justify-content: flex-end; 79 | align-items: center; 80 | line-height: 1.3em; 81 | vertical-align: middle; 82 | } 83 | 84 | .btn-counter span { 85 | width: 50px; 86 | text-align: center; 87 | font-weight: bold; 88 | } 89 | 90 | .btn-counter .btn-min, .btn-counter .btn-plus { 91 | border: 2px solid #cc080b; 92 | width: 24px; 93 | text-align: center; 94 | border-radius: 12px; 95 | color: #cc080b; 96 | cursor: pointer; 97 | font-weight: bold; 98 | } 99 | 100 | .recap-container { 101 | position: fixed; 102 | bottom: 0; 103 | width: 100%; 104 | margin: 20px; 105 | display: flex; 106 | justify-content: space-between; 107 | } 108 | 109 | .recap-container a { 110 | text-decoration: none; 111 | } 112 | 113 | .recap-container .recap { 114 | background-color: #79a33d; 115 | height: 75px; 116 | display: flex; 117 | align-items: center; 118 | color: #fff; 119 | font-size: 1.2em; 120 | border-radius: 12px; 121 | padding: 16px; 122 | width: 100%; 123 | margin-right: 10px; 124 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6); 125 | opacity: 0; 126 | transform: translateY(100px); 127 | transition: all 0.5s; 128 | font-size: 1.3em; 129 | justify-content: center; 130 | 131 | } 132 | 133 | .recap-container .recap.show-recap { 134 | transform: translateY(0); 135 | opacity: 1; 136 | } 137 | 138 | .recap-container .cart { 139 | background-color: #79a33d; 140 | width: 75px; 141 | height: 75px; 142 | display: flex; 143 | justify-content: center; 144 | align-items: center; 145 | margin-right: 40px; 146 | padding: 20px; 147 | border-radius: 12px; 148 | box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6); 149 | cursor: pointer; 150 | } 151 | 152 | .recap-container .cart i { 153 | color: #fff; 154 | font-size: 2.5em; 155 | } -------------------------------------------------------------------------------- /js/storage.js: -------------------------------------------------------------------------------- 1 | const STORAGE_KEY = "JAJAN_KUY"; 2 | 3 | let user = []; 4 | 5 | function isStorageExist() { 6 | if(typeof(Storage) === undefined){ 7 | alert("Browser tidak mendukung aplikasi ini.\nSilakan ganti browser."); 8 | return false; 9 | } 10 | return true; 11 | } 12 | 13 | function saveData() { 14 | const parsed = JSON.stringify(user); 15 | localStorage.setItem(STORAGE_KEY, parsed); 16 | document.dispatchEvent(new Event("ondatasaved")); 17 | } 18 | 19 | function updateDataToStorage() { 20 | if(isStorageExist()) 21 | saveData(); 22 | } 23 | 24 | function composeUserObject(namaPembeli, namaKamar, namaToko, rincianPesanan, totalHarga) { 25 | return { 26 | namaPembeli, 27 | namaKamar, 28 | namaToko, 29 | rincianPesanan, 30 | totalHarga, 31 | }; 32 | } 33 | 34 | function getUser() { 35 | if (isStorageExist()) { 36 | return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; 37 | } else { 38 | return []; 39 | } 40 | } 41 | 42 | const startBtn = document.getElementById('mulaiJajan'); 43 | 44 | if (startBtn !== null) { 45 | startBtn.addEventListener('click', function() { 46 | const namaPembeli = document.getElementById('pemesan').value; 47 | const namaKamar = document.getElementById('kamar').value; 48 | if(namaPembeli !== "" && namaKamar !== "0") { 49 | let rincianPesanan = null; 50 | let totalHarga = null; 51 | let namaToko = null; 52 | const userObject = composeUserObject(namaPembeli, namaKamar, namaToko, rincianPesanan, totalHarga); 53 | user.push(userObject); 54 | updateDataToStorage(); 55 | startBtn.setAttribute('formaction', 'toko.html'); 56 | } else { 57 | alert('Isi data dengan benar'); 58 | } 59 | }) 60 | } 61 | 62 | const listHarga = document.querySelectorAll('.menu-info > p'); 63 | const listBarang = document.querySelectorAll('.menu-info > h3'); 64 | const listJumlah = document.querySelectorAll('span'); 65 | const checkoutBtn = document.querySelector('.cart'); 66 | 67 | if (checkoutBtn !== null) { 68 | checkoutBtn.addEventListener('click', function() { 69 | const userData = getUser(); 70 | 71 | let listBelanja = []; 72 | for (let i=0; i h2').innerText; 82 | 83 | let totalHarga = document.querySelector('.total-harga'); 84 | totalHarga = parseInt(totalHarga.innerText.replace('.', '')); 85 | 86 | const userObject = composeUserObject(userData[0].namaPembeli, userData[0].namaKamar, namaToko, listBelanja, totalHarga); 87 | user.push(userObject); 88 | 89 | updateDataToStorage(); 90 | 91 | }) 92 | } 93 | 94 | let textToko = document.getElementById('nama-toko'); 95 | let textNama = document.getElementById('nama-pembeli'); 96 | let textKamar = document.getElementById('nama-kamar'); 97 | let textRekap = document.getElementById('rekapPesanan'); 98 | let textHarga = document.getElementById('total-harga'); 99 | 100 | if (textRekap !== null) { 101 | const userData = getUser(); 102 | 103 | let rincian = ''; 104 | for (let i=0; i p'); 74 | harga = parseInt(harga.innerText.replace('.', '')); 75 | 76 | let displayTotal = document.querySelector('.total-harga'); 77 | 78 | let totalHarga = parseInt(displayTotal.innerText.replace('.', '')); 79 | 80 | if (displayText.innerText > 0) { 81 | displayText.innerText--; 82 | totalHarga -= harga; 83 | } else { 84 | displayText.innerText = 0; 85 | totalHarga -= 0; 86 | } 87 | 88 | let s = toCurrencyFormat(totalHarga); 89 | displayTotal.innerText = s; 90 | 91 | if (displayTotal.innerText < 1) { 92 | displayTotalContainer.classList.remove('show-recap'); 93 | } 94 | }) 95 | 96 | return minusButton; 97 | } 98 | 99 | function createPlusButton(menuId) { 100 | const plusButton = document.createElement('div'); 101 | plusButton.innerText = '+'; 102 | plusButton.classList.add('btn-plus'); 103 | 104 | plusButton.addEventListener('click', function() { 105 | const menuContainer = document.getElementById(menuId); 106 | 107 | let displayText = menuContainer.querySelector('span'); 108 | let harga = menuContainer.querySelector('.menu-info > p'); 109 | harga = parseInt(harga.innerText.replace('.', '')); 110 | 111 | displayText.innerText++; 112 | 113 | displayTotalContainer.classList.add('show-recap'); 114 | 115 | let displayTotal = document.querySelector('.total-harga'); 116 | 117 | if (displayTotal.innerText !== '0') { 118 | let totalHarga = parseInt(displayTotal.innerText.replace('.', '')); 119 | totalHarga += harga; 120 | let s = toCurrencyFormat(totalHarga); 121 | displayTotal.innerText = s; 122 | } else { 123 | let totalHarga = 0; 124 | totalHarga += harga; 125 | let s = toCurrencyFormat(totalHarga); 126 | displayTotal.innerText = s; 127 | } 128 | }) 129 | 130 | return plusButton; 131 | } -------------------------------------------------------------------------------- /js/kb_menu.js: -------------------------------------------------------------------------------- 1 | const menu = { 2 | 3 | "Makanan": [ 4 | 5 | { 6 | "id": Math.random().toString(16).slice(2), 7 | "image": "img/spoonNfork.png", 8 | "nama": "Macaroni Schotel", 9 | "harga": "10.000" 10 | }, 11 | { 12 | "id": Math.random().toString(16).slice(2), 13 | "image": "img/spoonNfork.png", 14 | "nama": "Pisang Geprek Cokelat", 15 | "harga": "5.000" 16 | }, 17 | { 18 | "id": Math.random().toString(16).slice(2), 19 | "image": "img/spoonNfork.png", 20 | "nama": "Pisang Geprek Vanila", 21 | "harga": "5.000" 22 | }, 23 | { 24 | "id": Math.random().toString(16).slice(2), 25 | "image": "img/spoonNfork.png", 26 | "nama": "Pisang Geprek Tiramisu", 27 | "harga": "5.000" 28 | }, 29 | { 30 | "id": Math.random().toString(16).slice(2), 31 | "image": "img/spoonNfork.png", 32 | "nama": "Pisang Geprek Oreo", 33 | "harga": "5.000" 34 | }, 35 | { 36 | "id": Math.random().toString(16).slice(2), 37 | "image": "img/spoonNfork.png", 38 | "nama": "Pisang Geprek Cokelat", 39 | "harga": "5.000" 40 | }, 41 | { 42 | "id": Math.random().toString(16).slice(2), 43 | "image": "img/spoonNfork.png", 44 | "nama": "Roti Korea", 45 | "harga": "5.000" 46 | }, 47 | { 48 | "id": Math.random().toString(16).slice(2), 49 | "image": "img/spoonNfork.png", 50 | "nama": "Burger", 51 | "harga": "10.000" 52 | }, 53 | { 54 | "id": Math.random().toString(16).slice(2), 55 | "image": "img/spoonNfork.png", 56 | "nama": "Lumpia Basah", 57 | "harga": "10.000" 58 | }, 59 | { 60 | "id": Math.random().toString(16).slice(2), 61 | "image": "img/spoonNfork.png", 62 | "nama": "Roti Bakar Cokelat", 63 | "harga": "6.000" 64 | }, 65 | { 66 | "id": Math.random().toString(16).slice(2), 67 | "image": "img/spoonNfork.png", 68 | "nama": "Roti Bakar Vanila", 69 | "harga": "6.000" 70 | }, 71 | { 72 | "id": Math.random().toString(16).slice(2), 73 | "image": "img/spoonNfork.png", 74 | "nama": "Roti Bakar Tiramisu", 75 | "harga": "6.000" 76 | }, 77 | { 78 | "id": Math.random().toString(16).slice(2), 79 | "image": "img/spoonNfork.png", 80 | "nama": "Roti Bakar Greentea", 81 | "harga": "6.000" 82 | }, 83 | { 84 | "id": Math.random().toString(16).slice(2), 85 | "image": "img/spoonNfork.png", 86 | "nama": "Roti Bakar Blueberry", 87 | "harga": "6.000" 88 | }, 89 | { 90 | "id": Math.random().toString(16).slice(2), 91 | "image": "img/spoonNfork.png", 92 | "nama": "Roti Bakar Strawberry", 93 | "harga": "6.000" 94 | }, 95 | { 96 | "id": Math.random().toString(16).slice(2), 97 | "image": "img/spoonNfork.png", 98 | "nama": "Sandwich", 99 | "harga": "6.000" 100 | }, 101 | { 102 | "id": Math.random().toString(16).slice(2), 103 | "image": "img/spoonNfork.png", 104 | "nama": "Baso Pentol", 105 | "harga": "10.000" 106 | }, 107 | { 108 | "id": Math.random().toString(16).slice(2), 109 | "image": "img/spoonNfork.png", 110 | "nama": "Cireng Isi Ayam", 111 | "harga": "2.500" 112 | }, 113 | { 114 | "id": Math.random().toString(16).slice(2), 115 | "image": "img/spoonNfork.png", 116 | "nama": "Makaroni Kering Balado", 117 | "harga": "5.000" 118 | }, 119 | { 120 | "id": Math.random().toString(16).slice(2), 121 | "image": "img/spoonNfork.png", 122 | "nama": "Makaroni Kering Keju", 123 | "harga": "5.000" 124 | }, 125 | { 126 | "id": Math.random().toString(16).slice(2), 127 | "image": "img/spoonNfork.png", 128 | "nama": "Makaroni Kering Original", 129 | "harga": "5.000" 130 | }, 131 | { 132 | "id": Math.random().toString(16).slice(2), 133 | "image": "img/spoonNfork.png", 134 | "nama": "Makaroni Kering Pedas", 135 | "harga": "5.000" 136 | }, 137 | { 138 | "id": Math.random().toString(16).slice(2), 139 | "image": "img/spoonNfork.png", 140 | "nama": "Gehu", 141 | "harga": "2.500" 142 | }, 143 | { 144 | "id": Math.random().toString(16).slice(2), 145 | "image": "img/spoonNfork.png", 146 | "nama": "Donat Ubi", 147 | "harga": "2.500" 148 | }, 149 | { 150 | "id": Math.random().toString(16).slice(2), 151 | "image": "img/spoonNfork.png", 152 | "nama": "Kebab", 153 | "harga": "6.000" 154 | }, 155 | { 156 | "id": Math.random().toString(16).slice(2), 157 | "image": "img/spoonNfork.png", 158 | "nama": "Makaroni Basah", 159 | "harga": "5.000" 160 | }, 161 | { 162 | "id": Math.random().toString(16).slice(2), 163 | "image": "img/spoonNfork.png", 164 | "nama": "Sosis Bakar", 165 | "harga": "6.000" 166 | }, 167 | { 168 | "id": Math.random().toString(16).slice(2), 169 | "image": "img/spoonNfork.png", 170 | "nama": "Rosil Mayo", 171 | "harga": "5.000" 172 | }, 173 | { 174 | "id": Math.random().toString(16).slice(2), 175 | "image": "img/spoonNfork.png", 176 | "nama": "Gorengan (Bala-bala, Cibay, Pisang Aroma, Mendoan)", 177 | "harga": "5.000" 178 | } 179 | ], 180 | 181 | "Minuman": [ 182 | 183 | { 184 | "id": Math.random().toString(16).slice(2), 185 | "image": "img/spoonNfork.png", 186 | "nama": "Es Susu Murni", 187 | "harga": "2.500" 188 | }, 189 | { 190 | "id": Math.random().toString(16).slice(2), 191 | "image": "img/spoonNfork.png", 192 | "nama": "Teh Manis", 193 | "harga": "3.000" 194 | }, 195 | { 196 | "id": Math.random().toString(16).slice(2), 197 | "image": "img/spoonNfork.png", 198 | "nama": "Es Jeruk", 199 | "harga": "4.000" 200 | }, 201 | { 202 | "id": Math.random().toString(16).slice(2), 203 | "image": "img/spoonNfork.png", 204 | "nama": "Teh Tarik", 205 | "harga": "5.000" 206 | }, 207 | { 208 | "id": Math.random().toString(16).slice(2), 209 | "image": "img/spoonNfork.png", 210 | "nama": "Yoghurt Botol Cimory Strawberry", 211 | "harga": "10.000" 212 | }, 213 | { 214 | "id": Math.random().toString(16).slice(2), 215 | "image": "img/spoonNfork.png", 216 | "nama": "Yoghurt Botol Cimory Lecy", 217 | "harga": "10.000" 218 | }, 219 | { 220 | "id": Math.random().toString(16).slice(2), 221 | "image": "img/spoonNfork.png", 222 | "nama": "Yoghurt Botol Cimory Aloeverra", 223 | "harga": "10.000" 224 | }, 225 | { 226 | "id": Math.random().toString(16).slice(2), 227 | "image": "img/spoonNfork.png", 228 | "nama": "Yoghurt Botol Cimory Grape", 229 | "harga": "10.000" 230 | }, 231 | { 232 | "id": Math.random().toString(16).slice(2), 233 | "image": "img/spoonNfork.png", 234 | "nama": "Yoghurt Botol Cimory Original", 235 | "harga": "10.000" 236 | } 237 | 238 | ] 239 | 240 | } -------------------------------------------------------------------------------- /js/whkbt_menu.js: -------------------------------------------------------------------------------- 1 | const menu = { 2 | 3 | "Makanan": [ 4 | 5 | { 6 | "id": Math.random().toString(16).slice(2), 7 | "image": "img/spoonNfork.png", 8 | "nama": "Miago Original", 9 | "harga": "10.000" 10 | }, 11 | { 12 | "id": Math.random().toString(16).slice(2), 13 | "image": "img/spoonNfork.png", 14 | "nama": "Miago Telur", 15 | "harga": "12.000" 16 | }, 17 | { 18 | "id": Math.random().toString(16).slice(2), 19 | "image": "img/spoonNfork.png", 20 | "nama": "Miago Nugget", 21 | "harga": "12.000" 22 | }, 23 | { 24 | "id": Math.random().toString(16).slice(2), 25 | "image": "img/spoonNfork.png", 26 | "nama": "Nasi Goreng", 27 | "harga": "10.000" 28 | }, 29 | { 30 | "id": Math.random().toString(16).slice(2), 31 | "image": "img/spoonNfork.png", 32 | "nama": "Nasi Goreng Spesial", 33 | "harga": "15.000" 34 | }, 35 | { 36 | "id": Math.random().toString(16).slice(2), 37 | "image": "img/spoonNfork.png", 38 | "nama": "Nasi Ayam Geprek", 39 | "harga": "13.000" 40 | }, 41 | { 42 | "id": Math.random().toString(16).slice(2), 43 | "image": "img/spoonNfork.png", 44 | "nama": "Nasi Ayam Yakiniku", 45 | "harga": "13.000" 46 | }, 47 | { 48 | "id": Math.random().toString(16).slice(2), 49 | "image": "img/spoonNfork.png", 50 | "nama": "Nasi Ayam Katsu Nori", 51 | "harga": "13.000" 52 | }, 53 | { 54 | "id": Math.random().toString(16).slice(2), 55 | "image": "img/spoonNfork.png", 56 | "nama": "Nasi Ayam Katsu Mentai", 57 | "harga": "13.000" 58 | }, 59 | { 60 | "id": Math.random().toString(16).slice(2), 61 | "image": "img/spoonNfork.png", 62 | "nama": "Sushi Roll Nugget Tuna Mayo", 63 | "harga": "10.000" 64 | }, 65 | { 66 | "id": Math.random().toString(16).slice(2), 67 | "image": "img/spoonNfork.png", 68 | "nama": "Sushi Roll Ayam Bolognaise", 69 | "harga": "10.000" 70 | }, 71 | { 72 | "id": Math.random().toString(16).slice(2), 73 | "image": "img/spoonNfork.png", 74 | "nama": "Kerupuk Asin Pedas", 75 | "harga": "2.000" 76 | }, 77 | { 78 | "id": Math.random().toString(16).slice(2), 79 | "image": "img/spoonNfork.png", 80 | "nama": "Nasi Nugget Mentai", 81 | "harga": "10.000" 82 | }, 83 | { 84 | "id": Math.random().toString(16).slice(2), 85 | "image": "img/spoonNfork.png", 86 | "nama": "Risoles Mayo Telur", 87 | "harga": "5.000" 88 | }, 89 | { 90 | "id": Math.random().toString(16).slice(2), 91 | "image": "img/spoonNfork.png", 92 | "nama": "Risoles Sosis", 93 | "harga": "5.000" 94 | }, 95 | { 96 | "id": Math.random().toString(16).slice(2), 97 | "image": "img/spoonNfork.png", 98 | "nama": "Ricebowl Bento", 99 | "harga": "15.000" 100 | }, 101 | { 102 | "id": Math.random().toString(16).slice(2), 103 | "image": "img/spoonNfork.png", 104 | "nama": "Seblak Suki", 105 | "harga": "10.000" 106 | }, 107 | { 108 | "id": Math.random().toString(16).slice(2), 109 | "image": "img/spoonNfork.png", 110 | "nama": "Siomay Ayam Mayo", 111 | "harga": "10.000" 112 | }, 113 | { 114 | "id": Math.random().toString(16).slice(2), 115 | "image": "img/spoonNfork.png", 116 | "nama": "Sosis Crispy", 117 | "harga": "10.000" 118 | }, 119 | { 120 | "id": Math.random().toString(16).slice(2), 121 | "image": "img/spoonNfork.png", 122 | "nama": "Makaroni Cheese Ball", 123 | "harga": "10.000" 124 | }, 125 | { 126 | "id": Math.random().toString(16).slice(2), 127 | "image": "img/spoonNfork.png", 128 | "nama": "Dumpling Cheese Saos Mayo", 129 | "harga": "6.000" 130 | }, 131 | { 132 | "id": Math.random().toString(16).slice(2), 133 | "image": "img/spoonNfork.png", 134 | "nama": "Baso Urat Kuah Pedas", 135 | "harga": "10.000" 136 | }, 137 | { 138 | "id": Math.random().toString(16).slice(2), 139 | "image": "img/spoonNfork.png", 140 | "nama": "Nasi Ayam Suir Pedas", 141 | "harga": "10.000" 142 | }, 143 | { 144 | "id": Math.random().toString(16).slice(2), 145 | "image": "img/spoonNfork.png", 146 | "nama": "Bascil", 147 | "harga": "10.000" 148 | }, 149 | { 150 | "id": Math.random().toString(16).slice(2), 151 | "image": "img/spoonNfork.png", 152 | "nama": "Nasi Telur - Pontianak", 153 | "harga": "10.000" 154 | }, 155 | { 156 | "id": Math.random().toString(16).slice(2), 157 | "image": "img/spoonNfork.png", 158 | "nama": "Nasi Telur - Balado", 159 | "harga": "10.000" 160 | }, 161 | { 162 | "id": Math.random().toString(16).slice(2), 163 | "image": "img/spoonNfork.png", 164 | "nama": "Nasi Telur - Sambel Ijo", 165 | "harga": "10.000" 166 | }, 167 | { 168 | "id": Math.random().toString(16).slice(2), 169 | "image": "img/spoonNfork.png", 170 | "nama": "Nasi Telut - Crispy", 171 | "harga": "10.000" 172 | }, 173 | { 174 | "id": Math.random().toString(16).slice(2), 175 | "image": "img/spoonNfork.png", 176 | "nama": "Maklor Saos Bolognese", 177 | "harga": "10.000" 178 | } 179 | 180 | ], 181 | 182 | "Minuman": [ 183 | 184 | { 185 | "id": Math.random().toString(16).slice(2), 186 | "image": "img/spoonNfork.png", 187 | "nama": "Lypton Ice Lemon Tea", 188 | "harga": "5.000" 189 | }, 190 | { 191 | "id": Math.random().toString(16).slice(2), 192 | "image": "img/spoonNfork.png", 193 | "nama": "Teh Manis Kecil", 194 | "harga": "3.000" 195 | }, 196 | { 197 | "id": Math.random().toString(16).slice(2), 198 | "image": "img/spoonNfork.png", 199 | "nama": "Teh Manis Besar", 200 | "harga": "4.000" 201 | }, 202 | { 203 | "id": Math.random().toString(16).slice(2), 204 | "image": "img/spoonNfork.png", 205 | "nama": "Teh Pucuk", 206 | "harga": "4.000" 207 | }, 208 | { 209 | "id": Math.random().toString(16).slice(2), 210 | "image": "img/spoonNfork.png", 211 | "nama": "Fresh Tea", 212 | "harga": "5.000" 213 | }, 214 | { 215 | "id": Math.random().toString(16).slice(2), 216 | "image": "img/spoonNfork.png", 217 | "nama": "Fruit tea (Kotak)", 218 | "harga": "3.000" 219 | }, 220 | { 221 | "id": Math.random().toString(16).slice(2), 222 | "image": "img/spoonNfork.png", 223 | "nama": "Fruit Tea (Botol)", 224 | "harga": "5.000" 225 | }, 226 | { 227 | "id": Math.random().toString(16).slice(2), 228 | "image": "img/spoonNfork.png", 229 | "nama": "Teh Kotak", 230 | "harga": "4.000" 231 | }, 232 | { 233 | "id": Math.random().toString(16).slice(2), 234 | "image": "img/spoonNfork.png", 235 | "nama": "Florida", 236 | "harga": "3.000" 237 | }, 238 | { 239 | "id": Math.random().toString(16).slice(2), 240 | "image": "img/spoonNfork.png", 241 | "nama": "Nutriboose", 242 | "harga": "7.000" 243 | }, 244 | { 245 | "id": Math.random().toString(16).slice(2), 246 | "image": "img/spoonNfork.png", 247 | "nama": "Pocari Sweat", 248 | "harga": "6.000" 249 | } 250 | 251 | ], 252 | 253 | "Bubble Drinks - Milk Tea Series" : [ 254 | 255 | { 256 | "id": Math.random().toString(16).slice(2), 257 | "image": "img/spoonNfork.png", 258 | "nama": "Original Milk Tea", 259 | "harga": "10.000" 260 | }, 261 | { 262 | "id": Math.random().toString(16).slice(2), 263 | "image": "img/spoonNfork.png", 264 | "nama": "Hazelnut Milk Tea", 265 | "harga": "11.000" 266 | }, 267 | { 268 | "id": Math.random().toString(16).slice(2), 269 | "image": "img/spoonNfork.png", 270 | "nama": "Caramel Milk Tea", 271 | "harga": "11.000" 272 | }, 273 | { 274 | "id": Math.random().toString(16).slice(2), 275 | "image": "img/spoonNfork.png", 276 | "nama": "Jasmine Green Milk Tea", 277 | "harga": "10.000" 278 | }, 279 | { 280 | "id": Math.random().toString(16).slice(2), 281 | "image": "img/spoonNfork.png", 282 | "nama": "Original Thai Milk Tea", 283 | "harga": "10.000" 284 | }, 285 | { 286 | "id": Math.random().toString(16).slice(2), 287 | "image": "img/spoonNfork.png", 288 | "nama": "Taro Milk Tea", 289 | "harga": "10.000" 290 | }, 291 | { 292 | "id": Math.random().toString(16).slice(2), 293 | "image": "img/spoonNfork.png", 294 | "nama": "Vanilla Milk Tea", 295 | "harga": "10.000" 296 | } 297 | 298 | ], 299 | 300 | "Bubble Drinks - Mix Vanilla Series" : [ 301 | 302 | { 303 | "id": Math.random().toString(16).slice(2), 304 | "image": "img/spoonNfork.png", 305 | "nama": "Vanilla Green Tea", 306 | "harga": "10.000" 307 | }, 308 | { 309 | "id": Math.random().toString(16).slice(2), 310 | "image": "img/spoonNfork.png", 311 | "nama": "Vanilla Mango", 312 | "harga": "10.000" 313 | }, 314 | { 315 | "id": Math.random().toString(16).slice(2), 316 | "image": "img/spoonNfork.png", 317 | "nama": "Vanilla Taro", 318 | "harga": "10.000" 319 | }, 320 | { 321 | "id": Math.random().toString(16).slice(2), 322 | "image": "img/spoonNfork.png", 323 | "nama": "Vanilla Thai Tea", 324 | "harga": "10.000" 325 | } 326 | 327 | ], 328 | 329 | "Buble Drinks - Chocolate Series": [ 330 | 331 | { 332 | "id": Math.random().toString(16).slice(2), 333 | "image": "img/spoonNfork.png", 334 | "nama": "Creamy Chocolate", 335 | "harga": "10.000" 336 | }, 337 | { 338 | "id": Math.random().toString(16).slice(2), 339 | "image": "img/spoonNfork.png", 340 | "nama": "Hazelnut Chocolate", 341 | "harga": "11.000" 342 | }, 343 | { 344 | "id": Math.random().toString(16).slice(2), 345 | "image": "img/spoonNfork.png", 346 | "nama": "Choco Caramel", 347 | "harga": "11.000" 348 | }, 349 | { 350 | "id": Math.random().toString(16).slice(2), 351 | "image": "img/spoonNfork.png", 352 | "nama": "Choco Taro", 353 | "harga": "10.000" 354 | }, 355 | { 356 | "id": Math.random().toString(16).slice(2), 357 | "image": "img/spoonNfork.png", 358 | "nama": "Choco Vanilla", 359 | "harga": "10.000" 360 | }, 361 | { 362 | "id": Math.random().toString(16).slice(2), 363 | "image": "img/spoonNfork.png", 364 | "nama": "Choco Milk", 365 | "harga": "10.000" 366 | }, 367 | { 368 | "id": Math.random().toString(16).slice(2), 369 | "image": "img/spoonNfork.png", 370 | "nama": "Choco Banana", 371 | "harga": "10.000" 372 | } 373 | 374 | ], 375 | 376 | "Bubble Drinks - Fresh Tea Series": [ 377 | 378 | { 379 | "id": Math.random().toString(16).slice(2), 380 | "image": "img/spoonNfork.png", 381 | "nama": "Jasmine Green Tea", 382 | "harga": "10.000" 383 | }, 384 | { 385 | "id": Math.random().toString(16).slice(2), 386 | "image": "img/spoonNfork.png", 387 | "nama": "Thai Tea", 388 | "harga": "10.000" 389 | }, 390 | { 391 | "id": Math.random().toString(16).slice(2), 392 | "image": "img/spoonNfork.png", 393 | "nama": "Black Tea", 394 | "harga": "10.000" 395 | }, 396 | { 397 | "id": Math.random().toString(16).slice(2), 398 | "image": "img/spoonNfork.png", 399 | "nama": "Lemon Tea", 400 | "harga": "10.000" 401 | }, 402 | { 403 | "id": Math.random().toString(16).slice(2), 404 | "image": "img/spoonNfork.png", 405 | "nama": "Manggo Green Tea", 406 | "harga": "10.000" 407 | }, 408 | { 409 | "id": Math.random().toString(16).slice(2), 410 | "image": "img/spoonNfork.png", 411 | "nama": "Lychee Tea", 412 | "harga": "10.000" 413 | } 414 | 415 | ], 416 | 417 | "Bubble Drinks - Varian Cheeze Tea": [ 418 | 419 | { 420 | "id": Math.random().toString(16).slice(2), 421 | "image": "img/spoonNfork.png", 422 | "nama": "Greentea Cheese", 423 | "harga": "14.000" 424 | }, 425 | { 426 | "id": Math.random().toString(16).slice(2), 427 | "image": "img/spoonNfork.png", 428 | "nama": "Choco Cheese", 429 | "harga": "14.000" 430 | }, 431 | { 432 | "id": Math.random().toString(16).slice(2), 433 | "image": "img/spoonNfork.png", 434 | "nama": "Redvelvet Cheese", 435 | "harga": "14.000" 436 | }, 437 | { 438 | "id": Math.random().toString(16).slice(2), 439 | "image": "img/spoonNfork.png", 440 | "nama": "Tiramisu Cheese", 441 | "harga": "14.000" 442 | }, 443 | { 444 | "id": Math.random().toString(16).slice(2), 445 | "image": "img/spoonNfork.png", 446 | "nama": "Taro Cheese", 447 | "harga": "14.000" 448 | }, 449 | { 450 | "id": Math.random().toString(16).slice(2), 451 | "image": "img/spoonNfork.png", 452 | "nama": "Thaitea Cheese", 453 | "harga": "14.000" 454 | }, 455 | { 456 | "id": Math.random().toString(16).slice(2), 457 | "image": "img/spoonNfork.png", 458 | "nama": "Matcha Cheese", 459 | "harga": "15.000" 460 | }, 461 | { 462 | "id": Math.random().toString(16).slice(2), 463 | "image": "img/spoonNfork.png", 464 | "nama": "Lychee Cheese", 465 | "harga": "14.000" 466 | } 467 | 468 | ], 469 | 470 | "Bubble Drinks - Cofee Series": [ 471 | 472 | { 473 | "id": Math.random().toString(16).slice(2), 474 | "image": "img/spoonNfork.png", 475 | "nama": "Cappucino", 476 | "harga": "10.000" 477 | }, 478 | { 479 | "id": Math.random().toString(16).slice(2), 480 | "image": "img/spoonNfork.png", 481 | "nama": "Moccacino", 482 | "harga": "10.000" 483 | }, 484 | { 485 | "id": Math.random().toString(16).slice(2), 486 | "image": "img/spoonNfork.png", 487 | "nama": "Vanilla Latte", 488 | "harga": "10.000" 489 | }, 490 | { 491 | "id": Math.random().toString(16).slice(2), 492 | "image": "img/spoonNfork.png", 493 | "nama": "Hazelnut Latte", 494 | "harga": "11.000" 495 | }, 496 | { 497 | "id": Math.random().toString(16).slice(2), 498 | "image": "img/spoonNfork.png", 499 | "nama": "Caramel Latte", 500 | "harga": "11.000" 501 | }, 502 | { 503 | "id": Math.random().toString(16).slice(2), 504 | "image": "img/spoonNfork.png", 505 | "nama": "Avocado Latte", 506 | "harga": "10.000" 507 | } 508 | 509 | ], 510 | 511 | "Bubble Drinks - Fruit Series": [ 512 | 513 | { 514 | "id": Math.random().toString(16).slice(2), 515 | "image": "img/spoonNfork.png", 516 | "nama": "Mango", 517 | "harga": "10.000" 518 | }, 519 | { 520 | "id": Math.random().toString(16).slice(2), 521 | "image": "img/spoonNfork.png", 522 | "nama": "Lychee", 523 | "harga": "10.000" 524 | }, 525 | { 526 | "id": Math.random().toString(16).slice(2), 527 | "image": "img/spoonNfork.png", 528 | "nama": "Strawberry", 529 | "harga": "10.000" 530 | }, 531 | { 532 | "id": Math.random().toString(16).slice(2), 533 | "image": "img/spoonNfork.png", 534 | "nama": "Durian", 535 | "harga": "10.000" 536 | }, 537 | { 538 | "id": Math.random().toString(16).slice(2), 539 | "image": "img/spoonNfork.png", 540 | "nama": "Grape", 541 | "harga": "10.000" 542 | }, 543 | { 544 | "id": Math.random().toString(16).slice(2), 545 | "image": "img/spoonNfork.png", 546 | "nama": "Sirsak", 547 | "harga": "10.000" 548 | }, 549 | { 550 | "id": Math.random().toString(16).slice(2), 551 | "image": "img/spoonNfork.png", 552 | "nama": "Blueberry", 553 | "harga": "10.000" 554 | }, 555 | { 556 | "id": Math.random().toString(16).slice(2), 557 | "image": "img/spoonNfork.png", 558 | "nama": "Orange", 559 | "harga": "10.000" 560 | }, 561 | { 562 | "id": Math.random().toString(16).slice(2), 563 | "image": "img/spoonNfork.png", 564 | "nama": "Banana", 565 | "harga": "10.000" 566 | }, 567 | { 568 | "id": Math.random().toString(16).slice(2), 569 | "image": "img/spoonNfork.png", 570 | "nama": "Avocado", 571 | "harga": "10.000" 572 | }, 573 | { 574 | "id": Math.random().toString(16).slice(2), 575 | "image": "img/spoonNfork.png", 576 | "nama": "Melon", 577 | "harga": "10.000" 578 | } 579 | 580 | ], 581 | 582 | "Bubble Drinks - Oreo Series": [ 583 | 584 | { 585 | "id": Math.random().toString(16).slice(2), 586 | "image": "img/spoonNfork.png", 587 | "nama": "Choco Oreo", 588 | "harga": "11.000" 589 | }, 590 | { 591 | "id": Math.random().toString(16).slice(2), 592 | "image": "img/spoonNfork.png", 593 | "nama": "Green Tea Oreo", 594 | "harga": "11.000" 595 | }, 596 | { 597 | "id": Math.random().toString(16).slice(2), 598 | "image": "img/spoonNfork.png", 599 | "nama": "Thai Tea Oreo", 600 | "harga": "11.000" 601 | }, 602 | { 603 | "id": Math.random().toString(16).slice(2), 604 | "image": "img/spoonNfork.png", 605 | "nama": "Milk Tea Oreo", 606 | "harga": "11.000" 607 | }, 608 | { 609 | "id": Math.random().toString(16).slice(2), 610 | "image": "img/spoonNfork.png", 611 | "nama": "Vanilla Oreo", 612 | "harga": "11.000" 613 | }, 614 | { 615 | "id": Math.random().toString(16).slice(2), 616 | "image": "img/spoonNfork.png", 617 | "nama": "Taro Oreo", 618 | "harga": "11.000" 619 | } 620 | 621 | ] 622 | 623 | } --------------------------------------------------------------------------------

22 \| Kamar 23 \|	25 \| 43 \|
47 \| Tanggal 48 \|	50 \| 51 \|
55 \| Toko 56 \|	58 \| 63 \|