Border Radius Generator Tool (VanillaJS)

#**Hello Everyone!**

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.

#HTML

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)."

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

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

<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?

<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.

    <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.

#CSS

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:

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

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

This resulted in the following:


Which might also be interesting for you, is the sliders' design:
It can be found here.

That's all about the CSS part.

Now let's go to the interesting stuff. ➡

#JavaScript

I have defined all the needed stuff:

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.

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:

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

The Copy CSS button is doing the following:

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:

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}%;`
})

#Remarks

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

Here you can find the GitHub repo.

Here you can test the tool if you want to.

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!

Comments

[perpetual . education]

That's a fun project and a fun tool. Good job!

We've been using Vue so much... that it was a shock to see the .style property!!! I guess we just haven't used it in a while! How is he going to get that style dynamically in there... haha! Funny.

[Duzmath Lajos]

Oh, really, I forgot to mention, that the "input" eventListener is updating the style property dynamically, while the "change" eventListener only updates the style when releasing the button.

[perpetual . education]

Playing around with it a bit - and using event delegation: codepen.io/sheriffderek/pen/YzGaNwM + seems like a good challenge to get those sliders positioned with CSS grid!

[Duzmath Lajos]

nice job!

[marekfoltanski]

It's a really cool tool, i tried to do something similar with React:
cssgenerator.pl/border-radius-gene...