- 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
color to the
type attribute available in
HTML5, you replace that with the
"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
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
<input name="color" id="bgcolor" value="FF0000" class="jscolor" /> <input name="color" id="fontcolor" class="jscolor" value="000000" />
And in my
// 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!