I am Creating a tasklist project.In the code given below fntaskController function takes in date,time,inputvalues and the fntaskUI function render them with the given data.but i Cannot call the listitem function of fntaskUI within fntaskController when a click event is triggered.
let fntaskController = (function (taskEvent)
//Get task added date
let _taskAddedDate = new Date();
let _taskAddedDay = _taskAddedDate.getUTCDay() + 1;
let _taskAddedMonth = _taskAddedDate.getUTCMonth() + 1;
let _taskAddedYear = _taskAddedDate.getUTCFullYear();
//Get task added time
let _taskHour = _taskAddedDate.getUTCHours();
let _taskMinute = _taskAddedDate.getUTCMinutes();
let _taskSecond = _taskAddedDate.getUTCSeconds();
//setupeventlistner
let eventListnerInit = function () {
//Add Btn click
document.querySelector(taskEvent.dom.addEvent).addEventListener('click', getitems);
document.querySelector(taskEvent.dom.deleteEvent).addEventListener('click', deleteItems);
}
let getitems = function (e) {
var _task_items = taskEvent.getValue();
listitems();
return {
taskData: _task_items,
taskHour: _taskHour,
taskMinute: _taskMinute,
taskSecond: _taskSecond
}
}
let deleteItems = function () {
//delete list items
}
return {
taskGetItems: getitems(),
init: function () {
//Event Listner Initilization
eventListnerInit();
}
}
})(fninputevnt);
Here fntaskUI function should render a new element with data from the fntaskController function defined above.But cannot make the function to execute within the fntaskController.
let fntaskUI = (function (UI, inputdata) {
// Task UI Controller
let listItem = function () {
let taskContainer = document.createElement('a');
taskContainer.className = 'list-group-item';
taskContainer.href = '#';
taskContainer.innerHTML = `<div class="row">
<div class="col-sm-4 col-xs-12">
<i class="fas fa-2x fa-user pull-left"></i>
<h4 class="list-group-item-heading">${UI.taskGetItems.taskData}</h4>
<p class="list-group-item-text">Tokyo, Japan</p>
</div>
<div class="col-sm-4 col-xs-12">
<i class="fas fa-2x fa-calendar-alt pull-left"></i>
<p class="list-group-item-text">${UI.taskGetItems.taskHour}:${UI.taskGetItems.taskMinute}:${UI.taskGetItems.taskSecond}</p>
</div>
<div class="col-sm-4 col-xs-12">
<button class="btn btn-primary pull-right btn-delete">
<i class="fas fa-times no-margin icon-color"></i>
</button>
</div>
</div>`
document.querySelector(inputdata.dom.appendList).appendChild(taskContainer);
}
return {
listItem: function () {
listItem();
}
}
})(fntaskController, fninputevnt);
Aucun commentaire:
Enregistrer un commentaire