Add files via upload

isha-dutta · May 15, 2024 · 85f1767 · 85f1767
1 parent e700cce
commit 85f1767
Show file tree

Hide file tree

Showing 5 changed files with 274 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,62 @@
+<!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="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 onclick="ResetConverter()" id="btnReset" class="btn btn-reset">Reset</button>
+                    <button onclick="CalculateLength()" id="btnCalculate" class="btn btn-calculate">Calculate</button>
+                </div>
+            </div>
+    </div>
+
+    <script src="./js/project-common.js"></script>
+    <script src="./js/length-converter.js"></script>
+
+</body>
+</html>
diff --git a/Length Converter JS Extension/style.css b/Length Converter JS Extension/style.css
@@ -0,0 +1,85 @@
+*{
+    border: none;
+    outline: none;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+html, body{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url(./img/background-blue-aesthetic-flowers.jpg);
+    background-color: #0288d1;
+    color: #181818;
+}
+
+.container{
+    padding: 20px 80px;
+    background: rgba(61, 132, 165, .2);
+    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .7);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+}
+
+.container h1{
+    text-align: center;
+    color: #fff;
+}
+
+.container-field{
+    padding: 20px 80px;
+    max-width: 400px;
+    background: rgba(179, 229, 252, .4);
+    border-radius: 10px;
+}
+
+
+.input-group{
+    margin-top: 10px;
+    width: 110%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.input-label{
+    font-size: 20px;
+}
+
+.btn
+{
+    background: #e7f7ff;
+    font-size: 16px;
+    display: block;
+    margin: 10px auto;
+    width: fit-content;
+    border: 1px solid #3d84a5;
+    padding: 14px 50px;
+    border-radius: 6px;
+    text-decoration: none;
+    color: #181818;
+    transition: background 0.5s; 
+}
+
+.btn:hover
+{
+    background: #3d84a5;
+    color: #fff;
+}
+
+.tool-error-border{
+    border: 2px solid red;
+}
+
+.tool-error-message{
+    display: block;
+    color: red;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 800;
+    margin: 5px 5px 0 5px;
+    position: absolute;
+    bottom: 1px;
+    right: 0px;
+}