Skip to content

Commit

Permalink
Length Converter JS Extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@isha-dutta
isha-dutta authored May 15, 2024
1 parent ec2347b commit b1b73d9
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 3 deletions.
6 changes: 3 additions & 3 deletions Length Converter JS Extension/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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">
<link rel="stylesheet" href="./src/style.css">
<title>Length converter</title>
</head>
<body>
Expand Down Expand Up @@ -55,8 +55,8 @@ <h1>Length Converter</h1>
</div>
</div>

<script src="./js/project-common.js"></script>
<script src="./js/length-converter.js"></script>
<script src="./scripts/project-common.js"></script>
<script src="./scripts/length-converter.js"></script>

</body>
</html>
103 changes: 103 additions & 0 deletions Length Converter JS Extension/scripts/length-converter.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 24 additions & 0 deletions Length Converter JS Extension/scripts/project-common.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
Binary file added Length Converter JS Extension/src/background-blue-aesthetic-flowers.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions Length Converter JS Extension/src/style.css
View file
Original file line number Diff line number Diff line change
@@ -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(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;
}

0 comments on commit b1b73d9

Please sign in to comment.