diff --git a/Calculators/AC-DC-Power-Calculator/README.md b/Calculators/AC-DC-Power-Calculator/README.md new file mode 100644 index 000000000..c3a7eea83 --- /dev/null +++ b/Calculators/AC-DC-Power-Calculator/README.md @@ -0,0 +1,28 @@ +#

AC/DC Power Calculator

+ +## Description :- + +The AC/DC Power Converter Calculator is a web-based tool designed to help users convert power values between alternating current (AC) and direct current (DC). It allows users to convert AC to DC and DC to AC, providing the output voltages for both conversions. It also draws graphs depicting the input and output power waveforms for clear visualization. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Features :- + +- The app allows users to select the type of conversion they want to perform: either AC to DC or DC to AC. +- This selection is handled by a dropdown menu in the form. +- Depending on the user's choice, the appropriate input fields (either for AC or DC parameters) are displayed. + +## Screenshots :- + +### Home Page +![image](https://github.com/user-attachments/assets/bec7aa25-9c03-4376-874d-a72748a4e597) + +### AC to DC +![image](https://github.com/user-attachments/assets/57a0a7ca-e63e-4787-95f2-02c8fc804508) + +### DC to AC +![image](https://github.com/user-attachments/assets/385acec9-4942-419d-b89d-aba0a3888158) diff --git a/Calculators/AC-DC-Power-Calculator/assets/background.jpg b/Calculators/AC-DC-Power-Calculator/assets/background.jpg new file mode 100644 index 000000000..8b1d9283b Binary files /dev/null and b/Calculators/AC-DC-Power-Calculator/assets/background.jpg differ diff --git a/Calculators/AC-DC-Power-Calculator/index.html b/Calculators/AC-DC-Power-Calculator/index.html new file mode 100644 index 000000000..7c7f6c838 --- /dev/null +++ b/Calculators/AC-DC-Power-Calculator/index.html @@ -0,0 +1,68 @@ + + + + + + + AC/DC Power Calculator + + +
+

Power Converter

