From ec60d12a005ce23eb9db74e6ea15ce99032b7cf1 Mon Sep 17 00:00:00 2001 From: Victoria Konkiel Date: Wed, 2 Dec 2020 16:38:24 -0500 Subject: [PATCH 1/4] Part 1 completed --- index.html | 26 ++++++++++++++++++++++++++ main.js | 16 ++++++++++++++++ style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..c43ad82 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + +
+

Temperature Scale Converter

+
+

Fahrenheit

+
+

Value

+ +
+ +
+
+

Celsius

+

+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..cc691df --- /dev/null +++ b/main.js @@ -0,0 +1,16 @@ +//functions +function convertToCelsius(fahrenheit) { + let celsius = (fahrenheit-32) * 5/9; + return celsius; +} + +//farenheit to celsius +let userInput = document.getElementsByTagName("input"); +let button = document.getElementsByClassName("calculate-button"); + +button[0].addEventListener("click", () => { + let fahrenheit = userInput[0].value; + let celsius = convertToCelsius(fahrenheit); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius; +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5b1a971 --- /dev/null +++ b/style.css @@ -0,0 +1,52 @@ +.container { + margin-left: 25%; + margin-top: 10%; + width: 50%; + border: solid; + padding-bottom: 75px; + height: 225px; +} + +.header { + text-align: center; +} + +.row{ + display: inline-block; + width: 100%; +} + +.fahrenheit { + margin-left: 15%; + display: inherit; +} + +.value { + display: inherit; + margin-left: 13%; +} + +.value p { + text-align: center; +} + +.value input { + border: solid; + width: 100px; + text-align: center; +} + +.calculate-button { + display: inherit; + margin-left: 12%; +} + +.celsius { + text-align: center; + margin-top: 25px; +} + +.celsius-value { + text-align: center; + margin-top: -10px; +} \ No newline at end of file From 0d7c3a2a4d03a87a962f5fb117dabf486bf95e15 Mon Sep 17 00:00:00 2001 From: Victoria Konkiel Date: Wed, 2 Dec 2020 17:58:02 -0500 Subject: [PATCH 2/4] completed part 2 --- index.html | 20 +++++++++++++++++--- main.js | 31 ++++++++++++++++++++++++++++--- style.css | 27 +++++++++++++++++++++++---- 3 files changed, 68 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index c43ad82..a014976 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,23 @@

Temperature Scale Converter

-
-

Celsius

-

+
+
+

Fahrenheit

+

+
+
+

Celsius

+

+
+
+

Kelvin

+

+
+
+

Rankine

+

+
diff --git a/main.js b/main.js index cc691df..606b71b 100644 --- a/main.js +++ b/main.js @@ -4,13 +4,38 @@ function convertToCelsius(fahrenheit) { return celsius; } -//farenheit to celsius -let userInput = document.getElementsByTagName("input"); +function convertToKelvin(fahrenheit) { + let kelvin = (fahrenheit-32) * 5/9 + 273.15; + return kelvin; +} + +function convertToRankine(fahrenheit) { + let rankine = (fahrenheit + 459.67); + return rankine; +} + +//Calculate button let button = document.getElementsByClassName("calculate-button"); button[0].addEventListener("click", () => { + //converting and displaying celsius + let userInput = document.getElementsByTagName("input"); let fahrenheit = userInput[0].value; let celsius = convertToCelsius(fahrenheit); let celsiusOutput = document.getElementsByClassName("celsius-value"); - celsiusOutput[0].textContent = celsius; + celsiusOutput[0].textContent = celsius.toFixed(2) + " C"; + + //displaying fahrenheit + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + //converting and displaying kelvin + let kelvin = convertToKelvin(fahrenheit); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin.toFixed(2) + " K"; + + //converting and displaying rankine + let rankine = convertToRankine(parseInt(fahrenheit)); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine.toFixed(2) + " R"; }); \ No newline at end of file diff --git a/style.css b/style.css index 5b1a971..0bccac8 100644 --- a/style.css +++ b/style.css @@ -41,12 +41,31 @@ margin-left: 12%; } -.celsius { +.results { + display: inline-block; + width: 100%; +} + +.fahrenheit-results { + display: inherit; + margin-left: 15%; text-align: center; - margin-top: 25px; } -.celsius-value { +.celsius-results { + display: inherit; + margin-left: 9%; + text-align: center; +} + +.kelvin-results { + display: inherit; + margin-left: 9%; + text-align: center; +} + +.rankine-results { + display: inherit; + margin-left: 9%; text-align: center; - margin-top: -10px; } \ No newline at end of file From b47b6d9319cf5e17c469d8aa0a145e7b0da3a0be Mon Sep 17 00:00:00 2001 From: Victoria Konkiel Date: Wed, 2 Dec 2020 21:32:05 -0500 Subject: [PATCH 3/4] finished all except figuring out how to target selected dropdown --- index.html | 10 +++- main.js | 144 ++++++++++++++++++++++++++++++++++++++++++++--------- style.css | 7 ++- 3 files changed, 135 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index a014976..86bac38 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,15 @@

