728x90
자바스크립트로 태그를 추가하는 코드 예제입니다.
태그를 추가하는 베이직 코드입니다.
Tag Creator
각 언어별로의 태그를 저장할 수 있습니다.
아래는 코드 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Creator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.tag-form {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.tag-form label {
font-weight: bold;
}
.tag-form input {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
.tag-form button {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.tag-form button:hover {
background-color: #0056b3;
}
.tag-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.tag-item {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
textarea {
width: 100%;
height: 150px;
margin-top: 20px;
font-family: monospace;
white-space: pre;
overflow: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
@media (max-width: 600px) {
h1 {
font-size: 20px;
}
.tag-form {
flex-direction: column;
}
.tag-form input, .tag-form button {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>Tag Creator</h1>
<div class="tag-form">
<label for="en">English Tag:</label>
<input type="text" id="en" required><br>
<label for="ko">Korean Tag:</label>
<input type="text" id="ko"><br>
<label for="ja">Japanese Tag:</label>
<input type="text" id="ja"><br>
<label for="zh">Chinese Tag:</label>
<input type="text" id="zh"><br>
<button id="addTagButton">Add Tag</button>
</div>
<!-- Textarea for JSON output -->
<textarea id="jsonOutput" readonly></textarea>
<ul id="tagList" class="tag-list"></ul>
<script>
let tagsArray = []; // Array to store created tags
// Function to generate a random string of a given length
function generateRandomString(length) {
const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters[randomIndex];
}
return result;
}
// Function to generate a code based on the English tag
function generateCode(en) {
if (!en || typeof en !== 'string' || en.length < 2) {
throw new Error('Invalid English tag');
}
const firstChar = en[0];
const lastChar = en[en.length - 1];
const randomPart = generateRandomString(4);
return `${firstChar}${lastChar}${randomPart}`;
}
// Function to generate a group key
function generateGroupKey() {
return generateRandomString(6);
}
// Function to create a new tag with random code and group key
function createTag(en, ko, ja, zh) {
const code = generateCode(en);
const grp = generateGroupKey();
return {
code: code,
grp: grp,
en: en,
ko: ko,
ja: ja,
zh: zh
};
}
// Function to update the tag list and JSON output
function updateTagList() {
const tagList = document.getElementById('tagList');
const jsonOutput = document.getElementById('jsonOutput');
tagList.innerHTML = ''; // Clear existing list
tagsArray.forEach(tag => {
const tagItem = document.createElement('li');
tagItem.className = 'tag-item';
tagItem.textContent = `Code: ${tag.code}, Group: ${tag.grp}, EN: ${tag.en}, KO: ${tag.ko}, JA: ${tag.ja}, ZH: ${tag.zh}`;
tagList.appendChild(tagItem);
});
// Convert tagsArray to JSON string with each object in one line and each object separated by a newline
jsonOutput.value = tagsArray.map(tag => JSON.stringify(tag)).join(',\n');
}
// Function to add a new tag to the list
function addTag() {
const en = document.getElementById('en').value;
const ko = document.getElementById('ko').value;
const ja = document.getElementById('ja').value;
const zh = document.getElementById('zh').value;
if (!en) {
alert('English tag is required.');
return;
}
const tag = createTag(en, ko, ja, zh);
tagsArray.push(tag); // Add new tag to the array
updateTagList(); // Update the list and JSON output
// Clear the input fields
document.getElementById('en').value = '';
document.getElementById('ko').value = '';
document.getElementById('ja').value = '';
document.getElementById('zh').value = '';
}
// Add event listener for the 'Add Tag' button
document.getElementById('addTagButton').addEventListener('click', addTag);
function aa1() {
const tag = createTag('example', '예제', '例', '示例');
tagsArray.push(tag);
}
aa1();
function aa2() {
tag = createTag('demo', '데모', 'デモ', '演示');
tagsArray.push(tag);
}
aa2();
function aa3() {
tag = createTag('test', '테스트', 'デモ', '演示');
tagsArray.push(tag);
}
aa3();
</script>
</body>
</html>html,css,javascript로만 작성되었습니다.
728x90
'javascript' 카테고리의 다른 글
| 자바스크립트 CryptoJS 라이브러리로 문자 암호화 복호화하기 (0) | 2024.08.26 |
|---|---|
| 자바스크립트로 이미지 암호화 복호화 하기 (0) | 2024.08.26 |
| JavaScript랑 Node.js랑 서로 통신하기 (0) | 2023.10.08 |
| 데이터 포맷의 종류와 자바스크립트로 접근 방법 (0) | 2023.10.06 |
| 자바스크립트(Javascript)로 폴더 업로드해서 목록 나열하기 (0) | 2023.10.06 |