Share your repls and programming experiences

← Back to all posts
🎨 HSL colour controller 🎨
RolandJLevy (750)

I made this fully responsive dynamic HSL colour controller with express.js and pug - a template engine for Node.

I used the W3Color JavaScript Library to convert the HSL values to RGB and HEX.

The HSL values are controlled by the range inputs which update CSS variables, which in turn display the colour and values in real time.

The colours object, in views/index.pug is used to render the range inputs

colours = { 
  h: { prop:'h', name: 'Hue', max: 360 }, 
  s: { prop:'s', name: 'Saturation', max: 100 }, 
  l: { prop:'l', name: 'Lightness', max: 100 }};

Here is how to iterate through the object to render each input. Notice the indentation which is necessary for pug to work:

each key in Object.keys(colours)
    h3.m-5 #{colours[key].name}
      value=`${colours[key].max / 2}`
    label #{colours[key].max / 2}

Links 🔗

Further reading

DynamicSquid (4532)

Cool! But I think you made a mistake in your title since this is named "Weather App"

RolandJLevy (750)

@DynamicSquid ah, well spotted. This was from one of my other pug projects I forked from. Thanks for pointing it out. I've updated it now

LingWu1 (40)

Wow! now I can finally get the hang of the colors in my java codes...
Nice @RolandJLevy

DSAEvan (13)

how did you get pug?

RolandJLevy (750)

Hi @DSAEvan, pug is a template engine for node. Find out more about pug here.

I created a node repl and installed pug using the packages tool. Then imported it with require('pug') in index.js which sets up the server and routes. Have you used node or express much?

Coder100 (12435)

Btw a suggestion: style the range input, it kind of goes out of line with the theme if you know what I mean @RolandJLevy

RolandJLevy (750)

@Coder100 I see what you mean. Good idea. I'll give it a try tomorrow. Thanks for the suggestion!

RolandJLevy (750)

Hey @Coder100, I've styled the sliders as you suggested :)