Mencari Mean, Median, Modus, Max, dan Min Dengan Javascript

Ini adalah kode javascript untuk statistik dasar yang sangat sederhana. Yakni mencari Nilai dari Mean, Median, Modus, Min dan Max dari sederet angka yang diinput. Isian dinamis, button tambah (bisa dengan mode enter), button hapus, button hitung dan button reset.




Hasil


 <!DOCTYPE html>  
 <html lang="id">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Mean, Median, Modus, Max, dan Min</title>  
   <style>  
     body { font-family: Arial, sans-serif; }  
     .jarakisian { margin-bottom: 10px; }  
   </style>  
 </head>  
 <body>  
 <h1>Mencari Mean, Median, Modus, Max, dan Min</h1>  
 <div id="inputan">  
   <div class="jarakisian">  
     <input type="number" class="isian" placeholder="Masukkan angka" required>  
   </div>  
 </div>  
 <button id="tambahin">➕ (atau tekan enter)</button>  
 <br><br>  
 <button id="hitungin">Hitung</button>  
 <br><br>  
 <button id="resetin">Reset</button>  
 <h2>Hasil</h2>  
 <div id="hasilnya"></div>  
 <script>  
   function tambahNilai() {  
     const isianInput = document.getElementById('inputan');  
     const isianBaru = document.createElement('div');  
     isianBaru.className = 'jarakisian';  
     isianBaru.innerHTML = `  
       <input type="number" class="isian" placeholder="Masukkan angka" required>  
       <button class="del-btn">❌</button>  
     `;  
     isianInput.appendChild(isianBaru);  
     const inputBaru = isianBaru.querySelector('input');  
     inputBaru.focus();  
     isianBaru.querySelector('.del-btn').addEventListener('click', function() {  
       isianInput.removeChild(isianBaru);  
     });  
   }  
   document.getElementById('tambahin').addEventListener('click', tambahNilai);  
   document.getElementById("inputan").addEventListener("keypress", (event) => {  
       if (event.key === "Enter") {  
         tambahNilai();  
       }  
     });  
   document.getElementById('hitungin').addEventListener('click', function() {  
     const inputs = document.querySelectorAll('.isian');  
     const numbers = Array.from(inputs).map(input => parseFloat(input.value)).filter(num => !isNaN(num));  
     if (numbers.length < 1) {  
       alert('Masukkan setidaknya satu angka.');  
       return;  
     }  
     const mean = MeanNya(numbers);  
     const median = MedianNya(numbers);  
     const mode = ModeNya(numbers);  
     const max = Math.max(...numbers);  
     const min = Math.min(...numbers);  
     document.getElementById('hasilnya').innerHTML = `  
       Mean: ${mean} <br>  
       Median: ${median} <br>  
       Modus: ${mode} <br>  
       Max: ${max} <br>  
       Min: ${min}  
     `;  
   });  
   function MeanNya(numbers) {  
     const total = numbers.reduce((sum, num) => sum + num, 0);  
     return total / numbers.length;  
   }  
   function MedianNya(numbers) {  
     const sorted = [...numbers].sort((a, b) => a - b);  
     const mid = Math.floor(sorted.length / 2);  
     return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];  
   }  
   function ModeNya(numbers) {  
     const frequency = {};  
     numbers.forEach(num => frequency[num] = (frequency[num] || 0) + 1);  
     const maxFreq = Math.max(...Object.values(frequency));  
     const modes = Object.keys(frequency).filter(num => frequency[num] === maxFreq).map(Number);  
     return modes.length === numbers.length ? "Tak ada modus diantara kita" : modes.join(", ");  
   }  
   document.getElementById('resetin').addEventListener('click', function() {  
     const isianInput = document.getElementById('inputan');  
     const inputs = isianInput.querySelectorAll('.isian');  
     inputs.forEach(input => {  
       input.value = '';  
     });  
     while (isianInput.children.length > 1) {  
       isianInput.removeChild(isianInput.lastElementChild);  
     }  
     document.getElementById('hasilnya').innerHTML = '';  
   });  
 </script>  
 </body>  
 </html>

Komentar

Posting Komentar