Skip to content

Commit

Permalink
Merge pull request #476 from harshmishra19/Add/weight-calculator
Browse files Browse the repository at this point in the history
Added weight calculator
  • Loading branch information
Sulagna-Dutta-Roy committed May 26, 2024
2 parents 4c64672 + 98579b6 commit 9a21d2d
Show file tree
Hide file tree
Showing 10 changed files with 298 additions and 0 deletions.
Binary file added Weight Calculator/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions Weight Calculator/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"manifest_version": 3,
"name": "Weight Calculator",
"version": "1.0",
"description": "A simple weight calculator.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "icon.png"
}
},
"permissions": []
}
32 changes: 32 additions & 0 deletions Weight Calculator/popup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Mono:wght@500&display=swap" rel="stylesheet">
<title>Weight Calculator</title>
</head>

<body>
<div id="converter">
<label for="conversionType">Select Conversion:</label>
<select id="conversionType">
<option value="" disabled selected>Select Conversion</option>
<option value="kgToLb">Kilograms to Pounds</option>
<option value="lbToKg">Pounds to Kilograms</option>
</select>
<label for="kgInput">Enter Weight (kg):</label>
<input type="number" id="kgInput" placeholder="Enter weight in kilograms" disabled>
<label for="lbInput">Enter Weight (pounds):</label>
<input type="number" id="lbInput" placeholder="Enter weight in pounds" disabled>
<button id="convertBtn">Convert</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>

</html>
39 changes: 39 additions & 0 deletions Weight Calculator/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('conversionType').addEventListener('change', updateInputs);
document.getElementById('convertBtn').addEventListener('click', convert);
});

function updateInputs() {
var conversionType = document.getElementById('conversionType').value;
var kgInput = document.getElementById('kgInput');
var lbInput = document.getElementById('lbInput');

// Disable both inputs and clear their values
kgInput.disabled = true;
kgInput.value = "";
lbInput.disabled = true;
lbInput.value = "";

// Enable the input relevant to the selected conversion type
if (conversionType === 'kgToLb') {
kgInput.disabled = false;
} else if (conversionType === 'lbToKg') {
lbInput.disabled = false;
}
}

function convert() {
var conversionType = document.getElementById('conversionType').value;
var kgInput = document.getElementById('kgInput');
var lbInput = document.getElementById('lbInput');

if (conversionType === 'kgToLb' && kgInput.value !== "") {
var kgToLb = kgInput.value * 2.20462;
document.getElementById('result').innerHTML = kgInput.value + " kilograms is equal to " + kgToLb.toFixed(2) + " pounds.";
} else if (conversionType === 'lbToKg' && lbInput.value !== "") {
var lbToKg = lbInput.value / 2.20462;
document.getElementById('result').innerHTML = lbInput.value + " pounds is equal to " + lbToKg.toFixed(2) + " kilograms.";
} else {
document.getElementById('result').innerHTML = "Please enter a value.";
}
}
65 changes: 65 additions & 0 deletions Weight Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #6c5b7b, #c06c84);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

#converter {
background: linear-gradient(to bottom, #fdfcdc, #fed9b7);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}


label {
display: block;
margin-bottom: 10px;
}

input {
width: 100%;
padding: 8px;
box-sizing: border-box;
margin-bottom: 20px;
}

button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

button:hover {
background-color: #45a049;
}

#result {
font-size: 18px;
margin-top: 20px;
color: #333;
}

#conversionType {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
background-color: #f9f9f9;
color: #333;
}
Binary file added Weight calculator/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions Weight calculator/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"manifest_version": 3,
"name": "weight calculator",
"version": "1.0",
"description": "A simple weight calculator.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "icon.png"
}
},
"permissions": []
}
65 changes: 65 additions & 0 deletions Weight calculator/popup.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #6c5b7b, #c06c84);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

#converter {
background: linear-gradient(to bottom, #fdfcdc, #fed9b7);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}


label {
display: block;
margin-bottom: 10px;
}

input {
width: 100%;
padding: 8px;
box-sizing: border-box;
margin-bottom: 20px;
}

button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

button:hover {
background-color: #45a049;
}

#result {
font-size: 18px;
margin-top: 20px;
color: #333;
}

#conversionType {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
background-color: #f9f9f9;
color: #333;
}
32 changes: 32 additions & 0 deletions Weight calculator/popup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!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="popup.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Mono:wght@500&display=swap" rel="stylesheet">
<title>Weight Calculator</title>
</head>

<body>
<div id="converter">
<label for="conversionType">Select Conversion:</label>
<select id="conversionType">
<option value="" disabled selected>Select Conversion</option>
<option value="kgToLb">Kilograms to Pounds</option>
<option value="lbToKg">Pounds to Kilograms</option>
</select>
<label for="kgInput">Enter Weight (kg):</label>
<input type="number" id="kgInput" placeholder="Enter weight in kilograms" disabled>
<label for="lbInput">Enter Weight (pounds):</label>
<input type="number" id="lbInput" placeholder="Enter weight in pounds" disabled>
<button id="convertBtn">Convert</button>
<div id="result"></div>
</div>
<script src="popup.js"></script>
</body>

</html>
39 changes: 39 additions & 0 deletions Weight calculator/popup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('conversionType').addEventListener('change', updateInputs);
document.getElementById('convertBtn').addEventListener('click', convert);
});

function updateInputs() {
var conversionType = document.getElementById('conversionType').value;
var kgInput = document.getElementById('kgInput');
var lbInput = document.getElementById('lbInput');

// Disable both inputs and clear their values
kgInput.disabled = true;
kgInput.value = "";
lbInput.disabled = true;
lbInput.value = "";

// Enable the input relevant to the selected conversion type
if (conversionType === 'kgToLb') {
kgInput.disabled = false;
} else if (conversionType === 'lbToKg') {
lbInput.disabled = false;
}
}

function convert() {
var conversionType = document.getElementById('conversionType').value;
var kgInput = document.getElementById('kgInput');
var lbInput = document.getElementById('lbInput');

if (conversionType === 'kgToLb' && kgInput.value !== "") {
var kgToLb = kgInput.value * 2.20462;
document.getElementById('result').innerHTML = kgInput.value + " kilograms is equal to " + kgToLb.toFixed(2) + " pounds.";
} else if (conversionType === 'lbToKg' && lbInput.value !== "") {
var lbToKg = lbInput.value / 2.20462;
document.getElementById('result').innerHTML = lbInput.value + " pounds is equal to " + lbToKg.toFixed(2) + " kilograms.";
} else {
document.getElementById('result').innerHTML = "Please enter a value.";
}
}

0 comments on commit 9a21d2d

Please sign in to comment.