The really cool jscolor color picker
April 10th, 2020
- Link to The really cool jscolor color picker podcast on anchorfm
While I have been building my
"Storage Fun With Forms" application, I came
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
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!
Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.