From 9ce99e9bfc1eaaf321462332dcd83c4c993f1e9e Mon Sep 17 00:00:00 2001 From: Medha K Date: Fri, 24 May 2024 17:45:39 +0530 Subject: [PATCH 01/16] added unit calculator --- Calculators/Unit-Calculator/index.html | 42 +++++ Calculators/Unit-Calculator/script.js | 245 +++++++++++++++++++++++++ Calculators/Unit-Calculator/style.css | 90 +++++++++ index.html | 14 ++ 4 files changed, 391 insertions(+) create mode 100644 Calculators/Unit-Calculator/index.html create mode 100644 Calculators/Unit-Calculator/script.js create mode 100644 Calculators/Unit-Calculator/style.css diff --git a/Calculators/Unit-Calculator/index.html b/Calculators/Unit-Calculator/index.html new file mode 100644 index 000000000..b6e416522 --- /dev/null +++ b/Calculators/Unit-Calculator/index.html @@ -0,0 +1,42 @@ + + + + + +Unit Converter + + + + + +
+

Unit Calculator

+
+
+
+ + + +
+
+ + + +
+
+ + + + + + + +

Result: 0

+
+
+ + + + + + diff --git a/Calculators/Unit-Calculator/script.js b/Calculators/Unit-Calculator/script.js new file mode 100644 index 000000000..87d489373 --- /dev/null +++ b/Calculators/Unit-Calculator/script.js @@ -0,0 +1,245 @@ +document.addEventListener("DOMContentLoaded", function () { + updateUnitsDropdown("length"); + }); + function updateUnitsDropdown(type) { + const units = { + length: ["meter", "kilometer", "centimeter", "mile", "yard"], + area: [ + "square meter", + "square kilometer", + "square mile", + "square yard", + "square foot", + ], + weight: ["kilogram", "gram", "ounce", "pound", "ton"], + volume: [ + "cubic meter", + "cubic kilometer", + "cubic centimeter", + "liter", + "milliliter", + ], + temperature: ["Celsius", "Fahrenheit", "Kelvin"], + time: ["second", "minute", "hour", "day", "week"], + }; + const unitFrom = document.getElementById("unitFrom"); + const unitTo = document.getElementById("unitTo"); + unitFrom.innerHTML = ""; + unitTo.innerHTML = ""; + units[type].forEach((unit) => { + const option = document.createElement("option"); + option.value = unit; + option.text = unit; + unitFrom.add(option); + const optionTo = document.createElement("option"); + optionTo.value = unit; + optionTo.text = unit; + unitTo.add(optionTo); + }); + } + // Function to perform the unit conversion + function convert() { + const value = parseFloat(document.getElementById("value").value); + const conversionType = document.querySelector( + 'input[name="conversionType"]:checked' + ).value; + const unitFrom = document.getElementById("unitFrom").value; + const unitTo = document.getElementById("unitTo").value; + if (unitFrom === unitTo) { + document.getElementById("result").innerText = "Result: " + value; + return; + } + const conversionFactors = { + length: { + // Conversion factors for length units + meter: { + kilometer: (value) => value / 1000, + centimeter: (value) => value * 100, + mile: (value) => value / 1609.344, + yard: (value) => value * 1.0936, + }, + kilometer: { + meter: (value) => value * 1000, + centimeter: (value) => value * 100000, + mile: (value) => value / 1.609344, + yard: (value) => value * 1093.6133, + }, + centimeter: { + meter: (value) => value / 100, + kilometer: (value) => value / 100000, + mile: (value) => value / 160934.4, + yard: (value) => value / 91.44, + }, + mile: { + meter: (value) => value * 1609.344, + kilometer: (value) => value * 1.609344, + centimeter: (value) => value * 160934.4, + yard: (value) => value * 1760, + }, + yard: { + meter: (value) => value / 1.0936, + kilometer: (value) => value / 1093.6133, + centimeter: (value) => value * 91.44, + mile: (value) => value / 1760, + }, + }, + area: { + // Conversion factors for area units + "square meter": { + "square kilometer": (value) => value / 1e6, + "square mile": (value) => value / 2.59e6, + "square yard": (value) => value * 1.19599, + "square foot": (value) => value * 10.764, + }, + "square kilometer": { + "square meter": (value) => value * 1e6, + "square mile": (value) => value / 2.59, + "square yard": (value) => value * 1.196e9, + "square foot": (value) => value * 1.076e7, + }, + "square mile": { + "square meter": (value) => value * 2.59e6, + "square kilometer": (value) => value * 2.59, + "square yard": (value) => value * 3.098e6, + "square foot": (value) => value * 2.788e7, + }, + "square yard": { + "square meter": (value) => value / 1.196, + "square kilometer": (value) => value / 1.196e9, + "square mile": (value) => value / 3.098e6, + "square foot": (value) => value * 9, + }, + "square foot": { + "square meter": (value) => value / 10.764, + "square kilometer": (value) => value / 1.076e7, + "square mile": (value) => value / 2.788e7, + "square yard": (value) => value / 9, + }, + }, + weight: { + // Conversion factors for weight units + kilogram: { + gram: (value) => value * 1000, + ounce: (value) => value * 35.274, + pound: (value) => value * 2.205, + ton: (value) => value / 1000, + }, + gram: { + kilogram: (value) => value / 1000, + ounce: (value) => value / 28.35, + pound: (value) => value / 453.592, + ton: (value) => value / 1e6, + }, + ounce: { + kilogram: (value) => value / 35.274, + gram: (value) => value * 28.35, + pound: (value) => value / 16, + ton: (value) => value / 35274, + }, + pound: { + kilogram: (value) => value / 2.205, + gram: (value) => value * 453.592, + ounce: (value) => value * 16, + ton: (value) => value / 2205, + }, + ton: { + kilogram: (value) => value * 1000, + gram: (value) => value * 1e6, + ounce: (value) => value * 35274, + pound: (value) => value * 2205, + }, + }, + volume: { + // Conversion factors for volume units + "cubic meter": { + "cubic kilometer": (value) => value / 1e9, + "cubic centimeter": (value) => value * 1e6, + liter: (value) => value * 1000, + milliliter: (value) => value * 1e6, + }, + "cubic kilometer": { + "cubic meter": (value) => value * 1e9, + "cubic centimeter": (value) => value * 1e15, + liter: (value) => value * 1e12, + milliliter: (value) => value * 1e15, + }, + "cubic centimeter": { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + liter: (value) => value / 1000, + milliliter: (value) => value / 1e6, + }, + liter: { + "cubic meter": (value) => value / 1000, + "cubic kilometer": (value) => value / 1e12, + "cubic centimeter": (value) => value * 1000, + milliliter: (value) => value * 1000, + }, + milliliter: { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + "cubic centimeter": (value) => value / 1e6, + liter: (value) => value / 1000, + }, + }, + temperature: { + // Conversion factors for temperature units + Celsius: { + Fahrenheit: (value) => (value * 9) / 5 + 32, + Kelvin: (value) => value + 273.15, + }, + Fahrenheit: { + Celsius: (value) => ((value - 32) * 5) / 9, + Kelvin: (value) => ((value + 459.67) * 5) / 9, + }, + Kelvin: { + Celsius: (value) => value - 273.15, + Fahrenheit: (value) => (value * 9) / 5 + 32, + }, + }, + time: { + // Conversion factors for time units + second: { + minute: (value) => value / 60, + hour: (value) => value / 3600, + day: (value) => value / 86400, + week: (value) => value / 604800, + }, + minute: { + second: (value) => value * 60, + hour: (value) => value / 60, + day: (value) => value / 1440, + week: (value) => value / 10080, + }, + hour: { + second: (value) => value * 3600, + minute: (value) => value * 60, + day: (value) => value / 24, + week: (value) => value / 168, + }, + day: { + second: (value) => value * 86400, + minute: (value) => value * 1440, + hour: (value) => value * 24, + week: (value) => value / 7, + }, + week: { + second: (value) => value * 604800, + minute: (value) => value * 10080, + hour: (value) => value * 168, + day: (value) => value * 7, + }, + }, + }; + const result = conversionFactors[conversionType][unitFrom][unitTo](value); + const resultElement = document.getElementById("result"); + resultElement.innerText = `Result: ${result.toFixed(10)}`; + } + const radioButtons = document.querySelectorAll('input[name="conversionType"]'); + radioButtons.forEach((button) => { + button.addEventListener("change", function () { + const selectedType = this.value; + updateUnitsDropdown(selectedType); + }); + }); + \ No newline at end of file diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css new file mode 100644 index 000000000..dbab3a16f --- /dev/null +++ b/Calculators/Unit-Calculator/style.css @@ -0,0 +1,90 @@ +body { + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; + background: radial-gradient(circle, #00a6ff, #0f1624); +} +.converter { + width: 400px; + margin: 20px auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #ffffff; + box-shadow: 0px 0px 9px #fff; + } + + .converter h2 { + margin-bottom: 20px; + text-align: center; + } + + .radio-group { + margin-bottom: 20px; +padding-top:10px; + } + + .radio-group label { + display: block; + margin-bottom: 10px; + } + + .radio-group input[type="radio"] { + margin-right: 10px; + } + + label { + display: block; + margin-bottom: 5px; + } + + input[type="number"], + select { + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + box-sizing: border-box; + } + + button { + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + button:hover { + background-color: #0056b3; + } + + #result { + margin-top: 20px; + font-size: 18px; + text-align: center; + } + h2{ + text-align: center; + color:#fff; + font-size: 2.5rem; + text-shadow: 6px 0px 9px #000000; + } + .radio-group { + display: inline-block; +} + +.left { + float: left; + padding-right: 100px; + padding-left: 50px; +} + +.right { + float: right; +} diff --git a/index.html b/index.html index f6ef760f5..022778adf 100644 --- a/index.html +++ b/index.html @@ -1966,6 +1966,20 @@

