Merge pull request Sulagna-Dutta-Roy#1345 from debangi29/css-unit

Added CSS Unit calculator extension
Harshitmishra001 · Jun 9, 2024 · 70b998a · 70b998a
2 parents 8d2bba3 + 2234322
commit 70b998a
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 0 deletions.
diff --git a/CSS Unit Calculator Extension/icons/icon.png b/CSS Unit Calculator Extension/icons/icon.png
diff --git a/CSS Unit Calculator Extension/manifest.json b/CSS Unit Calculator Extension/manifest.json
@@ -0,0 +1,22 @@
+{
+    "manifest_version": 3,
+    "name": "CSS Unit Converter",
+    "description": "A simple CSS unit converter.",
+    "version": "1.0",
+    "permissions": [
+        "storage"
+    ],
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icons/icon.png",
+            "48": "icons/icon.png",
+            "128": "icons/icon.png"
+        }
+    },
+    "icons": {
+        "16": "icons/icon.png",
+        "48": "icons/icon.png",
+        "128": "icons/icon.png"
+    }
+}
diff --git a/CSS Unit Calculator Extension/popup.html b/CSS Unit Calculator Extension/popup.html
@@ -0,0 +1,43 @@
+<!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>CSS Unit Converter</title>
+</head>
+
+<body>
+    <div id="main">
+        <h1>CSS Unit Converter</h1>
+        <div class="left">
+            <label for="value">Enter Value:</label>
+            <input type="number" id="value" placeholder="Enter the value to convert">
+
+            <label for="sourceUnit">Source Unit:</label>
+            <select id="sourceUnit">
+                <option value="px">px</option>
+                <option value="rem">rem</option>
+                <option value="em">em</option>
+                <option value="vw">vw</option>
+                <option value="vh">vh</option>
+            </select>
+
+            <label for="targetUnit">Target Unit:</label>
+            <select id="targetUnit">
+                <option value="px">px</option>
+                <option value="rem">rem</option>
+                <option value="em">em</option>
+                <option value="vw">vw</option>
+                <option value="vh">vh</option>
+            </select>
+
+            <h3>Result:</h3>
+            <div id="result"></div>
+        </div>
+    </div>
+    <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/CSS Unit Calculator Extension/popup.js b/CSS Unit Calculator Extension/popup.js
@@ -0,0 +1,56 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const valueInput = document.getElementById('value');
+    const sourceUnitSelect = document.getElementById('sourceUnit');
+    const targetUnitSelect = document.getElementById('targetUnit');
+
+    valueInput.addEventListener('input', convert);
+    sourceUnitSelect.addEventListener('change', convert);
+    targetUnitSelect.addEventListener('change', convert);
+});
+
+function convert() {
+    // Get values from input and dropdowns
+    const inputValue = parseFloat(document.getElementById('value').value);
+    const sourceUnit = document.getElementById('sourceUnit').value;
+    const targetUnit = document.getElementById('targetUnit').value;
+
+    // Check if inputValue is a valid number
+    if (isNaN(inputValue)) {
+        document.getElementById('result').innerText = 'Please enter a valid number';
+        return;
+    }
+
+    // Perform the conversion
+    let result;
+
+    if (sourceUnit === 'px' && targetUnit === 'rem') {
+        result = inputValue / 16;
+    } else if (sourceUnit === 'rem' && targetUnit === 'px') {
+        result = inputValue * 16;
+    } else if (sourceUnit === 'px' && targetUnit === 'em') {
+        result = inputValue / 16;
+    } else if (sourceUnit === 'em' && targetUnit === 'px') {
+        result = inputValue * 16;
+    } else if (sourceUnit === 'em' && targetUnit === 'rem') {
+        result = inputValue / 1.6;
+    } else if (sourceUnit === 'rem' && targetUnit === 'em') {
+        result = inputValue * 1.6;
+    } else if (sourceUnit === 'px' && targetUnit === 'vw') {
+        result = (inputValue / document.documentElement.clientWidth) * 100;
+    } else if (sourceUnit === 'vw' && targetUnit === 'px') {
+        result = (inputValue * document.documentElement.clientWidth) / 100;
+    } else if (sourceUnit === 'px' && targetUnit === 'vh') {
+        result = (inputValue / document.documentElement.clientHeight) * 100;
+    } else if (sourceUnit === 'vh' && targetUnit === 'px') {
+        result = (inputValue * document.documentElement.clientHeight) / 100;
+    } else if (sourceUnit === 'em' && targetUnit === 'vw') {
+        result = (inputValue * 16 / document.documentElement.clientWidth) * 100;
+    } else if (sourceUnit === 'vw' && targetUnit === 'em') {
+        result = ((inputValue / 100) * document.documentElement.clientWidth) / 16;
+    } else {
+        result = inputValue; // If the units are the same, no conversion needed
+    }
+
+    // Display the result
+    document.getElementById('result').innerText = result.toFixed(2) + ' ' + targetUnit;
+}
diff --git a/CSS Unit Calculator Extension/style.css b/CSS Unit Calculator Extension/style.css
@@ -0,0 +1,68 @@
+/* General styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #f4f4f4;
+}
+
+#main {
+    background: #ffeb54;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #333;
+    text-align: center;
+}
+
+.left {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+label {
+    font-size: 14px;
+    color: #666;
+}
+
+input[type="number"],
+select {
+    padding: 10px;
+    font-size: 14px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    transition: border-color 0.3s;
+}
+
+input[type="number"]:focus,
+select:focus {
+    border-color: #007bff;
+    outline: none;
+}
+
+h3 {
+    margin-top: 20px;
+    font-size: 18px;
+    color: #333;
+}
+
+#result {
+    margin-top: 10px;
+    padding: 10px;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    text-align: center;
+}