This is the second project in the beginner category in the #beginner2advanced challenge.

The link to all the apps in this challenge can be found here.

In this article, we will be creating a web application that allows us to manually select the property of a border-radius and copy the CSS code generated by the border-radius controllers.

NOTE: This project is created using HTML, CSS and Typescript.

The end result of the application will look like this:

Creating the HTML and CSS file

First, we create an index.html and a style.css file as below.

The index.html contains a preview element and four <input type="range"> elements to select between a range of 0 to 100.g

<!-- index.tml -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Radius Previewer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="previewer"></div>
      <div id="controllers">
        <label>
          Top Left (%)
          <input
            value="0"
            type="range"
            min="0"
            max="100"
            name="border-top-left-radius"
            id="top-left"
          />
        </label>
        <label>
          Top Right (%)
          <input
            value="0"
            type="range"
            min="0"
            max="100"
            name="border-top-right-radius"
            id="top-right"
          />
        </label>
        <label>
          Bottom Left (%)
          <input
            value="0"
            type="range"
            min="0"
            max="100"
            name="border-bottom-left-radius"
            id="bottom-left"
          />
        </label>
        <label>
          Bottom Right (%)
          <input
            value="0"
            type="range"
            min="0"
            max="100"
            name="border-bottom-right-radius"
            id="bottom-right"
          />
        </label>
        <button id="copy-btn">Copy CSS</button>
      </div>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

Then we will include this simple stylesheet to style our application.

/* style.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#previewer {
  border: 5px solid black;
  height: 200px;
  width: 400px;
}

#controllers label,
#controllers button {
  display: block;
  margin-top: 20px;
}

#controllers {
  position: absolute;
  top: 100px;
  left: 50px;
  background: #0059ff29;
  padding: 20px;
}

The Typescript Code

const previewer = document.getElementById("previewer") as HTMLDivElement;
const controllers = document.querySelectorAll("input");
const copyCSSButton = document.querySelector("#copy-btn") as HTMLButtonElement;

const convertToCamelCase = (str: string): string => {
  let strArr = str
    .split("-")
    .map((arr) => arr[0].toUpperCase() + arr.slice(1))
    .join("");
  return strArr[0].toLowerCase() + strArr.slice(1);
};

controllers.forEach((controller) => {
  controller.addEventListener("change", (e) => {
    const camelCaseStyle = convertToCamelCase(
      (e.target as HTMLInputElement).name
    );

    previewer.style[camelCaseStyle as "borderRadius"] =
      `${(e.target as HTMLInputElement).value}` + "%";
    console.log(convertToCamelCase((e.target as HTMLInputElement).name));
  });
});

// copy generate css to clipboard
copyCSSButton.addEventListener("click", async (e) => {
  let copy: string = "";
  controllers.forEach((controller) => {
    copy += `${controller.name}: ${controller.value}%;\n`;
  });

  await navigator.clipboard.writeText(copy);
  alert("copied");
});

Conclusion

You can find how I did this in my repository.

If you enjoy reading this article, you can consider buying me a coffee.

Border Radius Previewer App using Typescript. #beginner2advanced

Creating the HTML and CSS file

The Typescript Code

Conclusion