🎨 HSL colour controller 🎨
RolandJLevy (757)

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)
  div.v-center
    h3.m-5 #{colours[key].name}
    input(
      type='range'
      class='slider'
      name=`--${colours[key].prop}`
      value=`${colours[key].max / 2}`
      max=`${colours[key].max}`
      min="0" 
    )
    label #{colours[key].max / 2}

Links 🔗


Further reading

You are viewing a single comment. View All
DSAEvan (17)

how did you get pug?

RolandJLevy (757)

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?