Membuat Aplikasi menghitung Kecepatan, Jarak, dan Waktu dengan JavaScript

Membuat Aplikasi menghitung Kecepatan, Jarak, dan Waktu dengan JavaScript

—

by

Webbiz.ID
in ,

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

Artikel Terbaru ⭐