crongro · September 4, 2018 03:25
diff --git a/todo.css b/todo.css
 .section-basic-style {
    background-color: #a6d0d3;
  padding: 1em;
 }

 .visible {
  display : block!important;
 }

 .container {
  margin: 150px 20%;
 }

 .countInfoWrap {
  position: absolute;
  top: 5%;
  right: 5%;
  width:200px;
 }

 .countInfoWrap > div {
  float: left;
  margin-right: 10%;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 2em;
  color: #fff;
  font-weight: 500;
 }

 .todo-count {
  background: green;
 }

 .done-count {
  background: #c1adad;
  text-decoration: line-through;
 }

 .todoBox {
  margin-bottom: 10%;
  background-color: #a6d0d2;
  padding: 1em;
 }

 .todoBox button {
  height: 32px;
 }

 input[name=todo] {
  width: 200px;
  height: 30px;
  padding: 0.5em;
 }

 .logBox .todolist {
  display:none;
 }

 .logBox .todolist li  {
  margin-bottom: 0.5em;
 }

 .fold {
  display :none;
  float: right;
  width: 50px;
  height: 30px;
  font-size: 0.8em;
  border-style: none;
  cursor: pointer;
  border-radius: 0.2em;
 }

 .deleteX {
  cursor: pointer;
  padding: 0.1em;
  box-sizing: border-box;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: #eeb0b0;
  color: #f9f9f9;
  margin-left: 0.2em;
 }
diff --git a/todo.html b/todo.html
 <html>

 <head>
    <meta charset="utf-8">
    <title>TODO를 MVC로 해보자</title>
    <script type="module" src="./app.js"></script>
    <link rel="stylesheet" href="todo.css">
 </head>

 <body>
    <div class="container">
        <div class="countInfoWrap">
            <div class="todo-count">10</div>
            <div class="done-count">10</div>
        </div>
        <section class="todoBox section-basic-style">
            할일입력 :
            <input type="text" name="todo">
            <button>등록</button>
        </section>
        <section class="logBox section-basic-style">
            <button class="fold">접기</button>
            <div>해야할 일들</div>
            <ul class="todolist visible">
                <li id="1233"> 공부하기 <span class="deleteX"> X </span></li>
            </ul>
        </section>
    </div>
 </body>

 </html>
