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
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
Created by Maria D. Campbell who lives and works in New York City building useful things. You should follow her on Twitter. She also has a developer blog mariadcampbell.com you may want to check out!