The really cool jscolor color picker

• Link to The really cool jscolor color picker podcast on anchorfm

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!

Related Resources

• Storage Fun With Forms on Github gh-pages

• Storage Fun With Forms Github Repository

• Web Storage API on MDN

• Web Storage Application

• jscolor.com

• Sticky Footers in the age of coronavirus: It always comes down to FlexBox, just the implementation may vary