Hello Devs!

Welcome back to another Tuesday of building a frontend feature. Today we are solving a very commonly asked Interactive JS feature in an interview setup.

[An interactive pie chart].

This one is going to be a quick issue as there isn't many moving parts to this question.

What are we building?

Live preview with code: https://stackblitz.com/edit/vitejs-vite-psytzb?file=index.html​

Philosophy

Here the task is to create a range slider and a pie chart and bind the `pie chart` value with `range slider` value.

So that when range slider value is changed, it reflects automatically in pie-chart.

Simple! :-)

System Design

Creating a range slider is straight forward with `<input type="range" />`.

The challenge here is to create the `pie-chart`.

For the pie-chart we will start with a `<div>` and `--percentage` CSS variable.

`--percentage` here is a CSS variable. Its value can be manipulated with JavaScript.

Let the coding begin

First thing first.

Add HTML body.

Here we have added:

• Range input with minimum, maximum allowed and default value (set to 10) specified.
• A div for pie-chart with style set to `--percentage` variable (default set to 10) which will be manipulated with JS.

Now let's add some CSS to our HTML.

Alright, now all we got to do is capture range input value and bind it to the `--percentage` CSS variable. So let's do that quickly.

This is pretty easy to understand.

• Add an event listener to range slider input.
• Whenever range slider input is changed, set the pie-chart div style `--percentage` variable to the value (event.target.value) from range slider.

Well, go ahead and change the value of your range slider. The pie-chart automatically updates in real-time.

Reply to this email, if you have any suggestion on which feature should I build next.