From 431bf2b876fcb823c671528b1e750a7f8e87d2dc Mon Sep 17 00:00:00 2001 From: AkshatVerma01 Date: Tue, 17 Oct 2023 23:18:58 +0530 Subject: [PATCH] Added Length Convertor --- Unit-Conversion/index.html | 36 ++++++++++++++++ Unit-Conversion/script.js | 23 ++++++++++ Unit-Conversion/style.css | 86 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 Unit-Conversion/index.html create mode 100644 Unit-Conversion/script.js create mode 100644 Unit-Conversion/style.css diff --git a/Unit-Conversion/index.html b/Unit-Conversion/index.html new file mode 100644 index 0000000..53cabc0 --- /dev/null +++ b/Unit-Conversion/index.html @@ -0,0 +1,36 @@ + + + + + + + Length-Converter + + + + +
+

Length-Convertor

+
+ +
+
+ +
+ +
+

=

+
+ +
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/Unit-Conversion/script.js b/Unit-Conversion/script.js new file mode 100644 index 0000000..c149728 --- /dev/null +++ b/Unit-Conversion/script.js @@ -0,0 +1,23 @@ +var feet = document.getElementById('feet') +var inch = document.getElementById('inch') + + +feet.addEventListener('input', function(){ + + let f= this.value + let i= f*12 + inch.value=i + +}); + +inch.addEventListener('input', function(){ + + let i= this.value + let f= i/12 + + if(!Number.isInteger(f)){ + f=f.toFixed(2); + } + feet.value=f + +}); \ No newline at end of file diff --git a/Unit-Conversion/style.css b/Unit-Conversion/style.css new file mode 100644 index 0000000..6bc4f2c --- /dev/null +++ b/Unit-Conversion/style.css @@ -0,0 +1,86 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + text-transform: uppercase; +} + +label{ + text-transform: capitalize; + font-weight: 600; +} + +#heading{ + text-align: center; + font-size: 3rem; + margin-top: 50px; + color: rgb(32, 5, 56); + font-weight: 800; +} + +#heading::after{ + content: " "; + height: 5px; + width: 510px; + display: block; + background-color: rgb(33, 5, 61); + position: absolute; + margin: 10px auto; + left:32%; +} + +.container{ + background-color: rgba(111, 26, 190, 0.829); + margin-top: 10%; + padding: 20px; + height: 50%; + width: 70%; + border-radius: 30px; + align-items: center; + justify-content: center; + box-shadow: inset 10px 20px 30px rgba(170, 125, 207, 0.308); + /* box-shadow: 0px 10px 15px rgba(52, 14, 87, 0.945) ; */ +} + + +body{ + width: 100%; + height: 100vh; + display: flex; + align-self: center; + justify-content: center; + background-color: rgb(78, 14, 116); +} + +.content{ + display: flex; + text-align: center; + margin: 6% 15%; + align-items: center; + justify-content: center; + background-color: rgb(148, 73, 219); + font-size: 20px; + height: 100px; + width: fit-content; + font-weight: 600; + border-radius: 10px; + padding: 10px 0; + box-shadow: inset 0px 10px 10px rgba(170, 114, 223, 0.308); +} +.content1{ + display:inline-block; +} + +.content2{ + padding: 5px 10px; + font-size: 2rem; + font-weight: 600; + width: 300px; + height: 50px; + text-align: center; + border-radius: 10px; + border:0; + margin: 10px; + border: 2px solid rgb(99, 6, 99); +}