How to change background color relative to the number outputted?

Question

So, I want to make a temperature converter but I want the Javascript to change background color relative to the temperature value outputted. I have been brainstorming a lot but can't find a way to do that.

 function solve() { var option1 = document.getElementById('temp1'); var option2 = document.getElementById('temp2'); var temp1 = option1.options[option1.selectedIndex].value; var temp2 = option2.options[option2.selectedIndex].value; var from = document.getElementById('inputValue'); var inputValue = from.value; var cel; if (temp1 == ("celsius")) { if (temp2 == ("celsius")) { document.getElementById("outputValue").value = inputValue + "°C"; cel = inputValue + "°C"; } else if (temp2 == ("fahrenheit")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 9 / 5) + 32 + "°F"; cel = inputValue + "°C"; } else if (temp2 == ("kelvin")) { document.getElementById("outputValue").value = parseFloat(inputValue) + 273.15 + "K"; cel = inputValue + "°C"; } else if (temp2 == ("rankine")) { document.getElementById("outputValue").value = (parseFloat(inputValue) + 273.15) * 9 / 5 + "°R"; cel = inputValue + "°C"; } else if (temp2 == ("reaumur")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 4 / 5 + "°Ré"; cel = inputValue + "°C"; } else if (temp2 == ("romer")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 21 / 40) + 7.5 + "°Rø"; cel = inputValue + "°C"; } else if (temp2 == ("delisle")) { document.getElementById("outputValue").value = (100 - parseFloat(inputValue)) * 3 / 2 + "°De"; cel = inputValue + "°C"; } else if (temp2 == ("newton")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 33 / 100 + "°N"; cel = inputValue + "°C"; } } }

this is just for the Celsius. I am storing the result converted in Celsius in a variable as you can see in the code. Please tell me how I can do it. The color range should be between blue which is cold to reddish which is hot. Thanks!

Answer 1

You can use the temperature value to map to color values. Colors are represented by three channels, red, green and blue, that contain a value between 0 and 255. RGB CSS Colors

I created a fiddle that demonstrates the approach by setting the background style attribute of a DOM element. https://jsfiddle.net/ccarstens/n3yfex7h/34/

document.getElementById("tempInput").addEventListener("change", (event) => {
    var inputValue = parseFloat(event.target.value)
    var redColor = ( 255 * (inputValue / 100))
    var blueColor = 255 - redColor
  document.getElementById("container").style.background = `rgba(${redColor}, 0, ${blueColor})`
  document.getElementById("formatted").innerHTML = inputValue + ' ° C'
})

//redColor is counting up to 255 as the temperature rises
//blueColor is counting down from 255 to 0 as the temperature rises

Answer 2

I have simplified your example for readable purpose and added some custom html to show how it works.

My idea was to create and array of temperatures in which first is the temperature below which color 'blue' is applied and second is the temperature above which color 'red' is applied.

After all of your if 's add call to colorTemperature function and fill colorTemperatureChart with temperatures.

 const colorTemperatureChart = { fahrenheit: [ {value: 32, color: 'blue'}, {value: 86, color: 'red'} ] }; const colorTemperature = (value, unit) => { if (colorTemperatureChart[unit][0].value > value) { document.getElementById("outputValue").style.backgroundColor = colorTemperatureChart[unit][0].color; } else if (colorTemperatureChart[unit][1].value < value) { document.getElementById("outputValue").style.backgroundColor = colorTemperatureChart[unit][1].color; } else { document.getElementById("outputValue").style.backgroundColor = 'initial'; } } const solve = () => { var option1 = document.getElementById('temp1'); var option2 = document.getElementById('temp2'); var temp1 = option1.options[option1.selectedIndex].value; var temp2 = option2.options[option2.selectedIndex].value; var from = document.getElementById('inputValue'); var inputValue = from.value; var cel; var temp; if (temp1 == ("celsius")) { if (temp2 == ("fahrenheit")) { temp = (parseFloat(inputValue) * 9 / 5) + 32; document.getElementById("outputValue").value = (parseFloat(inputValue) * 9 / 5) + 32 + "°F"; cel = inputValue + "°C"; } } colorTemperature(temp, temp2) }

 <select id="temp1"> <option value="celsius">celsius</option> </select> <select id="temp2"> <option value="fahrenheit">fahrenheit</option> </select> <br> <br> <input type="text" id="inputValue" value=""> <br> <input type="text" id="outputValue" value=""> <br> <br> <button type="button" onClick="solve()" name="button">Solve</button>

Answer 3

