Added AC/DC Power Calculator (#1739)

Rakesh9100 · Aug 3, 2024 · 13e55bc · 13e55bc
1 parent c00c0c3
commit 13e55bc
Show file tree

Hide file tree

Showing 6 changed files with 340 additions and 0 deletions.
diff --git a/Calculators/AC-DC-Power-Calculator/README.md b/Calculators/AC-DC-Power-Calculator/README.md
@@ -0,0 +1,28 @@
+# <p align="center">AC/DC Power Calculator</p>
+
+## 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
diff --git a/Calculators/AC-DC-Power-Calculator/index.html b/Calculators/AC-DC-Power-Calculator/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>AC/DC Power Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Power Converter</h1>
+        <div id="selection-page">
+            <button onclick="showAcToDcForm()">Convert AC to DC</button>
+            <button onclick="showDcToAcForm()">Convert DC to AC</button>
+        </div>
+
+        <div id="conversion-form">
+            <form id="ac-to-dc-form" class="form" style="display: none;" onsubmit="convertACtoDC(event)">
+                <div class="form-group">
+                    <label for="acVoltage">Input AC Voltage (RMS):</label>
+                    <input type="number" id="acVoltage" placeholder="Enter AC Voltage" />
+                </div>
+
+                <div class="form-group">
+                    <label for="transformerRatio">Transformer Ratio:</label>
+                    <input type="number" id="transformerRatio" placeholder="Enter Transformer Ratio" value="2" />
+                </div>
+
+                <div class="form-group">
+                    <label for="rectifierType">Rectifier Type:</label>
+                    <select id="rectifierType">
+                        <option value="full">Full-wave</option>
+                        <option value="half">Half-wave</option>
+                    </select>
+                </div>
+
+                <button type="submit">Convert</button>
+
+                <div class="result" id="dcResult" style="display: none;">
+                    <h2>Output DC Voltage: <span id="dcVoltage"></span> V</h2>
+                </div>
+            </form>
+
+            <form id="dc-to-ac-form" class="form" style="display: none;" onsubmit="convertDCtoAC(event)">
+                <div class="form-group">
+                    <label for="dcVoltageInput">Input DC Voltage:</label>
+                    <input type="number" id="dcVoltageInput" placeholder="Enter DC Voltage" />
+                </div>
+
+                <div class="form-group">
+                    <label for="frequency">Frequency (Hz):</label>
+                    <input type="number" id="frequency" placeholder="Enter Frequency" value="50" />
+                </div>
+
+                <button type="submit">Convert</button>
+
+                <div class="result" id="acResult" style="display: none;">
+                    <h2>Output AC Voltage (RMS): <span id="acVoltageOutput"></span> V</h2>
+                </div>
+            </form>
+
+            <canvas id="graphCanvas"></canvas>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/AC-DC-Power-Calculator/script.js 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
@@ -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
@@ -211,6 +211,20 @@ <h3>Calculate the theoretical resistance of a 5-band resistor.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>AC/DC Power Calculator</h2>
+                <h3>Converts power values between AC and DC.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/AC-DC-Power-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/AC-DC-Power-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>ASCII Value Calculator</h2>