Calculates the typing speed in two different units.

+
+
+

Unit Calculator

+

A simple unit calculator for converting values between different units of measurement.

+
+ + + + + Source Code + +
+
+

Vector Calculator

From 568023bb90764ad72c81372283d2fe9fe4d49802 Mon Sep 17 00:00:00 2001 From: Medha Date: Fri, 24 May 2024 17:48:27 +0530 Subject: [PATCH 02/16] Create README.md --- Calculators/Unit-Calculator/README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 Calculators/Unit-Calculator/README.md diff --git a/Calculators/Unit-Calculator/README.md b/Calculators/Unit-Calculator/README.md new file mode 100644 index 000000000..32b7dce71 --- /dev/null +++ b/Calculators/Unit-Calculator/README.md @@ -0,0 +1,15 @@ +#

Unit Calculator

+ +## Description :- + +Unit Calculator aims to empower users with the ability to convert various units of measurement such as length, weight, volume, and more. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/m3kvt/CalcDiverse/assets/98379619/2787c139-f376-4e3a-808f-9f59c905c63c) From 61841271ce1cc9af290341a14810127bcb5b7c5e Mon Sep 17 00:00:00 2001 From: Medha Date: Fri, 24 May 2024 18:01:54 +0530 Subject: [PATCH 03/16] Updated script.js --- Calculators/Unit-Calculator/script.js | 506 ++++++++++++++------------ 1 file changed, 265 insertions(+), 241 deletions(-) diff --git a/Calculators/Unit-Calculator/script.js b/Calculators/Unit-Calculator/script.js index 87d489373..d3f3b1ff4 100644 --- a/Calculators/Unit-Calculator/script.js +++ b/Calculators/Unit-Calculator/script.js @@ -1,245 +1,269 @@ document.addEventListener("DOMContentLoaded", function () { - updateUnitsDropdown("length"); + updateUnitsDropdown("length"); +}); +function updateUnitsDropdown(type) { + const units = { + length: ["meter", "kilometer", "centimeter", "mile", "yard"], + area: [ + "square meter", + "square kilometer", + "square mile", + "square yard", + "square foot", + ], + weight: ["kilogram", "gram", "ounce", "pound", "ton"], + volume: [ + "cubic meter", + "cubic kilometer", + "cubic centimeter", + "liter", + "milliliter", + ], + temperature: ["Celsius", "Fahrenheit", "Kelvin"], + time: ["second", "minute", "hour", "day", "week"], + }; + // Get references to the 'From' and 'To' dropdowns + const unitFrom = document.getElementById("unitFrom"); + const unitTo = document.getElementById("unitTo"); + // Clear existing options in the 'From' dropdown + unitFrom.innerHTML = ""; + // Clear existing options in the 'To' dropdown + unitTo.innerHTML = ""; + // Iterate through the units for the selected + // type and add them as options in both 'From' and 'To' dropdowns + units[type].forEach((unit) => { + // Create a new option element for the 'From' dropdown + const option = document.createElement("option"); + option.value = unit; + option.text = unit; + unitFrom.add(option); + // Create a new option element for the 'To' dropdown + const optionTo = document.createElement("option"); + optionTo.value = unit; + optionTo.text = unit; + unitTo.add(optionTo); }); - function updateUnitsDropdown(type) { - const units = { - length: ["meter", "kilometer", "centimeter", "mile", "yard"], - area: [ - "square meter", - "square kilometer", - "square mile", - "square yard", - "square foot", - ], - weight: ["kilogram", "gram", "ounce", "pound", "ton"], - volume: [ - "cubic meter", - "cubic kilometer", - "cubic centimeter", - "liter", - "milliliter", - ], - temperature: ["Celsius", "Fahrenheit", "Kelvin"], - time: ["second", "minute", "hour", "day", "week"], - }; - const unitFrom = document.getElementById("unitFrom"); - const unitTo = document.getElementById("unitTo"); - unitFrom.innerHTML = ""; - unitTo.innerHTML = ""; - units[type].forEach((unit) => { - const option = document.createElement("option"); - option.value = unit; - option.text = unit; - unitFrom.add(option); - const optionTo = document.createElement("option"); - optionTo.value = unit; - optionTo.text = unit; - unitTo.add(optionTo); - }); +} +// Function to perform the unit conversion +function convert() { + // Retrieve the numerical value entered by the user + const value = parseFloat(document.getElementById("value").value); + // Get the selected conversion type (e.g., length, area, weight) from the radio buttons + const conversionType = document.querySelector( + 'input[name="conversionType"]:checked' + ).value; + // Get the selected 'From' and 'To' units from the dropdowns + const unitFrom = document.getElementById("unitFrom").value; + const unitTo = document.getElementById("unitTo").value; + // Check if the 'From' and 'To' units are the same + if (unitFrom === unitTo) { + // If units are the same, display the original value as the result + document.getElementById("result").innerText = "Result: " + value; + return; } - // Function to perform the unit conversion - function convert() { - const value = parseFloat(document.getElementById("value").value); - const conversionType = document.querySelector( - 'input[name="conversionType"]:checked' - ).value; - const unitFrom = document.getElementById("unitFrom").value; - const unitTo = document.getElementById("unitTo").value; - if (unitFrom === unitTo) { - document.getElementById("result").innerText = "Result: " + value; - return; - } - const conversionFactors = { - length: { - // Conversion factors for length units - meter: { - kilometer: (value) => value / 1000, - centimeter: (value) => value * 100, - mile: (value) => value / 1609.344, - yard: (value) => value * 1.0936, - }, - kilometer: { - meter: (value) => value * 1000, - centimeter: (value) => value * 100000, - mile: (value) => value / 1.609344, - yard: (value) => value * 1093.6133, - }, - centimeter: { - meter: (value) => value / 100, - kilometer: (value) => value / 100000, - mile: (value) => value / 160934.4, - yard: (value) => value / 91.44, - }, - mile: { - meter: (value) => value * 1609.344, - kilometer: (value) => value * 1.609344, - centimeter: (value) => value * 160934.4, - yard: (value) => value * 1760, - }, - yard: { - meter: (value) => value / 1.0936, - kilometer: (value) => value / 1093.6133, - centimeter: (value) => value * 91.44, - mile: (value) => value / 1760, - }, - }, - area: { - // Conversion factors for area units - "square meter": { - "square kilometer": (value) => value / 1e6, - "square mile": (value) => value / 2.59e6, - "square yard": (value) => value * 1.19599, - "square foot": (value) => value * 10.764, - }, - "square kilometer": { - "square meter": (value) => value * 1e6, - "square mile": (value) => value / 2.59, - "square yard": (value) => value * 1.196e9, - "square foot": (value) => value * 1.076e7, - }, - "square mile": { - "square meter": (value) => value * 2.59e6, - "square kilometer": (value) => value * 2.59, - "square yard": (value) => value * 3.098e6, - "square foot": (value) => value * 2.788e7, - }, - "square yard": { - "square meter": (value) => value / 1.196, - "square kilometer": (value) => value / 1.196e9, - "square mile": (value) => value / 3.098e6, - "square foot": (value) => value * 9, - }, - "square foot": { - "square meter": (value) => value / 10.764, - "square kilometer": (value) => value / 1.076e7, - "square mile": (value) => value / 2.788e7, - "square yard": (value) => value / 9, - }, - }, - weight: { - // Conversion factors for weight units - kilogram: { - gram: (value) => value * 1000, - ounce: (value) => value * 35.274, - pound: (value) => value * 2.205, - ton: (value) => value / 1000, - }, - gram: { - kilogram: (value) => value / 1000, - ounce: (value) => value / 28.35, - pound: (value) => value / 453.592, - ton: (value) => value / 1e6, - }, - ounce: { - kilogram: (value) => value / 35.274, - gram: (value) => value * 28.35, - pound: (value) => value / 16, - ton: (value) => value / 35274, - }, - pound: { - kilogram: (value) => value / 2.205, - gram: (value) => value * 453.592, - ounce: (value) => value * 16, - ton: (value) => value / 2205, - }, - ton: { - kilogram: (value) => value * 1000, - gram: (value) => value * 1e6, - ounce: (value) => value * 35274, - pound: (value) => value * 2205, - }, - }, - volume: { - // Conversion factors for volume units - "cubic meter": { - "cubic kilometer": (value) => value / 1e9, - "cubic centimeter": (value) => value * 1e6, - liter: (value) => value * 1000, - milliliter: (value) => value * 1e6, - }, - "cubic kilometer": { - "cubic meter": (value) => value * 1e9, - "cubic centimeter": (value) => value * 1e15, - liter: (value) => value * 1e12, - milliliter: (value) => value * 1e15, - }, - "cubic centimeter": { - "cubic meter": (value) => value / 1e6, - "cubic kilometer": (value) => value / 1e15, - liter: (value) => value / 1000, - milliliter: (value) => value / 1e6, - }, - liter: { - "cubic meter": (value) => value / 1000, - "cubic kilometer": (value) => value / 1e12, - "cubic centimeter": (value) => value * 1000, - milliliter: (value) => value * 1000, - }, - milliliter: { - "cubic meter": (value) => value / 1e6, - "cubic kilometer": (value) => value / 1e15, - "cubic centimeter": (value) => value / 1e6, - liter: (value) => value / 1000, - }, - }, - temperature: { - // Conversion factors for temperature units - Celsius: { - Fahrenheit: (value) => (value * 9) / 5 + 32, - Kelvin: (value) => value + 273.15, - }, - Fahrenheit: { - Celsius: (value) => ((value - 32) * 5) / 9, - Kelvin: (value) => ((value + 459.67) * 5) / 9, - }, - Kelvin: { - Celsius: (value) => value - 273.15, - Fahrenheit: (value) => (value * 9) / 5 + 32, - }, - }, - time: { - // Conversion factors for time units - second: { - minute: (value) => value / 60, - hour: (value) => value / 3600, - day: (value) => value / 86400, - week: (value) => value / 604800, - }, - minute: { - second: (value) => value * 60, - hour: (value) => value / 60, - day: (value) => value / 1440, - week: (value) => value / 10080, - }, - hour: { - second: (value) => value * 3600, - minute: (value) => value * 60, - day: (value) => value / 24, - week: (value) => value / 168, - }, - day: { - second: (value) => value * 86400, - minute: (value) => value * 1440, - hour: (value) => value * 24, - week: (value) => value / 7, - }, - week: { - second: (value) => value * 604800, - minute: (value) => value * 10080, - hour: (value) => value * 168, - day: (value) => value * 7, - }, - }, - }; - const result = conversionFactors[conversionType][unitFrom][unitTo](value); - const resultElement = document.getElementById("result"); - resultElement.innerText = `Result: ${result.toFixed(10)}`; - } - const radioButtons = document.querySelectorAll('input[name="conversionType"]'); - radioButtons.forEach((button) => { - button.addEventListener("change", function () { - const selectedType = this.value; - updateUnitsDropdown(selectedType); - }); + // Define conversion factors for various units + // and types in a nested object + const conversionFactors = { + length: { + // Conversion factors for length units + meter: { + kilometer: (value) => value / 1000, + centimeter: (value) => value * 100, + mile: (value) => value / 1609.344, + yard: (value) => value * 1.0936, + }, + kilometer: { + meter: (value) => value * 1000, + centimeter: (value) => value * 100000, + mile: (value) => value / 1.609344, + yard: (value) => value * 1093.6133, + }, + centimeter: { + meter: (value) => value / 100, + kilometer: (value) => value / 100000, + mile: (value) => value / 160934.4, + yard: (value) => value / 91.44, + }, + mile: { + meter: (value) => value * 1609.344, + kilometer: (value) => value * 1.609344, + centimeter: (value) => value * 160934.4, + yard: (value) => value * 1760, + }, + yard: { + meter: (value) => value / 1.0936, + kilometer: (value) => value / 1093.6133, + centimeter: (value) => value * 91.44, + mile: (value) => value / 1760, + }, + }, + area: { + // Conversion factors for area units + "square meter": { + "square kilometer": (value) => value / 1e6, + "square mile": (value) => value / 2.59e6, + "square yard": (value) => value * 1.19599, + "square foot": (value) => value * 10.764, + }, + "square kilometer": { + "square meter": (value) => value * 1e6, + "square mile": (value) => value / 2.59, + "square yard": (value) => value * 1.196e9, + "square foot": (value) => value * 1.076e7, + }, + "square mile": { + "square meter": (value) => value * 2.59e6, + "square kilometer": (value) => value * 2.59, + "square yard": (value) => value * 3.098e6, + "square foot": (value) => value * 2.788e7, + }, + "square yard": { + "square meter": (value) => value / 1.196, + "square kilometer": (value) => value / 1.196e9, + "square mile": (value) => value / 3.098e6, + "square foot": (value) => value * 9, + }, + "square foot": { + "square meter": (value) => value / 10.764, + "square kilometer": (value) => value / 1.076e7, + "square mile": (value) => value / 2.788e7, + "square yard": (value) => value / 9, + }, + }, + weight: { + // Conversion factors for weight units + kilogram: { + gram: (value) => value * 1000, + ounce: (value) => value * 35.274, + pound: (value) => value * 2.205, + ton: (value) => value / 1000, + }, + gram: { + kilogram: (value) => value / 1000, + ounce: (value) => value / 28.35, + pound: (value) => value / 453.592, + ton: (value) => value / 1e6, + }, + ounce: { + kilogram: (value) => value / 35.274, + gram: (value) => value * 28.35, + pound: (value) => value / 16, + ton: (value) => value / 35274, + }, + pound: { + kilogram: (value) => value / 2.205, + gram: (value) => value * 453.592, + ounce: (value) => value * 16, + ton: (value) => value / 2205, + }, + ton: { + kilogram: (value) => value * 1000, + gram: (value) => value * 1e6, + ounce: (value) => value * 35274, + pound: (value) => value * 2205, + }, + }, + volume: { + // Conversion factors for volume units + "cubic meter": { + "cubic kilometer": (value) => value / 1e9, + "cubic centimeter": (value) => value * 1e6, + liter: (value) => value * 1000, + milliliter: (value) => value * 1e6, + }, + "cubic kilometer": { + "cubic meter": (value) => value * 1e9, + "cubic centimeter": (value) => value * 1e15, + liter: (value) => value * 1e12, + milliliter: (value) => value * 1e15, + }, + "cubic centimeter": { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + liter: (value) => value / 1000, + milliliter: (value) => value / 1e6, + }, + liter: { + "cubic meter": (value) => value / 1000, + "cubic kilometer": (value) => value / 1e12, + "cubic centimeter": (value) => value * 1000, + milliliter: (value) => value * 1000, + }, + milliliter: { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + "cubic centimeter": (value) => value / 1e6, + liter: (value) => value / 1000, + }, + }, + temperature: { + // Conversion factors for temperature units + Celsius: { + Fahrenheit: (value) => (value * 9) / 5 + 32, + Kelvin: (value) => value + 273.15, + }, + Fahrenheit: { + Celsius: (value) => ((value - 32) * 5) / 9, + Kelvin: (value) => ((value + 459.67) * 5) / 9, + }, + Kelvin: { + Celsius: (value) => value - 273.15, + Fahrenheit: (value) => (value * 9) / 5 + 32, + }, + }, + time: { + // Conversion factors for time units + second: { + minute: (value) => value / 60, + hour: (value) => value / 3600, + day: (value) => value / 86400, + week: (value) => value / 604800, + }, + minute: { + second: (value) => value * 60, + hour: (value) => value / 60, + day: (value) => value / 1440, + week: (value) => value / 10080, + }, + hour: { + second: (value) => value * 3600, + minute: (value) => value * 60, + day: (value) => value / 24, + week: (value) => value / 168, + }, + day: { + second: (value) => value * 86400, + minute: (value) => value * 1440, + hour: (value) => value * 24, + week: (value) => value / 7, + }, + week: { + second: (value) => value * 604800, + minute: (value) => value * 10080, + hour: (value) => value * 168, + day: (value) => value * 7, + }, + }, + }; + // Retrieve the conversion factor function for the selected + // conversion type, 'From' unit, and 'To' unit + const result = conversionFactors[conversionType][unitFrom][unitTo](value); + // Get the DOM element representing the result display area + const resultElement = document.getElementById("result"); + // Display the result with a precision of 10 decimal places + resultElement.innerText = `Result: ${result.toFixed(10)}`; +} +// Get all radio buttons with the name attribute "conversionType" +const radioButtons = document.querySelectorAll('input[name="conversionType"]'); +// Iterate through each radio button in the NodeList +radioButtons.forEach((button) => { + // Add an event listener for the 'change' event on each radio button + button.addEventListener("change", function () { + // When a radio button changes, get the selected + // type from its value + const selectedType = this.value; + // Call the function to update the unit dropdowns + // based on the selected type + updateUnitsDropdown(selectedType); }); - \ No newline at end of file +}); From 4683236cedc09d69729c8f106fabde07fa15af4a Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:02:06 +0530 Subject: [PATCH 04/16] Update index.html --- Calculators/Unit-Calculator/index.html | 71 ++++++++++++++------------ 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/Calculators/Unit-Calculator/index.html b/Calculators/Unit-Calculator/index.html index b6e416522..7fc1fdeef 100644 --- a/Calculators/Unit-Calculator/index.html +++ b/Calculators/Unit-Calculator/index.html @@ -1,42 +1,49 @@ - - -Unit Converter - + + + Unit Calculator + - - -
-

