Inter 🌐 Media

  • Home
  • Blog
  • Portfolio
  • Services
  • Contact

Inter 🌐 Media

  • Home
  • Blog
  • Portfolio
  • Services
  • Contact

The really cool jscolor color picker

April 10th, 2020

2 minute read 📗
  • 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
Tagged in: jscolor color-pickers local-storage javascript css-in-js
Categorized under: color-pickers
Discuss On Twitter
  • Twitter
  • Linkedin
Maria D. Campbell

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!

  • ← Newer
  • Older →
  • Business Hours
  • Monday: 9:00am - 5:00pm
  • Tuesday: 9:00am - 5:00pm
  • Wednesday: 9:00am - 5:00pm
  • Thursday: 9:00am - 5:00pm
  • Friday: 9:00am - 5:00pm
  • Saturday: Closed
  • Sunday: Closed
  • And By Appointment
  • Podast
  • Plugging In The Holes
  • Login
  • Admin Login
  • follow us on Github
  • follow us on Twitter
  • connect with us on Instagram
  • connect with us on Linkedin
ContactSitemapRSS
© 2020 Inter-Global Media Network, Inc.