Added more units in Weight Calculator (Rakesh9100#1086)

sakeel-103 · Jun 3, 2024 · 69fbd1f · 69fbd1f
1 parent 8b9fd4b
commit 69fbd1f
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 36 deletions.
diff --git a/Calculators/Weight-Calculator/README.md b/Calculators/Weight-Calculator/README.md
@@ -2,7 +2,7 @@
 
 ## Description :-
 
-Swiftly convert weight from kgs to pounds and vice-versa.
+This is a web application that calculates weight between different units.
 
 ## Tech Stacks :-
 
@@ -12,4 +12,4 @@ Swiftly convert weight from kgs to pounds and vice-versa.
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/27b88c39-5c6b-4bd0-bf7a-a369137f59ca)
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/142529986/0103f104-fd3e-4a98-9e61-27a847a5fdfc)
diff --git a/Calculators/Weight-Calculator/index.html b/Calculators/Weight-Calculator/index.html
@@ -13,18 +13,34 @@
 
 <body>
  <div id="converter">
+ <h1 class="heading">Weight Converter</h1>
  <label for="conversionType">Select Conversion:</label>
  <select id="conversionType" onchange="updateInputs()">
  <option value="" disabled selected>Select Conversion</option>
  <option value="kgToLb">Kilograms to Pounds</option>
  <option value="lbToKg">Pounds to Kilograms</option>
+ <option value="gToOz">Grams to Ounces</option>
+ <option value="ozToG">Ounces to Grams</option>
+ <option value="kgToG">Kilograms to Grams</option>
+ <option value="lbToOz">Pounds to Ounces</option>
+ <option value="gToLb">Grams to Pounds</option>
+ <option value="lbToG">Pounds to Grams</option>
+ <option value="ozToKg">Ounces to Kilograms</option>
+ <option value="kgToOz">Kilograms to Ounces</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>
 
+ <label for="gInput">Enter Weight (grams):</label>
+ <input type="number" id="gInput" placeholder="Enter weight in grams" disabled>
+
+ <label for="ozInput">Enter Weight (ounces):</label>
+ <input type="number" id="ozInput" placeholder="Enter weight in ounces" disabled>
+
  <button onclick="convert()">Convert</button>
 
  <div id="result"></div>
@@ -33,4 +49,4 @@
  <script src="script.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/Calculators/Weight-Calculator/script.js b/Calculators/Weight-Calculator/script.js
