Last active
January 11, 2019 18:01
-
-
Save marsicdev/df7dadb21acec98ef722efd4395ea924 to your computer and use it in GitHub Desktop.
ToDo MRP demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| } | |
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Task(name, isCompleted) { | |
| this.name = name | |
| this.isCompleted = isCompleted | |
| } | |
| Task.prototype.isDone = function () { | |
| return this.isCompleted | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| } | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment