Cara Membuat Grade Nilai di JavaScript

By Posted on

Cara Membuat Grade Nilai di JavaScript – Dalam dunia pemrograman JavaScript, konsep “Grade Nilai” merujuk pada evaluasi nilai atau skor yang diberikan kepada siswa berdasarkan prestasi atau kinerja mereka dalam tes, ujian, atau tugas.

Dalam hal ini kita dapat mengimplementasikan sistem ini untuk menilai dan memberikan nilai berdasarkan kriteria tertentu, seperti jumlah jawaban yang benar atau metrik penilaian lainnya. Pada kesempatan kali ini kelasjava akan memberikan tutorial untuk membuat pengecekan grade nilai di JS, dibawah ini adalah ketentuan dalam pembuatan program mengecek grade nilai.

  1. Penentuan Kriteria Penilaian: Tentukan kriteria yang akan digunakan untuk menilai kinerja siswa, seperti persentase jawaban yang benar atau skala penilaian lainnya.
  2. Perolehan Nilai: Dapatkan nilai atau skor dari siswa, baik itu melalui formulir input atau perhitungan otomatis, tergantung pada konteks aplikasi yang digunakan.
  3. Perhitungan Grade: Hitung grade atau nilai akhir berdasarkan nilai yang diperoleh dan kriteria penilaian yang telah ditetapkan. Ini bisa dilakukan dengan menggunakan pernyataan if-else atau logika lainnya untuk menentukan grade berdasarkan rentang nilai tertentu.
Baca Juga:   Cara Membuat Validasi Form dengan JavaScript

Hal yang Dibutuhkan untuk Membuat Grade Nilai di JavaScript

Sebelum memulai proyek untuk membuat Grade Nilai di JavaScript, pastikan kamu telah menyiapkan beberapa hal berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Setelah semua persiapan telah dilakukan, kita bisa langsung memulai proses pembuatan program untuk mengecek Grade Nilai di JavaScript.

Cara Mudah Membuat Grade Nilai di JavaScript

1. Siapkan Folder dan File

Buatlah struktur folder untuk proyek Grade Nilai di mana nanti didalam folder tersebut terdapat file HTML, CSS, dan JavaScript, untuk contoh struktur foldernya sebagai berikut:

Proyek Grade Nilai

  • index.html
  • style.css
  • script.js

2. Coding File HTML

Buat file HTML (index.html) dan tambahkan struktur dasar HTML untuk halaman web, berikut kode HTML yang bisa kamu salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Grade Nilai</h1>
    <label for="nilai">Masukkan nilai:</label>
    <input type="text" id="nilai" placeholder="Masukkan nilai di sini">
    <button onclick="cekNilai()">Cek</button>
    <p id="output">Grade Anda akan ditampilkan di sini</p>

    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS

Tambahkan styling CSS untuk mempercantik tampilan halaman web, berikut kode CSS yang bisa kamu salin dibawah ini.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

label {
    margin-bottom: 10px;
    display: block;
}

input[type="text"] {
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

#output {
    font-size: 18px;
    color: #555;
}

4. Coding File JavaScript

Buat skrip JavaScript untuk mengecek nilai dan menampilkan grade sesuai dengan kondisi, berikut dibawah ini adalah kode JS yang bisa kamu salin.

function cekNilai() {
    // Ambil nilai dari input
    const nilai = parseFloat(document.getElementById('nilai').value);

    // Ambil elemen output
    const output = document.getElementById('output');

    // Pengecekan nilai dan menampilkan grade
    if (!isNaN(nilai)) {
        if (nilai >= 80) {
            output.innerText = 'Grade Anda: A';
        } else if (nilai >= 70) {
            output.innerText = 'Grade Anda: B';
        } else if (nilai >= 60) {
            output.innerText = 'Grade Anda: C';
        } else if (nilai >= 50) {
            output.innerText = 'Grade Anda: D';
        } else {
            output.innerText = 'Grade Anda: E';
        }
    } else {
        output.innerText = 'Masukkan nilai yang valid';
    }
}

5. Jalankan Kode

Buka file index.html menggunakan browser web untuk melihat hasilnya, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi Open in Browser.

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat program untuk mengecek Grade Nilai di JavaScript dan kamu akan melihat formulir untuk memasukkan nilai, tombol untuk memeriksa nilai, dan output yang menampilkan grade sesuai dengan nilai yang dimasukkan.

Akhir Kata

Dengan memahami konsep Grade Nilai di JavaScript dan mengikuti langkah-langkah pembuatannya, kamu dapat menciptakan program yang efektif untuk menilai kinerja siswa atau bahkan dalam konteks lainnya. Selamat mencoba!

Related posts: