BORDER RADIUS GENERATOR

Border Radius Generator

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
.click-to-copy {
  height: 100vh;
  width: 100%;
  font-family: "Roboto", sans-serif;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #1d3557;
  
}

.click-to-copy h2 {
  font-family: "Roboto Black", sans-serif;
  font-size: 40px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 16px;
}

.click-to-copy label {
  font-size: 18px;
}

.click-to-copy input {
  font-size: 48px;
  text-align: center;
  font-weight: bold;
  margin-top: 16px;
  padding: 8px 16px;
  width: 140px;
  border-radius: 8px;
  border: 2px solid #1d3557;
}

.click-to-copy input:focus {
  outline: none;
}

.click-to-copy input.error {
  border: 2px solid red;
  animation: shake 300ms ease-in-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  40% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

.click-to-copy .box {
  height: 120px;
  width: 100%;
  background: #e63946;
  margin: 24px;
}

.click-to-copy .copy-btn {
  padding: 12px 32px;
  border: 0;
  background: #1d3557;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  text-transform: uppercase;
}

.click-to-copy .toast-notification {
  position: fixed;
  bottom: 0px;
  pointer-events: none;
  opacity: 0;
  background: #111;
  color: #fff;
  padding: 8px 32px;
  border-radius: 4px;
  transition: all 400ms ease;
}

.click-to-copy .toast-notification.active {
  opacity: 1;
  bottom: 40px;
}
</style>
<div class="click-to-copy">
      <h2>Border Radius</h2>

      <label for="border-radius-input">Enter A Number</label>
      <input
        type="number"
        id="border-radius-input"
        min="5"
        max="100"
        value="5"
      />

      <div class="box"></div>

      <button class="copy-btn">Copy Code</button>

      <div class="toast-notification">Code Copied!</div>
    </div>
<script>
const copyBtn = document.querySelector(".copy-btn");
const borderRadiusInput = document.querySelector("#border-radius-input");
const box = document.querySelector(".box");
const toastNotification = document.querySelector(".toast-notification");

const updateBorderRadius = (e) => {
  let borderRadiusValue = e.target.value;

  if (borderRadiusValue > 100) {
    borderRadiusInput.value = 100;
    borderRadiusInput.classList.add("error");
    box.style.borderRadius = Math.floor(borderRadiusValue) + "px";

    setTimeout(() => {
      borderRadiusInput.classList.remove("error");
    }, 1000);
  } else {
    borderRadiusInput.classList.remove("error");
  }

  box.style.borderRadius = Math.floor(borderRadiusValue) + "px";
};

borderRadiusInput.addEventListener("input", updateBorderRadius);

const copyText = () => {
  let borderRadiusValue = borderRadiusInput.value || 5;
  let code = `border-radius: ${Math.floor(borderRadiusValue)}px;`;

  navigator.clipboard.writeText(code).then(() => {
    toastNotification.classList.add("active");
    setTimeout(() => {
      toastNotification.classList.remove("active");
    }, 2000);
  });
};

copyBtn.addEventListener("click", copyText);
</script>