티스토리 뷰

웹 개발

대신 텍스트를 반복해주는 도배도배

개발하는 맹꽁이 2022. 10. 29. 18:48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const text = document.getElementById("text");
const enterCheck = document.getElementById("enter-check");
const repeatTime = document.getElementById("repeat-time");
const getResult = document.getElementById("get-result");
 
getResult.onclick = () => {
    if (text.value != "" && repeatTime.value > 0 && Number.isInteger(Number(repeatTime.value))) {
        let repeatText = "";
 
        for (let i = 0; i < repeatTime.value; i++) {
            if (enterCheck.checked && i != repeatTime.value - 1) {
                repeatText += text.value + "\n";
            } else {
                repeatText += text.value;
            }
        }
 
        navigator.clipboard.writeText(repeatText).then(() => {
            alert("반복한 텍스트가 클립보드에 복사되었습니다!");
        }, (err) => {
            alert("반복한 텍스트를 클립보드에 복사할 수 없습니다. ", err);
        });
    } else {
        alert("반복 횟수가 1 이상의 정수가 아니거나 반복할 텍스트가 없습니다.");
    }
}
cs

도배도배를 사용하면 텍스트를 원하는 수 만큼 반복해줍니다.

제가 만들었죠.

도배도배의 스크린샷

간단한 UI입니다.

Bootstrap을 이용해서 그렇죠.

사용하는 모습

반복하고 싶은 텍스트를 큰 입력칸에 쓰고, 반복 횟수를 정하면 됩니다.

줄을 바꾸며 반복하도록 할 수도 있고 반복하기 버튼을 누르면 자동으로 복사됩니다.

도배도배를 사용하여 텍스트를 반복한 모습

그냥 갑자기 생각나서 만들었습니다.

진짜 별거 없는데 줄바꿈 기능에서 애먹었습니다.

checkbox input은 value가 아니라 checked로 체크 여부를 받아오더군요.

그걸 모르고 value로 받아온 저는 "이게 왜 안되지" 하며 답답해했습니다.

소스코드도 올려드리겠습니다.

 

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="ko">
<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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>도배도배</title>
</head>
<body>
    <h1 class="title">도배도배</h1>
    <h2 class="description">아무 글자나 반복해줍니다.</h2>
    <div class="form-floating text-form">
        <textarea class="form-control" placeholder="Leave a comment here" id="text" style="height: 200px;"></textarea>
        <label for="text">반복하고 싶은 텍스트를 입력해주세요.</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="enter-check">
        <label class="form-check-label" for="enter-check">
            반복할 때 마다 줄 바꾸기
        </label>
    </div>
    <div class="input-group mb-3">
        <input type="number" class="form-control" placeholder="반복 횟수" aria-label="Example text with button addon" aria-describedby="button-addon1" id="repeat-time">
    </div>
    <button class="btn btn-primary" id="get-result">반복하기</button>
 
    <script src="script.js" defer></script>
</body>
</html>
 cs

 

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const text = document.getElementById("text");
const enterCheck = document.getElementById("enter-check");
const repeatTime = document.getElementById("repeat-time");
const getResult = document.getElementById("get-result");
 
getResult.onclick = () => {
    if (text.value != "" && repeatTime.value > 0 && Number.isInteger(Number(repeatTime.value))) {
        let repeatText = "";
 
        for (let i = 0; i < repeatTime.value; i++) {
            if (enterCheck.checked && i != repeatTime.value - 1) {
                repeatText += text.value + "\n";
            } else {
                repeatText += text.value;
            }
        }
 
        navigator.clipboard.writeText(repeatText).then(() => {
            alert("반복한 텍스트가 클립보드에 복사되었습니다!");
        }, (err) => {
            alert("반복한 텍스트를 클립보드에 복사할 수 없습니다. ", err);
        });
    } else {
        alert("반복 횟수가 1 이상의 정수가 아니거나 반복할 텍스트가 없습니다.");
    }
}
 cs

 

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@font-face {
    font-family: "gsm";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}
 
body {
    font-family: "gsm";
    padding-top: 80px;
    padding-left: 80px;
}
 
.title {
    font-size: 40px;
}
 
.description {
    font-size: 20px;
    margin-bottom: 50px;
}
 
.text-form {
    width: 600px;
    margin-bottom: 20px;
}
 
textarea {
    resize: none;
}
 
.form-check {
    margin-bottom: 20px;
}
 
.input-group {
    width: 600px;
    margin-bottom: 20px!important;
}
 cs

 

그리고 바로 이용해보실 수 있도록 링크도 달아드리도록 하겠습니다.

아래의 링크를 클릭하시면 제가 만든 도배도배를 바로 이용할 수 있습니다.

https://sunwoo1524.github.io/DoBaeDoBae/

 

도배도배

 

sunwoo1524.github.io

 

이상으로 제 새로운 프로젝트 도배도배 소개를 마치겠습니다.

공감과 댓글은 저에게 힘이 됩니다!

'웹 개발' 카테고리의 다른 글

맵을 매트릭스 배열로 만들어주는 매트릭스 맵 생성기  (0) 2023.06.18
타입스크립트로 만든 지뢰찾기  (2) 2023.04.03
[HTML/CSS 클론] Google 검색 페이지 클론  (2) 2022.08.19
자바스크립트로 간단한 GUI 계산기 만들기  (0) 2022.07.22
자바스크립트로 시계 만들기  (0) 2022.07.10
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함