diff --git a/todo.js b/todo.js
 class TodoModel {
    //Controller, View의 존재를 전혀 모르게 구현.
    constructor() {
        this.todos = [];
    }

    addTodo(todo, fnAfter) {
        this.todos = [...this.todos, todo];
        fnAfter(this.todos);
    }

    get todoList () {
        return this.todos;
    }
 }


 class TodoController {
    constructor(todoModel, inputView, listView) {
        this.todoModel    = todoModel;
        this.inputView    = inputView;
        this.listView     = listView;
        this.initService();
    }
    initService() {
        this.inputView.addTodoHandler = this.addTodoHandler.bind(this);
    }

    addTodoHandler(todoString) {
        if(!todoString) return;
        this.todoModel.addTodo.call(this.todoModel, todoString, this.afterAddTodo.bind(this));
    }

    afterAddTodo(todoArray) {
        this.renderInputView(todoArray);
        this.renderListView(todoArray);
    }

    renderInputView(todoArray) {
        this.inputView.render();
    }

    renderListView(todoArray) {
        this.listView.render(todoArray);
    }
 }

 //view들은 model이 어떤 것인지 전혀 모른다.
 class InputView {
    constructor() {
        this.regButton = document.querySelector("button");
        this.inputElement = document.querySelector("input[name=todo]")
        this.addTodoHandler = null;
        this.initEvents();
    }

    initEvents() {
        this.regButton.addEventListener("click", (e) => {
            const todoText = this.getTodoValue();
            this.addTodoHandler(todoText);
        });

        this.inputElement.addEventListener("keydown", (e) => {
            if(e.keyCode !== 13) return;
            const todoText = this.getTodoValue();
            this.addTodoHandler(todoText);
        });
    }

    getTodoValue() { 
        return document.querySelector("input[name=todo]").value;
    }

    render(inputData = "") {
        this.inputElement.value = inputData;
    }
 }

 class ListView {
    constructor(listElement) {
        this.listElement = document.querySelector(".todolist");
        this._ = {
            displayClassName : "visible"
        }
        this.todoList = null;
    }

    render(todoList) {
        let listHTML = todoList.reduce((html, todo) => {
            return `${html} <li> ${todo} </li> `;
        }, "")

        this.todoList = todoList;
        this.listElement.innerHTML = listHTML;
    }
 }

 class ListFoldButtonView {
    constructor() {

    }

    initEvents() {

    }
 
    render() {

    }

 }

 const todoModel = new TodoModel();
 const inputView = new InputView();
 const listView = new ListView();
 const todoController = new TodoController(todoModel, inputView, listView);
	.section-basic-style {
	background-color: #a6d0d3;
	padding: 1em;
	}

	.visible {
	display : block!important;
	}

	.container {
	margin: 150px 20%;
	}

	.countInfoWrap {
	position: absolute;
	top: 5%;
	right: 5%;
	width:200px;
	}

	.countInfoWrap > div {
	float: left;
	margin-right: 10%;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 2em;
	color: #fff;
	font-weight: 500;
	}

	.todo-count {
	background: green;
	}

	.done-count {
	background: #c1adad;
	text-decoration: line-through;
	}

	.todoBox {
	margin-bottom: 10%;
	background-color: #a6d0d2;
	padding: 1em;
	}

	.todoBox button {
	height: 32px;
	}

	input[name=todo] {
	width: 200px;
	height: 30px;
	padding: 0.5em;
	}

	.logBox .todolist {
	display:none;
	}

	.logBox .todolist li {
	margin-bottom: 0.5em;
	}

	.fold {
	display :none;
	float: right;
	width: 50px;
	height: 30px;
	font-size: 0.8em;
	border-style: none;
	cursor: pointer;
	border-radius: 0.2em;
	}

	.deleteX {
	cursor: pointer;
	padding: 0.1em;
	box-sizing: border-box;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: inline-block;
	text-align: center;
	background-color: #eeb0b0;
	color: #f9f9f9;
	margin-left: 0.2em;
	}
	<html>

	<head>
	<meta charset="utf-8">
	<title>TODO를 MVC로 해보자</title>
	<script type="module" src="./app.js"></script>
	<link rel="stylesheet" href="todo.css">
	</head>

	<body>
	<div class="container">
	<div class="countInfoWrap">
	<div class="todo-count">10</div>
	<div class="done-count">10</div>
	</div>
	<section class="todoBox section-basic-style">
	할일입력 :
	<input type="text" name="todo">
	<button>등록</button>
	</section>
	<section class="logBox section-basic-style">
	<button class="fold">접기</button>
	<div>해야할 일들</div>
	<ul class="todolist visible">
	<li id="1233"> 공부하기 <span class="deleteX"> X </span></li>
	</ul>
	</section>
	</div>
	</body>

	</html>
	class TodoModel {
	//Controller, View의 존재를 전혀 모르게 구현.
	constructor() {
	this.todos = [];
	}

	addTodo(todo, fnAfter) {
	this.todos = [...this.todos, todo];
	fnAfter(this.todos);
	}

	get todoList () {
	return this.todos;
	}
	}


	class TodoController {
	constructor(todoModel, inputView, listView) {
	this.todoModel = todoModel;
	this.inputView = inputView;
	this.listView = listView;
	this.initService();
	}
	initService() {
	this.inputView.addTodoHandler = this.addTodoHandler.bind(this);
	}

	addTodoHandler(todoString) {
	if(!todoString) return;
	this.todoModel.addTodo.call(this.todoModel, todoString, this.afterAddTodo.bind(this));
	}

	afterAddTodo(todoArray) {
	this.renderInputView(todoArray);
	this.renderListView(todoArray);
	}

	renderInputView(todoArray) {
	this.inputView.render();
	}

	renderListView(todoArray) {
	this.listView.render(todoArray);
	}
	}

	//view들은 model이 어떤 것인지 전혀 모른다.
	class InputView {
	constructor() {
	this.regButton = document.querySelector("button");
	this.inputElement = document.querySelector("input[name=todo]")
	this.addTodoHandler = null;
	this.initEvents();
	}

	initEvents() {
	this.regButton.addEventListener("click", (e) => {
	const todoText = this.getTodoValue();
	this.addTodoHandler(todoText);
	});

	this.inputElement.addEventListener("keydown", (e) => {
	if(e.keyCode !== 13) return;
	const todoText = this.getTodoValue();
	this.addTodoHandler(todoText);
	});
	}

	getTodoValue() {
	return document.querySelector("input[name=todo]").value;
	}

	render(inputData = "") {
	this.inputElement.value = inputData;
	}
	}

	class ListView {
	constructor(listElement) {
	this.listElement = document.querySelector(".todolist");
	this._ = {
	displayClassName : "visible"
	}
	this.todoList = null;
	}

	render(todoList) {
	let listHTML = todoList.reduce((html, todo) => {
	return `${html} <li> ${todo} </li> `;
	}, "")

	this.todoList = todoList;
	this.listElement.innerHTML = listHTML;
	}
	}

	class ListFoldButtonView {
	constructor() {

	}

	initEvents() {

	}

	render() {

	}

	}

	const todoModel = new TodoModel();
	const inputView = new InputView();
	const listView = new ListView();
	const todoController = new TodoController(todoModel, inputView, listView);