diff --git a/html/JS-Dom.js b/html/JS-Dom.js new file mode 100644 index 0000000..96aa35c --- /dev/null +++ b/html/JS-Dom.js @@ -0,0 +1,27 @@ +// Part 1 - Converting Fahrenheit value to Celsius with click button +//Part 2 - Converting Fahrenheit value to Kelvin and Rankine + + +const calculate = () => { + const fv = parseFloat(document.getElementById('fahv').value); + + let newfahv = (fv); + console.log(newfahv); //verified the calculation + document.getElementById("fahv2").value = newfahv; + + + let newcelv = (fv - 32) * 5/9; + console.log(newcelv); //verified the calculation + document.getElementById("celv").value = newcelv; + + + let newkelv = parseFloat((fv - 32) / 1.8) + 273.15; + console.log(newkelv); //verified the calculation + document.getElementById("kelv").value = newkelv; + + + let newrankv = parseFloat(fv + 459.67).toFixed(2); + console.log(newrankv); //verified the calculation + document.getElementById("rankv").value = newrankv; + +} diff --git a/img/mockupPart1.png b/html/img/mockupPart1.png similarity index 100% rename from img/mockupPart1.png rename to html/img/mockupPart1.png diff --git a/img/mockupPart2.png b/html/img/mockupPart2.png similarity index 100% rename from img/mockupPart2.png rename to html/img/mockupPart2.png diff --git a/img/mockupPart3.png b/html/img/mockupPart3.png similarity index 100% rename from img/mockupPart3.png rename to html/img/mockupPart3.png diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..824f91e --- /dev/null +++ b/html/index.html @@ -0,0 +1,48 @@ + + + + + + Temperature Scale Convertor + + + +
+

Temperature Scale Convertor

+ +
+
Value
+
+ +
+
+
Fahrenheit
+ + + +
+
+ +
+
+
Fahrenheit
+
Celsius
+
Kelvin
+
Rankine
+
+
+ +
+
+ + + + +
+
+ +
+ + + + \ No newline at end of file diff --git a/html/style.css b/html/style.css new file mode 100644 index 0000000..f9c7595 --- /dev/null +++ b/html/style.css @@ -0,0 +1,133 @@ +* { + padding: 0px; + margin: 0px; +} + +body { + width: 788px; + height: 490px; + font-family: Arial, Helvetica, sans-serif; +} + +.container { + width: 720px; + height: 419px; + border: 2px solid black; + padding: 40px; + margin: 3px 34px 34px 34px; +} + +.h1 { + font-size: 51px; + justify-content: center; + margin-bottom: 30px; +} + +.value { + justify-content: center; + font-size: 25px; + padding-top: 30px; + margin-left: 327px; +} + +.fahrenheit { + margin-left: 10px; + font-size: 25px; +} + +.fahrenheit2 { + font-size: 25px; + text-align: center; + padding-top: 30px; + padding-bottom: 5px; +} + +.celsius { + text-align: center; + font-size: 25px; + padding-top: 30px; + padding-bottom: 5px; +} + +.kelvin { + text-align: center; + font-size: 25px; + padding-top: 30px; + padding-bottom: 5px; +} + +.rankine { + text-align: center; + font-size: 25px; + padding-top: 30px; + padding-bottom: 5px; +} + +.col-md-3 { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + padding-top: 15px; +} + +.col-md-4 { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; + padding-top: 15px; +} + +#myBtn { + width: 162px; + height: 42px; + background-color: rgb(221, 232, 250); + border: 2px solid rgb(114, 142, 187); + font-size: 25px; + margin-left: 70px; +} + +#fahv { + width: 162px; + height: 42px; + margin-left: 40px; + font-size: 25px; + text-align: center; + border: 2px solid #000000; +} + +#fahv2 { + width: 162px; + height: 42px; + margin-left: 10px; + font-size: 25px; + text-align: center; + border: none; +} + +#celv { + width: 162px; + height: 42px; + margin-left: 10px; + font-size: 25px; + text-align: center; + border: none; +} + +#kelv { + width: 162px; + height: 42px; + margin-left: 10px; + font-size: 25px; + text-align: center; + border: none; +} + +#rankv { + width: 162px; + height: 42px; + margin-left: 10px; + font-size: 25px; + text-align: center; + border: none; +} +