{"id":105,"date":"2025-10-03T23:36:46","date_gmt":"2025-10-03T18:06:46","guid":{"rendered":"https:\/\/bestpicky.net\/calculators\/?page_id=105"},"modified":"2025-10-03T23:36:46","modified_gmt":"2025-10-03T18:06:46","slug":"percentage-to-cgpa-calculator-online","status":"publish","type":"page","link":"https:\/\/bestpicky.net\/calculators\/percentage-to-cgpa-calculator-online\/","title":{"rendered":"Percentage to CGPA Calculator Online 2025"},"content":{"rendered":"\n<!-- Percentage to CGPA Calculator Start -->\n<div class=\"cgpa-calculator\">\n  <h2>Percentage to CGPA Calculator<\/h2>\n  <p>Enter your Percentage and choose a Grade Scale<\/p>\n\n  <label>Enter your Percentage (0-100):<\/label>\n  <input id=\"percentageInput\" type=\"number\" min=\"0\" max=\"100\" step=\"0.01\">\n\n  <label>Select Grade Scale:<\/label>\n  <select id=\"scaleSelect\">\n    <option value=\"10\">10.0 Scale (Out of 10)<\/option>\n    <option value=\"4\">4.0 Scale (US\/International)<\/option>\n    <option value=\"5\">5.0 Scale (Some Universities)<\/option>\n  <\/select>\n\n  <button id=\"calculateBtn\">Calculate<\/button>\n\n  <div id=\"result\"><\/div>\n\n  <canvas id=\"pieChart\"><\/canvas>\n<\/div>\n\n<style>\n.cgpa-calculator {\n  background: #ffffff;\n  padding: 30px;\n  border-radius: 15px;\n  box-shadow: 0 6px 18px rgba(0,0,0,0.1);\n  max-width: 500px;\n  width: 90%;\n  margin: 20px auto;\n  font-family: system-ui, sans-serif;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.cgpa-calculator h2 {\n  color: #0D6EFD;\n  margin-bottom: 10px;\n  font-size: 22px;\n}\n\n.cgpa-calculator p {\n  color: #555;\n  margin-bottom: 20px;\n  font-size: 16px;\n}\n\n.cgpa-calculator label {\n  font-weight: bold;\n  color: #0D6EFD;\n  display: block;\n  margin-bottom: 8px;\n  font-size: 15px;\n  text-align: left;\n}\n\n.cgpa-calculator input[type=\"number\"],\n.cgpa-calculator select {\n  width: 100%;\n  padding: 12px;\n  border-radius: 8px;\n  border: 1px solid #ccc;\n  margin-bottom: 15px;\n  font-size: 15px;\n  outline: none;\n  box-sizing: border-box;\n}\n\n\/* \u2705 Fix: Show full text inside dropdown options *\/\n.cgpa-calculator select option {\n  white-space: normal; \n  padding: 8px;\n}\n\n.cgpa-calculator button {\n  width: 100%;\n  padding: 12px;\n  background: #0D6EFD;\n  color: #fff;\n  border: none;\n  border-radius: 8px;\n  font-weight: 600;\n  cursor: pointer;\n  margin-bottom: 20px;\n}\n\n.cgpa-calculator #result {\n  font-size: 16px;\n  color: #000;\n  margin-bottom: 20px;\n  text-align: left;\n}\n\n.cgpa-calculator canvas {\n  max-width: 250px;\n  max-height: 250px;\n  width: 100%;\n  height: auto;\n  margin: 0 auto;\n  display: block;\n}\n\n@media (max-width: 600px) {\n  .cgpa-calculator {\n    padding: 20px;\n  }\n  .cgpa-calculator h2 {\n    font-size: 20px;\n  }\n  .cgpa-calculator p, .cgpa-calculator label {\n    font-size: 14px;\n  }\n  .cgpa-calculator input[type=\"number\"], \n  .cgpa-calculator select,\n  .cgpa-calculator button {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n<\/style>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script>\nconst percentageInput = document.getElementById('percentageInput');\nconst scaleSelect = document.getElementById('scaleSelect');\nconst calculateBtn = document.getElementById('calculateBtn');\nconst result = document.getElementById('result');\nconst ctx = document.getElementById('pieChart').getContext('2d');\n\n\/\/ Initial Pie Chart\nlet pieChart = new Chart(ctx, {\n    type: 'pie',\n    data: {\n        labels: ['Achieved Grade', 'Remaining'],\n        datasets: [{\n            data: [0, 10], \/\/ default on 10 scale\n            backgroundColor: ['#0D6EFD', '#eee'],\n            borderColor: ['#0D6EFD', '#eee'],\n            borderWidth: 1\n        }]\n    },\n    options: {\n        responsive: true,\n        plugins: {\n            legend: { position: 'bottom', labels: { color:'#000', font:{size:14} } }\n        }\n    }\n});\n\ncalculateBtn.addEventListener('click', () => {\n    let percentage = parseFloat(percentageInput.value);\n    if(isNaN(percentage) || percentage < 0 || percentage > 100){\n        alert('Please enter a valid Percentage between 0 and 100.');\n        return;\n    }\n\n    let scale = parseInt(scaleSelect.value);\n    let cgpa10 = (percentage \/ 9.5);\n    if (cgpa10 > 10) cgpa10 = 10;\n\n    let finalValue;\n\n    if(scale === 10){\n        finalValue = cgpa10;\n    } \n    else if(scale === 4){\n        finalValue = (cgpa10 \/ 10) * 4;\n    } \n    else if(scale === 5){\n        finalValue = (cgpa10 \/ 10) * 5;\n    }\n\n    finalValue = finalValue.toFixed(2);\n\n    result.innerHTML = `\n      <strong>Results:<\/strong><br>\n      Your GPA on ${scale}.0 Scale: <b>${finalValue}<\/b>\n    `;\n\n    \/\/ Update Pie Chart according to scale\n    pieChart.data.datasets[0].data[0] = finalValue;\n    pieChart.data.datasets[0].data[1] = (scale - finalValue).toFixed(2);\n    pieChart.update();\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Percentage to CGPA Calculator Enter your Percentage and choose a Grade Scale Enter your Percentage (0-100): Select Grade Scale: 10.0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/pages\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":9,"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/pages\/105\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/bestpicky.net\/calculators\/wp-json\/wp\/v2\/media?parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}