From a52b3710f8ca07bb6b48f1d351a7ae397042609d Mon Sep 17 00:00:00 2001 From: Kimberly Ramirez Date: Mon, 11 Jan 2021 20:08:55 -0500 Subject: [PATCH] final commit --- .vscode/settings.json | 3 ++ app.js | 43 +++++++++++++++++++++++++++ index.html | 67 +++++++++++++++++++++++++++++++++++++++++++ style.css | 61 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 174 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..e3696eb --- /dev/null +++ b/app.js @@ -0,0 +1,43 @@ +//add event listener to the button +let button = document.querySelector('button'); +button.addEventListener('click', convert); + +let conversionFunction = { + // return fahrenheit to celsius, kelvin, rankine + fahrenheit: { + fahrenheit: (fahrenheit) => fahrenheit, + celsius: (fahrenheit) => (((fahrenheit - 32) * 5) / 9).toFixed(2), + kelvin: (fahrenheit) => (((fahrenheit - 32) * 5) / 9 + 273.15).toFixed(2), + rankine: (fahrenheit) => (fahrenheit + 459.67).toFixed(2), + }, + // return celsius to fahrenheit, kelvin, rankine + celsius: { + fahrenheit: (celsius) => ((celsius * 9 /5) + 32).toFixed(2), + celsius: (celsius) => celsius, + kelvin: (celsius) => (celsius + 273.15).toFixed(2), + rankine: (celsius) => ((celsius * 9/5) + 491.67).toFixed(2), + }, + kelvin: { + //return kelvin to fahrenheit, celsius, rankine + fahrenheit: (kelvin) => ((kelvin - 273.15) * 9/5 + 32).toFixed(2), + celsius: (kelvin) => (kelvin - 273.15).toFixed(2), + kelvin: (kelvin) => kelvin, + rankine: (kelvin) => (kelvin * 1.8).toFixed(2), + }, + rankine: { + //return rankine to fahrenheit, celsius, + fahrenheit: (rankine) => (rankine - 459.67).toFixed(2), + celsius: (rankine) => ((rankine - 491.67) * 5/9).toFixed(2), + kelvin: (rankine) => (rankine * 5/9).toFixed(2), + rankine: (rankine) => rankine, + }, +}; + +function convert (){ + let inputValue = parseFloat(document.querySelector('#inputValue').value); + let convertFrom = (document.querySelector('#temperature').value).toLowerCase(); + let result = (conversionFunction[convertFrom]); + for (let prop in result){ + document.getElementById(prop).innerText = (result[prop](inputValue)); + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..891cb25 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + +
+ +

Temperature Scale Converter

+ + +
+
+
+ +
+
+ +
+ +
+
+ + +
+
+ +
+
+ +
+
+

Fahrenheit

+

+
+
+

Celsius

+

+
+
+

Kelvin

+

+
+
+

Rankine

+

+
+
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8fd2c6 --- /dev/null +++ b/style.css @@ -0,0 +1,61 @@ +*{ + box-sizing: border-box; +} +h1{ + font-size: 3.5rem; + margin: auto; +} +h2{ + font-size: 2rem; +} +label { + margin: .5rem; +} +input{ + padding: .5rem; +} +button { + font-size: 1.5rem; + padding: .5rem 1.5rem; + background-color: #DBE8FC; + border: 1px solid #6C8EBF; +} +.converter { + margin: 5rem; + background-color: aliceblue; + display: grid; + grid-template-rows: repeat(3, 1fr); + text-align: center; + border: 2px solid #DBE8FC;; +} + +.converterForm{ + display: grid; + grid-template-columns: repeat(3, 1fr); + + +} + +.converterFormElement { + margin: auto; + font-size: 1.5rem; + +} + +.result { + height: 2rem; +} +.resultData{ + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.display{ + display: flex; + flex-direction: column; +} + +#temperature { + font-size: 1.5rem; + padding: .5rem 1rem; +} \ No newline at end of file