728x90
오늘은 simpleMDE라는, JS를 이용한 아주 간단면서도 괜찮은 마크다운 에디터를 불러오는 데 성공했다. 그리고,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/styles.css" rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<!-- <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> -->
</head>
<body>
<!-- <textarea id='MyID'></textarea> -->
<form>
<input type="text" autocomplete="off" class="form-control" placeholder="태그 목록" id="text_task">
<button type="submit" id="btn_add_task" class="btn btn-primary">추가</button>
</form>
<ul id = "list_tasks">
</ul>
</body>
<script>
// /* JavaScript markdown editor SimpleMDE */
// var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
/* add Tag by click or press enter */
var elements = document.getElementById('element');
var taskSubmit = document.getElementById('btn_add_task');
var taskBox = document.getElementById('text_task');
var taskList = document.getElementById('list_tasks');
document.addEventListener('click', function(e) {
e.preventDefault();
var task = taskBox.value.trim();
var newLI = document.createElement('li');
var element = newLI.appendChild(document.createTextNode(task));
if (taskBox.value != "" || e.keyCode === 188) {
taskList.appendChild(newLI);
}
taskBox.value = '';
}, false);
// 똑같은 태그가 추가되면 안됨
// , 이용해서도 추가되게 하기
// // 자동완성
// document.addEventListener('keyup', function(e) {
// e.preventDefault();
// var task = taskBox.value.trim();
// var newLI = document.createElement('li');
// var element = newLI.appendChild(document.createTextNode(task));
// if (taskBox.value != "" || e.keyCode === 13 || e.keyCode === 188) {
// taskList.appendChild(newLI);
// }
// taskBox.value = '';
// });
</script>
</html>VanillaJS를 이용해서, 엔터 키를 누르거나 submit을 click하면 ul 내에 li 태그가 추가되게끔 하는 것을 구현했다. 문제는, // 에 있는 세 가지를 더 구현해야 된다는 건데, 좀 어렵다 .. 짧은 경험 중에도 VanillaJS보다는 jQuery를 주로 사용했었기 때문에 더 어렵게 느껴지는 것 같다 ㅜ
'today i learned' 카테고리의 다른 글
| today i learned 8/22 (0) | 2020.08.23 |
|---|---|
| today i learned 8/21 (0) | 2020.08.23 |
| today i learned 8/19 (0) | 2020.08.20 |
| today i learned 8/18 (0) | 2020.08.19 |
| today i learned 8/17 (0) | 2020.08.18 |
