Calculate Length Using Diameter

by

var diameter = document.getElementById(‘diameter’);
var lengthOutput = document.getElementById(‘length’);
var circumferenceOutput = document.getElementById(‘circumference’);
var areaOutput = document.getElementById(‘area’);
var radiusOutput = document.getElementById(‘radius’);
var explanation = document.getElementById(‘explanation’);
var tableBody = document.getElementById(‘tableBody’);
var copyResultBtn = document.getElementById(‘copyResultBtn’);
var resultContainer = document.getElementById(‘resultContainer’);
var ctx = document.getElementById(‘chart’).getContext(‘2d’);
var chartData = {
labels: [‘Length’, ‘Circumference’, ‘Area’, ‘Radius’],
datasets: [{\n label: ‘Results’,\n data: [0, 0, 0, 0],\n backgroundColor: [‘#004a99’, ‘#28a745’, ‘#ffc107’, ‘#dc3545’]\n }]\n};\nvar myChart = new Chart(ctx, {\n type: ‘bar’,\n data: chartData,\n options: {\n responsive: true,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n});\nfunction calculate() {\n var d = parseFloat(diameter.value);\n if (isNaN(d) || d <= 0) {\n lengthOutput.textContent = 'N/A';\n circumferenceOutput.textContent = 'N/A';\n areaOutput.textContent = 'N/A';\n radiusOutput.textContent = 'N/A';\n resultContainer.style.display = 'none';\n return;\n }\n var l = d * Math.PI;\n var c = 2 * Math.PI * d;\n var a = Math.PI * Math.pow(d / 2, 2);\n var r = d / 2;\n lengthOutput.textContent = l.toFixed(4);\n circumferenceOutput.textContent = c.toFixed(4);\n areaOutput.textContent = a.toFixed(4);\n radiusOutput.textContent = r.toFixed(4);\n resultContainer.style.display = 'block';\n chartData.datasets[0].data = [l, c, a, r];\n myChart.update();\n var tableHTML = ' Length ‘ + l.toFixed(4) + ‘ Circumference ‘ + c.toFixed(4) + ‘ Area ‘ + a.toFixed(4) + ‘ Radius ‘ + r.toFixed(4) + ‘

‘;\n tableBody.innerHTML = tableHTML;\n explanation.textContent = ‘Length = ‘ + d + ‘ × π = ‘ + l.toFixed(4);’ ; \n}\nfunction copyResults() {\n var copyText = ‘Diameter: ‘ + diameter.value + ‘\\nLength: ‘ + lengthOutput.textContent + ‘\\nCircumference: ‘ + circumferenceOutput.textContent + ‘\\nArea: ‘ + areaOutput.textContent + ‘\\nRadius: ‘ + radiusOutput.textContent; \n navigator.clipboard.writeText(copyText);\n}\nfunction reset() {\n diameter.value = ”;\n lengthOutput.textContent = ‘N/A’;\n circumferenceOutput.textContent = ‘N/A’;\n areaOutput.textContent = ‘N/A’;\n radiusOutput.textContent = ‘N/A’;\n resultContainer.style.display = ‘none’;\n chartData.datasets[0].data = [0, 0, 0, 0];\n myChart.update();\n}\n\n\n\n\n\n\n

\n

Results

\n

Length:

\n

Circumference:

\n

Area:

\n

Radius:

\n

\n

\n\n

\n

\n

\n

\n

\n

\n

\n

\n

Property Value

\n\n\n\n\n\nvar diameter = document.getElementById(‘diameter’);\nvar lengthOutput = document.getElementById(‘length’);\nvar circumferenceOutput = document.getElementById(‘circumference’);\nvar areaOutput = document.getElementById(‘area’);\nvar radiusOutput = document.getElementById(‘radius’);\nvar explanation = document.getElementById(‘explanation’);\nvar tableBody = document.getElementById(‘tableBody’);\nvar copyResultBtn = document.getElementById(‘copyResultBtn’);\nvar resultContainer = document.getElementById(‘resultContainer’);\nvar ctx = document.getElementById(‘chart’).getContext(‘2d’);\nvar chartData = {\n labels: [‘Length’, ‘Circumference’, ‘Area’, ‘Radius’],\n datasets: [{\n label: ‘Results’,\n data: [0, 0, 0, 0],\n backgroundColor: [‘#004a99’, ‘#28a745’, ‘#ffc107’, ‘#dc3545’]\n }]\n};\nvar myChart = new Chart(ctx, {\n type: ‘bar’,\n data: chartData,\n options: {\n responsive: true,\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n});\nfunction calculate() {\n var d = parseFloat(diameter.value);\n if (isNaN(d) || d <= 0) {\n lengthOutput.textContent = 'N/A';\n circumferenceOutput.textContent = 'N/A';\n areaOutput.textContent = 'N/A';\n radiusOutput.textContent = 'N/A';\n resultContainer.style.display = 'none';\n return;\n }\n var l = d * Math.PI;\n var c = 2 * Math.PI * d;\n var a = Math.PI * Math.pow(d / 2, 2);\n var r = d / 2;\n lengthOutput.textContent = l.toFixed(4);\n circumferenceOutput.textContent = c.toFixed(4);\n areaOutput.textContent = a.toFixed(4);\n radiusOutput.textContent = r.toFixed(4);\n resultContainer.style.display = 'block';\n chartData.datasets[0].data = [l, c, a, r];\n myChart.update();\n var tableHTML = ' Length ‘ + l.toFixed(4) + ‘ Circumference ‘ + c.toFixed(4) + ‘ Area ‘ + a.toFixed(4) + ‘ Radius ‘ + r.toFixed(4) + ‘

‘;\n tableBody.innerHTML = tableHTML;\n explanation.textContent = ‘Length = ‘ + d + ‘ × π = ‘ + l.toFixed(4);’ ; \n}\nfunction copyResults() {\n var copyText = ‘Diameter: ‘ + diameter.value + ‘\\nLength: ‘ + lengthOutput.textContent + ‘\\nCircumference: ‘ + circumferenceOutput.textContent + ‘\\nArea: ‘ + areaOutput.textContent + ‘\\nRadius: ‘ + radiusOutput.textContent; \n navigator.clipboard.writeText(copyText);\n}\nfunction reset() {\n diameter.value = ”;\n lengthOutput.textContent = ‘N/A’;\n circumferenceOutput.textContent = ‘N/A’;\n areaOutput.textContent = ‘N/A’;\n radiusOutput.textContent = ‘N/A’;\n resultContainer.style.display = ‘none’;\n chartData.datasets[0].data = [0, 0, 0, 0];\n myChart.update();\n}\n\n\n\n\n\n\n

\n

Results

\n

Length:

\n <

Leave a Comment