diff --git a/Calculators/Body-Shape-Calculator/README.md b/Calculators/Body-Shape-Calculator/README.md new file mode 100644 index 000000000..0c1bfda8c --- /dev/null +++ b/Calculators/Body-Shape-Calculator/README.md @@ -0,0 +1,16 @@ +#

Body Shape Calculator

+ +## Description :- + +Calculator that is based on comparing the waist and bust/chest measurements to the hip measurements. This helps categorize a body shape category (Rectangle, hourglass, triangle, etc).
+This calculator will display your body shape + suggest clothing styles. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/06ede4c0-221e-40b2-ba15-3d200151c4c8) diff --git a/Calculators/Body-Shape-Calculator/index.html b/Calculators/Body-Shape-Calculator/index.html new file mode 100644 index 000000000..ccf7bf11c --- /dev/null +++ b/Calculators/Body-Shape-Calculator/index.html @@ -0,0 +1,47 @@ + + + + + + + + Body Shape Calculator + + + +

Find your body style

+
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+
+
+
+ + + + + diff --git a/Calculators/Body-Shape-Calculator/script.js b/Calculators/Body-Shape-Calculator/script.js new file mode 100644 index 000000000..abb5968bd --- /dev/null +++ b/Calculators/Body-Shape-Calculator/script.js @@ -0,0 +1,60 @@ +function calculateShape() { + const bustInput = document.getElementById("bust"); + const waistInput = document.getElementById("waist"); + const hipsInput = document.getElementById("hips"); + + // Get unit values from each select element + const bustUnit = bustInput.parentElement.querySelector(".unit-selector").value; + const waistUnit = waistInput.parentElement.querySelector(".unit-selector").value; + const hipsUnit = hipsInput.parentElement.querySelector(".unit-selector").value; + + let convertedBust = parseFloat(bustInput.value); + let convertedWaist = parseFloat(waistInput.value); + let convertedHips = parseFloat(hipsInput.value); + + // Convert to centimeters if selected + if (bustUnit === "centimeters") { + convertedBust *= 2.54; + } + if (waistUnit === "centimeters") { + convertedWaist *= 2.54; + } + if (hipsUnit === "centimeters") { + convertedHips *= 2.54; + } + + let resultText; + let suggestionText; + + if (convertedBust > convertedWaist && convertedBust > convertedHips) { + resultText = "RESULT:-Triangle Shape"; + suggestionText = "SUGGESTION:-Wear clothes like A-line skirts, V-neck tops, and wrap dresses."; + } else if (convertedWaist > convertedBust && convertedWaist > convertedHips) { + resultText = "RESULT:-Inverted Triangle Shape"; + suggestionText = "SUGGESTION:-Wear clothes like wide-leg pants, boat neck tops, and structured jackets."; + } else if (convertedHips > convertedBust && convertedHips > convertedWaist) { + resultText = "RESULT:-Rectangle Shape"; + suggestionText = "SUGGESTION:-Wear clothes like high-waisted pants, peplum tops, and belted dresses."; + } else if (convertedBust === convertedWaist && convertedBust === convertedHips) { + resultText = "RESULT:-Hourglass Shape"; + suggestionText = "SUGGESTION:-Wear clothes like wrap dresses, pencil skirts, and fitted tops."; + } else if (convertedBust === convertedWaist || convertedBust === convertedHips || convertedWaist === convertedHips) { + resultText = "RESULT:-Diamond Shape"; + suggestionText = "SUGGESTION:-Wear clothes like bootcut pants, off-the-shoulder tops, and empire waist dresses."; + } else if (convertedBust < convertedWaist && convertedBust < convertedHips) { + resultText = "RESULT:-Pear Shape"; + suggestionText = "SUGGESTION:-Wear clothes like bootcut pants, off-the-shoulder tops, and empire waist dresses."; + } else if (convertedWaist < convertedBust && convertedWaist < convertedHips) { + resultText = "RESULT:-Apple Shape"; + suggestionText = "SUGGESTION:-Wear clothes like A-line skirts, V-neck tops, and wrap dresses."; + } else if (convertedHips < convertedBust && convertedHips < convertedWaist) { + resultText = "RESULT:-Oval Shape"; + suggestionText = "SUGGESTION:-Wear clothes like wide-leg pants, boat neck tops, and structured jackets."; + } else { + resultText = "Invalid input. Please enter valid measurements."; + suggestionText = ""; + } + + document.getElementById("result").innerHTML = resultText; + document.getElementById("suggestion").innerHTML = suggestionText; +} diff --git a/Calculators/Body-Shape-Calculator/style.css b/Calculators/Body-Shape-Calculator/style.css new file mode 100644 index 000000000..116944f81 --- /dev/null +++ b/Calculators/Body-Shape-Calculator/style.css @@ -0,0 +1,123 @@ +body { + font-weight: bold; + background: rgb(238, 174, 202); + background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); + opacity: 1; + font-family: Arial, sans-serif; + display: block; + justify-content: center; + align-items: center; + height: 100vh; + margin: 20; + color: #111010; +} + +footer { + color: #111010; + text-align: center; + display: block; +} + +img { + margin-bottom: 20px; + width: 70px; + height: 50px; +} + +h1 { + text-align: center; + font-style: oblique; + font-size: 1.5em; + font-weight: bolder; + +} + +.container { + display: block; + background-color: rgba(221, 178, 203, 0.768); + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + max-width: 400px; + width: 100%; + text-align: center; + margin: 0 auto; +} + +hr { + color: #cba8ec; +} + +label { + display: flex; + margin-bottom: 5px; + font-weight: bold; +} + +.input-group { + margin-bottom: 15px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 5px; +} + +.input-group input { + width: 80%; + padding: 10px; + border: 1px solid rgb(234, 229, 230); + border-radius: 5px; + font-size: 16px; +} + +.input-group button { + width: 100%; + padding: 10px; + background-color: #de8dad; + color: white; + border: none; + border-radius: 5px 0 0 5px; + cursor: pointer; + font-size: 1em; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: rgb(222, 197, 210); +} + +.unit-selector { + padding: 10px; + border-color: #e4b3c7; + color: rgb(157, 155, 155); + border: #de8dad; + border-radius: 0 5px 5px 0; + cursor: pointer; + font-size: 1em; +} + +#result { + margin-top: 20px; + padding: 15px; + text-align: center; + font-size: 1.2em; + font-weight: bold; +} + +.footer { + text-align: center; + font-size: 1em; + font-weight: lighter; + color: #ada8a8; +} + +#result.hidden { + display: none; +} + +#suggestion { + font-size: 1em; + font-weight: lighter; + color: #454445; + text-align: center; +} diff --git a/Calculators/Capacitance-Calculator/README.md b/Calculators/Capacitance-Calculator/README.md new file mode 100644 index 000000000..dd1a0ed10 --- /dev/null +++ b/Calculators/Capacitance-Calculator/README.md @@ -0,0 +1,15 @@ +#

Capacitance Calculator

+ +## Description :- + +This calculator will help to find the capacitance in a parallel plate capacitor. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/f9692a50-1dc2-4a22-89e8-33a2431b66a1) diff --git a/Calculators/Capacitance-Calculator/index.html b/Calculators/Capacitance-Calculator/index.html new file mode 100644 index 000000000..049ed9417 --- /dev/null +++ b/Calculators/Capacitance-Calculator/index.html @@ -0,0 +1,35 @@ + + + + + + + Capacitance Calculator + + +
+

Parallel Plate Capacitor Calculator

+ + + (mm²) +
+ + + (mm) +
+ + +
+ +
+ + + (uF) +
+ + + (pF) +
+ + + diff --git a/Calculators/Capacitance-Calculator/script.js b/Calculators/Capacitance-Calculator/script.js new file mode 100644 index 000000000..2cb73b005 --- /dev/null +++ b/Calculators/Capacitance-Calculator/script.js @@ -0,0 +1,23 @@ +function computeCapacitance() { + const epsilon0 = 8.854187817e-12; // Vacuum permittivity in F/m + const area = document.getElementById("area").value; + const distance = document.getElementById("distance").value; + const dielectric = document.getElementById("dielectric").value; + + if (area && distance && dielectric) { + const areaMeters = area * 1e-6; // convert mm² to m² + const distanceMeters = distance * 1e-3; // convert mm to m + const capacitanceFarads = + (dielectric * epsilon0 * areaMeters) / distanceMeters; + + const capacitanceMicroFarads = capacitanceFarads * 1e6; + const capacitancePicoFarads = capacitanceFarads * 1e12; + + document.getElementById("capacitanceUF").value = + capacitanceMicroFarads.toFixed(6); + document.getElementById("capacitancePF").value = + capacitancePicoFarads.toFixed(6); + } else { + alert("Please fill in all fields."); + } +} diff --git a/Calculators/Capacitance-Calculator/style.css b/Calculators/Capacitance-Calculator/style.css new file mode 100644 index 000000000..423cb6a41 --- /dev/null +++ b/Calculators/Capacitance-Calculator/style.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, sans-serif; + background: linear-gradient(to right, #4facfe, #00f2fe); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.calculator { + background: #ffffff; + padding: 20px; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; + text-align: center; + animation: fadeIn 1.5s ease-in-out; +} + +h1 { + font-size: 1.5em; + margin-bottom: 20px; + color: #333; +} + +label { + display: block; + margin: 10px 0 5px; + color: #555; + font-weight: bold; +} + +input[type="number"], +input[type="text"] { + width: calc(100% - 30px); + padding: 10px; + margin-bottom: 10px; + border: 2px solid #ddd; + border-radius: 10px; + transition: border-color 0.3s; +} + +input[type="number"]:focus, +input[type="text"]:focus { + border-color: #00f2fe; + outline: none; +} + +button { + background: linear-gradient(to right, #ff416c, #ff4b2b); + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 1em; + transition: background 0.3s; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +button:hover { + background: linear-gradient(to right, #ff4b2b, #ff416c); +} + +span { + color: #555; + font-weight: bold; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/Calculators/Clothing-Size-Calculator/index.html b/Calculators/Clothing-Size-Calculator/index.html index 315f13a9a..18b04725f 100644 --- a/Calculators/Clothing-Size-Calculator/index.html +++ b/Calculators/Clothing-Size-Calculator/index.html @@ -62,4 +62,4 @@

🌏 International Clothing Size Calculator ✨

- \ No newline at end of file + diff --git a/Calculators/Lottery-Odds-Calculator/README.md b/Calculators/Lottery-Odds-Calculator/README.md new file mode 100644 index 000000000..bf4cf4bf2 --- /dev/null +++ b/Calculators/Lottery-Odds-Calculator/README.md @@ -0,0 +1,15 @@ +#

Lottery Odds Calculator

+ +## Description :- + +A calculator that calculates your chances of winning the lottery by taking the input as the number of tickets sold and the number of tickets bought by you. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/c850c5f9-19e7-4e12-bcf2-606661176d74) diff --git a/Calculators/Lottery-Odds-Calculator/index.html b/Calculators/Lottery-Odds-Calculator/index.html new file mode 100644 index 000000000..b73eaea7d --- /dev/null +++ b/Calculators/Lottery-Odds-Calculator/index.html @@ -0,0 +1,33 @@ + + + + + + + + Lottery Odds Calculator + + + +
+

Lottery Odds Calculator

+
+ +
+ + + + + + + +
+
+ Your chances of winning the lottery are: +

+
+ + + + + diff --git a/Calculators/Lottery-Odds-Calculator/script.js b/Calculators/Lottery-Odds-Calculator/script.js new file mode 100644 index 000000000..c1726e1da --- /dev/null +++ b/Calculators/Lottery-Odds-Calculator/script.js @@ -0,0 +1,21 @@ +function calculate() { + // Get input values + const tickets = parseFloat(document.getElementById('tickets').value); + const sold = parseFloat(document.getElementById('sold').value); + + // Validate inputs + if (isNaN(tickets) || isNaN(sold) || sold <= 0) { + document.getElementById('result').textContent = 'Please enter the values'; + return; + } + + // Perform the calculation + let r = tickets / sold; + r = r * 100; + let result = r.toFixed(2); // Limit to two decimal places + result += "%"; + + // Display the result + const resultElement = document.getElementById('result'); + resultElement.textContent = result; +} diff --git a/Calculators/Lottery-Odds-Calculator/style.css b/Calculators/Lottery-Odds-Calculator/style.css new file mode 100644 index 000000000..dbce005e3 --- /dev/null +++ b/Calculators/Lottery-Odds-Calculator/style.css @@ -0,0 +1,72 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + background-color: #aaf0dd; +} + +header { + background-color: #3c25e8; + color: #fff; + text-align: center; + padding: 1em; +} + +#calculator { + max-width: 300px; + margin: 20px auto; + border: 2px solid #0c0101; + padding: 20px; + border-radius: 8px; + background: linear-gradient(to right, #deec76, #15df0e); + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + text-align: center; +} + +label { + display: block; + margin-bottom: 8px; + color: #333; +} + +input, +select { + width: 100%; + padding: 10px; + margin-bottom: 16px; + box-sizing: border-box; + border-radius: 9px; +} + +button { + width: 100%; + height: 40px; + font-size: 16px; + cursor: pointer; + background-color: #103cee; + color: #fff; + border: none; + border-radius: 9px; + transition: background-color 0.3s; +} + +button:hover { + background-color: #45a09e; +} + +#result { + margin-top: 16px; + font-weight: bold; + color: red; + text-align: center; + font-size: 22px; +} + +#base { + font-weight: bold; +} + +#value { + font-weight: bold; +} diff --git a/Calculators/Sum-Of-Digits-Calculator/README.md b/Calculators/Sum-Of-Digits-Calculator/README.md new file mode 100644 index 000000000..f6f52c19e --- /dev/null +++ b/Calculators/Sum-Of-Digits-Calculator/README.md @@ -0,0 +1,17 @@ +#

Sum Of Digits Calculator

+ +## Description :- + +Calculator that is used to find the sum of all digits in a given number.
+For example, when 107 is given:
+1 + 0 + 7 = 8
+ +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/user-attachments/assets/011a1bd7-8efc-4de3-9365-c03e4f239c00) diff --git a/Calculators/Sum-Of-Digits-Calculator/assets/background.png b/Calculators/Sum-Of-Digits-Calculator/assets/background.png new file mode 100644 index 000000000..1cd5c11f6 Binary files /dev/null and b/Calculators/Sum-Of-Digits-Calculator/assets/background.png differ diff --git a/Calculators/Sum-Of-Digits-Calculator/index.html b/Calculators/Sum-Of-Digits-Calculator/index.html new file mode 100644 index 000000000..a729cb71e --- /dev/null +++ b/Calculators/Sum-Of-Digits-Calculator/index.html @@ -0,0 +1,23 @@ + + + + + + + Sum Of Digits Calculator + + +
+
+

Sum Of Digits Calculator

+

Enter any number here to know its Sum Of Digits!!

+
+
+ + +
+

+
+ + + diff --git a/Calculators/Sum-Of-Digits-Calculator/script.js b/Calculators/Sum-Of-Digits-Calculator/script.js new file mode 100644 index 000000000..dc7e0a7d9 --- /dev/null +++ b/Calculators/Sum-Of-Digits-Calculator/script.js @@ -0,0 +1,35 @@ +const txtInput = document.querySelector(".inputs input"), + checkBtn = document.querySelector(".inputs button"), + infoTxt = document.querySelector(".info-txt"); +let filterInput; + + +function isString(value) { + return typeof value === 'string' || value instanceof String; +} + +function sumDigits(value) { + sum = 0; + + while (value) { + sum += value % 10; + value = Math.floor(value / 10); + } + return sum; +} + +checkBtn.addEventListener("click", () => { + let n = filterInput; + infoTxt.style.display = "block"; + infoTxt.innerHTML = `Sum Of Digits of '${txtInput.value}' is '${sumDigits(n)}'`; + +}); + +txtInput.addEventListener("keyup", () => { + filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, ""); + if (filterInput) { + return checkBtn.classList.add("active"); + } + infoTxt.style.display = "none"; + checkBtn.classList.remove("active"); +}); diff --git a/Calculators/Sum-Of-Digits-Calculator/style.css b/Calculators/Sum-Of-Digits-Calculator/style.css new file mode 100644 index 000000000..f609ba0f1 --- /dev/null +++ b/Calculators/Sum-Of-Digits-Calculator/style.css @@ -0,0 +1,133 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: flex; + padding: 0 10px; + background-image: url("assets/background.png"); + align-items: center; + justify-content: center; + min-height: 100vh; + margin-top: 200px; + background-size: 100% 100%; + overflow: hidden; +} + +::selection { + color: #fff; + background: rgb(170, 87, 204, 0.8); +} + +.wrapper { + max-width: 500px; + background: #fff; + border-radius: 7px; + padding: 20px 25px 15px; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); + margin-bottom: 269px; +} + +header h1 { + font-size: 27px; + font-weight: 500; +} + +header p { + margin-top: 5px; + font-size: 18px; + color: #474747; +} + +.inputs { + margin: 20px 0 27px; +} + +.inputs input { + width: 100%; + height: 60px; + outline: none; + padding: 0 17px; + font-size: 19px; + border-radius: 5px; + border: 1px solid #999; + transition: 0.1s ease; +} + +.inputs input::placeholder { + color: #999999; +} + +.inputs input:focus { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13); +} + +.inputs input:focus::placeholder { + color: #bebebe; +} + +.inputs button { + width: 100%; + height: 56px; + border: none; + opacity: 0.7; + outline: none; + color: #fff; + cursor: pointer; + font-size: 17px; + margin-top: 20px; + border-radius: 5px; + pointer-events: none; + background: #AA57CC; + transition: opacity 0.15s ease; +} + +.inputs button.active { + opacity: 1; + pointer-events: auto; +} + +.info-txt { + display: none; + font-size: 19px; + text-align: center; + margin-bottom: 18px; +} + +.info-txt span { + color: #AA57CC; +} + +@media (max-width: 520px) { + .wrapper { + padding: 17px 20px 10px; + } + + header h1 { + font-size: 25px; + } + + header p { + font-size: 16px; + } + + .inputs input { + height: 54px; + font-size: 17px; + } + + .inputs button { + height: 50px; + font-size: 16px; + margin-top: 17px; + } + + .info-txt { + font-size: 18px; + } +} diff --git a/Calculators/Temperature-Calculator/index.html b/Calculators/Temperature-Calculator/index.html index ae997ee05..3dd0fc32e 100644 --- a/Calculators/Temperature-Calculator/index.html +++ b/Calculators/Temperature-Calculator/index.html @@ -11,7 +11,7 @@
-
+

@@ -31,36 +31,35 @@

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

-
-
+
- \ No newline at end of file + diff --git a/Calculators/Temperature-Calculator/script.js b/Calculators/Temperature-Calculator/script.js index b6d6eccd6..44b394ad5 100644 --- a/Calculators/Temperature-Calculator/script.js +++ b/Calculators/Temperature-Calculator/script.js @@ -1,4 +1,51 @@ -document.getElementById("submitButton").onclick = function () { +const fromUnitElements = document.querySelectorAll('input[name="fromUnit"]'); +const toUnitElements = document.querySelectorAll('input[name="toUnit"]'); +const submitButton = document.getElementById("submitButton"); + +fromUnitElements.forEach(element => { + element.addEventListener('change', handleUnitChange); + element.addEventListener('change', () => { + if (isSubmitted) { + debounce(updateResult, 600)(); + } + }); +}); + +// debouncing function to minimize function calls +toUnitElements.forEach(element => { + element.addEventListener('change', () => { + if (isSubmitted) { + debounce(updateResult, 600)(); + } + }); +}); + +// unit change handling function to display cconversions with selected unit +function handleUnitChange() { + const selectedFromUnit = document.querySelector('input[name="fromUnit"]:checked').value; + + toUnitElements.forEach(element => { + if (element.value === selectedFromUnit) { + element.disabled = true; + } else { + element.disabled = false; + } + }); +} + +let debounceTimeout; +let isSubmitted = false; +let callCount = 0; + +submitButton.onclick = function () { + updateResult(); + isSubmitted = true; +} + +function updateResult() { + // callCount++; + // console.log(`updateResult called ${callCount} times`); // Log the call count + let temp = Number(document.getElementById("textBox").value); const sourceUnitElement = document.querySelector( @@ -15,7 +62,8 @@ document.getElementById("submitButton").onclick = function () { const sourceUnit = sourceUnitElement.value; const targetUnit = targetUnitElement.value; - const targetUnitSymbol = targetUnitElement.dataset.symbol; + + const originalTemp = temp; // we use kelvin as the base temp, this removes the need to account for possible combination of selections var converter = { @@ -51,9 +99,16 @@ document.getElementById("submitButton").onclick = function () { if (sourceUnit != "kelvin") temp = converter[sourceUnit].toKelvin(temp); if (targetUnit != "kelvin") temp = converter[targetUnit].fromKelvin(temp); - displayMessage(`${temp}°${targetUnitSymbol}`); + displayMessage(`${originalTemp} degrees ${sourceUnit} is ${temp.toFixed(2)} degrees ${targetUnit}`); }; function displayMessage(string) { document.getElementById("result").innerHTML = string; +} + +function debounce(func, delay) { + return function(...args) { + clearTimeout(debounceTimeout); + debounceTimeout = setTimeout(() => func.apply(this, args), delay); + }; } \ No newline at end of file diff --git a/Calculators/Temperature-Calculator/style.css b/Calculators/Temperature-Calculator/style.css index c2d97463a..04d5289cb 100644 --- a/Calculators/Temperature-Calculator/style.css +++ b/Calculators/Temperature-Calculator/style.css @@ -1,72 +1,83 @@ body { - background-color: #449f6c; + background: linear-gradient(135deg, #ff7e5f, #feb47b); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + color: #fff; } .container { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: #93cfc9; - padding: 20px; - width: 500px; - margin: auto; - padding-top: 20px; - margin-top: 36px; - text-align: center; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + border-radius: 12px; + background: linear-gradient(135deg, #00c6ff, #0072ff); + padding: 30px; + width: 100%; + max-width: 600px; + margin: 20px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; - text-align: justify; + text-align: left; } .labelId { - margin-left: 64px; + font-weight: bold; + color: #f8f8f8; } input[type="radio"] { - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + margin-right: 8px; } -input[type="text"], -select { +input[type="text"] { width: 100%; - padding: 12px 20px; + padding: 12px; margin: 8px 0; - display: inline-block; - border: 1px solid #ccc; - border-radius: 4px; + border: none; + border-radius: 8px; box-sizing: border-box; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + background-color: #f8f8f8; + color: #333; } button[type="submit"] { width: 100%; - background-color: #4caf50; + background-color: #f45b69; color: white; - padding: 14px 20px; + padding: 14px; margin: 8px 0; border: none; - border-radius: 4px; + border-radius: 8px; cursor: pointer; - font-size: 30px; + font-size: 16px; + transition: background-color 0.3s, transform 0.3s; } button[type="submit"]:hover { - background-color: #45a049; + background-color: #e04e5a; + transform: scale(1.03); } #resultId { - background-color: #93cfc9; - width: 500px; + background-color: #fff; + color: #333; + width: 100%; + max-width: 600px; padding: 20px; - margin: auto; + margin: 20px auto 0; text-align: center; - padding-top: 0px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 5px; + border-radius: 12px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } #result { font-weight: bold; -} \ No newline at end of file + margin-top: 10px; + color: #333; +} diff --git a/Calculators/Unit-Calculator/index.html b/Calculators/Unit-Calculator/index.html index 7fc1fdeef..134d537bb 100644 --- a/Calculators/Unit-Calculator/index.html +++ b/Calculators/Unit-Calculator/index.html @@ -1,13 +1,16 @@ + - Unit Calculator + + Unit Calculator + -
+

Unit Calculator

@@ -15,11 +18,13 @@

Unit Calculator

+
+ - +
@@ -30,7 +35,6 @@

Unit Calculator

-