From 8d71caa70d7bb3311345ca55639642f72282a8f0 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Tue, 8 Dec 2020 20:18:01 -0500 Subject: [PATCH 1/3] Part 1 of JSDom Lab --- html/JS-Dom.js | 11 +++++ {img => html/img}/mockupPart1.png | Bin {img => html/img}/mockupPart2.png | Bin {img => html/img}/mockupPart3.png | Bin html/index.html | 37 ++++++++++++++ html/style.css | 78 ++++++++++++++++++++++++++++++ 6 files changed, 126 insertions(+) create mode 100644 html/JS-Dom.js rename {img => html/img}/mockupPart1.png (100%) rename {img => html/img}/mockupPart2.png (100%) rename {img => html/img}/mockupPart3.png (100%) create mode 100644 html/index.html create mode 100644 html/style.css diff --git a/html/JS-Dom.js b/html/JS-Dom.js new file mode 100644 index 0000000..f72482f --- /dev/null +++ b/html/JS-Dom.js @@ -0,0 +1,11 @@ +const calculate = () => { + const fv = document.getElementById('fahv').value; + let newcelv =(fv -32) * 5/9; + console.log(newcelv); + + document.getElementById("celv").value = newcelv; + +} + + + 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..7e66b21 --- /dev/null +++ b/html/index.html @@ -0,0 +1,37 @@ + + + + + + Temperature Scale Convertor + + + +
+

Temperature Scale Convertor

+ +
+
Value
+
+ +
+
+
Fahrenheit
+ + + +
+
+ +
+
+
Celsius
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/html/style.css b/html/style.css new file mode 100644 index 0000000..318b519 --- /dev/null +++ b/html/style.css @@ -0,0 +1,78 @@ +* { + 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: 24px; + padding-top: 30px; + margin-left: 324px; +} + +.fahrenheit { + margin-left: 10px; + font-size: 24px; +} + +.celsius { + justify-content: center; + font-size: 25px; + margin-left: 314px; +} + +.col-md-3 { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 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; +} + +#celv { + width: 162px; + height: 42px; + margin-left: 278px; + font-size: 25px; + text-align: center; + border: 2px solid #000000; +} + + From 9ff1d3b915d29c40367a19d52d6410d999c5e3a5 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Wed, 9 Dec 2020 23:41:51 -0500 Subject: [PATCH 2/3] Part 2 JS-DOM-Lab In Progress --- html/JS-Dom.js | 22 +++++++++++++--- html/index.html | 17 ++++++++++--- html/style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 94 insertions(+), 12 deletions(-) diff --git a/html/JS-Dom.js b/html/JS-Dom.js index f72482f..ffb161b 100644 --- a/html/JS-Dom.js +++ b/html/JS-Dom.js @@ -1,11 +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 = document.getElementById('fahv').value; - let newcelv =(fv -32) * 5/9; - console.log(newcelv); + 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 =((fv - 32) / 1.8) + 273.15; + console.log(newkelv); //verified the calculation + document.getElementById("kelv").value = newkelv; + let newrankv = [fv] + 459.67; + console.log(newrankv); //return temp is not correct + document.getElementById("rankv").value = newrankv; +} diff --git a/html/index.html b/html/index.html index 7e66b21..b25576a 100644 --- a/html/index.html +++ b/html/index.html @@ -23,11 +23,22 @@

Temperature Scale Convertor

-
-
+
+
+
Fahrenheit
Celsius
+
Kelvin
+
Rankine
+
+
+ +
+
+ + + +
-
diff --git a/html/style.css b/html/style.css index 318b519..ac878d1 100644 --- a/html/style.css +++ b/html/style.css @@ -25,20 +25,42 @@ body { .value { justify-content: center; - font-size: 24px; + font-size: 25px; padding-top: 30px; margin-left: 324px; } .fahrenheit { margin-left: 10px; - font-size: 24px; + font-size: 25px; +} + +.fahrenheit2 { + font-size: 25px; + text-align: center; + padding-top: 30px; + padding-bottom: 5px; } .celsius { - justify-content: center; + text-align: center; font-size: 25px; - margin-left: 314px; + 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 { @@ -48,6 +70,13 @@ body { 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; @@ -66,13 +95,39 @@ body { 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: 278px; + margin-left: 10px; font-size: 25px; text-align: center; - border: 2px solid #000000; + 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; +} From 3c14278acfdcd96bd9ac6785ad210942df9bde82 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Fri, 11 Dec 2020 14:35:06 -0500 Subject: [PATCH 3/3] Part 2 of JSDOM Lab- Modified --- html/JS-Dom.js | 10 +++++----- html/index.html | 2 +- html/style.css | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/html/JS-Dom.js b/html/JS-Dom.js index ffb161b..96aa35c 100644 --- a/html/JS-Dom.js +++ b/html/JS-Dom.js @@ -3,8 +3,8 @@ const calculate = () => { - const fv = document.getElementById('fahv').value; - + const fv = parseFloat(document.getElementById('fahv').value); + let newfahv = (fv); console.log(newfahv); //verified the calculation document.getElementById("fahv2").value = newfahv; @@ -15,13 +15,13 @@ const calculate = () => { document.getElementById("celv").value = newcelv; - let newkelv =((fv - 32) / 1.8) + 273.15; + let newkelv = parseFloat((fv - 32) / 1.8) + 273.15; console.log(newkelv); //verified the calculation document.getElementById("kelv").value = newkelv; - let newrankv = [fv] + 459.67; - console.log(newrankv); //return temp is not correct + let newrankv = parseFloat(fv + 459.67).toFixed(2); + console.log(newrankv); //verified the calculation document.getElementById("rankv").value = newrankv; } diff --git a/html/index.html b/html/index.html index b25576a..824f91e 100644 --- a/html/index.html +++ b/html/index.html @@ -11,7 +11,7 @@

Temperature Scale Convertor

-
Value
+
Value
diff --git a/html/style.css b/html/style.css index ac878d1..f9c7595 100644 --- a/html/style.css +++ b/html/style.css @@ -27,7 +27,7 @@ body { justify-content: center; font-size: 25px; padding-top: 30px; - margin-left: 324px; + margin-left: 327px; } .fahrenheit {