Skip to content

Finished lab, functional temperature calculator #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JRedden27 wants to merge 1 commit into
base: main
Choose a base branch
from
+171 −0
Open

Finished lab, functional temperature calculator #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body id="tempBody">
<script src="script.js"></script>
</body>
</html>
142 changes: 142 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
// Temperature Conversion Functions
function farenheitDisplay(f) {
f = Number(tempInput.value).toFixed(2);
document.getElementById("farenheitValue").innerText = `${f} \xB0F`;
}


function fToC(f, c) {
f = Number(tempInput.value);
c = ((f - 32) * (5/9)).toFixed(2);
document.getElementById("celsiusValue").innerText = `${c} \xB0C`;
}

function fToK(f, k) {
f = Number(tempInput.value);
k = ((f + 459.67) * (5/9)).toFixed(2);
document.getElementById("kelvinValue").innerText = `${k} \xB0K`;
}

function fToR(f, r) {
f = Number(tempInput.value);
r = (f + 459.67).toFixed(2);
document.getElementById("rankineValue").innerText = `${r} \xB0R`;
}

function celsiusDisplay(c) {
c = Number(tempInput.value).toFixed(2);
document.getElementById("celsiusValue").innerText = `${c} \xB0C`;
}

function cToF(c, f) {
c = Number(tempInput.value);
f = (c * 1.8 + 32).toFixed(2);
document.getElementById("farenheitValue").innerText = `${f} \xB0F`;
}

function cToK(c, k) {
c = Number(tempInput.value);
k = (c + 273.15).toFixed(2);
document.getElementById("kelvinValue").innerText = `${k} \xB0K`;
}

function cToR(c, r) {
c = Number(tempInput.value);
r = ((c + 273.15) * 1.8).toFixed(2);
document.getElementById("rankineValue").innerText = `${r} \xB0R`;
}

function kelvinDisplay(k) {
k = Number(tempInput.value).toFixed(2);
document.getElementById("kelvinValue").innerText = `${k} \xB0K`;
}

function kToF(k, f) {
k = Number(tempInput.value);
f = (k * 1.8 - 459.67).toFixed(2);
document.getElementById("farenheitValue").innerText = `${f} \xB0F`;
}

function kToC(k, c) {
Copy link
Copy Markdown

@kburd kburd Dec 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can get the same result with less conversion methods, if you had a method to convert each scale in Fahrenheit and from Fahrenheit into the other three, you would only have 6 equations

k = Number(tempInput.value);
c = (k - 273.15).toFixed(2);
document.getElementById("celsiusValue").innerText = `${c} \xB0C`;
}

function kToR(k, r) {
k = Number(tempInput.value);
r = (k * 1.8).toFixed(2);
document.getElementById("rankineValue").innerText = `${r} \xB0R`;
}

function rankineDisplay(r) {
r = Number(tempInput.value).toFixed(2);
document.getElementById("rankineValue").innerText = `${r} \xB0R`;
}

function rToF(r, f) {
r = Number(tempInput.value);
f = (r - 459.67).toFixed(2);
document.getElementById("farenheitValue").innerText = `${f} \xB0F`;
}

function rToC(r, c) {
r = Number(tempInput.value);
c = ((r - 491.67) * (5/9)).toFixed(2);
document.getElementById("celsiusValue").innerText = `${c} \xB0C`;
}

function rToK(r, k) {
r = Number(tempInput.value);
k = (r * (5/9)).toFixed(2);
document.getElementById("kelvinValue").innerText = `${k} \xB0K`;
}

// HTML Editing (Not sure if this is the proper indenting style, but it helped me keep track of the code.)
document.getElementById("tempBody").innerHTML += `<div id="outerBorder" class ="card m-3"></div>`;
Copy link
Copy Markdown

@kburd kburd Dec 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would put some of the elements on the HTML, no need to generate the app title, scale dropdown, or input with the DOM

