From 58e196e931d3cfda8c85f5f8f8648f28daa41178 Mon Sep 17 00:00:00 2001 From: aalee9263 <144584171+aalee9263@users.noreply.github.com> Date: Wed, 25 Oct 2023 23:31:11 +0500 Subject: [PATCH] close to final --- converter.html | 56 +++++++++++++++++++++++++++++++++++++++++++++++ converter.js | 11 ---------- index.html | 59 +++++++++++++++++++++++++------------------------- script.js | 21 ++++++++++++++++++ style.css | 21 +++++++++--------- 5 files changed, 117 insertions(+), 51 deletions(-) create mode 100644 converter.html delete mode 100644 converter.js create mode 100644 script.js diff --git a/converter.html b/converter.html new file mode 100644 index 0000000..4ce8f95 --- /dev/null +++ b/converter.html @@ -0,0 +1,56 @@ + + + + Length Converter + + +

Lengths Converter

+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/converter.js b/converter.js deleted file mode 100644 index f2d9cce..0000000 --- a/converter.js +++ /dev/null @@ -1,11 +0,0 @@ -let celsius = document.getElementById("celsius"); -let farenheit = document.getElementById("farenheit"); - -function celToFar() { - let output = (parseFloat(celsius.value) * 9) / 5 + 32; - farenheit.value = parseFloat(output.toFixed(2)); -} -function farToCel() { - let output = ((parseFloat(farenheit.value) - 32) * 5) / 9; - celsius.value = parseFloat(output.toFixed(2)); -} diff --git a/index.html b/index.html index 0cf6a2c..2ae0ae0 100644 --- a/index.html +++ b/index.html @@ -5,36 +5,35 @@ -

- Lengths Converter -

inches, - feet, yards, kilometers, and miles. -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+

Lengths Converter

+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
- +
+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..e8c69b5 --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +function convertLength(unit) { + let units = { + meters: 1, + centimeters: 100, + inches: 39.37, + feet: 3.28, + yards: 1.09, + miles: 0.000621, + kilometers: 0.001, + millimeters: 1000 + }; + + let value = parseFloat(document.getElementById(unit).value); + + for (let otherUnit in units) { + if (otherUnit !== unit) { + let convertedValue = value * units[unit] / units[otherUnit]; + document.getElementById(otherUnit).value = convertedValue; + } + } +} \ No newline at end of file diff --git a/style.css b/style.css index 21cf25f..dc28586 100644 --- a/style.css +++ b/style.css @@ -17,37 +17,38 @@ body { color: #b6b1b1dc; } .converter { - width: 420px; + width: 520px; margin: 0 auto; border: 1px solid #ccc; padding: 10px; border-radius: 20px; background: linear-gradient(45deg, #0a0a0a, #3a4452); display: flex; - justify-content: space-evenly; + justify-content: space-between; color: #ffffffdc; font-size: 22px; + flex-wrap: wrap; + } + label { - margin: 16px; + margin-left: 20px; } .container { margin: 10px; + display: flex; + flex-direction: column; } input { - width: 90%; + width: 180px; border: 1px solid #717377; box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); border-radius: 10px; - padding: 3px; + padding: 0; margin: 10px 10px; background: transparent; font-size: 50px; text-align: left; cursor: pointer; color: #ffffff; -} -.formula { - display: flex; - flex-direction: row; -} +} \ No newline at end of file