marsicdev/app.js

## app.js
var controller = (function (data, ui) {

    function init() {
        loadSavedData()
        setupEventListeners()
    }

    function loadSavedData() {
        // check LC for data (ctrl, data)
        // read Data (data)
        const tasks = data.loadTasks()

        // display Data (ui)
        ui.displayTasks(tasks)
    }

    // register button click event listener
    function setupEventListeners() {
        document.querySelector('.add-task-btn').addEventListener('click', onAddTaskClickHandler)
        document.querySelector('.add-task-btn').addEventListener('onkeydown', onAddTaskClickHandler)
    }

    function onAddTaskClickHandler(event) {
        event.preventDefault()

        // collect form input (ui)
        var taskName = ui.getFormInput();

        // validate data (controller)
        if (!taskName) {
            // displayError
            return
        }

        // create new Task entity (ctrl)
        var task = new Task(taskName, false)

        // save Task in task list (data)
        data.addTask(task)

        // save list in LC (data)
        data.saveTasks()

        window.location.reload()
    }

    return {
        init: init
    }

})(dataModule, uiModule)

## data.js
var dataModule = (function () {

    var state = {
        tasks: []
    }

    function addTask(task) {
        state.tasks.push(task)
    }

    function saveTasks() {

        const savedTasks = loadTasks()

        if (saveTasks) {
            state.tasks = [
                ...savedTasks,
                ...state.tasks
            ]
        }

        localStorage.setItem("my-task", JSON.stringify(state))
    }

    function getDone() {
        return loadTasks().filter((task) => {
            return task.isCompleted
        })
    }

    function loadTasks() {
        var dataString = localStorage.getItem("my-task")
        var data = JSON.parse(dataString)

        var tasks = data ? data.tasks : []

        // return tasks
        return tasks.map((task) => {
            return new Task(task.name, task.isCompleted)
        })

    }

    return {
        addTask: addTask,
        loadTasks: loadTasks,
        saveTasks
    }

})()

## entities.js
function Task(name, isCompleted) {
    this.name = name
    this.isCompleted = isCompleted
}

Task.prototype.isDone = function () {
    return this.isCompleted
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div class="root">
        <input type="text" name="bla" class="task-input">
        <input type="button" value="Add task" class="add-task-btn">
        <div class="task-list">
            <ul class="tasks"></ul>
        </div>
    </div>

    <script src="./entities.js"></script>
    <script src="./data.js"></script>
    <script src="./ui.js"></script>
    <script src="./app.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            console.log("DOM fully loaded and parsed");
            controller.init()
        });
    </script>
</body>

</html>

## ui.js
var uiModule = (function () {

    function displayTasks(tasks) {
        console.log(tasks);

        var $tasksUl = document.querySelector('.tasks')

        tasks.forEach(task => {
            $tasksUl.innerHTML += "<li>" + task.name + "</li>"
        });

    }

    function getFormInput() {
        return document.querySelector('.task-input').value
    }

    return {
        displayTasks: displayTasks,
        getFormInput
    }

})()
	var controller = (function (data, ui) {

	function init() {
	loadSavedData()
	setupEventListeners()
	}

	function loadSavedData() {
	// check LC for data (ctrl, data)
	// read Data (data)
	const tasks = data.loadTasks()

	// display Data (ui)
	ui.displayTasks(tasks)
	}

	// register button click event listener
	function setupEventListeners() {
	document.querySelector('.add-task-btn').addEventListener('click', onAddTaskClickHandler)
	document.querySelector('.add-task-btn').addEventListener('onkeydown', onAddTaskClickHandler)
	}

	function onAddTaskClickHandler(event) {
	event.preventDefault()

	// collect form input (ui)
	var taskName = ui.getFormInput();

	// validate data (controller)
	if (!taskName) {
	// displayError
	return
	}

	// create new Task entity (ctrl)
	var task = new Task(taskName, false)

	// save Task in task list (data)
	data.addTask(task)

	// save list in LC (data)
	data.saveTasks()

	window.location.reload()
	}

	return {
	init: init
	}

	})(dataModule, uiModule)
	var dataModule = (function () {

	var state = {
	tasks: []
	}

	function addTask(task) {
	state.tasks.push(task)
	}

	function saveTasks() {

	const savedTasks = loadTasks()

	if (saveTasks) {
	state.tasks = [
	...savedTasks,
	...state.tasks
	]
	}

	localStorage.setItem("my-task", JSON.stringify(state))
	}

	function getDone() {
	return loadTasks().filter((task) => {
	return task.isCompleted
	})
	}

	function loadTasks() {
	var dataString = localStorage.getItem("my-task")
	var data = JSON.parse(dataString)

	var tasks = data ? data.tasks : []

	// return tasks
	return tasks.map((task) => {
	return new Task(task.name, task.isCompleted)
	})

	}

	return {
	addTask: addTask,
	loadTasks: loadTasks,
	saveTasks
	}

	})()
	function Task(name, isCompleted) {
	this.name = name
	this.isCompleted = isCompleted
	}

	Task.prototype.isDone = function () {
	return this.isCompleted
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>

	<div class="root">
	<input type="text" name="bla" class="task-input">
	<input type="button" value="Add task" class="add-task-btn">
	<div class="task-list">
	<ul class="tasks"></ul>
	</div>
	</div>

	<script src="./entities.js"></script>
	<script src="./data.js"></script>
	<script src="./ui.js"></script>
	<script src="./app.js"></script>
	<script>
	document.addEventListener("DOMContentLoaded", function (event) {
	console.log("DOM fully loaded and parsed");
	controller.init()
	});
	</script>
	</body>

	</html>
	var uiModule = (function () {

	function displayTasks(tasks) {
	console.log(tasks);

	var $tasksUl = document.querySelector('.tasks')

	tasks.forEach(task => {
	$tasksUl.innerHTML += "<li>" + task.name + "</li>"
	});

	}

	function getFormInput() {
	return document.querySelector('.task-input').value
	}

	return {
	displayTasks: displayTasks,
	getFormInput
	}

	})()