document.getElementById("outerBorder").innerHTML += `<h1 class="d-flex justify-content-center m-4">Temperature Scale Converter</h1>`;
document.getElementById("outerBorder").innerHTML += `<div id="inputRow" class="row d-flex justify-content-center m-4"></div>`;
document.getElementById("inputRow").innerHTML += `<div id="selectCol" class="col">`;
document.getElementById("selectCol").innerHTML += `<label>Select Type</label><br>`;
document.getElementById("selectCol").innerHTML += `<select id="dropDown" onchange="typeChange()"></select>`;
document.getElementById("dropDown").innerHTML += `<option value="farenheit">Farenheit</option>`;
document.getElementById("dropDown").innerHTML += `<option value="celsius">Celsius</option>`;
document.getElementById("dropDown").innerHTML += `<option value="kelvin">Kelvin</option>`;
document.getElementById("dropDown").innerHTML += `<option value="rankine">Rankine</option>`;
document.getElementById("inputRow").innerHTML += `<div id="dataEntryCol" class="col">`;
document.getElementById("dataEntryCol").innerHTML += `<label class="ml-4">Value</label><br>`;
document.getElementById("dataEntryCol").innerHTML += `<input type="text" id="tempInput">`;
document.getElementById("inputRow").innerHTML += `<div id="buttonCol" class="col">`;
document.getElementById("buttonCol").innerHTML += `<br><button id="tempButton" onclick ="farenheitDisplay(), fToC(), fToK(), fToR()" class="px-4 mt-2">Calculate</button>`;
document.getElementById("outerBorder").innerHTML += `<div id="outputRow" class="row d-flex justify-content-center mt-4">`;
document.getElementById("outputRow").innerHTML += `<div id="farenheitCol" class="col ml-5">`;
document.getElementById("farenheitCol").innerHTML += `<label><strong>Farenheit</strong></label><br>`;
document.getElementById("farenheitCol").innerHTML += `<p id="farenheitValue"></p>`;
document.getElementById("outputRow").innerHTML += `<div id="celsiusCol" class="col">`;
document.getElementById("celsiusCol").innerHTML += `<label><strong>Celsius</strong></label><br>`;
document.getElementById("celsiusCol").innerHTML += `<p id="celsiusValue"></p>`;
document.getElementById("outputRow").innerHTML += `<div id="kelvinCol" class="col">`;
document.getElementById("kelvinCol").innerHTML += `<label><strong>Kelvin</strong></label><br>`;
document.getElementById("kelvinCol").innerHTML += `<p id="kelvinValue"></p>`;
document.getElementById("outputRow").innerHTML += `<div id="rankineCol" class="col mr-5">`;
document.getElementById("rankineCol").innerHTML += `<label><strong>Rankine</strong></label><br>`;
document.getElementById("rankineCol").innerHTML += `<p id="rankineValue"></p>`;

// Select and Button Logic
let dropDown = document.getElementById("dropDown");
let buttonCol = document.getElementById("buttonCol");
function typeChange() {
if(dropDown.value == "farenheit") {
buttonCol.innerHTML = "";
buttonCol.innerHTML += `<br><button id="tempButton" onclick ="farenheitDisplay(), fToC(), fToK(), fToR()" class="px-4 mt-2">Calculate</button>`;
} else if(dropDown.value == "celsius") {
buttonCol.innerHTML = "";
buttonCol.innerHTML += `<br><button id="tempButton" onclick ="celsiusDisplay(), cToF(), cToK(), cToR()" class="px-4 mt-2">Calculate</button>`;
Copy link
Copy Markdown

@kburd kburd Dec 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to have the button always call one function, say calculate() and in the calculate method you determine what values to display and how to calculate them

} else if(dropDown.value == "kelvin") {
buttonCol.innerHTML = "";
buttonCol.innerHTML += `<br><button id="tempButton" onclick ="kelvinDisplay(), kToF(), kToC(), kToR()" class="px-4 mt-2">Calculate</button>`;
} else if(dropDown.value == "rankine") {
buttonCol.innerHTML = "";
buttonCol.innerHTML += `<br><button id="tempButton" onclick ="rankineDisplay(), rToF(), rToC(), rToK()" class="px-4 mt-2">Calculate</button>`;
}
}
19 changes: 19 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
#outerBorder {
max-width: 750px;
border-width: 2px;
border-color: black;
}

.col {
font-weight: 500;
}

input, select {
width: 100px;
border-color: black;
}

button {
background-color: lightblue;
border-color: rgb(0, 119, 255);
}