Published on

The really cool jscolor color picker

Last Modified on
Last modified on
Authors
The really cool jscolor color picker
Photo by Scott Webb on Unsplash

While I have been building my "Storage Fun With Forms" application, I came across the jscolor color picker on MDN. Instead of using the default color picker implemented by setting the value of color to the input type attribute available in HTML5, you replace that with the class "jscolor". If you do not remove type="color" from your input elements, it will not work!

It took me a little while to figure this out, because there was no explicit documentation on what attributes one should and should not have in the input, but after some hit and miss, I finally figured it out by removing type="color" from my color inputs and replacing it with the class attribute set to the "jscolor" class. In my index.html:

<input name="color" id="bgcolor" value="FF0000" class="jscolor" />
<input name="color" id="fontcolor" class="jscolor" value="000000" />

And in my main.js:

// background related variable
let htmlElem = document.querySelector('html')

// font style related variable
let fontStyleElem = document.querySelector('.font-style')

//local storage related variables
let currentBgColor = localStorage.getItem('bgcolor')
let currentFontColor = localStorage.getItem('fontcolor')

// css-in-js color styling related
htmlElem.style.backgroundColor = currentBgColor
fontStyleElem.style.color = currentFontColor

And that is it!

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. Bye for now!

View on GitHub