+
+ + +
+ +
+ + + + + +
+
+ + + + diff --git a/Calculators/AC-DC-Power-Calculator/script.js b/Calculators/AC-DC-Power-Calculator/script.js new file mode 100644 index 000000000..a24a9e07c --- /dev/null +++ b/Calculators/AC-DC-Power-Calculator/script.js @@ -0,0 +1,129 @@ +function showAcToDcForm() { + document.getElementById('ac-to-dc-form').style.display = 'block'; + document.getElementById('dc-to-ac-form').style.display = 'none'; + clearInputs(); +} + +function showDcToAcForm() { + document.getElementById('dc-to-ac-form').style.display = 'block'; + document.getElementById('ac-to-dc-form').style.display = 'none'; + clearInputs(); +} + +function clearInputs() { + document.getElementById('acVoltage').value = ''; + document.getElementById('transformerRatio').value = '1'; + document.getElementById('rectifierType').value = 'full'; + document.getElementById('dcResult').style.display = 'none'; + + document.getElementById('dcVoltageInput').value = ''; + document.getElementById('frequency').value = '50'; + document.getElementById('acResult').style.display = 'none'; + + const canvas = document.getElementById('graphCanvas'); + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, canvas.width, canvas.height); +} + +function convertACtoDC(event) { + event.preventDefault(); // Prevent default form submission behavior + + const acVoltage = parseFloat(document.getElementById('acVoltage').value); + const transformerRatio = parseFloat(document.getElementById('transformerRatio').value); + const rectifierType = document.getElementById('rectifierType').value; + + if (isNaN(acVoltage) || isNaN(transformerRatio)) { + alert("Please enter valid numbers for AC Voltage and Transformer Ratio."); + return; + } + + const transformedAcVoltage = acVoltage * transformerRatio; + const peakAcVoltage = transformedAcVoltage * Math.sqrt(2); + + let dcVoltage; + if (rectifierType === 'half') { + dcVoltage = peakAcVoltage / 2; + } else if (rectifierType === 'full') { + dcVoltage = peakAcVoltage - 1.4; // Subtracting diode drops for full-wave rectification + } + + document.getElementById('dcVoltage').innerText = dcVoltage.toFixed(2); + document.getElementById('dcResult').style.display = 'block'; + drawGraph(acVoltage, dcVoltage, 'AC', 'DC'); +} + +function convertDCtoAC(event) { + event.preventDefault(); // Prevent default form submission behavior + + const dcVoltage = parseFloat(document.getElementById('dcVoltageInput').value); + const frequency = parseFloat(document.getElementById('frequency').value); + + if (isNaN(dcVoltage) || isNaN(frequency)) { + alert("Please enter valid numbers for DC Voltage and Frequency."); + return; + } + + // Assuming the RMS value for output AC voltage calculation + const acVoltageRMS = dcVoltage / Math.sqrt(2); + + document.getElementById('acVoltageOutput').innerText = acVoltageRMS.toFixed(2); + document.getElementById('acResult').style.display = 'block'; + drawGraph(dcVoltage, acVoltageRMS, 'DC', 'AC'); +} + +function drawGraph(inputVoltage, outputVoltage, inputLabel, outputLabel) { + const canvas = document.getElementById('graphCanvas'); + const ctx = canvas.getContext('2d'); + const width = canvas.width; + const height = canvas.height; + const midY = height / 2; + const scale = height / (Math.max(inputVoltage, outputVoltage) * 2); + + ctx.clearRect(0, 0, width, height); + + // Draw axes + ctx.beginPath(); + ctx.moveTo(0, midY); + ctx.lineTo(width, midY); // X-axis + ctx.moveTo(width / 2, 0); + ctx.lineTo(width / 2, height); // Y-axis + ctx.strokeStyle = 'black'; + ctx.stroke(); + + // Label axes + ctx.font = '12px Arial'; + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText('0', width / 2, midY + 15); // X-axis label + ctx.fillText('Voltage', width / 2 - 40, 10); // Y-axis label, adjust as needed + + // Draw input waveform (AC or DC) + ctx.beginPath(); + ctx.moveTo(0, midY); + for (let x = 0; x < width; x++) { + const angle = (x / width) * 2 * Math.PI; + const y = midY - Math.sin(angle) * inputVoltage * scale; + ctx.lineTo(x, y); + } + ctx.strokeStyle = 'blue'; + ctx.stroke(); + + // Label input waveform + ctx.fillStyle = 'blue'; + ctx.fillText(inputLabel, width - 40, midY - inputVoltage * scale - 10); + + // Draw output waveform (DC or AC) + ctx.beginPath(); + ctx.moveTo(0, midY); + for (let x = 0; x < width; x++) { + const angle = (x / width) * 2 * Math.PI; + const y = midY - Math.sin(angle) * outputVoltage * scale; + ctx.lineTo(x, y); + } + ctx.strokeStyle = 'red'; + ctx.stroke(); + + // Label output waveform + ctx.fillStyle = 'red'; + ctx.fillText(outputLabel, width - 40, midY - outputVoltage * scale + 20); +} diff --git a/Calculators/AC-DC-Power-Calculator/style.css b/Calculators/AC-DC-Power-Calculator/style.css new file mode 100644 index 000000000..4945abc95 --- /dev/null +++ b/Calculators/AC-DC-Power-Calculator/style.css @@ -0,0 +1,101 @@ +body { + font-family: Arial, sans-serif; + background-color: #f5f5f5; + background-image: url('assets/background.jpg'); + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + text-align: center; + width: 350px; + animation: fadeIn 1s ease-in-out; +} + +h1 { + margin-bottom: 20px; + color: #333; + font-size: 24px; +} + +form { + display: flex; + flex-direction: column; +} + +.form-group { + display: flex; + flex-direction: column; + margin-bottom: 15px; +} + +.form-group label { + margin-bottom: 5px; + color: #555; +} + +input, select { + padding: 10px; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 16px; +} + +button { + padding: 12px; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +#result { + margin-top: 20px; +} + +button { + margin-bottom: 10px; + background-color: #28a745; +} + +button:hover { + background-color: #218838; +} + +#selection-page button:first-child { + background-color: #ffc107; +} + +#selection-page button:first-child:hover { + background-color: #e0a800; +} + +.result h2 { + color: #ff5722; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/index.html b/index.html index 8cfae36c0..33e73758a 100644 --- a/index.html +++ b/index.html @@ -211,6 +211,20 @@

Calculate the theoretical resistance of a 5-band resistor.

+
+
+

AC/DC Power Calculator

+

Converts power values between AC and DC.

+
+ + + + + Source Code + +
+
+

ASCII Value Calculator