Berikut adalah contoh kode untuk membuat kalkulator persentase perubahan menggunakan JavaScript, HTML, dan CSS. Kode ini akan diterapkan dalam sebuah formulir HTML.
Kalkulator Persentase Perubahan
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Persentase Perubahan</title>
<style>
/* CSS untuk tampilan kalkulator */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.result {
margin-top: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Persentase Perubahan</h1>
<label for="nilaiAwal">Nilai Awal:</label>
<input type="number" id="nilaiAwal" placeholder="Masukkan nilai awal">
<label for="nilaiAkhir">Nilai Akhir:</label>
<input type="number" id="nilaiAkhir" placeholder="Masukkan nilai akhir">
<button onclick="hitungPersentase()">Hitung</button>
<div class="result" id="hasil"></div>
</div>
<script>
function hitungPersentase() {
var nilaiAwal = parseFloat(document.getElementById('nilaiAwal').value);
var nilaiAkhir = parseFloat(document.getElementById('nilaiAkhir').value);
var persentasePerubahan = ((nilaiAkhir - nilaiAwal) / nilaiAwal) * 100;
document.getElementById('hasil').innerHTML = "Persentase Perubahan: " + persentasePerubahan.toFixed(2) + "%";
}
</script>
</body>
</html>Anda dapat menyalin kode di atas dan menyimpannya dalam file HTML. Ketika file tersebut dijalankan di browser, Anda akan melihat kalkulator persentase perubahan yang dapat menghitung persentase perubahan antara dua nilai yang dimasukkan.
Silakan mencoba dan menggali lebih dalam tentang JavaScript, HTML, dan CSS untuk memahami bagaimana kode ini bekerja dan bagaimana Anda dapat menggunakannya dalam proyek Anda.
Leave a Reply