Border Radius Generator Tool (VanillaJS)
Tags: javascript, html, css, vanilla
Published: 2021-01-02 19:07:13

<center>
#**Hello Everyone!**
</center>

So, today I have decided to create a Border Radius Generator Tool, which is an existing stuff already, but I just wanted to create one, for the sake of practice.

This is not an in-depth tutorial for that, just a quick recap, what I did and why.
The main focus was to practice the *range input* type, since I haven't used it yet.

<center>
#HTML
</center>

For the HTML, I have created 4 *range inputs*, because the border-radius property has 4 values.

*"Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)."* 

<center>
![Four values](https://dev-to-uploads.s3.amazonaws.com/i/mm15ecivzqcauduf6oed.jpg)

[Source of the previous quote](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)
</center>

And also added one square, which will be modified by the sliders on the range inputs.

```html
<div id="container">
    <h2>BORDER RADIUS GENERATOR</h2>
    <div class="slider-container">
      <label for="topLeftSlider">Top Left</label>
      <input type="range" min="0" max="100" value="0" class="slider" id="topLeftSlider">
    </div>

    <!-- Put the middle section in one DIV -->

    <div id="left-box-right">
      <div class="slider-container bottom-left">
        <label for="bottomLeftSlider">Bottom Left</label>
        <input type="range" min="0" max="100" value="0" class="slider" id="bottomLeftSlider">
      </div>

      <div id="box"></div>

      <div class="slider-container top-right">
        <label for="topRightSlider">Top Right</label>
        <input type="range" min="0" max="100" value="0" class="slider" id="topRightSlider">
      </div>
    </div>

    <!-- Put the middle section in one DIV -->

    <div class="slider-container">
      <input type="range" min="0" max="100" value="0" class="slider" id="bottomRightSlider">
      <label for="bottomRightSlider">Bottom Right</label>
    </div>
    <textarea name="css-code" id="css-code" cols="30" rows="5">border-radius: 0% 0% 0% 0%;</textarea>
    <button id="copyCss" class="btn">Copy CSS</button>
    <button id="reset" class="btn">Reset</button>
  </div>
```

You might ask, **WTF** is this? 
```html
<div id="left-box-right"> 
```

Actually, I did this, because I am a lazy douchebag and wanted to get flexbox working here, with the default flex-direction, in order to get the inputs and the box next to each other.
Sorry, not sorry. 😁

Also, you might notice, that on the bottom of the code, there is one textarea and also 2 buttons.

```html
    <textarea name="css-code" id="css-code" cols="30" rows="5">border-radius: 0% 0% 0% 0%;</textarea>
    <button id="copyCss" class="btn">Copy CSS</button>
    <button id="reset" class="btn">Reset</button>
```

The textarea will contain the values of the range inputs in a certain way, which will be:

**border-radius: 0% 0% 0% 0%;**

The reason behind that is, that I want to be able to copy the values that I have done with the range inputs (let's call them sliders).

The buttons below them are *Copy CSS* and *Reset*.

The Copy CSS will be doing, what is written on the button (what a surprise).
The Reset button, will reset the values of the sliders, the textarea and the shape of the box.

<center>
#CSS
</center>

For the CSS part, I don't want to copy the whole code here, so I will just mention the important parts.

Firstly, I rotated the two sliders on the left and the right side of the box, with the following:

```css
.bottom-left {
  transform: rotate(-90deg);
}

.top-right {
  transform: rotate(90deg);
}
```

This resulted in the following:
<center>
![Sliders](https://dev-to-uploads.s3.amazonaws.com/i/4vx3tja4vbgxku1qk65v.jpg)
</center>

Which might also be interesting for you, is the sliders' design:
[It can be found here.](https://www.w3schools.com/howto/howto_js_rangeslider.asp)

That's all about the CSS part.

Now let's go to the interesting stuff. ➡

<center>
#JavaScript
</center>

I have defined all the needed stuff:
```javascript
const topLeftSlider = document.querySelector("#topLeftSlider");
const topRightSlider = document.querySelector("#topRightSlider");
const bottomRightSlider = document.querySelector("#bottomRightSlider");
const bottomLeftSlider = document.querySelector("#bottomLeftSlider");
const box = document.querySelector("#box");
const sliders = document.querySelectorAll(".slider");
const cssCode = document.querySelector("#css-code");
const resetBtn = document.querySelector("#reset");
const copyCss = document.querySelector("#copyCss");
```

You might notice, that I defined each slider individually and also by their classname: *.slider*.

The reason behind that is, that I wanted to use a forEach method, for the sake of practicing it, on the eventListener.

```javascript
sliders.forEach(slider => {
    // TO EACH CLICKED SLIDER, ADD "INPUT" EVENETLISTENER
    slider.addEventListener("input", () => {
        // TARGET EACH OF THE RADIUS PROPERTY OF THE BOX AND PUSH THE VALUE OF THE SLIDER INTO THAT
        box.style.borderTopLeftRadius = topLeftSlider.value + "%";
        box.style.borderTopRightRadius = topRightSlider.value + "%";
        box.style.borderBottomRightRadius = bottomRightSlider.value + "%";
        box.style.borderBottomLeftRadius = bottomLeftSlider.value + "%";
        // PUSH THE VALUES ALSO INTO THE COPIABLE TEXT OF THE TEXTAREA
        cssCode.textContent = `border-radius: ${topLeftSlider.value}% ${topRightSlider.value}% ${bottomRightSlider.value}% ${bottomLeftSlider.value}%;
        `
    })
})
```

The reason I used the "input" eventListener is because it updates the box's properties dinamically.

After this, the tool was working:

![Working tool](https://dev-to-uploads.s3.amazonaws.com/i/fo913b0z2rigs8ktqx40.gif)

When I finished jumping around of happinness, I moved onto the textarea and the buttons.

The Copy CSS button is doing the following:

```javascript
copyCss.addEventListener("click", () => {
    cssCode.select();
    document.execCommand("copy");
})
```
Targets the value in the textarea and copies the content of it to the clipboard.

Now, there is only one thing left, the reset button:

```javascript
resetBtn.addEventListener("click", () => {
    // RESET THE VALUE OF EACH SLIDER
    topLeftSlider.value = 0;
    topRightSlider.value = 0;
    bottomRightSlider.value = 0;
    bottomLeftSlider.value = 0;
    // RESET THE BOX'S BORDER RADIUS
    box.style.borderRadius = "0 0 0 0"
    // AFTER RESETING THE SLIDER VALUES, PUSH THAT INTO THE TEXTAREA
    cssCode.textContent = `border-radius: ${topLeftSlider.value}% ${topRightSlider.value}% ${bottomRightSlider.value}% ${bottomLeftSlider.value}%;`
})
```

<center>
#Remarks
</center>

The time spent in this project with the HTML, CSS and JS, was roughly 1 hour.

[Here you can find the GitHub repo.](https://github.com/crabyke/border-radius-tool) 

[Here you can test the tool if you want to.](https://codepen.io/crabyke/full/KKgoNON) 

*The tool had been created for PC, this is not responsive at all, yet.*

If you have any tip, suggestion, remark, feel free to contact me anywhere.

Have a nice day and rest of weekend everyone!