diff --git a/index.html b/index.html new file mode 100644 index 0000000..e105298 --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..279ff8c --- /dev/null +++ b/script.js @@ -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) { + 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 += `
`; + document.getElementById("outerBorder").innerHTML += `

Temperature Scale Converter

`; + document.getElementById("outerBorder").innerHTML += `
`; + document.getElementById("inputRow").innerHTML += `
`; + document.getElementById("selectCol").innerHTML += `
`; + document.getElementById("selectCol").innerHTML += ``; + document.getElementById("dropDown").innerHTML += ``; + document.getElementById("dropDown").innerHTML += ``; + document.getElementById("dropDown").innerHTML += ``; + document.getElementById("dropDown").innerHTML += ``; + document.getElementById("inputRow").innerHTML += `
`; + document.getElementById("dataEntryCol").innerHTML += `
`; + document.getElementById("dataEntryCol").innerHTML += ``; + document.getElementById("inputRow").innerHTML += `
`; + document.getElementById("buttonCol").innerHTML += `
`; + document.getElementById("outerBorder").innerHTML += `
`; + document.getElementById("outputRow").innerHTML += `
`; + document.getElementById("farenheitCol").innerHTML += `
`; + document.getElementById("farenheitCol").innerHTML += `

`; + document.getElementById("outputRow").innerHTML += `
`; + document.getElementById("celsiusCol").innerHTML += `
`; + document.getElementById("celsiusCol").innerHTML += `

`; + document.getElementById("outputRow").innerHTML += `
`; + document.getElementById("kelvinCol").innerHTML += `
`; + document.getElementById("kelvinCol").innerHTML += `

`; + document.getElementById("outputRow").innerHTML += `
`; + document.getElementById("rankineCol").innerHTML += `
`; + document.getElementById("rankineCol").innerHTML += `

`; + +// Select and Button Logic +let dropDown = document.getElementById("dropDown"); +let buttonCol = document.getElementById("buttonCol"); +function typeChange() { + if(dropDown.value == "farenheit") { + buttonCol.innerHTML = ""; + buttonCol.innerHTML += `
`; + } else if(dropDown.value == "celsius") { + buttonCol.innerHTML = ""; + buttonCol.innerHTML += `
`; + } else if(dropDown.value == "kelvin") { + buttonCol.innerHTML = ""; + buttonCol.innerHTML += `
`; + } else if(dropDown.value == "rankine") { + buttonCol.innerHTML = ""; + buttonCol.innerHTML += `
`; + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bd77865 --- /dev/null +++ b/style.css @@ -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); +} \ No newline at end of file