Membuat Aplikasi menghitung Kecepatan, Jarak, dan Waktu dengan JavaScript

Membuat Aplikasi menghitung Kecepatan, Jarak, dan Waktu dengan JavaScript

Berikut adalah cara Membuat Aplikasi menghitung Kecepatan, Jarak, dan Waktu dengan menggunakan JavaScript

See the Pen Aplikasi Kecepatan, Jarak, dan Waktu by WebbizID (@De-Orchids) on CodePen.

HTML

HTML
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Fisika</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Kalkulator Fisika</h1>
    <label for="kecepatan">Kecepatan (m/s):</label>
    <input type="number" id="kecepatan">
    <label for="jarak">Jarak (m):</label>
    <input type="number" id="jarak">
    <label for="waktu">Waktu (s):</label>
    <input type="number" id="waktu">
    <button onclick="hitung()">Hitung</button>
    <p id="hasil"></p>
    <script src="script.js"></script>
</body>
</html>
HTML

CSS

CSS
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

input, button {
    margin: 5px;
    padding: 5px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
CSS

JavaScript

JavaScript
function hitung() {
    const kecepatan = parseFloat(document.getElementById('kecepatan').value);
    const jarak = parseFloat(document.getElementById('jarak').value);
    const waktu = parseFloat(document.getElementById('waktu').value);

    if (!isNaN(kecepatan) && !isNaN(jarak) && !isNaN(waktu)) {
        const hasilKecepatan = jarak / waktu;
        const hasilJarak = kecepatan * waktu;
        const hasilWaktu = jarak / kecepatan;

        document.getElementById('hasil').innerHTML = `Kecepatan: ${hasilKecepatan} m/s, Jarak: ${hasilJarak} m, Waktu: ${hasilWaktu} s`;
    } else {
        document.getElementById('hasil').innerHTML = 'Masukkan angka yang valid untuk menghitung.';
    }
}
JavaScript

Semoga bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *