Implementing the color picker
In order to implement the required functionality, we first need to initialize the sliders and spinners. Whenever a slider is changed, we need to update its corresponding spinner as well, and conversely if someone changes the value of the spinner, we need to update the slider to the correct value. In case any of the value changes, we will then recalculate the current color and update the text or background color depending on the context.
Defining the object structure
We will organize our code using the object literal pattern as we have done in earlier chapters. We will define an init
method, which will be the entry point. All event handlers will also be applied inside this method.
To begin with, go to the js
folder and open the colorpicker.js
file for editing. In this file, write the code that will define the object structure and a call to it:
var colorPicker = { init : function () { }, setColor : function(slider, value) { }, getHexColor : function...