Temperature Scale Converter

-

Fahrenheit

+
+

Scale

+ +

Value

diff --git a/main.js b/main.js index 606b71b..4e22246 100644 --- a/main.js +++ b/main.js @@ -1,41 +1,139 @@ //functions -function convertToCelsius(fahrenheit) { +function convertFToCelsius(fahrenheit) { let celsius = (fahrenheit-32) * 5/9; return celsius; } -function convertToKelvin(fahrenheit) { +function convertFToKelvin(fahrenheit) { let kelvin = (fahrenheit-32) * 5/9 + 273.15; return kelvin; } -function convertToRankine(fahrenheit) { +function convertFToRankine(fahrenheit) { let rankine = (fahrenheit + 459.67); return rankine; } +function convertCToFahrenheit(celsius) { + let fahrenheit = (celsius * 9/5) + 32; + return fahrenheit; +} + +function convertCToKelvin(celsius) { + let kelvin = celsius + 273.15; + return kelvin; +} + +function convertCToRankine(celsius) { + let rankine = celsius * 9/5 + 491.67; + return rankine; +} + +function convertKToFahrenheit(kelvin) { + let fahrenheit = (kelvin - 273.15) * 9/5 + 32; + return fahrenheit; +} + +function convertKToCelsius(kelvin) { + let celsius = kelvin - 273.15; + return celsius; +} + +function convertKToRankine(kelvin) { + let rankine = kelvin * 1.8; + return rankine; +} + +function convertRToFahrenheit(rankine) { + let fahrenheit = rankine - 459.67; + return fahrenheit; +} + +function convertRToCelsius(rankine) { + let celsius = (rankine - 491.67) * 5/9; + return celsius; +} + +function convertRToKelvin(rankine) { + let kelvin = rankine * 5/9; + return kelvin; +} + //Calculate button let button = document.getElementsByClassName("calculate-button"); +let selectElement = document.getElementById("temperature"); +let selection = selectElement.children; button[0].addEventListener("click", () => { - //converting and displaying celsius - let userInput = document.getElementsByTagName("input"); - let fahrenheit = userInput[0].value; - let celsius = convertToCelsius(fahrenheit); - let celsiusOutput = document.getElementsByClassName("celsius-value"); - celsiusOutput[0].textContent = celsius.toFixed(2) + " C"; - - //displaying fahrenheit - let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); - fahrenheitOutput[0].textContent = fahrenheit + " F"; - - //converting and displaying kelvin - let kelvin = convertToKelvin(fahrenheit); - let kelvinOutput = document.getElementsByClassName("kelvin-value"); - kelvinOutput[0].textContent = kelvin.toFixed(2) + " K"; - - //converting and displaying rankine - let rankine = convertToRankine(parseInt(fahrenheit)); - let rankineOutput = document.getElementsByClassName("rankine-value"); - rankineOutput[0].textContent = rankine.toFixed(2) + " R"; + selection.addEventListener("change", () => { + if(selection[0]) { + let userInput = document.getElementsByTagName("input"); + let fahrenheit = userInput[0].value; + let celsius = convertFToCelsius(fahrenheit); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let kelvin = convertFToKelvin(fahrenheit); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let rankine = convertFToRankine(parseInt(fahrenheit)); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selection[1]) { + let userInput = document.getElementsByTagName("input"); + let celsius = userInput[0].value; + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertCToFahrenheit(celsius); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let kelvin = convertCToKelvin(celsius); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let rankine = convertCToRankine(celsius); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selection[2]) { + let userInput = document.getElementsByTagName("input"); + let kelvin = userInput[0].value; + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let celsius = convertKToCelsius(kelvin); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertKToFahrenheit(kelvin); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let rankine = convertKToRankine(kelvin); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selection[3]) { + let userInput = document.getElementsByTagName("input"); + let rankine = userInput[0].value; + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + + let kelvin = convertRToKelvin(rankine); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let celsius = convertRToCelsius(rankine) + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheit = convertRToFahrenheit(rankine); + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + } + }) }); \ No newline at end of file diff --git a/style.css b/style.css index 0bccac8..7d8288b 100644 --- a/style.css +++ b/style.css @@ -16,9 +16,10 @@ width: 100%; } -.fahrenheit { - margin-left: 15%; +.scale-entity { display: inherit; + text-align: center; + margin-left: 15%; } .value { @@ -39,6 +40,8 @@ .calculate-button { display: inherit; margin-left: 12%; + background-color: #DBE8FC; + border: solid, #7293C2; } .results { From d0267c5e5498985013e3e0b524324b633ff6a6a6 Mon Sep 17 00:00:00 2001 From: Victoria Konkiel Date: Thu, 3 Dec 2020 14:52:58 -0500 Subject: [PATCH 4/4] completed part 3 --- index.html | 8 ++--- main.js | 89 +++++++++++++++++++++++++++--------------------------- style.css | 2 +- 3 files changed, 49 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 86bac38..6dccc0b 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@

Temperature Scale Converter

Scale

