Added Mirror Equation Calculator Rakesh9100#1183

Anshika14528 · Jun 29, 2024 · 26ed46c · 26ed46c
1 parent 6462447
commit 26ed46c
Show file tree

Hide file tree

Showing 6 changed files with 836 additions and 319 deletions.
diff --git a/Calculators/Mirror-Equation-Calculator/README.md b/Calculators/Mirror-Equation-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Mirror Equation Calculator</p>
+
+## Description :-
+
+Mirror Equation Calculator is a web application that calculates the focal length if type of mirror and image and object distance is given.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image]()
diff --git a/Calculators/Mirror-Equation-Calculator/assets/background.jpg b/Calculators/Mirror-Equation-Calculator/assets/background.jpg
diff --git a/Calculators/Mirror-Equation-Calculator/index.html b/Calculators/Mirror-Equation-Calculator/index.html
@@ -0,0 +1,34 @@
+<!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>Mirror Equation Calculator</title>
+</head>
+
+<body>
+    <header>
+        <h1>Mirror Equation Calculator</h1>
+    </header>
+    <div class="calculator">
+        <label for="mirrorType">Select Mirror Type:</label>
+        <select id="mirrorType">
+            <option value="concave">Concave Mirror</option>
+            <option value="convex">Convex Mirror</option>
+        </select>
+        </br>
+        <label for="objectDistance">Object Distance (u) in cm:</label>
+        <input type="number" id="objectDistanceInput" placeholder="Enter object distance">
+        </br>
+        <label for="imageDistance">Image Distance (v) in cm:</label>
+        <input type="number" id="imageDistanceInput" placeholder="Enter image distance">
+        </br>
+        <button onclick="calculateFocalLength()">Calculate</button>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Mirror-Equation-Calculator/script.js b/Calculators/Mirror-Equation-Calculator/script.js
@@ -0,0 +1,20 @@
+function calculateFocalLength() {
+    let mirrorType = document.getElementById('mirrorType').value;
+    let objectDistance = parseFloat(document.getElementById('objectDistanceInput').value);
+    let imageDistance = parseFloat(document.getElementById('imageDistanceInput').value);
+    let result = document.getElementById('result');
+
+    if (isNaN(objectDistance) || isNaN(imageDistance)) {
+        result.innerHTML = "Please enter valid numbers for object and image distances.";
+    } else {
+        let focalLength;
+
+        if (mirrorType === 'concave') {
+            focalLength = (objectDistance * imageDistance) / (objectDistance + imageDistance);
+        } else if (mirrorType === 'convex') {
+            focalLength = (objectDistance * imageDistance) / (objectDistance - imageDistance);
+        }
+
+        result.innerHTML = `Focal Length: ${focalLength.toFixed(2)} cm`;
+    }
+}
diff --git a/Calculators/Mirror-Equation-Calculator/style.css b/Calculators/Mirror-Equation-Calculator/style.css
@@ -0,0 +1,114 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    color: #000000;
+    font-size: 2.5em;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+label {
+    color: #dcdbdd;
+    font-weight: bold;
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.calculator {
+    background-color: rgba(40, 151, 95, 0.9);
+    border-radius: 10px;
+    padding: 20px;
+    animation: fadeIn 1s ease-in-out;
+    box-shadow: 0 4px 6px rgba(64, 84, 110, 0.1);
+    transition: box-shadow 0.3s ease-in-out;
+    width: 400px;
+}
+
+.calculator:hover {
+    box-shadow: 0 8px 12px rgba(48, 105, 185, 0.2);
+}
+
+input,
+select {
+    margin-bottom: 10px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 3px solid #ccc;
+    border-radius: 8px;
+    transition: border-color 0.3s ease-in-out;
+}
+
+input:focus,
+select:focus {
+    border-color: #332b91;
+    outline: none;
+}
+
+button {
+    padding: 12px;
+    cursor: pointer;
+    text-align: center;
+    background: linear-gradient(90deg, #1ad236, #2e9fb3);
+    color: rgb(14, 6, 6);
+    border: none;
+    border-radius: 5px;
+    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    font-weight: bold;
+}
+
+button:hover {
+    background: linear-gradient(90deg, #bc2941, #5e3eb7);
+    transform: scale(1.05);
+}
+
+#result {
+    margin-top: 10px;
+    font-weight: bold;
+    color: #000000;
+    animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 600px) {
+    .calculator {
+        width: 90%;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+    }
+}