GitHub

GitHub

I have been learning HTML/JavaScript and CSS. I have gone through some of the online tutorials, PDFs and books as well. Though, now I am familiar with syntactical stuff, I wasn't sure how I should design or structure code, so I started with a small ToDo application. I didn't want to use any frameworks. As I am still learning, I thought I should spend sometime learning the basics before using any frameworks. My code is available at:

https://github.com/chandravellanki/GitHubRepo/tree/master/ToDo/Vanilla

And here is the actual javascript code: { (function (){

//Create a modal, which contains an array to hold list of todos var modal = {   init: function () {  this.todolist = []; this.todolist = JSON.parse(localStorage.getItem("tododata")); if (this.todolist === null) this.todolist = []; }, getTodoList: function () { return this.todolist; }, setTodoState: function (intodoid) { //Set status this.todolist[intodoid].status === "closed" ? this.todolist[intodoid].status = "open" : this.todolist[intodoid].status = "closed"; localStorage.setItem("tododata", JSON.stringify(this.todolist)); }, setNewTodo: function (inval) { this.todolist.push({ id: this.todolist.length, name: inval, status: "open" }); localStorage.setItem("tododata", JSON.stringify(this.todolist)); this.myFirebaseRef.push({id: this.todolist.length, name: inval, status: "open"}); }, clearall: function () { this.todolist = []; } }  //Create a View, which interacts with Controller and alters the display in HTML var view = { init: function () { this.todolst = $('#todolistelm'); this.todolst.html(' '); view.render(); $('#clearall').click(function () { localStorage.clear(); controller.clearall(); view.render(); }); }, render: function () { var htmlStr = ''; var clr = true; var todoelem = $('#todolistelm'); todoelem.html(''); if (controller.getTodoList().length === 0) { $("#cleanmsg").css("visibility", "visible"); $("#displaysection").css("visibility", "hidden") } else { $("#cleanmsg").css("visibility", "hidden"); $("#displaysection").css("visibility", "visible") } controller.getTodoList().forEach(function (todo) { //DOM elements var elemId = ' '; var lielem = $('<li></li>'); var spanelem = $('<span></span>'); var taskid = "#task" + todo.id; //Create <li> element and add required classes lielem.addClass("list-group-item"); //Set status of the todo item todo.status === "closed" ? lielem.addClass("completed") : lielem.addClass(""); //Set alternate color clr === true ? lielem.addClass("colored") : lielem.addClass(""); clr = !clr; //Create <span> and add required classes and IDs spanelem.addClass("glyphicon"); spanelem.addClass("glyphicon-ok pull-right"); spanelem.addClass("todocomplete"); spanelem.attr('id', "task" + todo.id); //Append span and name to <li> lielem.append(spanelem); lielem.append(todo.name); //Append <li> to main list $(todoelem).append(lielem); //Add event handlers $(taskid).click(function (todoid) { return function () { controller.setTodoState(todoid); view.render(); }; }(todo.id)); }); //Set focus on input textbox by default $('#intodo').focus(); } }; //Create a controller, which acts as a mediator between View and Modal var controller = { init: function () { //Initialize view and modal modal.init(); view.init(); }, getTodoList: function () { return modal.getTodoList(); }, setTodoState: function (intodoid) { modal.setTodoState(intodoid); }, setNewTodo: function (inval) { modal.setNewTodo(inval); }, clearall: function () { modal.clearall(); } }; //Set ENTER key on the input text box $('#intodo').keypress(function (e) { if (((e.which && e.which == 13) || (e.keyCode && e.KeyCode == 13)) && $("#intodo").val().trim().length > 0) { controller.setNewTodo($("#intodo").val()); view.render(); $("#intodo").val(''); } }); //Set the controller to start the work controller.init(); 

})(); }

Can someone go through this code and let me know if this follows the best practices or not, also any areas that I should probably be focusing on?

I have been learning HTML/JavaScript and CSS. I have gone through some of the online tutorials, PDFs and books as well. Though, now I am familiar with syntactical stuff, I wasn't sure how I should design or structure code, so I started with a small ToDo application. I didn't want to use any frameworks. As I am still learning, I thought I should spend sometime learning the basics before using any frameworks.

GitHub