diff --git a/main.js b/main.js index 4e22246..4d40a30 100644 --- a/main.js +++ b/main.js @@ -65,75 +65,74 @@ let selectElement = document.getElementById("temperature"); let selection = selectElement.children; button[0].addEventListener("click", () => { - selection.addEventListener("change", () => { - if(selection[0]) { + + if(selectElement.value == "fahrenheit") { + let userInput = document.getElementsByTagName("input"); + let fahrenheit = userInput[0].value; + let celsius = convertFToCelsius(fahrenheit); + let celsiusOutput = document.getElementsByClassName("celsius-value"); + celsiusOutput[0].textContent = celsius + " C"; + + let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); + fahrenheitOutput[0].textContent = fahrenheit + " F"; + + let kelvin = convertFToKelvin(fahrenheit); + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let rankine = convertFToRankine(parseInt(fahrenheit)); + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + } else if(selectElement.value == "celsius") { let userInput = document.getElementsByTagName("input"); - let fahrenheit = userInput[0].value; - let celsius = convertFToCelsius(fahrenheit); + let celsius = userInput[0].value; let celsiusOutput = document.getElementsByClassName("celsius-value"); celsiusOutput[0].textContent = celsius + " C"; - + + let fahrenheit = convertCToFahrenheit(celsius); let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); fahrenheitOutput[0].textContent = fahrenheit + " F"; - - let kelvin = convertFToKelvin(fahrenheit); + + let kelvin = convertCToKelvin(celsius); let kelvinOutput = document.getElementsByClassName("kelvin-value"); kelvinOutput[0].textContent = kelvin + " K"; - - let rankine = convertFToRankine(parseInt(fahrenheit)); + + let rankine = convertCToRankine(celsius); let rankineOutput = document.getElementsByClassName("rankine-value"); rankineOutput[0].textContent = rankine + " R"; - } else if(selection[1]) { + } else if(selectElement.value == "kelvin") { let userInput = document.getElementsByTagName("input"); - let celsius = userInput[0].value; + let kelvin = userInput[0].value; + let kelvinOutput = document.getElementsByClassName("kelvin-value"); + kelvinOutput[0].textContent = kelvin + " K"; + + let celsius = convertKToCelsius(kelvin); let celsiusOutput = document.getElementsByClassName("celsius-value"); celsiusOutput[0].textContent = celsius + " C"; - let fahrenheit = convertCToFahrenheit(celsius); + let fahrenheit = convertKToFahrenheit(kelvin); let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); fahrenheitOutput[0].textContent = fahrenheit + " F"; - let kelvin = convertCToKelvin(celsius); - let kelvinOutput = document.getElementsByClassName("kelvin-value"); - kelvinOutput[0].textContent = kelvin + " K"; - - let rankine = convertCToRankine(celsius); + let rankine = convertKToRankine(kelvin); let rankineOutput = document.getElementsByClassName("rankine-value"); rankineOutput[0].textContent = rankine + " R"; - } else if(selection[2]) { + } else if(selectElement.value == "rankine") { let userInput = document.getElementsByTagName("input"); - let kelvin = userInput[0].value; + let rankine = userInput[0].value; + let rankineOutput = document.getElementsByClassName("rankine-value"); + rankineOutput[0].textContent = rankine + " R"; + + let kelvin = convertRToKelvin(rankine); let kelvinOutput = document.getElementsByClassName("kelvin-value"); kelvinOutput[0].textContent = kelvin + " K"; - - let celsius = convertKToCelsius(kelvin); + + let celsius = convertRToCelsius(rankine) let celsiusOutput = document.getElementsByClassName("celsius-value"); celsiusOutput[0].textContent = celsius + " C"; - let fahrenheit = convertKToFahrenheit(kelvin); + let fahrenheit = convertRToFahrenheit(rankine); let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); fahrenheitOutput[0].textContent = fahrenheit + " F"; - - let rankine = convertKToRankine(kelvin); - let rankineOutput = document.getElementsByClassName("rankine-value"); - rankineOutput[0].textContent = rankine + " R"; - } else if(selection[3]) { - let userInput = document.getElementsByTagName("input"); - let rankine = userInput[0].value; - let rankineOutput = document.getElementsByClassName("rankine-value"); - rankineOutput[0].textContent = rankine + " R"; - - let kelvin = convertRToKelvin(rankine); - let kelvinOutput = document.getElementsByClassName("kelvin-value"); - kelvinOutput[0].textContent = kelvin + " K"; - - let celsius = convertRToCelsius(rankine) - let celsiusOutput = document.getElementsByClassName("celsius-value"); - celsiusOutput[0].textContent = celsius + " C"; - - let fahrenheit = convertRToFahrenheit(rankine); - let fahrenheitOutput = document.getElementsByClassName("fahrenheit-value"); - fahrenheitOutput[0].textContent = fahrenheit + " F"; - } - }) + } }); \ No newline at end of file diff --git a/style.css b/style.css index 7d8288b..a8f8376 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ width: 50%; border: solid; padding-bottom: 75px; - height: 225px; + height: 235px; } .header {