Here we can see we are creating this tool to generate border radius css code so the border radius will be generated based on the input value over here so if i change this to let's say 24 then we.
Will have a border radius code generated and the border radius will also be applied to this rectangle over here so that we can see how it looks and once you're happy with that you can just.
Click on this copy code button and the code will be copied to the clipboard and then you'll be able to paste the code anywhere you want so let's get started.
this is our progress as of now we have written the html and also the css now if you want to learn how to design all of this you can go ahead and watch my.
Previous video i will leave the link in the description of this video all right now the first thing we need to do is we need to reference some of these elements into our javascript so we need to.
Code so we have already linked our javascript file over here so here i'll just go to our main.js file and i'll just type const and we have these classes over here so for the copy button.
We have this class copy button and for the touch notification we have this class over here and for the box we have this class of box and for the input field we have an id of border radius.
Input so let's go back and let's type copy btn equals document dot query selector and here i'll just tab dot copy btn and next we'll reference the.
Border radius input so let's tap const border radius input equals document dot query selector now for this element we have an id of border radius input so let's type hash.
Border radius input and then let's type const box equals document.queryselector and we'll select the box and then we have the touch notification.
So let's type const Wesdigital
Toast notification equals document.queryselector and let's type toast notification.All right now the first thing we will do is we will change the border radius of this box depending on the value inside this input field so let's add an event listener to this border radius input so.
Let's type border radius input dot add event listener and we will listen for the input event so let's type input now this input event will be triggered.
Whenever we change the values inside this input field now let's create a function called update border radius and i'll just call it over here so i'll just type update border radius.
And now i'll create this function over here called update border radius so let's type const update border radius and i'll just create an arrow function over here now here we need to access the.
Value of this input field so here we have to type a variable name so i'll just name it e for event you can name this anything you want now here i'll just create a.
Variable and i'll just name it border radius value and i'll just set it equal to e dot target dot value now this will get the value of this.
Input field and it will store it inside this variable right here now let's see whether the value is actually being added so let's add a console.log over here.
And here i just have border radius value and let's open the console right now let's change the value over here and let's see whether it is being displayed over here in the console so.
Let's change this
And here we can see the value is being displayed over here in the console so if i just type 55 then we can see that 55 is being displayed over here so.It is working all right now let's add this value to the border radius so i'll just remove this line of code and let's type box dot style.
And here i'll just have border radius value and we also have to concatenate pixels over here so i'll just type pixels and now this should change the border.
Radius of this box depending on the value inside this input field so let's change the value over here and we can see that the border radius is being added to the box.
So it is working all right now what i will do over here is that i will add a function called math.floor over here so that even if you have a decimal value over here inside this.
Input field we will have an integer over here in the border radius so let's type math dot floor and i'll just add this border radius value inside.
Matte dot floor so now even if you add let's say 5.5 the border radius value that we're gonna get is 5 so if we just right click over here in this box and click on.
Inspect here we can see in the style we have a border radius of 5 so even if we add 5.5 or 5.6 or any decimal value we will have an integer over here and if.
We just change this to 6 now we can see that the border radius has changed to 6. now the next thing we will do is even if we add a value of more than 100 over here so if we just type 150.
It should change back to 100 because we have set a max value of 100 over here in the input field but when we directly type a value over here it will be added so now if i just press up or.
Down arrow we can see that it goes back to 100 but if you just type some value over here it will be added over here now if you just right click over here and go to inspect.
We can see that the border radius has been set to 150 pixels now we don't want that to happen so let's go back and here we will add an if condition so let's type if border radius value.
Is greater than 100 then we have to set the value of this input field to 100 so i'll just type border radius input because we have referenced that over.
Here and let's set the value to 100 and the next thing we need to do is we need to add an animation so for that we will add a class to our css so i'll just.
Add it over here first so i'll just type border radius input dot class list dot add and we will add a class called error and we will keep the class for a short.
Period of time and then we will remove the class so let's add a set timeout over here so i'll just type set timeout and here in the second argument we need to type the time in milliseconds so i'll.
Just type 1000 for one second and here in this function let's type the code to remove the class so i'll just type borderradiusinput.classlist.remove and here i'll just type error.
And now here we will add an else and i'll just copy this code from here and i'll just paste it over here so when the value is less than 100 then the class will be removed and i'll also copy this.
Code from here and paste it over here so that the border radius of this box also changes to 100 all right now let's create this class error so let's go back to our style.css file and let's go to.
The input so here we can see these are the styles for the input so here i'll just create the error class so i'll just type click to copy input dot error.
And here we'll set a border of 2 pixel solid red and we'll also add an animation so i'll just type animation and i'll just name the animation shake and we'll just have the animation for.
300 milliseconds and for the easing function i'll just type ease in out right now let's create this function so i'll just type at keyframes.
And here for the name i'll just type shake now in the animation we can have keyframes from zero through 100 so let's type zero percent and for zero.
Percent i'll just type transform translate x and i'll set it to zero now we will have an animation where this input box will move left and right.
And i'll just copy this and i just pasted it four more times now for the second keyframe i'll just.
Type 25 percent and here i'll just type transform translate x and i'll just set it to negative 2 pixels and next we will set the percentage to 40.
And here i'll just have transform translate x and i'll just set it to 5 pixels and the next we'll set a percentage of 75 percent.
And here i'll just type transform translate x of negative 2 pixels and then lastly we will have 100 and i'll just set it to transform translate x 0 so this is our animation.
So now let's see whether it works so let's add a value of greater than 100 so now we can see we have the animation let's try it once more so i'll just type 200 and we have the animation and the.