feat: Custom Border Radius Generator (#215)

* feat: Custom Border Radius Generator

* changes done

Co-authored-by: Dunsin <[email protected]>

Author: ManishBisht777

index.html

@@ -138,6 +138,16 @@ <h1 id="head">Code Magic</h1>
           ></iconify-icon>
           <span>Animator</span>
         </li>
+        <li data-gen="border-radius">
+          <iconify-icon
+            inline
+            icon="ic:twotone-rounded-corner"
+            style="color: white"
+            width="20"
+            height="20"
+          ></iconify-icon>
+          <span>Border Radius</span>
+        </li>
         <li data-gen="box-shadow">
           <iconify-icon
             inline
@@ -380,7 +390,6 @@ <h2>
                 value="3"
               />
             </label>
-
             <label id="degree">
               <span class="label-title">
                 <span class="title-display">Angle</span>
@@ -463,8 +472,48 @@ <h2>
 
             <div class="btn" data-button="box-shadow">Get Results</div>
           </div>
-        </div>
+          
+          
+          <!-- border radius generator -->
+          <div data-content="border-radius">
+            <div class="border-radius-preview-box">
+              <div class="preview"></div>
+              <div class="border-range-inputs">
+                <input
+                  type="range"
+                  max="100"
+                  min="0"
+                  id="border-radius-top"
+                  class="border-radius-inputs"
+                  />
+                <input
+                  type="range"
+                  max="100"
+                  min="0"
+                  id="border-radius-left"
+                  class="border-radius-inputs"
+                />
+                <input
+                  type="range"
+                  max="100"
+                  min="0"
+                  id="border-radius-right"
+                  class="border-radius-inputs"
+                />
+                <input
+                  type="range"
+                  max="100"
+                  min="0"
+                  id="border-radius-bottom"
+                  class="border-radius-inputs"
+                />
+              </div>
+            </div>
 
+            <div class="btn" data-button="border-radius">Get Results</div>
+          </div>
+        </div>
+        
         <div class="side-results">
           <div class="header">
             <iconify-icon
@@ -619,6 +668,22 @@ <h2>Results</h2>
               </button>
             </div>
           </div>
+          
+          <!-- border radius -->
+          <div class="download-output" data-result="border-radius">
+            <div class="output"></div>
+            <div class="download-btn">
+              <button class="btn" data-download="border-radius-code">
+                <iconify-icon
+                  inline
+                  icon="bx:code-alt"
+                  style="color: white; margin-right: 5px"
+                  width="20"
+                ></iconify-icon
+                >Get Code
+              </button>
+            </div>
+          </div>
         </div>
       </section>
     </main>

src/lib/general.ts

@@ -78,6 +78,12 @@ function actOnGenerator(attribute: string, outputElement: HTMLElement) {
         }
       `;
       break;
+    case 'border-radius':
+      element = outputElement.style;
+      codeToCopy = `
+          border-radius: ${element.borderRadius};
+      `;
+      break;
     case 'box-shadow':   
       element = outputElement.style; 
       console.log("element: ", element)
@@ -214,6 +220,18 @@ export const getRadioButtonSet = (attribute: string) =>
     `[name = ${attribute}-radio]`
   ) as NodeListOf<HTMLInputElement>;
 
+export const getBorderTop = (attribute: string) =>
+  <HTMLInputElement>document.getElementById(`${attribute}-top`);
+
+export const getBorderRight = (attribute: string) =>
+  <HTMLInputElement>document.getElementById(`${attribute}-right`);
+
+export const getBorderBottom = (attribute: string) =>
+  <HTMLInputElement>document.getElementById(`${attribute}-bottom`);
+
+export const getBorderLeft = (attribute: string) =>
+  <HTMLInputElement>document.getElementById(`${attribute}-left`);
+
 export const getStyleSheet = () => {
   const stylesheet = Array.from(document.styleSheets).filter(
     (styleSheet) =>

src/main.ts

@@ -4,6 +4,7 @@ import {gradientTextGenerator} from './pages/gradient-text';
 import {gradientBorderGenerator} from './pages/gradient-border';
 import {gradientBackgroundGenerator} from './pages/gradient-background';
 import {animationGenerator} from './pages/animation';
+import {borderRadiusGenerator} from './pages/border-radius';
 import {boxShadowGenerator} from './pages/box-shadow';
 
 // Utils
@@ -120,6 +121,26 @@ const titleDisplayElement = <HTMLElement>(
   document.querySelector('.title-display')
 );
 
+// border radius elements
+
+const borderRadiusInputs = document.querySelectorAll('.border-radius-inputs');
+const borderTop = <HTMLInputElement>(
+  document.querySelector('#border-radius-top')
+);
+const borderLeft = <HTMLInputElement>(
+  document.querySelector('#border-radius-left')
+);
+const borderBottom = <HTMLInputElement>(
+  document.querySelector('#border-radius-bottom')
+);
+const borderRight = <HTMLInputElement>(
+  document.querySelector('#border-radius-right')
+);
+
+const borderRadiusPreview = <HTMLElement>(
+  document.querySelector('.border-radius-preview-box > .preview')
+);
+
 menuIcon?.addEventListener('click', () => {
   if (navBar?.classList.contains('closed-nav')) {
     navBar?.animate(navBarSlideIn, navBarAnimationOptions);
@@ -235,6 +256,9 @@ function generatorsFunction(attribute: string): void {
     case 'animation':
       animationGenerator();
       break;
+    case 'border-radius':
+      borderRadiusGenerator();
+      break;
     case 'box-shadow':
       boxShadowGenerator();
       break;
@@ -369,6 +393,20 @@ for (let i = 0; i < gradientBackgroundInputs.length; i++) {
   );
 }
 
+// on change event handler for border radius generator range inputs
+
+for (let i = 0; i < borderRadiusInputs.length; i++) {
+  borderRadiusInputs[i].addEventListener('change', () =>
+    BorderRadiusGenerator(
+      borderTop,
+      borderLeft,
+      borderBottom,
+      borderRight,
+      borderRadiusPreview
+    )
+  );
+}
+
 //set gradient border preview
 for (let i = 0; i < gradientBorderInputs.length; i++) {
   gradientBorderInputs[i].addEventListener('change', () =>
@@ -392,7 +430,23 @@ for (let i = 0; i < gradientTextInputs.length; i++) {
   );
 }
 
+// border radius generator preview
+
+const BorderRadiusGenerator = (
+  borderTop: HTMLInputElement,
+  borderLeft: HTMLInputElement,
+  borderBottom: HTMLInputElement,
+  borderRight: HTMLInputElement,
+  borderRadiusPreview: HTMLElement
+) => {
+  borderRadiusPreview.style.borderRadius = `
+    ${borderTop.value}% ${100 - Number(borderTop.value)}%
+    ${borderBottom.value}% ${100 - Number(borderBottom.value)}% /
+    ${borderLeft.value}% ${borderRight.value}%
+    ${100 - Number(borderRight.value)}% ${100 - Number(borderLeft.value)}%`;
+};
+
 //Toggle gradient border radius input display
 gradientBorderRadius.addEventListener('change', function () {
   gradientBorderInput.style.display = this.checked ? 'inline' : 'none';
-});
+});

src/pages/border-radius.ts

@@ -0,0 +1,58 @@
+import * as utils from '../lib/general';
+
+type Values = {
+  BorderTop: string;
+  borderLeft: string;
+  borderRight: string;
+  borderBottom: string;
+};
+
+export function borderRadiusGenerator(): void {
+  const attribute = 'border-radius';
+  const getOutputElement = utils.getOutput(attribute);
+  const resultPage = utils.getResultPage();
+
+  resultPage.style.display = 'flex';
+  if (getOutputElement === null) return;
+  getOutputElement.style.display = 'grid';
+  getOutputElement.style.placeItems = 'center';
+
+  const borderTop = utils.getBorderTop(attribute);
+  const borderRight = utils.getBorderRight(attribute);
+  const borderLeft = utils.getBorderLeft(attribute);
+  const borderBottom = utils.getBorderBottom(attribute);
+
+  const values = {
+    BorderTop: borderTop.value,
+    borderLeft: borderLeft.value,
+    borderRight: borderRight.value,
+    borderBottom: borderBottom.value,
+  };
+
+  getBorderRadiusResult(attribute, values, getOutputElement);
+}
+
+function getBorderRadiusResult(
+  attribute: string,
+  values: Values,
+  outputElement: HTMLElement
+): void {
+  outputElement.style.width = '250px';
+  outputElement.style.height = '250px';
+  outputElement.style.borderRadius = `${values.BorderTop}% ${
+    100 - Number(values.BorderTop)
+  }%
+  ${values.borderBottom}% ${100 - Number(values.borderBottom)}% /
+  ${values.borderLeft}% ${values.borderRight}%
+  ${100 - Number(values.borderRight)}% ${100 - Number(values.borderLeft)}%`;
+
+  const getCodeButtonElement = utils.getCopyCodeButton(attribute);
+  getCodeButtonElement.addEventListener('click', () => {
+    utils.copyCodeToClipboard(attribute, outputElement);
+    utils.showPopup(
+      'Code Copied',
+      'Code has been successfully copied to clipboard',
+      'success'
+    );
+  });
+}

src/style.css

@@ -441,6 +441,62 @@ input[type='number']::-webkit-outer-spin-button {
   margin-bottom: 1rem;
 }
 
+[data-content='border-radius'] {
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+  position: relative;
+}
+
+.border-radius-preview-box {
+  width: 250px;
+  height: 250px;
+  border: 1px dashed var(--text-color);
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.border-radius-preview-box .preview {
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color);
+}
+.border-range-inputs input {
+  width: 100%;
+  cursor: pointer;
+}
+
+#border-radius-code {
+  padding: 1rem;
+  background: var(--primary-color);
+  margin-top: 2rem;
+}
+
+.border-range-inputs input:nth-child(1) {
+  position: absolute;
+  top: -2rem;
+  left: 0;
+}
+
+.border-range-inputs input:nth-child(2) {
+  position: absolute;
+  transform: rotate(90deg);
+  top: 7rem;
+  left: -9rem;
+}
+.border-range-inputs input:nth-child(3) {
+  position: absolute;
+  transform: rotate(90deg);
+  top: 7rem;
+  left: 9rem;
+}
+.border-range-inputs input:nth-child(4) {
+  position: absolute;
+  bottom: -2rem;
+  left: 0;
+  transform: rotate(180deg);
+}
+
 /*	
 * NOTE: The border-radius property is not supported with border-image, therefore,
 *	the css for the gradient-border below relies on CSS Mask property applied to a pseudo background.