Rakesh9100 · Rakesh9100 · May 27, 2024 · May 23, 2024 · May 23, 2024 · May 24, 2024
diff --git a/Calculators/Electric-Power-Calculator/README.md b/Calculators/Electric-Power-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Electric Power Calculator</p>
+
+## Description :-
+
+The Electric Power Calculator is a user-friendly tool designed to calculate electrical power based on the input voltage and current. By entering the voltage and current values, the calculator computes the power in watts and displays the result instantly. Additionally, it keeps a history of all calculations, allowing users to track their previous computations. This enhanced version features a modern, responsive design with animations and improved styling for a better user experience.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/d02ff2c1-e283-4583-8362-98a214540602)
diff --git a/Calculators/Electric-Power-Calculator/index.html b/Calculators/Electric-Power-Calculator/index.html
@@ -0,0 +1,29 @@
+<!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>Electric Power Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+        <h1>Electric Power Calculator</h1>
+        <div class="input-group">
+            <label for="voltage">Voltage (V):</label>
+            <input type="number" id="voltage" placeholder="Enter voltage">
+        </div>
+        <div class="input-group">
+            <label for="current">Current (A):</label>
+            <input type="number" id="current" placeholder="Enter current">
+        </div>
+        <button onclick="calculate()">Calculate</button>
+        <div id="result"></div>
+        <div id="history">
+            <h2>Calculation History</h2>
+            <ul id="history-list"></ul>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Electric-Power-Calculator/script.js b/Calculators/Electric-Power-Calculator/script.js
@@ -0,0 +1,26 @@
+function calculate() {
+    var voltage = parseFloat(document.getElementById('voltage').value);
+    var current = parseFloat(document.getElementById('current').value);
+
+    // Check if voltage and current are provided
+    if (isNaN(voltage) || isNaN(current)) {
+        alert("Please enter both voltage and current.");
+        return;
+    }
+
+    // Calculate power (P = V * I)
+    var power = voltage * current;
+
+    // Display result
+    document.getElementById('result').innerText = "Power (W): " + power;
+
+    // Add to history
+    addToHistory(voltage, current, power);
+}
+
+function addToHistory(voltage, current, power) {
+    var historyList = document.getElementById('history-list');
+    var newEntry = document.createElement('li');
+    newEntry.textContent = `Voltage: ${voltage} V, Current: ${current} A, Power: ${power} W`;
+    historyList.appendChild(newEntry);
+}
diff --git a/Calculators/Electric-Power-Calculator/style.css b/Calculators/Electric-Power-Calculator/style.css
@@ -0,0 +1,103 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #74ebd5, #acb6e5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    transition: background 0.5s ease;
+}
+
+.calculator {
+    background: white;
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+h1 {
+    color: #333;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+    transition: border 0.3s ease, box-shadow 0.3s ease;
+}
+
+input[type="number"]:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
+    outline: none;
+}
+
+button {
+    width: 100%;
+    padding: 15px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+    transform: translateY(-2px);
+}
+
+#result {
+    margin-top: 20px;
+    font-weight: bold;
+    text-align: center;
+    color: #007bff;
+}
+
+#history {
+    margin-top: 30px;
+}
+
+#history h2 {
+    color: #333;
+}
+
+#history-list {
+    list-style-type: none;
+    padding: 0;
+    text-align: left;
+}
+
+#history-list li {
+    background: #f9f9f9;
+    margin: 5px 0;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    animation: fadeIn 0.5s ease;
+}
diff --git a/index.html b/index.html
@@ -832,6 +832,20 @@ <h3>Calculates The EMI based on loan amount, interest rate and tenure.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Electric Power Calculator</h2>
+                <h3>Calculates electric power based on user-supplied voltage in Volts and current in Ampere.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Electric-Power-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electric-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>Electricity Bill Calculator</h2>
@@ -841,7 +855,7 @@ <h3>Calculates electricity costs based on user-supplied units, time, and cost pa
                         <button>Try Now</button>
                     </a>
                     <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Electricity-Bill-Calculator" title="Source Code" target="_blank">
-                    <img src="./assets/images/github.png" alt="Source Code"></img>
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
                     </a>
                 </div>
             </div>