Merge pull request #242 from isha-dutta/LengthConverterJS-1

Fixes #160: Length Converter JS Extension
Sulagna-Dutta-Roy · May 16, 2024 · 9b47ad1 · 9b47ad1
2 parents 07c142b + 3b5a914
commit 9b47ad1
Show file tree

Hide file tree

Showing 14 changed files with 517 additions and 0 deletions.
diff --git a/Length Converter JS Extension/img/background-blue-aesthetic-flowers.jpg b/Length Converter JS Extension/img/background-blue-aesthetic-flowers.jpg
diff --git a/Length Converter JS Extension/js/length-converter.js b/Length Converter JS Extension/js/length-converter.js
@@ -0,0 +1,103 @@
+function CalculateLength(){
+    var fromLength = Number(document.getElementById("fromLength").value);
+
+    if(ValidateLengthConverter(fromLength)){
+
+        var fromUnit = document.getElementById("fromUnit").value;
+        var toUnit = document.getElementById("toUnit").value;
+
+        var outputLength = document.getElementById("outputLength");
+
+
+        var result = ConvertLength(fromLength,fromUnit,toUnit);
+
+        outputLength.value = result.toFixed(5);
+
+    }
+}
+
+function ResetConverter(){
+    if(confirm("Are you sure want to reset?")){
+        document.getElementById("fromLength").value = "";
+        document.getElementById("outputLength").value = "";
+    }
+}
+
+function ConvertLength(fromLength,fromUnit,toUnit){
+    fromLength = Number(fromLength);
+    var inMillimeter = 0;
+    var makeThisMillimeter = 0;
+    var result;
+
+    switch(fromUnit){
+        case "Millimeter":
+            makeThisMillimeter = 1;
+            break;
+        case "Centimeter":
+            makeThisMillimeter = 10;
+            break;
+        case "Decimeter":
+            makeThisMillimeter = 100;
+            break;
+        case "Meter":
+            makeThisMillimeter = 1000;
+            break;
+        case "Kilometer":
+            makeThisMillimeter = 1000000;
+            break;
+        case "Foot":
+            makeThisMillimeter = 304.8;
+            break;
+        case "Inch":
+            makeThisMillimeter = 25.4;
+            break;
+        case "Mile":
+            makeThisMillimeter = 1609344;
+            break;
+        case "Yard":
+            makeThisMillimeter = 914.4;
+            break;
+    }
+    inMillimeter = fromLength * makeThisMillimeter;
+
+    switch(toUnit){
+        case "Millimeter":
+            result = inMillimeter;
+            break;
+        case "Centimeter":
+            result = inMillimeter / 10;
+            break;
+        case "Decimeter":
+            result = inMillimeter / 100;
+            break;
+        case "Meter":
+            result = inMillimeter / 1000;
+            break;
+        case "Kilometer":
+            result = inMillimeter / 1000000;
+            break;
+        case "Foot":
+            result = inMillimeter / 304.8;
+            break;
+        case "Inch":
+            result = inMillimeter / 25.4;
+            break;
+        case "Mile":
+            result = inMillimeter / 1609344;
+            break;
+        case "Yard":
+            result = inMillimeter / 914.4;
+            break;
+    }
+    return result;
+}
+
+function ValidateLengthConverter(fromLength){
+    if(fromLength <= 0){
+
+        _cmnShowErrorMessageBottomOfTheInputFiled("fromLength","Please enter the valid length")
+
+        return false;
+    }
+    return true;
+}
diff --git a/Length Converter JS Extension/js/project-common.js b/Length Converter JS Extension/js/project-common.js
@@ -0,0 +1,24 @@
+function _cmnRemoveAllErrorMessage(){
+    var allErrorBorder = document.getElementsByClassName('error-border');
+    var allErrorMessage = document.getElementsByClassName('error-message');
+    var i;
+
+    for(i = (allErrorBorder.length) - 1; i>=0; i--){
+        allErrorBorder[i].classList.remove("error-border");
+    }
+
+    for(i = (allErrorMessage.length) - 1; i>=0; i--){
+        allErrorMessage[i].remove();
+    }
+}
+
+function _cmnShowErrorMessageBottomOfTheInputFiled(fieldID,errorMessage){
+    var inputField = document.getElementById(fieldID);
+    inputField.classList.add("tool-error-border");
+    inputField.focus();
+
+    var errorMessageElement = document.createElement("p");
+    errorMessageElement.innerHTML = errorMessage;
+    errorMessageElement.classList.add("tool-error-message");
+    inputField.parentNode.insertBefore(errorMessageElement, inputField.nextSibling);
+}
diff --git a/Length Converter JS Extension/main.html b/Length Converter JS Extension/main.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./src/style.css">
+    <title>Length converter</title>
+</head>
+<body>
+
+    <div class="container">
+        <h1>Length Converter</h1>
+            <div class="container-field">
+                <div class="input-group">
+                    <div class="input-label">
+                        <label for="fromUnit">From:</label>
+                    </div>
+                    <select class="select-group" id="fromUnit">
+                        <option selected value="Millimeter">Millimeter</option>
+                        <option value="Centimeter">Centimeter</option>
+                        <option value="Decimeter">Decimeter</option>
+                        <option value="Meter">Meter</option>
+                        <option value="Kilometer">Kilometer</option>
+                        <option value="Foot">Foot</option>
+                        <option value="Inch">Inch</option>
+                        <option value="Mile">Mile</option>
+                        <option value="Yard">Yard</option>
+                    </select>
+                    <input placeholder="Input Length" id="fromLength" type="number" name="from-length" min="0" class="input-field">
+                </div>
+
+                <div class="input-group">
+                    <div class="input-label">
+                        <label for="toUnit">To:&nbsp;&nbsp;&nbsp;&nbsp;</label>
+                    </div>
+                    <select class="select-group" id="toUnit">
+                        <option value="Millimeter">Millimeter</option>
+                        <option selected value="Centimeter">Centimeter</option>
+                        <option value="Decimeter">Decimeter</option>
+                        <option value="Meter">Meter</option>
+                        <option value="Kilometer">Kilometer</option>
+                        <option value="Foot">Foot</option>
+                        <option value="Inch">Inch</option>
+                        <option value="Mile">Mile</option>
+                        <option value="Yard">Yard</option>
+                    </select>
+                    <input readonly placeholder="Output" id="outputLength" type="number" name="to-temperature" min="0" class="input-field readonly-background">
+                </div>
+
+                <div class="input-group">
+                    <button id="btnReset" class="btn btn-reset">Reset</button>
+                    <button id="btnCalculate" class="btn btn-calculate">Calculate</button>
+
+                </div>
+            </div>
+    </div>
+
+    <script src="./scripts/project-common.js"></script>
+    <script src="./scripts/length-converter.js"></script>
+
+</body>
+</html>
diff --git a/Length Converter JS Extension/manifest.json b/Length Converter JS Extension/manifest.json
@@ -0,0 +1,27 @@
+{
+    "manifest_version": 3,
+    "name": "Length Converter JS Extension",
+    "version": "1.0",
+    "description": "Length Converter Extension offers a seamless experience for converting lengths, allowing users to effortlessly switch between various units of measurement...",
+    "author" : "ishadutta.193@gmail.com",
+
+    "icons":{
+        "16": "./src/icon-16.png",
+        "32": "./src/icon-32.png",
+        "48": "./src/icon-48.png",
+        "128": "./src/icon-128.png"
+
+    },
+    "permissions": [
+      "storage"
+    ],
+    "action": {
+      "default_popup": "main.html"
+    },
+    "web_accessible_resources": [
+      {
+        "resources": ["main.html"],
+        "matches": ["<all_urls>"]
+      }
+    ]
+}
diff --git a/Length Converter JS Extension/scripts/length-converter.js b/Length Converter JS Extension/scripts/length-converter.js
@@ -0,0 +1,106 @@
+document.getElementById("btnReset").addEventListener("click", ResetConverter);
+document.getElementById("btnCalculate").addEventListener("click", CalculateLength);
+
+function CalculateLength(){
+    var fromLength = Number(document.getElementById("fromLength").value);
+
+    if(ValidateLengthConverter(fromLength)){
+
+        var fromUnit = document.getElementById("fromUnit").value;
+        var toUnit = document.getElementById("toUnit").value;
+
+        var outputLength = document.getElementById("outputLength");
+
+
+        var result = ConvertLength(fromLength,fromUnit,toUnit);
+
+        outputLength.value = result.toFixed(5);
+
+    }
+}
+
+function ResetConverter(){
+    if(confirm("Are you sure want to reset?")){
+        document.getElementById("fromLength").value = "";
+        document.getElementById("outputLength").value = "";
+    }
+}
+
+function ConvertLength(fromLength,fromUnit,toUnit){
+    fromLength = Number(fromLength);
+    var inMillimeter = 0;
+    var makeThisMillimeter = 0;
+    var result;
+
+    switch(fromUnit){
+        case "Millimeter":
+            makeThisMillimeter = 1;
+            break;
+        case "Centimeter":
+            makeThisMillimeter = 10;
+            break;
+        case "Decimeter":
+            makeThisMillimeter = 100;
+            break;
+        case "Meter":
+            makeThisMillimeter = 1000;
+            break;
+        case "Kilometer":
+            makeThisMillimeter = 1000000;
+            break;
+        case "Foot":
+            makeThisMillimeter = 304.8;
+            break;
+        case "Inch":
+            makeThisMillimeter = 25.4;
+            break;
+        case "Mile":
+            makeThisMillimeter = 1609344;
+            break;
+        case "Yard":
+            makeThisMillimeter = 914.4;
+            break;
+    }
+    inMillimeter = fromLength * makeThisMillimeter;
+
+    switch(toUnit){
+        case "Millimeter":
+            result = inMillimeter;
+            break;
+        case "Centimeter":
+            result = inMillimeter / 10;
+            break;
+        case "Decimeter":
+            result = inMillimeter / 100;
+            break;
+        case "Meter":
+            result = inMillimeter / 1000;
+            break;
+        case "Kilometer":
+            result = inMillimeter / 1000000;
+            break;
+        case "Foot":
+            result = inMillimeter / 304.8;
+            break;
+        case "Inch":
+            result = inMillimeter / 25.4;
+            break;
+        case "Mile":
+            result = inMillimeter / 1609344;
+            break;
+        case "Yard":
+            result = inMillimeter / 914.4;
+            break;
+    }
+    return result;
+}
+
+function ValidateLengthConverter(fromLength){
+    if(fromLength <= 0){
+
+        _cmnShowErrorMessageBottomOfTheInputFiled("fromLength","Please enter the valid length")
+
+        return false;
+    }
+    return true;
+}
diff --git a/Length Converter JS Extension/scripts/project-common.js b/Length Converter JS Extension/scripts/project-common.js
@@ -0,0 +1,24 @@
+function _cmnRemoveAllErrorMessage(){
+    var allErrorBorder = document.getElementsByClassName('error-border');
+    var allErrorMessage = document.getElementsByClassName('error-message');
+    var i;
+
+    for(i = (allErrorBorder.length) - 1; i>=0; i--){
+        allErrorBorder[i].classList.remove("error-border");
+    }
+
+    for(i = (allErrorMessage.length) - 1; i>=0; i--){
+        allErrorMessage[i].remove();
+    }
+}
+
+function _cmnShowErrorMessageBottomOfTheInputFiled(fieldID,errorMessage){
+    var inputField = document.getElementById(fieldID);
+    inputField.classList.add("tool-error-border");
+    inputField.focus();
+
+    var errorMessageElement = document.createElement("p");
+    errorMessageElement.innerHTML = errorMessage;
+    errorMessageElement.classList.add("tool-error-message");
+    inputField.parentNode.insertBefore(errorMessageElement, inputField.nextSibling);
+}
diff --git a/Length Converter JS Extension/src/background-blue-aesthetic-flowers.jpg b/Length Converter JS Extension/src/background-blue-aesthetic-flowers.jpg
diff --git a/Length Converter JS Extension/src/icon-128.png b/Length Converter JS Extension/src/icon-128.png
diff --git a/Length Converter JS Extension/src/icon-16.png b/Length Converter JS Extension/src/icon-16.png
diff --git a/Length Converter JS Extension/src/icon-32.png b/Length Converter JS Extension/src/icon-32.png
diff --git a/Length Converter JS Extension/src/icon-48.png b/Length Converter JS Extension/src/icon-48.png