728x90
Vanilla JS URL Encoder Decoder 자바스크립트 URL 인코더 디코더
URL 인코더/디코더
결과:
복사되었습니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL 인코더/디코더</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
color: #333;
}
h1 {
text-align: center;
color: #2c3e50;
}
textarea {
width: 100%;
height: 120px;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.button-group {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
opacity: 0.9;
}
#encodeBtn {
background-color: #3498db;
}
#decodeBtn {
background-color: #2ecc71;
}
#copyBtn {
background-color: #e74c3c;
}
h2 {
color: #2c3e50;
margin-top: 20px;
}
#output {
background-color: #ecf0f1;
}
.result-container {
position: relative;
}
#copyMessage {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
background-color: #2c3e50;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
</style>
</head>
<body>
<h1>URL 인코더/디코더</h1>
<textarea id="input" placeholder="여기에 텍스트를 입력하세요..."></textarea>
<div class="button-group">
<button id="encodeBtn">인코딩</button>
<button id="decodeBtn">디코딩</button>
</div>
<h2>결과:</h2>
<div class="result-container">
<textarea id="output" readonly></textarea>
<div id="copyMessage">복사되었습니다!</div>
</div>
<div class="button-group">
<button id="copyBtn">결과 복사</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('input');
const output = document.getElementById('output');
const encodeBtn = document.getElementById('encodeBtn');
const decodeBtn = document.getElementById('decodeBtn');
const copyBtn = document.getElementById('copyBtn');
const copyMessage = document.getElementById('copyMessage');
function encode() {
output.value = encodeURIComponent(input.value);
}
function decode() {
output.value = decodeURIComponent(input.value);
}
function copyResult() {
output.select();
document.execCommand('copy');
copyMessage.style.opacity = '1';
setTimeout(() => {
copyMessage.style.opacity = '0';
}, 2000);
}
encodeBtn.addEventListener('click', encode);
decodeBtn.addEventListener('click', decode);
copyBtn.addEventListener('click', copyResult);
});
</script>
</body>
</html>=============
728x90
'javascript' 카테고리의 다른 글
| 자바스크립트로 페이지네이션(pagination) 만들기 (0) | 2024.10.08 |
|---|---|
| vanilla javascript navigator로 사용자 언어, 배터리 상태, 위치, 기타 정보 가져오기 (1) | 2024.10.08 |
| Zip File Viewer Zip 파일 뷰어 (0) | 2024.09.16 |
| decryption of JavaScript files 자바스크립트 파일 암호화 복호화 (0) | 2024.09.16 |
| Verifying JavaScript File Information 자바스크립트 파일 정보 확인 (0) | 2024.09.16 |
