데모 사이트 : https://mellifluous-cucurucho-4fbe72.netlify.app/
::훈화 말투 생성기::
mellifluous-cucurucho-4fbe72.netlify.app
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
|
<!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">
<title>::훈화 말투 생성기::</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/echo.css">
<script src="./js/main.js" type="module"></script>
</head>
<body>
<h1 id="title-page">훈화 말투 생성기<span id="version">1.0</span></h1>
<fieldset id="echo-field">
<label class="echo-check">
<span class="title">말줄임표(⋯)</span>
<input type="checkbox" title="말줄임표" id="echo-check-ellipsis" checked/>
<span class="ic"></span>
</label>
<textarea id="echo-text" placeholder="여기에 텍스트를 입력하세요.">친애하는 학생 여러분 시간은 쉼 없이 흘러 벌써 겨울방학을 맞이하고 있습니다. 띄어쓰기 기준 낱말은 두 개 이상 써주세요.</textarea>
<button id="echo-btn-generate" title="생성">생성</button>
</fieldset>
<div id="echo-result-wrap">
<div id="echo-result" contenteditable="true"></div>
<button id="echo-btn-copy-result" title="복사">복사</button>
<div id="echo-tooltip">복사 완료!</div>
</div>
</body>
</html>
|
cs |
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
@charset "utf-8";
#echo-field{
display:flex;flex-flow:row wrap;
justify-content:flex-start;align-items:center;
gap:20px 10px;
width:95%; max-width:500px;
margin-bottom:3rem;
}
/* 체크박스 */
.echo-check{
--bg-ipt:rgba(255,255,255,.5);
--bg-ipt-on:rgba(255,255,255,.2);
display:block; position:relative;
user-select:none;
}
.echo-check .title{
font-size:1.6rem; color:#ccc;
pointer-events:none;
}
.echo-check [type="checkbox"]{
position:absolute;overflow:hidden; opacity:0;
top:50%;left:0;
width:1px;height:1px;
border:none;background:transparent;
}
.echo-check .ic{
--hei-ic:.7em;
display:inline-block; vertical-align:middle;
position:relative; pointer-events:none;
margin-left:.25em;
height:var(--hei-ic); aspect-ratio:2/1;
background:var(--bg-ipt);
border:1px solid rgba(0,0,0,.5);
border-radius:50px;
box-shadow:inset 0 0 2px rgba(0,0,0,.5);
}
.echo-check .ic::after{
content:'';display:block;position:absolute;
height:100%;aspect-ratio:1/1;
top:50%;left:0;transform:translate(0,-50%);
background:rgba(255,255,255,.3);
border:1px solid rgba(0,0,0,.5); border-radius:50%;
box-shadow:0 0 5px rgba(0,0,0,.5);
transition:all .2s;
}
/* checked */
.echo-check [type="checkbox"]:checked ~ .ic{
background:var(--bg-ipt-on);
}
.echo-check [type="checkbox"]:checked ~ .ic::after{
transform:translate(100%,-50%);
background:var(--mint);
border-color:var(--mint);
box-shadow:0 0 10px var(--mint);
}
/* 입력 */
#echo-text{
width:100%;aspect-ratio:2/1;
padding:1em;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.15); border-radius:4px;
font-weight:bold;
word-spacing:.25em;
resize:none;
}
/* 버튼 */
#echo-btn-generate{
display:block;
width:100%;
padding:1em;
background:var(--mint);
border-radius:10vmax;
font-weight:bold;font-size:1.8rem;
}
/* 결과 */
#echo-result-wrap{
display:flex;flex-flow:column nowrap;
justify-content:flex-start; align-items:center;
gap:var(--gap);
padding-bottom:var(--gap);
position:relative; overflow:auto;
width:100%; height:calc(100vh - 400px - 80px - var(--gap) * 14);
min-height:200px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1); border-radius:4px;
}
#echo-result{
position:relative;
width:100%;
/* max-width:500px; */
padding:1em;
text-align:center;font-size:3rem;
word-spacing:.25em;
}
#echo-result:empty::after{
content:'결과는 이곳에 표시됩니다.';display:inline-block;
width:100%;
opacity:.2;
text-align:center; font-size:2rem;
}
/* 버튼-결과 복사 */
#echo-btn-copy-result{
display:block;
padding:.5em 2em;
background:var(--bg);
border:1px solid rgba(255,255,255,.2); border-radius:4px;
font-size:1.8rem; font-weight:bold; color:var(--f1);
transition:opacity .2s;
}
#echo-result:empty ~ #echo-btn-copy-result{
opacity:0; pointer-events:none;
}
/* 복사 완료 안내 툴팁 */
#echo-tooltip{
position:fixed;
padding:.4em 2em;
bottom:var(--gap);left:50%;transform:translate(-50%, 100%);
background:var(--bg);
border:1px solid rgba(255,255,255,.2);
text-align:center; font-size:1.4rem; color:var(--f1);
pointer-events:none;
opacity:0;
transition:all .5s;
}
#echo-tooltip.on{
opacity:1;
transform:translate(-50%, 0);
transition:all .2s;}
|
cs |
main.js
|
1
2
3
|
import { EchoGenerator } from "./Echo.js";
const Echo = new EchoGenerator();
|
cs |
Echo.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/** 메아리 말투 생성기 */
export class EchoGenerator{
/** 메아리 말투 생성기 */
constructor(){
this.$ellipsis = document.getElementById('echo-check-ellipsis');
this.$textarea = document.getElementById('echo-text');
this.$result = document.getElementById('echo-result')
this.$btnGen = document.getElementById('echo-btn-generate');
this.$btnCopy = document.getElementById('echo-btn-copy-result');
this.$tooltip = document.getElementById('echo-tooltip');
this.ellipsis = "⋯";
this.init();
}
init(){
this.add_events();
}//init
add_events(){
this.$btnGen.addEventListener('click',this.generate_echo);
this.$btnCopy.addEventListener('click',this.copy_result);
}//add_events
/** 에코 생성 시작
* @see https://regexr.com/5mhou
* @see http://regexp.elex.pe.kr/regular-expression
*/
generate_echo = () => {
// 텍스트 정돈
let text = this.$textarea.value.trim();
if(!text){
this.$textarea.value = "";
this.$textarea.focus();
return;
};
const removeSpaceDouble = /\s{2,}/gi;
const removeEnter = /\n/gi;
text = text.replace(removeSpaceDouble,"");
text = text.replace(removeEnter," ");
this.$textarea.value = text;
//
const textArray = text.split(' ');
const useEllipsis = this.$ellipsis.checked;
let per = 1;
for(let i=0; i<textArray.length - 1; i += per){
// console.log(i);
per = parseInt(Math.random() * 3 + 1);
const word = textArray[i];
const copy = word.slice(parseInt(Math.random() * (word.length - 1)),word.length);
const string = `${useEllipsis?this.ellipsis:" "}${copy}`
const random = parseInt(Math.random() * 2 + 1);
for(let k=0; k<random; k++){
textArray[i] += string;
}
}
this.$result.textContent = textArray.join(' ');
}//generate_echo
/**
* 결과 텍스트 복사
* @see https://velog.io/@godori/js-clipboard-copy
*/
copy_result = () => {
//복사
const $tempText = document.createElement('TEXTAREA');
$tempText.value = this.$result.textContent;
document.body.appendChild($tempText);
$tempText.select();
$tempText.setSelectionRange(0,9999);
document.execCommand('copy');
document.body.removeChild($tempText);
//복사 완료 안내 메세지
this.$tooltip.classList.add('on');
setTimeout(()=>{
this.$tooltip.classList.remove('on');
},1000);
}//copy_result
}//EchoGenerator
|
cs |
'CSS&JS > ✨개인 프로젝트' 카테고리의 다른 글
| 영화 한영자막 비교 페이지(프*스펙트) (0) | 2022.08.14 |
|---|---|
| 보내드렸습니다~^^ (0) | 2022.04.21 |
| 랜덤 친구 뽑기 (0) | 2022.04.18 |
| 딘자린 계산기 (0) | 2022.04.14 |
| [vanilla JS + CSS] marquee text 생성기 (0) | 2022.03.07 |