Todo 앱 - ES5 및 ES6 - 로컬 저장소
7839 단어 javascriptcsshtmlwebdev
다른 기능과 ES6 - Local Storage 버전을 보려면 여기를 보세요Repository
Step 1: Create UI
UI에서 부트스트랩 라이브러리를 사용했습니다.
<div class="container py-5">
<!-- Title -->
<h1 class="text-center">TODO App</h1>
<div class="col col-md-8 col-lg-6 my-5 mx-auto">
<!-- Form -->
<form class="form">
<div class="form-group d-flex">
<input
type="text"
class="input form-control bg-transparent text-light"
placeholder="Add TODO"
/>
<div class="px-2"></div>
<button type="submit" class="btn btn-success px-4">Add</button>
</div>
</form>
<!-- Todo Table -->
<table class="table table-dark table-bordered table-responsive text-center mt-5">
<thead>
<tr>
<td><strong>Task</strong></td>
<td></td>
</tr>
</thead>
<tbody class="todo-list"></tbody>
</table>
</div>
</div>
Step 2: Add functionality with Javascript.
"let"및 "const"키워드는 ES6에 속합니다.
// A function for less code.
function select(query) {
return document.querySelector(query);
}
// Variables
const form = select(".form");
const list = select(".todo-list");
const input = select(".input");
// Objects
function Todo(task) {
this.task = task;
}
function UI() {}
UI.prototype.create = function (todo) {
const html = `
<tr>
<td>${todo.task}</td>
<td><button class="btn btn-sm btn-danger delete">Delete</button></td>
</tr>
`;
list.innerHTML += html;
};
// Functions
function createTodo(e) {
const task = input.value;
// Constructors
const ui = new UI();
const todo = new Todo(task);
// Add to list
ui.create(todo);
// Clear Input
// Prevent form submit
e.preventDefault();
}
// Listeners
form.addEventListener("submit", function (e) {
createTodo(e);
});
다른 기능과 ES6 - Local Storage 버전을 보려면 여기를 보세요Repository
Reference
이 문제에 관하여(Todo 앱 - ES5 및 ES6 - 로컬 저장소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/enesskilic/todo-app-es5-es6-local-storage-kd0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)