{ (function (){ //Create a modal, which contains an array to hold list of todos var modal = { init: function () { this.todolist = [];   this.todolist = JSON.parse(localStorage.getItem("tododata")); if (this.todolist === null) this.todolist = []; },   getTodoList: function () {   return this.todolist;   },   setTodoState: function (intodoid) {   //Set status   this.todolist[intodoid].status === "closed" ?   this.todolist[intodoid].status = "open" : this.todolist[intodoid].status = "closed";   localStorage.setItem("tododata", JSON.stringify(this.todolist));   },   setNewTodo: function (inval) {   this.todolist.push({   id: this.todolist.length,   name: inval,   status: "open"   });   localStorage.setItem("tododata", JSON.stringify(this.todolist));   this.myFirebaseRef.push({id: this.todolist.length, name: inval, status: "open"});   },   clearall: function () {   this.todolist = []; } }  //Create a View, which interacts with Controller and alters the display in HTML  var view = {   init: function () {   this.todolst = $('#todolistelm');   this.todolst.html(' '); view.render();   $('#clearall').click(function () { localStorage.clear(); controller.clearall(); view.render(); });   },   render: function () {   var htmlStr = '';   var clr = true;   var todoelem = $('#todolistelm');   todoelem.html('');   if (controller.getTodoList().length === 0) {   $("#cleanmsg").css("visibility", "visible");   $("#displaysection").css("visibility", "hidden")   } else {   $("#cleanmsg").css("visibility", "hidden");   $("#displaysection").css("visibility", "visible")   }   controller.getTodoList().forEach(function (todo) {   //DOM elements   var elemId = ' ';   var lielem = $('<li></li>');   var spanelem = $('<span></span>');   var taskid = "#task" + todo.id;   //Create <li> element and add required classes   lielem.addClass("list-group-item");   //Set status of the todo item   todo.status === "closed" ? lielem.addClass("completed") : lielem.addClass("");   //Set alternate color   clr === true ? lielem.addClass("colored") : lielem.addClass("");   clr = !clr;   //Create <span> and add required classes and IDs   spanelem.addClass("glyphicon");   spanelem.addClass("glyphicon-ok pull-right");   spanelem.addClass("todocomplete");   spanelem.attr('id', "task" + todo.id);   //Append span and name to <li>   lielem.append(spanelem);   lielem.append(todo.name);   //Append <li> to main list   $(todoelem).append(lielem);   //Add event handlers   $(taskid).click(function (todoid) {   return function () {   controller.setTodoState(todoid);   view.render();   };   }(todo.id));   });   //Set focus on input textbox by default   $('#intodo').focus();   }  };  //Create a controller, which acts as a mediator between View and Modal  var controller = {   init: function () {   //Initialize view and modal   modal.init();   view.init();   },   getTodoList: function () {   return modal.getTodoList();   },   setTodoState: function (intodoid) {   modal.setTodoState(intodoid);   },   setNewTodo: function (inval) {   modal.setNewTodo(inval);   },   clearall: function () {   modal.clearall();   }  };  //Set ENTER key on the input text box  $('#intodo').keypress(function (e) {   if (((e.which && e.which == 13) ||   (e.keyCode && e.KeyCode == 13)) &&   $("#intodo").val().trim().length > 0) {   controller.setNewTodo($("#intodo").val());   view.render();   $("#intodo").val('');   }  });  //Set the controller to start the work  controller.init(); })(); } 

Can someone go through this code and let me know if this follows the best practices or not, as well as any areas that I should probably be focusing on?

Can someone go through this code and let me know if this follows the best practices or not, also any areas that I should probably be focusing on?

And here is the actual javascript code: { (function (){

//Create a modal, which contains an array to hold list of todos var modal = { init: function () { this.todolist = []; this.todolist = JSON.parse(localStorage.getItem("tododata")); if (this.todolist === null) this.todolist = []; }, getTodoList: function () { return this.todolist; }, setTodoState: function (intodoid) { //Set status this.todolist[intodoid].status === "closed" ? this.todolist[intodoid].status = "open" : this.todolist[intodoid].status = "closed"; localStorage.setItem("tododata", JSON.stringify(this.todolist)); }, setNewTodo: function (inval) { this.todolist.push({ id: this.todolist.length, name: inval, status: "open" }); localStorage.setItem("tododata", JSON.stringify(this.todolist)); this.myFirebaseRef.push({id: this.todolist.length, name: inval, status: "open"}); }, clearall: function () { this.todolist = []; } } //Create a View, which interacts with Controller and alters the display in HTML var view = { init: function () { this.todolst = $('#todolistelm'); this.todolst.html(' '); view.render(); $('#clearall').click(function () { localStorage.clear(); controller.clearall(); view.render(); }); }, render: function () { var htmlStr = ''; var clr = true; var todoelem = $('#todolistelm'); todoelem.html(''); if (controller.getTodoList().length === 0) { $("#cleanmsg").css("visibility", "visible"); $("#displaysection").css("visibility", "hidden") } else { $("#cleanmsg").css("visibility", "hidden"); $("#displaysection").css("visibility", "visible") } controller.getTodoList().forEach(function (todo) { //DOM elements var elemId = ' '; var lielem = $('<li></li>'); var spanelem = $('<span></span>'); var taskid = "#task" + todo.id; //Create <li> element and add required classes lielem.addClass("list-group-item"); //Set status of the todo item todo.status === "closed" ? lielem.addClass("completed") : lielem.addClass(""); //Set alternate color clr === true ? lielem.addClass("colored") : lielem.addClass(""); clr = !clr; //Create <span> and add required classes and IDs spanelem.addClass("glyphicon"); spanelem.addClass("glyphicon-ok pull-right"); spanelem.addClass("todocomplete"); spanelem.attr('id', "task" + todo.id); //Append span and name to <li> lielem.append(spanelem); lielem.append(todo.name); //Append <li> to main list $(todoelem).append(lielem); //Add event handlers $(taskid).click(function (todoid) { return function () { controller.setTodoState(todoid); view.render(); }; }(todo.id)); }); //Set focus on input textbox by default $('#intodo').focus(); } }; //Create a controller, which acts as a mediator between View and Modal var controller = { init: function () { //Initialize view and modal modal.init(); view.init(); }, getTodoList: function () { return modal.getTodoList(); }, setTodoState: function (intodoid) { modal.setTodoState(intodoid); }, setNewTodo: function (inval) { modal.setNewTodo(inval); }, clearall: function () { modal.clearall(); } }; //Set ENTER key on the input text box $('#intodo').keypress(function (e) { if (((e.which && e.which == 13) || (e.keyCode && e.KeyCode == 13)) && $("#intodo").val().trim().length > 0) { controller.setNewTodo($("#intodo").val()); view.render(); $("#intodo").val(''); } }); //Set the controller to start the work controller.init(); 

})(); }

Can someone go through this code and let me know if this follows the best practices or not, also any areas that I should probably be focusing on?