Typescript를 사용하는 Border Radius 미리보기 앱. #beginner2고급

15411 단어 beginnerstypescriptjavascriptbeginner2advanced
#beginner2advanced 챌린지의 초심자 카테고리 두 번째 프로젝트입니다.

이 챌린지의 모든 앱에 대한 링크를 찾을 수 있습니다here.

이 문서에서는 aborder-radius의 속성을 수동으로 선택하고 border-radius 컨트롤러에서 생성된 CSS 코드를 복사할 수 있는 웹 애플리케이션을 만들 것입니다.

참고: 이 프로젝트는 HTML, CSS 및 Typescript를 사용하여 생성됩니다.

응용 프로그램의 최종 결과는 다음과 같습니다.



HTML 및 CSS 파일 만들기



먼저 아래와 같이 index.html와 style.css 파일을 생성합니다.
index.html에는 0에서 100.g 범위 사이에서 선택할 수 있는 미리보기 요소와 4개의 요소<input type="range">가 포함되어 있습니다.

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


그런 다음 이 간단한 스타일시트를 포함하여 애플리케이션의 스타일을 지정합니다.

/* 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;
}


타이프스크립트 코드




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");
});


결론



내 repository에서 이 작업을 수행한 방법을 찾을 수 있습니다.

이 기사를 읽는 것이 즐거우면 buying me a coffee을 고려할 수 있습니다.
가장 긴 공통 하위 문자열
JavaScript에서 간단한 JSON을 Excel로 - 코드 스니펫

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage