Post-it! css colors via custom properties via javascript

So today i was finnishing up one of my FCC projects (the random quote machine generator) and I thought this idea where each quote would be writen in a post-it note.

After a couple of weeks procastinating I finally came up with a solution for wich I needed the hex representation of each post-it color:

Post it Super Sticky Lined Notes Miami Collection 4 x 6 ...

Then I duckduckgogled for a tool and came up with a free color picker tool wich I find handy since it depends a lot on you having to use the Win + Shift + S screen capture trick. This tool allows for a quick way to get each color hex representation:

With everything setted up, I created my css constants (custom properties) for each collection:

:root{
--miami-blue : #71CAC4;
--miami-green : #E1E646;
--miami-red : #F3778F;
--miami-pink : #F49EBB;
--miami-orange : #FBAD4B;
}

I’m starting to think all this idea might be a bit overkill, because then I needed to do an array in JS with the names of each collor, so I could pick one at random:

const _background = ['--miami-blue',
'--miami-green',
'--miami-red',
'--miami-pink',
'--miami-orange'];

let background = _background[Math.floor(Math.random()*_background.length)];

Only to then be able to asign it to something:

 var colorValue = styles.getPropertyValue(background);

I’m starting to think this is too much hassle, and that maybe just creating a color array in JS and call it a day…

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s