My idea is to use your 'temp2' variable value to dynamically change the color, because you use 'temp2' to set the temperature.

 function solve() { var option1 = document.getElementById('temp1'); var option2 = document.getElementById('temp2'); var temp1 = option1.options[option1.selectedIndex].value; var temp2 = option2.options[option2.selectedIndex].value; var from = document.getElementById('inputValue'); var inputValue = from.value; var cel; // Define background color var colors = [{'celsius': 'red'}, {'fahrenheit': 'orange'}, {'kelvin': 'yellow'}, {'rankine': 'green'}, {'reaumur': '#00000'}, {'delisle': '#cccccc'}, {'newton': '#dddddd'}] if (temp1 == ("celsius")) { if (temp2 == ("celsius")) { document.getElementById("outputValue").value = inputValue + "°C"; cel = inputValue + "°C"; } else if (temp2 == ("fahrenheit")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 9 / 5) + 32 + "°F"; cel = inputValue + "°C"; } else if (temp2 == ("kelvin")) { document.getElementById("outputValue").value = parseFloat(inputValue) + 273.15 + "K"; cel = inputValue + "°C"; } else if (temp2 == ("rankine")) { document.getElementById("outputValue").value = (parseFloat(inputValue) + 273.15) * 9 / 5 + "°R"; cel = inputValue + "°C"; } else if (temp2 == ("reaumur")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 4 / 5 + "°Ré"; cel = inputValue + "°C"; } else if (temp2 == ("romer")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 21 / 40) + 7.5 + "°Rø"; cel = inputValue + "°C"; } else if (temp2 == ("delisle")) { document.getElementById("outputValue").value = (100 - parseFloat(inputValue)) * 3 / 2 + "°De"; cel = inputValue + "°C"; } else if (temp2 == ("newton")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 33 / 100 + "°N"; cel = inputValue + "°C"; } // background color assignment for (var prop in colors) { document.getElementById("xxx").style.backgroundColor = colors[temp2]; } } }

Answer 4

Here is my solution. I implemented two types of color palettes based on celsius value:

1. blue-red palette, temperature close to -100 (celsius) is very blue, close to +100 is very red, close to 0 is bluish+redish (purple).
2. blue-green-red palette, temperature close to 0 celsius will be greenish, close to -100 bluish, close to +100 redish.

 <html> <head> <script> function solve() { function val_to_rgb(x) { topt = document.getElementById('palette'); t = topt.options[topt.selectedIndex].value; x = Math.max(-1.0, Math.min(x, 1.0)); return { 'br': [255 * (x + 1.0) / 2, 0, 255 * (1.0 - (x + 1.0) / 2)], 'bgr': [255 * Math.max(x, 0), 255 * (1.0 - Math.abs(x)), 255 * -Math.min(x, 0)], }[t]; } var option1 = document.getElementById('temp1'); var option2 = document.getElementById('temp2'); var temp1 = option1.options[option1.selectedIndex].value; var temp2 = option2.options[option2.selectedIndex].value; var from = document.getElementById('inputValue'); var inputValue = from.value; var cel; if (temp1 == ("celsius")) { if (temp2 == ("celsius")) { document.getElementById("outputValue").value = inputValue + "°C"; cel = inputValue + "°C"; } else if (temp2 == ("fahrenheit")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 9 / 5) + 32 + "°F"; cel = inputValue + "°C"; } else if (temp2 == ("kelvin")) { document.getElementById("outputValue").value = parseFloat(inputValue) + 273.15 + "K"; cel = inputValue + "°C"; } else if (temp2 == ("rankine")) { document.getElementById("outputValue").value = (parseFloat(inputValue) + 273.15) * 9 / 5 + "°R"; cel = inputValue + "°C"; } else if (temp2 == ("reaumur")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 4 / 5 + "°Re"; cel = inputValue + "°C"; } else if (temp2 == ("romer")) { document.getElementById("outputValue").value = (parseFloat(inputValue) * 21 / 40) + 7.5 + "°Ro"; cel = inputValue + "°C"; } else if (temp2 == ("delisle")) { document.getElementById("outputValue").value = (100 - parseFloat(inputValue)) * 3 / 2 + "°De"; cel = inputValue + "°C"; } else if (temp2 == ("newton")) { document.getElementById("outputValue").value = parseFloat(inputValue) * 33 / 100 + "°N"; cel = inputValue + "°C"; } } celv = parseFloat(inputValue); val = celv / 100; document.body.style.backgroundColor = 'rgb(' + val_to_rgb(val).join(',') + ')'; } document.addEventListener("DOMContentLoaded", function() { solve(); }); </script> </head> <body> <select id="temp1"> <option value="celsius">celsius</option> </select> <input id="inputValue" value="30"/> <br/> <select id="temp2"> <option value="kelvin">kelvin</option> <option value="fahrenheit">fahrenheit</option> <option value="rankine">rankine</option> </select> <input id="outputValue" value=""/> <br/> <font style="background: white;">Palette:</font> <select id="palette"> <option value="br">blue-red</option> <option value="bgr">blue-green-red</option> </select> <br/> <button onclick="solve();">convert</button> </body> </html>

Answer 5

Basic idea is to convert it to one know range and use that value. Plenty of ways to get a color in a range. You can play with the numbers in my example or pick a different algorithm to pick a color.

 const conversions = { "celsius-celsius": x => ({ temp: x, unit: '°C'}), "celsius-fahrenheit": x => ({ temp: x * 9 / 5 + 32, scale: '°F'}), "fahrenheit-celsius": x => ({ temp: (x - 32) * 5 / 9, scale: '°F'}), "fahrenheit-fahrenheit": x => ({ temp: x, unit: '°C'}), } function convertTemp(temp, fromScale, toScale) { return conversions[`${fromScale}-${toScale}`](temp); } function hslXolPerc(percent, start, end) { var a = percent / 100, b = (end - start) * a, c = b + start; return `hsl(${c}, 100%, 50%)`; } function getColor(c) { var x = c - 20; if (x>100) x = 100; else if (x<0) x = 0; return hslXolPerc(x, 240, 360); } const numInp = document.querySelector("#num"); const fromSelect = document.querySelector("#from"); const toSelect = document.querySelector("#to"); const out = document.querySelector("#out"); function update(){ const result = convertTemp(Number(numInp.value), fromSelect.value, toSelect.value); out.textContent = result.temp; const celTemp = convertTemp(Number(numInp.value), fromSelect.value, 'celsius').temp; const color = getColor(celTemp); out.style.backgroundColor = color; } document.querySelector("form").addEventListener("input", update);

 <form> <label for="num">Temperature:</label> <input id="num" type="number" /> <select id="from"> <option value="celsius">°C</option> <option value="fahrenheit">°F</option> </select> <span id="out"></span> <label for="to">to:</label> <select id="to"> <option value="celsius">°C</option> <option value="fahrenheit">°F</option> </select> </form>