{"id":8181,"date":"2025-09-02T08:08:10","date_gmt":"2025-09-02T08:08:10","guid":{"rendered":"https:\/\/ccitonline.com\/wp\/?p=8181"},"modified":"2025-09-02T08:08:10","modified_gmt":"2025-09-02T08:08:10","slug":"agus-learning-progress-npm-2506694625-2","status":"publish","type":"post","link":"https:\/\/ccitonline.com\/wp\/2025\/09\/02\/agus-learning-progress-npm-2506694625-2\/","title":{"rendered":"[Agus&#8217; Learning Progress \u2013 NPM. 2506694625]"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Kalkulator Kecepatan RMS Gas<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f0f2f5;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            flex-direction: column;\n        }\n        .container {\n            background-color: #ffffff;\n            padding: 25px 30px;\n            border-radius: 10px;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n            width: 100%;\n            max-width: 600px;\n            margin-bottom: 20px;\n        }\n        h2 {\n            text-align: center;\n            color: #1c1e21;\n            margin-top: 0;\n            margin-bottom: 20px;\n        }\n        .input-group {\n            display: flex;\n            gap: 10px;\n            margin-bottom: 18px;\n        }\n        .input-group label, .input-group input, .input-group select {\n            flex: 1;\n        }\n        label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 600;\n            color: #333;\n        }\n        input[type=\"text\"], input[type=\"number\"], select {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid #dddfe2;\n            border-radius: 6px;\n            box-sizing: border-box;\n            font-size: 16px;\n        }\n        button {\n            background-color: #28a745;\n            color: white;\n            padding: 12px 15px;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            width: 100%;\n            font-size: 16px;\n            font-weight: bold;\n            transition: background-color 0.2s;\n        }\n        button:hover {\n            background-color: #218838;\n        }\n        #hasil {\n            margin-top: 20px;\n            padding: 15px;\n            background-color: #e9ecef;\n            border-radius: 6px;\n            line-height: 1.7;\n        }\n        .error { color: #d93025; font-weight: bold; }\n        .sukses { color: #0056b3; font-weight: bold; }\n        .formula { font-family: 'Courier New', Courier, monospace; background-color: #e0e0e0; padding: 2px 6px; border-radius: 4px; }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"container\">\n        <h2>Kalkulator Kecepatan RMS Kinetik Gas &#x1f4a8;<\/h2>\n\n        <label for=\"rumusKimia\">Rumus Kimia Molekul Gas:<\/label>\n        <input type=\"text\" id=\"rumusKimia\" placeholder=\"Contoh: O2, N2, CH4\">\n\n        <div class=\"input-group\">\n            <div>\n                <label for=\"suhuGas\">Suhu Gas:<\/label>\n                <input type=\"number\" id=\"suhuGas\" placeholder=\"Contoh: 25\">\n            <\/div>\n            <div>\n                <label for=\"unitSuhu\">Unit:<\/label>\n                <select id=\"unitSuhu\">\n                    <option value=\"C\" selected>Celcius (\u00b0C)<\/option>\n                    <option value=\"K\">Kelvin (K)<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <button onclick=\"hitungSemua()\">Hitung Kecepatan RMS<\/button>\n\n        <div id=\"hasil\"><\/div>\n    <\/div>\n    \n    <div class=\"container\">\n        <h3>Grafik Kecepatan RMS (v) vs Suhu (T)<\/h3>\n        <canvas id=\"grafikKecepatan\"><\/canvas>\n    <\/div>\n\n    <script>\n        \/\/ Database massa atom relatif (Ar)\n        const tabelPeriodik = {\n            'H': 1.008, 'He': 4.003, 'Li': 6.941, 'Be': 9.012, 'B': 10.81, 'C': 12.01,\n            'N': 14.01, 'O': 16.00, 'F': 19.00, 'Ne': 20.18, 'Na': 22.99, 'Mg': 24.31,\n            'Al': 26.98, 'Si': 28.09, 'P': 30.97, 'S': 32.07, 'Cl': 35.45, 'Ar': 39.95,\n            'K': 39.10, 'Ca': 40.08, 'Fe': 55.85, 'Cu': 63.55, 'Zn': 65.38, 'Br': 79.90,\n        };\n        const R = 8.314; \/\/ Konstanta gas ideal (J\/mol\u00b7K)\n        let chartInstance; \/\/ Variabel untuk menyimpan instance grafik\n\n        function parseMr(rumus) {\n            const regex = \/([A-Z][a-z]*)(\\d*)\/g;\n            let match;\n            let mr = 0;\n            let detailPerhitungan = [];\n\n            if (!\/^[A-Z]\/.test(rumus) || \/[^A-Za-z0-9]\/.test(rumus)) {\n                throw new Error(`Format rumus kimia tidak valid.`);\n            }\n\n            let sisaRumus = rumus;\n            while ((match = regex.exec(rumus)) !== null) {\n                const unsur = match[1];\n                const jumlah = match[2] ? parseInt(match[2]) : 1;\n                sisaRumus = sisaRumus.replace(match[0], '');\n\n                if (!tabelPeriodik[unsur]) {\n                    throw new Error(`Unsur \"${unsur}\" tidak ditemukan di database.`);\n                }\n                \n                const ar = tabelPeriodik[unsur];\n                mr += ar * jumlah;\n                detailPerhitungan.push(`${jumlah} \u00d7 Ar ${unsur} (${ar})`);\n            }\n            if(sisaRumus.length > 0) throw new Error(`Format rumus kimia tidak valid pada bagian: \"${sisaRumus}\"`);\n\n            return { mr, detail: detailPerhitungan.join(' + ') };\n        }\n\n        function hitungSemua() {\n            const rumus = document.getElementById('rumusKimia').value.trim();\n            const suhu = parseFloat(document.getElementById('suhuGas').value);\n            const unit = document.getElementById('unitSuhu').value;\n            const hasilDiv = document.getElementById('hasil');\n\n            if (!rumus || isNaN(suhu)) {\n                hasilDiv.innerHTML = '<p class=\"error\">Harap masukkan semua input yang valid!<\/p>';\n                return;\n            }\n\n            try {\n                \/\/ 1. Hitung Massa Molekul (Mr)\n                const dataMr = parseMr(rumus);\n                const Mr_g_mol = dataMr.mr;\n                const Mr_kg_mol = Mr_g_mol \/ 1000; \/\/ Konversi ke kg\/mol untuk rumus RMS\n\n                \/\/ 2. Konversi Suhu ke Kelvin\n                let T_kelvin = suhu;\n                let detailSuhu = `${suhu.toFixed(2)} K`;\n                if (unit === 'C') {\n                    T_kelvin = suhu + 273.15;\n                    detailSuhu = `${suhu}\u00b0C + 273.15 = ${T_kelvin.toFixed(2)} K`;\n                }\n                if (T_kelvin < 0) throw new Error(\"Suhu absolut tidak boleh di bawah 0 K.\");\n\n                \/\/ 3. Hitung Kecepatan RMS\n                const v_rms = Math.sqrt((3 * R * T_kelvin) \/ Mr_kg_mol);\n\n                \/\/ 4. Tampilkan Hasil Perhitungan\n                hasilDiv.innerHTML = `\n                    <h4>1. Perhitungan Massa Molekul (M)<\/h4>\n                    <p>Detail: ${dataMr.detail}<\/p>\n                    <p><b>Massa Molar (M)<\/b> = ${Mr_g_mol.toFixed(3)} g\/mol = <span class=\"sukses\">${Mr_kg_mol.toFixed(5)} kg\/mol<\/span><\/p>\n                    <hr>\n                    <h4>2. Perhitungan Kecepatan RMS (v_rms)<\/h4>\n                    <p>Rumus: <span class=\"formula\">v_rms = \u221a(3RT \/ M)<\/span><\/p>\n                    <p>\n                        <ul>\n                            <li><b>R<\/b> (Konstanta Gas Ideal) = ${R} J\/mol\u00b7K<\/li>\n                            <li><b>T<\/b> (Suhu Absolut) = ${detailSuhu}<\/li>\n                            <li><b>M<\/b> (Massa Molar) = ${Mr_kg_mol.toFixed(5)} kg\/mol<\/li>\n                        <\/ul>\n                    <\/p>\n                    <p>Substitusi: <span class=\"formula\">v_rms = \u221a((3 \u00d7 ${R} \u00d7 ${T_kelvin.toFixed(2)}) \/ ${Mr_kg_mol.toFixed(5)})<\/span><\/p>\n                    <p><b>Hasil Kecepatan RMS (v_rms) = <span class=\"sukses\" style=\"font-size:1.2em\">${v_rms.toFixed(2)} m\/s<\/span><\/b><\/p>\n                `;\n                \n                \/\/ 5. Buat atau update grafik\n                buatGrafik(Mr_kg_mol, T_kelvin, v_rms, rumus);\n\n            } catch (error) {\n                hasilDiv.innerHTML = `<p class=\"error\">Error: ${error.message}<\/p>`;\n            }\n        }\n        \n        function buatGrafik(massaMolarKg, suhuHitung, vRmsHitung, namaGas) {\n            const ctx = document.getElementById('grafikKecepatan').getContext('2d');\n            \n            \/\/ Hancurkan grafik lama jika ada\n            if (chartInstance) {\n                chartInstance.destroy();\n            }\n\n            const labels = [];\n            const dataKecepatan = [];\n            const suhuMaks = suhuHitung * 1.5 < 400 ? 400 : suhuHitung * 1.5;\n\n            \/\/ Generate data points untuk kurva\n            for (let T = 0; T <= suhuMaks; T += suhuMaks\/20) {\n                labels.push(T.toFixed(0));\n                if (T === 0) {\n                    dataKecepatan.push(0);\n                } else {\n                    dataKecepatan.push(Math.sqrt((3 * R * T) \/ massaMolarKg));\n                }\n            }\n\n            chartInstance = new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: labels,\n                    datasets: [{\n                        label: `Kecepatan RMS ${namaGas}`,\n                        data: dataKecepatan,\n                        borderColor: 'rgba(0, 123, 255, 1)',\n                        backgroundColor: 'rgba(0, 123, 255, 0.1)',\n                        fill: true,\n                        tension: 0.1\n                    }, {\n                        label: 'Titik Perhitungan Anda',\n                        data: [{x: suhuHitung, y: vRmsHitung}],\n                        borderColor: 'rgba(220, 53, 69, 1)',\n                        backgroundColor: 'rgba(220, 53, 69, 1)',\n                        pointRadius: 6,\n                        pointHoverRadius: 8,\n                        type: 'bubble' \/\/ Tipe bubble untuk menandai titik spesifik\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    scales: {\n                        x: {\n                            type: 'linear',\n                            title: {\n                                display: true,\n                                text: 'Suhu (K)',\n                                font: { size: 14 }\n                            }\n                        },\n                        y: {\n                            beginAtZero: true,\n                            title: {\n                                display: true,\n                                text: 'Kecepatan RMS (m\/s)',\n                                font: { size: 14 }\n                            }\n                        }\n                    },\n                    plugins: {\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    return `v_rms: ${context.parsed.y.toFixed(2)} m\/s pada ${context.parsed.x.toFixed(2)} K`;\n                                }\n                            }\n                        }\n                    }\n                }\n            });\n        }\n    <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kalkulator Kecepatan RMS Gas Kalkulator Kecepatan RMS Kinetik Gas &#x1f4a8; Rumus Kimia Molekul Gas: Suhu Gas: Unit: Celcius (\u00b0C)Kelvin (K) Hitung Kecepatan RMS Grafik Kecepatan RMS (v) vs Suhu (T)<\/p>\n","protected":false},"author":194,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-8181","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/users\/194"}],"replies":[{"embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/comments?post=8181"}],"version-history":[{"count":1,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8181\/revisions"}],"predecessor-version":[{"id":8209,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/posts\/8181\/revisions\/8209"}],"wp:attachment":[{"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/media?parent=8181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/categories?post=8181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ccitonline.com\/wp\/wp-json\/wp\/v2\/tags?post=8181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}