Berikut ini adalah contoh kode untuk membuat Convolution calculator lengkap dengan JavaScript, HTML, dan CSS, serta penerapannya dalam bentuk formulir HTML.
Convolution calculator
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Konvolusi</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;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Konvolusi</h1>
<label for="input1">Input 1:</label>
<input type="number" id="input1" placeholder="Masukkan nilai input 1">
<label for="input2">Input 2:</label>
<input type="number" id="input2" placeholder="Masukkan nilai input 2">
<button onclick="calculate()">Hitung</button>
<div id="result"></div>
</div>
<script>
function calculate() {
var input1 = parseFloat(document.getElementById('input1').value);
var input2 = parseFloat(document.getElementById('input2').value);
var result = input1 * input2;
document.getElementById('result').innerHTML = 'Hasil: ' + result;
}
</script>
</body>
</html>Anda dapat menggunakan contoh kode di atas untuk membuat kalkulator konvolusi dengan JavaScript, HTML, dan CSS. Kode tersebut akan menghasilkan tampilan formulir dengan dua input angka dan tombol “Hitung”. Setelah pengguna memasukkan nilai pada kedua input dan mengklik tombol “Hitung”, hasil perkalian dari kedua input akan ditampilkan di bawah tombol.
Pastikan Anda menyimpan kode di atas dalam file dengan ekstensi .html dan membukanya menggunakan browser web untuk melihat kalkulator konvolusi yang berfungsi.
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat kalkulator konvolusi dengan JavaScript, HTML, dan CSS.
Leave a Reply