<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URL Encoding/Decoding</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.container {
max-width: 600px;
margin-top: 2rem;
padding: 2rem;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.result-text {
color: #444;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">URL Encoding/Decoding</h1>
<div class="form-group">
<label for="input-textarea">Enter URL:</label>
<textarea id="input-textarea" class="form-control" placeholder="Enter URL" rows="5"></textarea>
</div>
<div class="form-group">
<button id="encode-button" class="btn btn-primary btn-block" onclick="encode()">Encode</button>
<button id="decode-button" class="btn btn-secondary btn-block" onclick="decode()">Decode</button>
</div>
<div class="form-group">
<label for="output-textarea" class="font-weight-bold">Result:</label>
<textarea id="output-textarea" class="form-control result-text" rows="5" readonly></textarea>
</div>
<div class="form-group">
<button id="copy-button" class="btn btn-secondary btn-block" onclick="copyResult()">Copy</button>
</div>
</div>
<script>
function encode() {
const input = document.getElementById("input-textarea").value;
const output = encodeURIComponent(input);
document.getElementById("output-textarea").value = output;
}
function decode() {
const input = document.getElementById("input-textarea").value;
const output = decodeURIComponent(input);
document.getElementById("output-textarea").value = output;
}
function copyResult() {
const outputTextarea = document.getElementById("output-textarea");
outputTextarea.select();
outputTextarea.setSelectionRange(0, 99999); // For mobile devices
document.execCommand("copy");
alert("Result copied to clipboard.");
}
</script>
</body>
</html>
'TIP & IDEA > VanillaJS' 카테고리의 다른 글
| JavaScript 배열에서 유니크한 값 추출 & Object배열에서 유니크한 값 추출 (0) | 2022.06.26 |
|---|---|
| 정규표현식 Utills ( 콤마찍기, 콤마빼기, 숫자만입력, 하이픈제거, 전화전호 하이픈 생성, 주민등록번호, 사업자등록번호 ) (0) | 2021.05.18 |