Skip to main content
edited tags; edited tags
Link
200_success
  • 144.2k
  • 22
  • 188
  • 473
Tweeted twitter.com/#!/StackCodeReview/status/581263476758319104
deleted 27 characters in body; edited title
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Simple Javascript todo list code

canCan someone tell me how good/bad this code is for a super simple todo list made from vanilla javascriptJavaScript? Anything to work on or consider on my next projects? Thanks so much in advance!

// establish variables
var addButton = document.getElementById('btnAdd');

// event listeners
addButton.addEventListener("click", addItem);

// assign event listener to all delete links
function assignDeleteLinkEvent(){
    var deleteLinks = document.getElementsByClassName('delete-link');

    for (var i=0;i<deleteLinks.length;i++){
        deleteLinks[i].addEventListener("click", removeItem);
    }
}

function addItem(){
    // establish variables
    var textBox = document.getElementById('textBox');
    var list = document.getElementById('todoList');
    var listElement = document.createElement('li');
    var deleteLink = document.createElement('a');
    // append item to list
    list.appendChild(listElement);
    listElement.innerText = textBox.value;
    // append delete link to item
    deleteLink.setAttribute("href", "#");
    deleteLink.setAttribute("class", "delete-link");
    deleteLink.innerHTML = "x";
    listElement.appendChild(deleteLink);
    assignDeleteLinkEvent();
    // reset input box
    textBox.value = "";
}

// removes the item
function removeItem(){
    var parent = this.parentNode.parentNode;
    var child = this.parentNode

    parent.removeChild(child);
}

Simple Javascript todo list code

can someone tell me how good/bad this code is for a super simple todo list made from vanilla javascript? Anything to work on or consider on my next projects? Thanks so much in advance!

// establish variables
var addButton = document.getElementById('btnAdd');

// event listeners
addButton.addEventListener("click", addItem);

// assign event listener to all delete links
function assignDeleteLinkEvent(){
    var deleteLinks = document.getElementsByClassName('delete-link');

    for (var i=0;i<deleteLinks.length;i++){
        deleteLinks[i].addEventListener("click", removeItem);
    }
}

function addItem(){
    // establish variables
    var textBox = document.getElementById('textBox');
    var list = document.getElementById('todoList');
    var listElement = document.createElement('li');
    var deleteLink = document.createElement('a');
    // append item to list
    list.appendChild(listElement);
    listElement.innerText = textBox.value;
    // append delete link to item
    deleteLink.setAttribute("href", "#");
    deleteLink.setAttribute("class", "delete-link");
    deleteLink.innerHTML = "x";
    listElement.appendChild(deleteLink);
    assignDeleteLinkEvent();
    // reset input box
    textBox.value = "";
}

// removes the item
function removeItem(){
    var parent = this.parentNode.parentNode;
    var child = this.parentNode

    parent.removeChild(child);
}

Simple todo list

Can someone tell me how good/bad this code is for a super simple todo list made from vanilla JavaScript? Anything to work on or consider on my next projects?

// establish variables
var addButton = document.getElementById('btnAdd');

// event listeners
addButton.addEventListener("click", addItem);

// assign event listener to all delete links
function assignDeleteLinkEvent(){
    var deleteLinks = document.getElementsByClassName('delete-link');

    for (var i=0;i<deleteLinks.length;i++){
        deleteLinks[i].addEventListener("click", removeItem);
    }
}

function addItem(){
    // establish variables
    var textBox = document.getElementById('textBox');
    var list = document.getElementById('todoList');
    var listElement = document.createElement('li');
    var deleteLink = document.createElement('a');
    // append item to list
    list.appendChild(listElement);
    listElement.innerText = textBox.value;
    // append delete link to item
    deleteLink.setAttribute("href", "#");
    deleteLink.setAttribute("class", "delete-link");
    deleteLink.innerHTML = "x";
    listElement.appendChild(deleteLink);
    assignDeleteLinkEvent();
    // reset input box
    textBox.value = "";
}

// removes the item
function removeItem(){
    var parent = this.parentNode.parentNode;
    var child = this.parentNode

    parent.removeChild(child);
}
Source Link
Yeysides
  • 163
  • 1
  • 5

Simple Javascript todo list code

can someone tell me how good/bad this code is for a super simple todo list made from vanilla javascript? Anything to work on or consider on my next projects? Thanks so much in advance!

// establish variables
var addButton = document.getElementById('btnAdd');

// event listeners
addButton.addEventListener("click", addItem);

// assign event listener to all delete links
function assignDeleteLinkEvent(){
    var deleteLinks = document.getElementsByClassName('delete-link');

    for (var i=0;i<deleteLinks.length;i++){
        deleteLinks[i].addEventListener("click", removeItem);
    }
}

function addItem(){
    // establish variables
    var textBox = document.getElementById('textBox');
    var list = document.getElementById('todoList');
    var listElement = document.createElement('li');
    var deleteLink = document.createElement('a');
    // append item to list
    list.appendChild(listElement);
    listElement.innerText = textBox.value;
    // append delete link to item
    deleteLink.setAttribute("href", "#");
    deleteLink.setAttribute("class", "delete-link");
    deleteLink.innerHTML = "x";
    listElement.appendChild(deleteLink);
    assignDeleteLinkEvent();
    // reset input box
    textBox.value = "";
}

// removes the item
function removeItem(){
    var parent = this.parentNode.parentNode;
    var child = this.parentNode

    parent.removeChild(child);
}