I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade in an output when a button is pressed. For example, if I click the box 12 times to change the color, then hit a "save" button, the currently displayed shade should appear in the output. Below is the code I have so far. I require assistance in adding the button functionality to log the button presses and see which colors people are selecting. Additionally, I am exploring the possibility of saving these outputs directly into an excel file. So when users press the save button, the selected shade would be translated into an excel document.
var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', () => {
div.dataset.color = parseInt(div.dataset.color) + 5;
var c = Math.min(div.dataset.color % 512, 255);
var c2 = Math.max((div.dataset.color % 512) - 255, 0);
div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
})
#myDiv {
width: 200px;
height: 200px;
background: #000000;
}
<div id="myDiv"></div>