Unit Calculator

-
-
-
- - - -
-
- - - +
+

Unit Calculator

+
+
+
+ + + +
+
+ + + +
+ + + + + + + +

Result: 0

- - - - - - - -

Result: 0

-
- - - - + From 388d3a371d5dad3a406192938ac0673964ef5f6a Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:02:25 +0530 Subject: [PATCH 05/16] Update script.js --- Calculators/Unit-Calculator/script.js | 515 +++++++++++++------------- 1 file changed, 258 insertions(+), 257 deletions(-) diff --git a/Calculators/Unit-Calculator/script.js b/Calculators/Unit-Calculator/script.js index d3f3b1ff4..e8ee9c0f6 100644 --- a/Calculators/Unit-Calculator/script.js +++ b/Calculators/Unit-Calculator/script.js @@ -1,269 +1,270 @@ document.addEventListener("DOMContentLoaded", function () { - updateUnitsDropdown("length"); + updateUnitsDropdown("length"); }); + function updateUnitsDropdown(type) { - const units = { - length: ["meter", "kilometer", "centimeter", "mile", "yard"], - area: [ - "square meter", - "square kilometer", - "square mile", - "square yard", - "square foot", - ], - weight: ["kilogram", "gram", "ounce", "pound", "ton"], - volume: [ - "cubic meter", - "cubic kilometer", - "cubic centimeter", - "liter", - "milliliter", - ], - temperature: ["Celsius", "Fahrenheit", "Kelvin"], - time: ["second", "minute", "hour", "day", "week"], - }; - // Get references to the 'From' and 'To' dropdowns - const unitFrom = document.getElementById("unitFrom"); - const unitTo = document.getElementById("unitTo"); - // Clear existing options in the 'From' dropdown - unitFrom.innerHTML = ""; - // Clear existing options in the 'To' dropdown - unitTo.innerHTML = ""; - // Iterate through the units for the selected - // type and add them as options in both 'From' and 'To' dropdowns - units[type].forEach((unit) => { - // Create a new option element for the 'From' dropdown - const option = document.createElement("option"); - option.value = unit; - option.text = unit; - unitFrom.add(option); - // Create a new option element for the 'To' dropdown - const optionTo = document.createElement("option"); - optionTo.value = unit; - optionTo.text = unit; - unitTo.add(optionTo); - }); + const units = { + length: ["meter", "kilometer", "centimeter", "mile", "yard"], + area: [ + "square meter", + "square kilometer", + "square mile", + "square yard", + "square foot", + ], + weight: ["kilogram", "gram", "ounce", "pound", "ton"], + volume: [ + "cubic meter", + "cubic kilometer", + "cubic centimeter", + "liter", + "milliliter", + ], + temperature: ["Celsius", "Fahrenheit", "Kelvin"], + time: ["second", "minute", "hour", "day", "week"], + }; + // Get references to the 'From' and 'To' dropdowns + const unitFrom = document.getElementById("unitFrom"); + const unitTo = document.getElementById("unitTo"); + // Clear existing options in the 'From' dropdown + unitFrom.innerHTML = ""; + // Clear existing options in the 'To' dropdown + unitTo.innerHTML = ""; + // Iterate through the units for the selected + // type and add them as options in both 'From' and 'To' dropdowns + units[type].forEach((unit) => { + // Create a new option element for the 'From' dropdown + const option = document.createElement("option"); + option.value = unit; + option.text = unit; + unitFrom.add(option); + // Create a new option element for the 'To' dropdown + const optionTo = document.createElement("option"); + optionTo.value = unit; + optionTo.text = unit; + unitTo.add(optionTo); + }); } // Function to perform the unit conversion function convert() { - // Retrieve the numerical value entered by the user - const value = parseFloat(document.getElementById("value").value); - // Get the selected conversion type (e.g., length, area, weight) from the radio buttons - const conversionType = document.querySelector( - 'input[name="conversionType"]:checked' - ).value; - // Get the selected 'From' and 'To' units from the dropdowns - const unitFrom = document.getElementById("unitFrom").value; - const unitTo = document.getElementById("unitTo").value; - // Check if the 'From' and 'To' units are the same - if (unitFrom === unitTo) { - // If units are the same, display the original value as the result - document.getElementById("result").innerText = "Result: " + value; - return; - } - // Define conversion factors for various units - // and types in a nested object - const conversionFactors = { - length: { - // Conversion factors for length units - meter: { - kilometer: (value) => value / 1000, - centimeter: (value) => value * 100, - mile: (value) => value / 1609.344, - yard: (value) => value * 1.0936, - }, - kilometer: { - meter: (value) => value * 1000, - centimeter: (value) => value * 100000, - mile: (value) => value / 1.609344, - yard: (value) => value * 1093.6133, - }, - centimeter: { - meter: (value) => value / 100, - kilometer: (value) => value / 100000, - mile: (value) => value / 160934.4, - yard: (value) => value / 91.44, - }, - mile: { - meter: (value) => value * 1609.344, - kilometer: (value) => value * 1.609344, - centimeter: (value) => value * 160934.4, - yard: (value) => value * 1760, - }, - yard: { - meter: (value) => value / 1.0936, - kilometer: (value) => value / 1093.6133, - centimeter: (value) => value * 91.44, - mile: (value) => value / 1760, - }, - }, - area: { - // Conversion factors for area units - "square meter": { - "square kilometer": (value) => value / 1e6, - "square mile": (value) => value / 2.59e6, - "square yard": (value) => value * 1.19599, - "square foot": (value) => value * 10.764, - }, - "square kilometer": { - "square meter": (value) => value * 1e6, - "square mile": (value) => value / 2.59, - "square yard": (value) => value * 1.196e9, - "square foot": (value) => value * 1.076e7, - }, - "square mile": { - "square meter": (value) => value * 2.59e6, - "square kilometer": (value) => value * 2.59, - "square yard": (value) => value * 3.098e6, - "square foot": (value) => value * 2.788e7, - }, - "square yard": { - "square meter": (value) => value / 1.196, - "square kilometer": (value) => value / 1.196e9, - "square mile": (value) => value / 3.098e6, - "square foot": (value) => value * 9, - }, - "square foot": { - "square meter": (value) => value / 10.764, - "square kilometer": (value) => value / 1.076e7, - "square mile": (value) => value / 2.788e7, - "square yard": (value) => value / 9, - }, - }, - weight: { - // Conversion factors for weight units - kilogram: { - gram: (value) => value * 1000, - ounce: (value) => value * 35.274, - pound: (value) => value * 2.205, - ton: (value) => value / 1000, - }, - gram: { - kilogram: (value) => value / 1000, - ounce: (value) => value / 28.35, - pound: (value) => value / 453.592, - ton: (value) => value / 1e6, - }, - ounce: { - kilogram: (value) => value / 35.274, - gram: (value) => value * 28.35, - pound: (value) => value / 16, - ton: (value) => value / 35274, - }, - pound: { - kilogram: (value) => value / 2.205, - gram: (value) => value * 453.592, - ounce: (value) => value * 16, - ton: (value) => value / 2205, - }, - ton: { - kilogram: (value) => value * 1000, - gram: (value) => value * 1e6, - ounce: (value) => value * 35274, - pound: (value) => value * 2205, - }, - }, - volume: { - // Conversion factors for volume units - "cubic meter": { - "cubic kilometer": (value) => value / 1e9, - "cubic centimeter": (value) => value * 1e6, - liter: (value) => value * 1000, - milliliter: (value) => value * 1e6, - }, - "cubic kilometer": { - "cubic meter": (value) => value * 1e9, - "cubic centimeter": (value) => value * 1e15, - liter: (value) => value * 1e12, - milliliter: (value) => value * 1e15, - }, - "cubic centimeter": { - "cubic meter": (value) => value / 1e6, - "cubic kilometer": (value) => value / 1e15, - liter: (value) => value / 1000, - milliliter: (value) => value / 1e6, - }, - liter: { - "cubic meter": (value) => value / 1000, - "cubic kilometer": (value) => value / 1e12, - "cubic centimeter": (value) => value * 1000, - milliliter: (value) => value * 1000, - }, - milliliter: { - "cubic meter": (value) => value / 1e6, - "cubic kilometer": (value) => value / 1e15, - "cubic centimeter": (value) => value / 1e6, - liter: (value) => value / 1000, - }, - }, - temperature: { - // Conversion factors for temperature units - Celsius: { - Fahrenheit: (value) => (value * 9) / 5 + 32, - Kelvin: (value) => value + 273.15, - }, - Fahrenheit: { - Celsius: (value) => ((value - 32) * 5) / 9, - Kelvin: (value) => ((value + 459.67) * 5) / 9, - }, - Kelvin: { - Celsius: (value) => value - 273.15, - Fahrenheit: (value) => (value * 9) / 5 + 32, - }, - }, - time: { - // Conversion factors for time units - second: { - minute: (value) => value / 60, - hour: (value) => value / 3600, - day: (value) => value / 86400, - week: (value) => value / 604800, - }, - minute: { - second: (value) => value * 60, - hour: (value) => value / 60, - day: (value) => value / 1440, - week: (value) => value / 10080, - }, - hour: { - second: (value) => value * 3600, - minute: (value) => value * 60, - day: (value) => value / 24, - week: (value) => value / 168, - }, - day: { - second: (value) => value * 86400, - minute: (value) => value * 1440, - hour: (value) => value * 24, - week: (value) => value / 7, - }, - week: { - second: (value) => value * 604800, - minute: (value) => value * 10080, - hour: (value) => value * 168, - day: (value) => value * 7, - }, - }, - }; - // Retrieve the conversion factor function for the selected - // conversion type, 'From' unit, and 'To' unit - const result = conversionFactors[conversionType][unitFrom][unitTo](value); - // Get the DOM element representing the result display area - const resultElement = document.getElementById("result"); - // Display the result with a precision of 10 decimal places - resultElement.innerText = `Result: ${result.toFixed(10)}`; + // Retrieve the numerical value entered by the user + const value = parseFloat(document.getElementById("value").value); + // Get the selected conversion type (e.g., length, area, weight) from the radio buttons + const conversionType = document.querySelector( + 'input[name="conversionType"]:checked' + ).value; + // Get the selected 'From' and 'To' units from the dropdowns + const unitFrom = document.getElementById("unitFrom").value; + const unitTo = document.getElementById("unitTo").value; + // Check if the 'From' and 'To' units are the same + if (unitFrom === unitTo) { + // If units are the same, display the original value as the result + document.getElementById("result").innerText = "Result: " + value; + return; + } + // Define conversion factors for various units + // and types in a nested object + const conversionFactors = { + length: { + // Conversion factors for length units + meter: { + kilometer: (value) => value / 1000, + centimeter: (value) => value * 100, + mile: (value) => value / 1609.344, + yard: (value) => value * 1.0936, + }, + kilometer: { + meter: (value) => value * 1000, + centimeter: (value) => value * 100000, + mile: (value) => value / 1.609344, + yard: (value) => value * 1093.6133, + }, + centimeter: { + meter: (value) => value / 100, + kilometer: (value) => value / 100000, + mile: (value) => value / 160934.4, + yard: (value) => value / 91.44, + }, + mile: { + meter: (value) => value * 1609.344, + kilometer: (value) => value * 1.609344, + centimeter: (value) => value * 160934.4, + yard: (value) => value * 1760, + }, + yard: { + meter: (value) => value / 1.0936, + kilometer: (value) => value / 1093.6133, + centimeter: (value) => value * 91.44, + mile: (value) => value / 1760, + }, + }, + area: { + // Conversion factors for area units + "square meter": { + "square kilometer": (value) => value / 1e6, + "square mile": (value) => value / 2.59e6, + "square yard": (value) => value * 1.19599, + "square foot": (value) => value * 10.764, + }, + "square kilometer": { + "square meter": (value) => value * 1e6, + "square mile": (value) => value / 2.59, + "square yard": (value) => value * 1.196e9, + "square foot": (value) => value * 1.076e7, + }, + "square mile": { + "square meter": (value) => value * 2.59e6, + "square kilometer": (value) => value * 2.59, + "square yard": (value) => value * 3.098e6, + "square foot": (value) => value * 2.788e7, + }, + "square yard": { + "square meter": (value) => value / 1.196, + "square kilometer": (value) => value / 1.196e9, + "square mile": (value) => value / 3.098e6, + "square foot": (value) => value * 9, + }, + "square foot": { + "square meter": (value) => value / 10.764, + "square kilometer": (value) => value / 1.076e7, + "square mile": (value) => value / 2.788e7, + "square yard": (value) => value / 9, + }, + }, + weight: { + // Conversion factors for weight units + kilogram: { + gram: (value) => value * 1000, + ounce: (value) => value * 35.274, + pound: (value) => value * 2.205, + ton: (value) => value / 1000, + }, + gram: { + kilogram: (value) => value / 1000, + ounce: (value) => value / 28.35, + pound: (value) => value / 453.592, + ton: (value) => value / 1e6, + }, + ounce: { + kilogram: (value) => value / 35.274, + gram: (value) => value * 28.35, + pound: (value) => value / 16, + ton: (value) => value / 35274, + }, + pound: { + kilogram: (value) => value / 2.205, + gram: (value) => value * 453.592, + ounce: (value) => value * 16, + ton: (value) => value / 2205, + }, + ton: { + kilogram: (value) => value * 1000, + gram: (value) => value * 1e6, + ounce: (value) => value * 35274, + pound: (value) => value * 2205, + }, + }, + volume: { + // Conversion factors for volume units + "cubic meter": { + "cubic kilometer": (value) => value / 1e9, + "cubic centimeter": (value) => value * 1e6, + liter: (value) => value * 1000, + milliliter: (value) => value * 1e6, + }, + "cubic kilometer": { + "cubic meter": (value) => value * 1e9, + "cubic centimeter": (value) => value * 1e15, + liter: (value) => value * 1e12, + milliliter: (value) => value * 1e15, + }, + "cubic centimeter": { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + liter: (value) => value / 1000, + milliliter: (value) => value / 1e6, + }, + liter: { + "cubic meter": (value) => value / 1000, + "cubic kilometer": (value) => value / 1e12, + "cubic centimeter": (value) => value * 1000, + milliliter: (value) => value * 1000, + }, + milliliter: { + "cubic meter": (value) => value / 1e6, + "cubic kilometer": (value) => value / 1e15, + "cubic centimeter": (value) => value / 1e6, + liter: (value) => value / 1000, + }, + }, + temperature: { + // Conversion factors for temperature units + Celsius: { + Fahrenheit: (value) => (value * 9) / 5 + 32, + Kelvin: (value) => value + 273.15, + }, + Fahrenheit: { + Celsius: (value) => ((value - 32) * 5) / 9, + Kelvin: (value) => ((value + 459.67) * 5) / 9, + }, + Kelvin: { + Celsius: (value) => value - 273.15, + Fahrenheit: (value) => (value * 9) / 5 + 32, + }, + }, + time: { + // Conversion factors for time units + second: { + minute: (value) => value / 60, + hour: (value) => value / 3600, + day: (value) => value / 86400, + week: (value) => value / 604800, + }, + minute: { + second: (value) => value * 60, + hour: (value) => value / 60, + day: (value) => value / 1440, + week: (value) => value / 10080, + }, + hour: { + second: (value) => value * 3600, + minute: (value) => value * 60, + day: (value) => value / 24, + week: (value) => value / 168, + }, + day: { + second: (value) => value * 86400, + minute: (value) => value * 1440, + hour: (value) => value * 24, + week: (value) => value / 7, + }, + week: { + second: (value) => value * 604800, + minute: (value) => value * 10080, + hour: (value) => value * 168, + day: (value) => value * 7, + }, + }, + }; + // Retrieve the conversion factor function for the selected + // conversion type, 'From' unit, and 'To' unit + const result = conversionFactors[conversionType][unitFrom][unitTo](value); + // Get the DOM element representing the result display area + const resultElement = document.getElementById("result"); + // Display the result with a precision of 10 decimal places + resultElement.innerText = `Result: ${result.toFixed(10)}`; } // Get all radio buttons with the name attribute "conversionType" const radioButtons = document.querySelectorAll('input[name="conversionType"]'); // Iterate through each radio button in the NodeList radioButtons.forEach((button) => { - // Add an event listener for the 'change' event on each radio button - button.addEventListener("change", function () { - // When a radio button changes, get the selected - // type from its value - const selectedType = this.value; - // Call the function to update the unit dropdowns - // based on the selected type - updateUnitsDropdown(selectedType); - }); + // Add an event listener for the 'change' event on each radio button + button.addEventListener("change", function () { + // When a radio button changes, get the selected + // type from its value + const selectedType = this.value; + // Call the function to update the unit dropdowns + // based on the selected type + updateUnitsDropdown(selectedType); + }); }); From b1c976add770c8f093221d5c99d7ad29a1d3555d Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:02:45 +0530 Subject: [PATCH 06/16] Update style.css --- Calculators/Unit-Calculator/style.css | 71 ++++++++++++++------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css index dbab3a16f..3e0fa2712 100644 --- a/Calculators/Unit-Calculator/style.css +++ b/Calculators/Unit-Calculator/style.css @@ -6,6 +6,7 @@ body { margin-top: 80px; background: radial-gradient(circle, #00a6ff, #0f1624); } + .converter { width: 400px; margin: 20px auto; @@ -14,43 +15,43 @@ body { border-radius: 5px; background-color: #ffffff; box-shadow: 0px 0px 9px #fff; - } - - .converter h2 { +} + +.converter h2 { margin-bottom: 20px; text-align: center; - } - - .radio-group { +} + +.radio-group { margin-bottom: 20px; -padding-top:10px; - } - - .radio-group label { + padding-top: 10px; +} + +.radio-group label { display: block; margin-bottom: 10px; - } - - .radio-group input[type="radio"] { +} + +.radio-group input[type="radio"] { margin-right: 10px; - } - - label { +} + +label { display: block; margin-bottom: 5px; - } - - input[type="number"], - select { +} + +input[type="number"], +select { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; - } - - button { +} + +button { width: 100%; padding: 10px; background-color: #007bff; @@ -58,24 +59,26 @@ padding-top:10px; border: none; border-radius: 3px; cursor: pointer; - } - - button:hover { +} + +button:hover { background-color: #0056b3; - } - - #result { +} + +#result { margin-top: 20px; font-size: 18px; text-align: center; - } - h2{ +} + +h2 { text-align: center; - color:#fff; + color: #fff; font-size: 2.5rem; text-shadow: 6px 0px 9px #000000; - } - .radio-group { +} + +.radio-group { display: inline-block; } From 533d3b6e978643815106fb336e3fd59592952da0 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:03:45 +0530 Subject: [PATCH 07/16] Update style.css --- Calculators/Unit-Calculator/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css index 3e0fa2712..69f5e5435 100644 --- a/Calculators/Unit-Calculator/style.css +++ b/Calculators/Unit-Calculator/style.css @@ -3,7 +3,7 @@ body { display: flex; flex-direction: column; align-items: center; - margin-top: 80px; + margin-top: 25px; background: radial-gradient(circle, #00a6ff, #0f1624); } From 3e6c42b18bb0097065adda1dbebf5c729c256ee4 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:05:02 +0530 Subject: [PATCH 08/16] Update README.md --- Calculators/Unit-Calculator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Calculators/Unit-Calculator/README.md b/Calculators/Unit-Calculator/README.md index 32b7dce71..14f7cc6cf 100644 --- a/Calculators/Unit-Calculator/README.md +++ b/Calculators/Unit-Calculator/README.md @@ -12,4 +12,4 @@ Unit Calculator aims to empower users with the ability to convert various units ## Screenshots :- -![image](https://github.com/m3kvt/CalcDiverse/assets/98379619/2787c139-f376-4e3a-808f-9f59c905c63c) +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/9eee5840-cf91-4d69-8e2b-0276ce622bf3) From e142ebe57ef9004e9f3c992b40c368cdc49d15d6 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 25 May 2024 01:06:30 +0530 Subject: [PATCH 09/16] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 022778adf..80d8f6281 100644 --- a/index.html +++ b/index.html @@ -1969,7 +1969,7 @@

Calculates the typing speed in two different units.

Unit Calculator

-

A simple unit calculator for converting values between different units of measurement.

+

Converts values between different units of measurement.

From 1cfa593012474a0617d8d61d2f9163b613ef607d Mon Sep 17 00:00:00 2001 From: Medha K Date: Tue, 28 May 2024 15:56:44 +0530 Subject: [PATCH 10/16] made unit calculator responsive --- Calculators/Unit-Calculator/style.css | 118 +++++++++++++++----------- 1 file changed, 70 insertions(+), 48 deletions(-) diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css index 69f5e5435..4b2be831d 100644 --- a/Calculators/Unit-Calculator/style.css +++ b/Calculators/Unit-Calculator/style.css @@ -1,93 +1,115 @@ body { - font-family: Arial, sans-serif; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 25px; - background: radial-gradient(circle, #00a6ff, #0f1624); + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 25px; + background: radial-gradient(circle, #00a6ff, #0f1624); } .converter { - width: 400px; - margin: 20px auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #ffffff; - box-shadow: 0px 0px 9px #fff; + width: 400px; + margin: 20px auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #ffffff; + box-shadow: 0px 0px 9px #fff; } .converter h2 { - margin-bottom: 20px; - text-align: center; + margin-bottom: 20px; + text-align: center; } .radio-group { - margin-bottom: 20px; - padding-top: 10px; + margin-bottom: 20px; + padding-top: 10px; } .radio-group label { - display: block; - margin-bottom: 10px; + display: block; + margin-bottom: 10px; } .radio-group input[type="radio"] { - margin-right: 10px; + margin-right: 10px; } label { - display: block; - margin-bottom: 5px; + display: block; + margin-bottom: 5px; } input[type="number"], select { - width: 100%; - padding: 8px; - margin-bottom: 10px; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + box-sizing: border-box; } button { - width: 100%; - padding: 10px; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 3px; - cursor: pointer; + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; } button:hover { - background-color: #0056b3; + background-color: #0056b3; } #result { - margin-top: 20px; - font-size: 18px; - text-align: center; + margin-top: 20px; + font-size: 18px; + text-align: center; } h2 { - text-align: center; - color: #fff; - font-size: 2.5rem; - text-shadow: 6px 0px 9px #000000; + text-align: center; + color: #fff; + font-size: 2.5rem; + text-shadow: 6px 0px 9px #000000; } .radio-group { - display: inline-block; + display: inline-block; } .left { - float: left; - padding-right: 100px; - padding-left: 50px; + padding-right: 100px; + padding-left: 50px; } .right { - float: right; +} +@media (max-width: 600px) { + .converter { + width: 79%; + font-size: 10px; + } + .radio-group { + display: flex; + } + .left { + flex-direction: column; + padding-left: 0px; + padding-right: 50px; + } + .right { + flex-direction: column; + } + input[type="number"], + select { + font-size: 10px; + } + #result { + font-size: 15px; + } } From 9f9ceb62b7295b53fb188d1564d97db060d043b6 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 31 May 2024 15:48:51 +0530 Subject: [PATCH 11/16] Update style.css --- Calculators/Unit-Calculator/style.css | 145 +++++++++++++------------- 1 file changed, 75 insertions(+), 70 deletions(-) diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css index 4b2be831d..053e0dcf1 100644 --- a/Calculators/Unit-Calculator/style.css +++ b/Calculators/Unit-Calculator/style.css @@ -1,115 +1,120 @@ body { - font-family: Arial, sans-serif; - display: flex; - flex-direction: column; - align-items: center; - margin-top: 25px; - background: radial-gradient(circle, #00a6ff, #0f1624); + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 25px; + background: radial-gradient(circle, #00a6ff, #0f1624); } .converter { - width: 400px; - margin: 20px auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - background-color: #ffffff; - box-shadow: 0px 0px 9px #fff; + width: 400px; + margin: 20px auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #ffffff; + box-shadow: 0px 0px 9px #fff; } .converter h2 { - margin-bottom: 20px; - text-align: center; + margin-bottom: 20px; + text-align: center; } .radio-group { - margin-bottom: 20px; - padding-top: 10px; + margin-bottom: 20px; + padding-top: 10px; } .radio-group label { - display: block; - margin-bottom: 10px; + display: block; + margin-bottom: 10px; } .radio-group input[type="radio"] { - margin-right: 10px; + margin-right: 10px; } label { - display: block; - margin-bottom: 5px; + display: block; + margin-bottom: 5px; } input[type="number"], select { - width: 100%; - padding: 8px; - margin-bottom: 10px; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + box-sizing: border-box; } button { - width: 100%; - padding: 10px; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 3px; - cursor: pointer; + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; } button:hover { - background-color: #0056b3; + background-color: #0056b3; } #result { - margin-top: 20px; - font-size: 18px; - text-align: center; + margin-top: 20px; + font-size: 18px; + text-align: center; } h2 { - text-align: center; - color: #fff; - font-size: 2.5rem; - text-shadow: 6px 0px 9px #000000; + text-align: center; + color: #fff; + font-size: 2.5rem; + text-shadow: 6px 0px 9px #000000; } .radio-group { - display: inline-block; + display: inline-block; } .left { - padding-right: 100px; - padding-left: 50px; + padding-right: 100px; + padding-left: 50px; } -.right { -} +.right {} + @media (max-width: 600px) { - .converter { - width: 79%; - font-size: 10px; - } - .radio-group { - display: flex; - } - .left { - flex-direction: column; - padding-left: 0px; - padding-right: 50px; - } - .right { - flex-direction: column; - } - input[type="number"], - select { - font-size: 10px; - } - #result { - font-size: 15px; - } + .converter { + width: 79%; + font-size: 10px; + } + + .radio-group { + display: flex; + } + + .left { + flex-direction: column; + padding-left: 0px; + padding-right: 50px; + } + + .right { + flex-direction: column; + } + + input[type="number"], + select { + font-size: 10px; + } + + #result { + font-size: 15px; + } } From 82e447a61d5f4173e17f7407e8fa67ce5cd13c76 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 31 May 2024 15:50:43 +0530 Subject: [PATCH 12/16] Update style.css --- Calculators/Unit-Calculator/style.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/Calculators/Unit-Calculator/style.css b/Calculators/Unit-Calculator/style.css index 053e0dcf1..c7a4f4a2e 100644 --- a/Calculators/Unit-Calculator/style.css +++ b/Calculators/Unit-Calculator/style.css @@ -87,8 +87,6 @@ h2 { padding-left: 50px; } -.right {} - @media (max-width: 600px) { .converter { width: 79%; From 6f394e4623fb6b8137b0708bfee5434961d5d792 Mon Sep 17 00:00:00 2001 From: Medha K Date: Fri, 7 Jun 2024 12:40:40 +0530 Subject: [PATCH 13/16] add responsiveness to age calculator --- Calculators/Age-Calculator/style.css | 36 ++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/Calculators/Age-Calculator/style.css b/Calculators/Age-Calculator/style.css index 5c287c251..15c5bc569 100644 --- a/Calculators/Age-Calculator/style.css +++ b/Calculators/Age-Calculator/style.css @@ -173,4 +173,40 @@ #close-alert:hover { background-color: #f8d7da; +} + +@media (max-width: 768px) { + #main { + /* width: 90%; */ + } + #heading h1 { + font-size: 1.5em; + } + #onetwo button { + margin: 0 0 4px; + padding:5px; + font-size: 0.9em; + } + #ip1, #ip2 { + font-size: 1em; + height: 2.2vmax; + padding-left: 1.2vmax; + padding-right: 1.2vmax; + } +} + +@media (max-width: 576px) { + #main { + + padding:20px; + } + #heading h1 { + font-size: 1.2em; + } + #twotwo h2 { + font-size: 1.5vmax; + } + #twoone img { + height: 25vmax; + } } \ No newline at end of file From 1f9d5b41d1550176b141c0a725e0ce2fd0e492e6 Mon Sep 17 00:00:00 2001 From: Medha K Date: Fri, 7 Jun 2024 13:44:59 +0530 Subject: [PATCH 14/16] add responsiveness to aqi calculator --- .../Air-Quality-Index-Calculator/style.css | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/Calculators/Air-Quality-Index-Calculator/style.css b/Calculators/Air-Quality-Index-Calculator/style.css index 8b0db0b95..b5dbf7e7a 100644 --- a/Calculators/Air-Quality-Index-Calculator/style.css +++ b/Calculators/Air-Quality-Index-Calculator/style.css @@ -28,15 +28,16 @@ body { color: rgb(10, 10, 10); text-align: center; width: 40%; - height: 40%; + height: fit-content; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding-top: 50px; } #input-label { - font-size: 20px; + font-size: 23px; font-weight: 500; color: #000000; + margin-bottom: 20px; } #input-id { @@ -72,3 +73,31 @@ button:hover { justify-content: center; font-weight: bold; } +@media (max-width: 992px) { + .container{ + width:60%; + } +} +@media (max-width: 768px){ + .container{ + width:60%; + } + #input-id{ + margin-top:20px; + } +} +@media (max-width: 576px) { + .container{ + width:70%; + padding:20px; + height:fit-content; + } + #input-id{ + margin-top:20px; + margin-bottom: 0px; + margin-left: 0px; + } + #input-label{ + font-size:15px; + } +} \ No newline at end of file From 2f55366f4e13c4a75d4c5a19782124b8f5f7da72 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Tue, 11 Jun 2024 21:02:46 +0530 Subject: [PATCH 15/16] Update style.css --- Calculators/Age-Calculator/style.css | 36 ---------------------------- 1 file changed, 36 deletions(-) diff --git a/Calculators/Age-Calculator/style.css b/Calculators/Age-Calculator/style.css index 15c5bc569..e0476353d 100644 --- a/Calculators/Age-Calculator/style.css +++ b/Calculators/Age-Calculator/style.css @@ -174,39 +174,3 @@ #close-alert:hover { background-color: #f8d7da; } - -@media (max-width: 768px) { - #main { - /* width: 90%; */ - } - #heading h1 { - font-size: 1.5em; - } - #onetwo button { - margin: 0 0 4px; - padding:5px; - font-size: 0.9em; - } - #ip1, #ip2 { - font-size: 1em; - height: 2.2vmax; - padding-left: 1.2vmax; - padding-right: 1.2vmax; - } -} - -@media (max-width: 576px) { - #main { - - padding:20px; - } - #heading h1 { - font-size: 1.2em; - } - #twotwo h2 { - font-size: 1.5vmax; - } - #twoone img { - height: 25vmax; - } -} \ No newline at end of file From 7a65e9a56219d31e80e8106381bda9a377a84417 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Tue, 11 Jun 2024 21:03:38 +0530 Subject: [PATCH 16/16] Update style.css --- .../Air-Quality-Index-Calculator/style.css | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/Calculators/Air-Quality-Index-Calculator/style.css b/Calculators/Air-Quality-Index-Calculator/style.css index b5dbf7e7a..51661ab69 100644 --- a/Calculators/Air-Quality-Index-Calculator/style.css +++ b/Calculators/Air-Quality-Index-Calculator/style.css @@ -73,31 +73,37 @@ button:hover { justify-content: center; font-weight: bold; } + @media (max-width: 992px) { - .container{ - width:60%; + .container { + width: 60%; } } -@media (max-width: 768px){ - .container{ - width:60%; + +@media (max-width: 768px) { + .container { + width: 60%; } - #input-id{ - margin-top:20px; + + #input-id { + margin-top: 20px; } } + @media (max-width: 576px) { - .container{ - width:70%; - padding:20px; - height:fit-content; + .container { + width: 70%; + padding: 20px; + height: fit-content; } - #input-id{ - margin-top:20px; + + #input-id { + margin-top: 20px; margin-bottom: 0px; margin-left: 0px; } - #input-label{ - font-size:15px; + + #input-label { + font-size: 15px; } -} \ No newline at end of file +}