@@ -1,34 +1,59 @@
 function updateInputs() {
- var conversionType = document.getElementById('conversionType').value;
- var kgInput = document.getElementById('kgInput');
- var lbInput = document.getElementById('lbInput');
+ const conversionType = document.getElementById('conversionType').value;
 
- // Disable both inputs and clear their values
- kgInput.disabled = true;
- kgInput.value = "";
- lbInput.disabled = true;
- lbInput.value = "";
+ // Disable all inputs
+ document.getElementById('kgInput').disabled = true;
+ document.getElementById('lbInput').disabled = true;
+ document.getElementById('gInput').disabled = true;
+ document.getElementById('ozInput').disabled = true;
 
- // Enable the input relevant to the selected conversion type
- if (conversionType === 'kgToLb') {
- kgInput.disabled = false;
- } else if (conversionType === 'lbToKg') {
- lbInput.disabled = false;
+ // Enable the relevant input based on the selected conversion
+ if (conversionType === 'kgToLb' || conversionType === 'kgToG' || conversionType === 'kgToOz') {
+ document.getElementById('kgInput').disabled = false;
+ } else if (conversionType === 'lbToKg' || conversionType === 'lbToOz' || conversionType === 'lbToG') {
+ document.getElementById('lbInput').disabled = false;
+ } else if (conversionType === 'gToOz' || conversionType === 'gToLb') {
+ document.getElementById('gInput').disabled = false;
+ } else if (conversionType === 'ozToG' || conversionType === 'ozToKg') {
+ document.getElementById('ozInput').disabled = false;
  }
 }
 
 function convert() {
- var conversionType = document.getElementById('conversionType').value;
- var kgInput = document.getElementById('kgInput');
- var lbInput = document.getElementById('lbInput');
+ const conversionType = document.getElementById('conversionType').value;
+ let result;
 
- 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.";
+ if (conversionType === 'kgToLb') {
+ const kg = parseFloat(document.getElementById('kgInput').value);
+ result = kg * 2.20462 + ' pounds';
+ } else if (conversionType === 'lbToKg') {
+ const lb = parseFloat(document.getElementById('lbInput').value);
+ result = lb / 2.20462 + ' kilograms';
+ } else if (conversionType === 'gToOz') {
+ const g = parseFloat(document.getElementById('gInput').value);
+ result = g / 28.3495 + ' ounces';
+ } else if (conversionType === 'ozToG') {
+ const oz = parseFloat(document.getElementById('ozInput').value);
+ result = oz * 28.3495 + ' grams';
+ } else if (conversionType === 'kgToG') {
+ const kg = parseFloat(document.getElementById('kgInput').value);
+ result = kg * 1000 + ' grams';
+ } else if (conversionType === 'lbToOz') {
+ const lb = parseFloat(document.getElementById('lbInput').value);
+ result = lb * 16 + ' ounces';
+ } else if (conversionType === 'gToLb') {
+ const g = parseFloat(document.getElementById('gInput').value);
+ result = g / 453.592 + ' pounds';
+ } else if (conversionType === 'lbToG') {
+ const lb = parseFloat(document.getElementById('lbInput').value);
+ result = lb * 453.592 + ' grams';
+ } else if (conversionType === 'ozToKg') {
+ const oz = parseFloat(document.getElementById('ozInput').value);
+ result = oz / 35.274 + ' kilograms';
+ } else if (conversionType === 'kgToOz') {
+ const kg = parseFloat(document.getElementById('kgInput').value);
+ result = kg * 35.274 + ' ounces';
  }
+
+ document.getElementById('result').innerText = 'Result: ' + result;
 }
diff --git a/Calculators/Weight-Calculator/style.css b/Calculators/Weight-Calculator/style.css
@@ -1,6 +1,6 @@
 body {
  font-family: Arial, sans-serif;
- background: linear-gradient(to bottom, #6c5b7b, #c06c84);
+ background: linear-gradient(to bottom, #f9f7fa, #f1698f);
  margin: 0;
  padding: 0;
  display: flex;
@@ -9,17 +9,21 @@ body {
  height: 100vh;
 }
 
+h1.heading{
+ text-align: center;
+ color:rgb(235, 59, 88);
+}
+
 #converter {
- background: linear-gradient(to bottom, #fdfcdc, #fed9b7);
+ background: linear-gradient(to bottom, #f6f6f4, #6bd2e6);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- text-align: center;
+ /* text-align: center; */
  max-width: 400px;
  width: 100%;
 }
 
-
 label {
  display: block;
  margin-bottom: 10px;
@@ -30,21 +34,23 @@ input {
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 20px;
+
 }
 
 button {
- background-color: #4caf50;
+ background-color: rgb(235, 59, 88);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
- border-radius: 4px;
+ border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
+ margin-left:150px;
 }
 
 button:hover {
- background-color: #45a049;
+ background-color: rgb(235, 59, 88);
 }
 
 #result {
@@ -62,4 +68,4 @@ button:hover {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  color: #333;
-}
+}
diff --git a/index.html b/index.html
@@ -2713,7 +2713,7 @@ <h3>Calculates the bandwidth of a website based on some factors.</h3>
  <div class="box">
  <div class="content">
  <h2>Weight Calculator</h2>
- <h3>Calculates weight from kgs to pounds and vice-versa.</h3>
+ <h3>Calculates the weight between different units.</h3>
  <div class="card-footer">
  <a href="./Calculators/Weight-Calculator/index.html" target="_blank">
  <button>Try Now</button>