Is how it looks right now now in this video we will start with the functionality so in this video we will write the code to generate the box shadow over here when.
We move these sliders over here so let's get started all right this is our source code and if you go back to our index.html file here.
We can see we have already linked our main.js file so let's start with the javascript now the first thing we need to do is we need to reference some of these elements from.
The html into our javascript so we need to reference the box because we need to add the box shadow to the box and then we also need to reference this generate code button and then we have.
All these controls over here so we have these input fields with different types but all of them have this class called control so we'll reference all of these controls.
And we have a division with a class of box and it is inside this box shadow generator class so let's tap dot box shadow generator.
Box and then we'll reference the generate code button so let's tap const generate code button equals document.queries.
And here we'll tap box shadow generator generate code button and then lastly we will select all the controls so let's type const controls equals document dot query selector.
Box shadow generator and we have a class of control for all the controls and here we need to type query selector all because we have multiple elements being selected over.
Here right now let's create some variables to store all the values so we need to create variables for all these values over here so first of all let's create a.
Variable for the x value Wesdigital
So here i'll just type let x value equals 0 by default and in the same way let's create variables for all the other controls.So let's type let y value equals 0 let blur value equals zero.
And we also have opacity so let's type opacity value we'll set it to zero and let's tap spread value zero.
And then we have color so let's type let color value and for the color we'll just set a value of rgba 0 0 0 and 1.
And then lastly we need to set the inset value so let's type inset value equals false by default right now let's add event listeners to all these controls.
So let's type controls and we have multiple elements inside this controls so we will use a for each loop for that so let's tap dot for each.
And for each of the controls i'll just call it c and let's create an arrow function over here and let's type c dot add event listener.
And we will listen for the input event and when someone changes the values inside the control we'll just call a function to update the values.
And we'll name the function update values all right now let's create this function so let's tap const update values.
And now in this function we will just
Update the values of these variables so we will get the values from the input fields and we will store them inside these variables over here so let's tap x.Value equals and we'll type document.queryselector and if we go back to our index.html file here we can see first of all we have this x value input and for that we have.
An id of x value so let's add that over here so i'll just type hash x value and we will do the same for all the other variables so i'll just duplicate.
This down over here and this is y value and here let's change this to y value and then we have blur value these are the variables.
And here if you go to the html here we can see blur so let's type blur over here and then we have the opacity value so just type opacity.
Value and we need to get the value of these elements so we need to type dot value at the end so let's add dot value at the end of all these elements all right for the opacity we have.
An id of opacity so let's type opacity over here and then we have spread value and for the spread value we have an id of spread.
And then we have color value and for that we have this id of color and then lastly we have insert value and for that we have an id of inset.
Now the next thing we need to do is we need to change the format of the color value so if you go back to our design and if i right click over here and click on inspect.
And if i go to console and here let's select the color so let's tap document.queryselector color and here we can see we have the color.
And if i just type dot value here we can see we have this hexadecimal value now we need to convert it to an rgb a value so let's create a function.
For that and we need to split these values into groups of two and we need to convert it into regular values right now it is hexadecimal values so let's go back and let's create a function for.
That so here i'll just create a function called hex to rgba and here we will get the hex value as the argument.
Now let's split this into rg and b so let's start let r equals we need to type parseint and you need to get the first two numbers so for that you have to type hex.
Dot slice and one comma three so this will get the first two numbers from this hex value and after that we need to type 16.
Because this is a hexadecimal value and let's duplicate this two more times and we'll change this to g and we'll change this to b and here we'll just type three and five.
And here we'll just type five and seven so now here we have the value of red inside r then we have the value of green inside g and then we have the value of blue.
Inside b and we are converting it from hexadecimal into integer and now let's return this in rgba format so let's type return and we will use backticks.
Because we need to use variables so here we need to type rgb a and in parenthesis we need to pass these variables so let's type dollar symbol.
And in curly braces let's type r and then we have a comma and then let's type g then we have a comma and then let's type b and then we have a comma.
And then for the opacity let's get the value of this variable opacity value so let's type dollar symbol opacity value and let me also adjust these initial.
Values so if you go back to our html file here we can see for blur radius we have a value of 6 so let's type 6 over here and.
If you scroll down for the opacity we have a value of 0.3 so let's add that over here and here also i'll just type 0.3 right now the next thing we will do is.
We'll call this function hex to rgba so here when we are setting the value of color value here i'll just call the function so let's type hex to rgba and we will get the return value and.
Pass it over here to this variable right here and we'll pass the value of this element as the argument and now the last thing we need to do is.
Add the box shadow to this box right here so we'll create a function called generate box shadow for that so after updating all these values we'll call a.
Function called generate box shadow and let's create this function over here so let's type const generate box shadow and the first thing we will do is we will check whether we have the inset.
Value set to true or false so let's tap if insert value and if the insert value is true then we need to add inset inside our code all right so now let's add the.
Css to the box so let's start box dot style dot box shadow equals and let's use backticks and here we'll tap inset and let's type.