Tono memiliki sebuah tangki air dengan diameter 80cm dan tinggi 100cm. Berapa liter air yang dapat ditampung dalam tangki yang dimiliki Tono tersebut?
Pertanyaan:
Buatlah sebuah program sederhana menggunakan Vue.js yang dapat menghitung banyaknya liter air dalam tangka Tono dengan ketentuan:
1. Tampilkan jari-jari
2. Tampilkan tinggi
3. Tampilkan volume dalam liter
Kumpulkan hasil koding Anda dalam bentuk screenhoot:
1. Isi kode HTML dan isi kode Apps.js
2. output tampilan aplikasi dalam bentuk screenshoot!
Pertanyaan:
Buatlah sebuah program sederhana menggunakan Vue.js yang dapat menghitung banyaknya liter air dalam tangka Tono dengan ketentuan:
1. Tampilkan jari-jari
2. Tampilkan tinggi
3. Tampilkan volume dalam liter
Kumpulkan hasil koding Anda dalam bentuk screenhoot:
1. Isi kode HTML dan isi kode Apps.js
2. output tampilan aplikasi dalam bentuk screenshoot!
Berikut ini contoh kode menggunakan Vue.js untuk menghitung banyaknya liter air dalam tangki Tono berdasarkan diameter dan tinggi yang diberikan. Kode HTML dan JavaScript yang tersebeut bisa digunakan, kodenya sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hitung Volume Tangki Air</title>
< script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></ script >
</head>
<body>
<div id="app">
<h1>Hitung Volume Tangki Air</h1>
<label for="diameter">Diameter (cm):</label>
<input type="number" id="diameter" v-model="diameter">
<br>
<label for="tinggi">Tinggi (cm):</label>
<input type="number" id="tinggi" v-model="tinggi">
<br>
<button @click="hitungVolume">Hitung</button>
<br><br>
<div v-if="volume !== null">
<p>Jari-jari: {{ jariJari }} cm</p>
<p>Tinggi: {{ tinggi }} cm</p>
<p>Volume: {{ volume }} liter</p>
</div>
</div>
< script src="app.js"></ script >
</body>
</html>
Dan berikut adalah contoh kode app.js:
new Vue({
el: '#app',
data: {
diameter: 0,
tinggi: 0,
volume: null
},
computed: {
jariJari: function() {
return this.diameter / 2;
}
},
methods: {
hitungVolume: function() {
const r = this.jariJari;
const h = this.tinggi;
this.volume = ((Math.PI * r * r * h) / 1000).toFixed(2); // Menghitung volume dalam liter dan membulatkannya menjadi 2 desimal
}
}
});
Pembahasan
Kita bisa menyalin kode HTML di atas dan juga JavaScript tersebut ke file masing-masing (index.html dan app.js), setelahnya buka file index.html pada browser untuk melihat hasilnya.
Pelajari Lebih Lanjut
#BelajarBersamaBrainly
#SPJ1