Sulagna-Dutta-Roy · Sulagna-Dutta-Roy · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/Circular Motion Calculator/background.webp b/Circular Motion Calculator/background.webp
diff --git a/Circular Motion Calculator/image.png b/Circular Motion Calculator/image.png
diff --git a/Circular Motion Calculator/index.html b/Circular Motion Calculator/index.html
@@ -0,0 +1,54 @@
+<!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="styles.css">
+    <title>Circular Motion Calculator</title>
+</head>
+
+<body>
+    <div class="calculator">
+        <label for="calculationType">Select Calculation Type:</label>
+        <select id="calculationType" onchange="toggleCalculationInputs()">
+            <option value="centripetalAcceleration">Centripetal Acceleration</option>
+            <option value="angularFrequency">Angular Frequency</option>
+            <option value="period">Period</option>
+            <option value="frequency">Frequency</option>
+        </select>
+        <div id="centripetalAccelerationInputs">
+            <label for="velocity">Velocity (v) in m/s:</label>
+            <input type="number" id="velocityInput" placeholder="Enter velocity">
+            <label for="radius">Radius (r) in m:</label>
+            <input type="number" id="radiusInput" placeholder="Enter radius">
+        </div>
+        <div id="angularFrequencyInputs" style="display:none;">
+            <label for="velocityAngular">Velocity (v) in m/s:</label>
+            <input type="number" id="velocityAngularInput" placeholder="Enter velocity">
+            <label for="radiusAngular">Radius (r) in m:</label>
+            <input type="number" id="radiusAngularInput" placeholder="Enter radius">
+        </div>
+        <div id="periodInputs" style="display:none;">
+            <label for="velocityPeriod">Velocity (v) in m/s:</label>
+            <input type="number" id="velocityPeriodInput" placeholder="Enter velocity">
+            <label for="radiusPeriod">Radius (r) in m:</label>
+            <input type="number" id="radiusPeriodInput" placeholder="Enter radius">
+        </div>
+        <div id="frequencyInputs" style="display:none;">
+            <label for="velocityFrequency">Velocity (v) in m/s:</label>
+            <input type="number" id="velocityFrequencyInput" placeholder="Enter velocity">
+            <label for="radiusFrequency">Radius (r) in m:</label>
+            <input type="number" id="radiusFrequencyInput" placeholder="Enter radius">
+        </div>
+        <div class="button-container">
+            <button onclick="calculate()">Calculate</button>
+            <button onclick="resetCalculator()">Reset</button>
+            <button onclick="clearResult()">Clear</button>
+        </div>
+        <div id="result" class="result-container"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Circular Motion Calculator/manifest.json b/Circular Motion Calculator/manifest.json
@@ -0,0 +1,16 @@
+{
+    "manifest_version": 3,
+    "name": "Circular Motion Calculator",
+    "version": "1.0",
+    "description": "Circular Motion Calculator which helps us to calculate the centripetal acceleration, angular frequency, period and frequency",
+    "action": {
+        "default_popup": "index.html",
+        "default_icon": "image.png"
+    },
+    "icons": {
+        "16": "image.png",
+        "48": "image.png",
+        "128": "image.png"
+    },
+    "permissions":[]
+}
diff --git a/Circular Motion Calculator/script.js b/Circular Motion Calculator/script.js
@@ -0,0 +1,83 @@
+function toggleCalculationInputs() {
+    const calculationType = document.getElementById('calculationType').value;
+    const centripetalAccelerationInputs = document.getElementById('centripetalAccelerationInputs');
+    const angularFrequencyInputs = document.getElementById('angularFrequencyInputs');
+    const periodInputs = document.getElementById('periodInputs');
+    const frequencyInputs = document.getElementById('frequencyInputs');
+
+    centripetalAccelerationInputs.style.display = 'none';
+    angularFrequencyInputs.style.display = 'none';
+    periodInputs.style.display = 'none';
+    frequencyInputs.style.display = 'none';
+
+    if (calculationType === 'centripetalAcceleration') {
+        centripetalAccelerationInputs.style.display = 'block';
+    } else if (calculationType === 'angularFrequency') {
+        angularFrequencyInputs.style.display = 'block';
+    } else if (calculationType === 'period') {
+        periodInputs.style.display = 'block';
+    } else if (calculationType === 'frequency') {
+        frequencyInputs.style.display = 'block';
+    }
+}
+
+function calculate() {
+    const calculationType = document.getElementById('calculationType').value;
+    let result = '';
+
+    if (calculationType === 'centripetalAcceleration') {
+        const velocity = parseFloat(document.getElementById('velocityInput').value);
+        const radius = parseFloat(document.getElementById('radiusInput').value);
+        if (isNaN(velocity) || isNaN(radius)) {
+            result = 'Please enter valid numbers for velocity and radius.';
+        } else {
+            const centripetalAcceleration = (velocity * velocity) / radius;
+            result = `Centripetal Acceleration: ${centripetalAcceleration.toFixed(2)} m/s²`;
+        }
+    } else if (calculationType === 'angularFrequency') {
+        const velocity = parseFloat(document.getElementById('velocityAngularInput').value);
+        const radius = parseFloat(document.getElementById('radiusAngularInput').value);
+        if (isNaN(velocity) || isNaN(radius)) {
+            result = 'Please enter valid numbers for velocity and radius.';
+        } else {
+            const angularFrequency = velocity / radius;
+            result = `Angular Frequency: ${angularFrequency.toFixed(2)} rad/s`;
+        }
+    } else if (calculationType === 'period') {
+        const velocity = parseFloat(document.getElementById('velocityPeriodInput').value);
+        const radius = parseFloat(document.getElementById('radiusPeriodInput').value);
+        if (isNaN(velocity) || isNaN(radius)) {
+            result = 'Please enter valid numbers for velocity and radius.';
+        } else {
+            const period = (2 * Math.PI * radius) / velocity;
+            result = `Period: ${period.toFixed(2)} s`;
+        }
+    } else if (calculationType === 'frequency') {
+        const velocity = parseFloat(document.getElementById('velocityFrequencyInput').value);
+        const radius = parseFloat(document.getElementById('radiusFrequencyInput').value);
+        if (isNaN(velocity) || isNaN(radius)) {
+            result = 'Please enter valid numbers for velocity and radius.';
+        } else {
+            const frequency = velocity / (2 * Math.PI * radius);
+            result = `Frequency: ${frequency.toFixed(2)} Hz`;
+        }
+    }
+
+    document.getElementById('result').innerHTML = result;
+}
+
+function resetCalculator() {
+    document.getElementById('velocityInput').value = '';
+    document.getElementById('radiusInput').value = '';
+    document.getElementById('velocityAngularInput').value = '';
+    document.getElementById('radiusAngularInput').value = '';
+    document.getElementById('velocityPeriodInput').value = '';
+    document.getElementById('radiusPeriodInput').value = '';
+    document.getElementById('velocityFrequencyInput').value = '';
+    document.getElementById('radiusFrequencyInput').value = '';
+    document.getElementById('result').innerHTML = '';
+}
+
+function clearResult() {
+    document.getElementById('result').innerHTML = '';
+}
diff --git a/Circular Motion Calculator/styles.css b/Circular Motion Calculator/styles.css
@@ -0,0 +1,105 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('background.webp');
+    background-size: cover;
+    background-position: center;
+}
+label {
+    color: cyan;
+    font-weight: bold;
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.calculator {
+    border-radius: 10px;
+    padding: 20px;
+    animation: fadeIn 1s ease-in-out;
+    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
+    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 #030303;
+    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(135deg, #833ab4, #fd1d1d);
+    color: rgb(0, 0, 0);
+    font-weight: bolder;
+    border: black;
+    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%;
+    margin-bottom: 10px;
+}
+
+button:hover {
+    background: linear-gradient(90deg, #4ef15c, #906fea);
+    transform: scale(1.05);
+    border: black;
+}
+
+#result {
+    margin-top: 20px;
+    font-weight: bolder;
+    color: #0c0404;
+    animation: fadeIn 1s ease-in-out;
+    align-items: center;
+    text-align: center;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 600px) {
+    .calculator {
+        width: 90%;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+    }
+}
+