Berikut adalah contoh kode untuk membuat aplikasi nomor acak menggunakan JavaScript dan menerapkannya kedalam form HTML, dan CSS
HTML
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Nomor Acak</title>
<style>
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);
}
h1 {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Aplikasi Nomor Acak</h1>
<label for="min">Batas Bawah:</label>
<input type="number" id="min" min="0" required>
<label for="max">Batas Atas:</label>
<input type="number" id="max" min="0" required>
<button onclick="generateRandomNumber()">Generate</button>
<div class="result" id="result"></div>
</div>
<script>
function generateRandomNumber() {
var min = parseInt(document.getElementById('min').value);
var max = parseInt(document.getElementById('max').value);
var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
document.getElementById('result').innerHTML = "Nomor Acak: " + randomNumber;
}
</script>
</body>
</html>Output:
Aplikasi Nomor Acak
Anda dapat menyalin kode di atas dan menyimpannya dalam file dengan ekstensi .html. Kemudian, buka file tersebut menggunakan browser web untuk melihat aplikasi nomor acak yang telah dibuat.
Semoga contoh kode di atas dapat membantu Anda dalam membuat aplikasi nomor acak menggunakan JavaScript, HTML, dan CSS. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.
Leave a Reply