Being a novice in front-end development, I embarked on a project using JavaScript that would alter the color of a div based on environmental parameters such as temperature and pressure. My initial idea involved creating buttons to adjust the temperature - one for increasing it and one for decreasing it - with the colored div reflecting these changes. The goal was to have the div shift towards red hues as the temperature rose and towards blue hues as it dropped, akin to a color mixer tool available on the w3schools site here, all while utilizing hex color values. However, I encountered an issue when attempting to implement hex color values in my code; it simply didn't function correctly. Curiously, when I used integer values for other manipulations, like adjusting the height of the div dynamically via button clicks, it worked flawlessly. This discrepancy puzzled me as I sought out similar JavaScript projects concerning color sliders or gauges, and scoured through related queries on coding forums, yet found no solution.
<html>
<head>
<style>
#cool{
background-color:lightblue;
float:left;
}
#hot{
background-color:red;
float:right;
}
button{
width:200px;
height:100px;
font-size:20pt;
}
#range{
width:100%;
height:50px;
background-color:#ff0000;
}
</style>
</head>
<body>
<div id="range"> </div>
<button id="hot" type="button" onclick="tempUp()"> hot </button>
<button id="cool" type="button" onclick="tempDown()"> cool </button>
</body>
<script>
var colorVal = [ff0000,b2004c,5900a6,0000ff]; //from red to blue
var i = 0; //default value
function tempUp(){
if(i < 3){
i++;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
function tempDown(){
if(i > 0){
i--;
document.getElementById('range').style.backgroundColor = colorVal[i];
}
}
</script>
</html>
I experimented with converting hex color values to decimal, but unfortunately, that approach proved futile.