Berikut ini adalah contoh kode untuk membuat aplikasi Kalkulator Log (Logarithm) menggunakan JavaScript, CSS, dan HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Log Calculator</title>
<style>
/* CSS untuk tampilan aplikasi */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
width: 400px;
background: white;
margin: 30px auto;
padding: 30px 20px;
}
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>Log Calculator</h1>
<label for="number">Masukkan Angka:</label>
<input type="number" id="number" placeholder="Masukkan angka">
<button onclick="calculateLog()">Hitung Logaritma</button>
<div class="result">
<p>Hasil Logaritma: <span id="result"></span></p>
</div>
</div>
<script>
function calculateLog() {
var number = document.getElementById("number").value;
var result = Math.log10(number);
document.getElementById("result").textContent = result;
}
</script>
</body>
</html>Output:
Log Calculator
Hasil Logaritma:
Silakan salin kode di atas dan simpan dalam file dengan ekstensi .html. Anda dapat membuka file tersebut menggunakan browser untuk melihat aplikasi Log Calculator yang telah dibuat.
Semoga contoh kode di atas dapat membantu Anda dalam membuat aplikasi Log Calculator menggunakan JavaScript, CSS, dan HTML. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya. Selamat mencoba!
Leave a Reply