Todo list

by XTREME104

HTML

<div id="todolist" onload="init"><div id="seperator"></div><div id="header">My First List</div><div id="addnew" onclick="newTask();">Add a new task +</div></div>

<script>
    var todolist = document.getElementById('todolist');
    var manualScroll = false;
    var todos = [];

    document.onload = loadHandler;
    document.onclose = closeHandler;
    document.onclick = clickHandler;
    
    function clickHandler (event) {
    var target = event.target || window.event.target;
    if (target.className == "item" || target.className == "item added") { check(target); } else if (target.id == "delete" && (target.parentNode.className == "item" || target.parentNode.className == "item added")) { deleteItem(target.parentNode); }
    }
    
    function check (item) {
    if (!item.checked) {
    var checkMark = document.createElement('div');
    checkMark.id = "checkmark";
    checkMark.style.position = "relative";
    checkMark.style.display = "inline";
    checkMark.style.left = "-24px";
    checkMark.innerHTML = "&#x2713;";
    item.insertBefore(checkMark, item.firstChild);
    item.style.paddingLeft = "37px";
    item.checked = true;
    } else {
    item.removeChild(document.getElementById("checkmark"));
    item.style.paddingLeft = "50px";
    item.checked = false;
    }
    }
    
    function deleteItem (item) {
    item.parentNode.removeChild(item);
    }
    
    function newTask () {
    manualScroll = false;
    this.taskName = prompt('Task Name');
    if (this.taskName) {
    todos.push(taskName);
    this.taskDiv = document.createElement('div');
    this.taskDiv.className = 'item added';
    this.taskDiv.innerHTML = taskName + "<button id='delete' title='Delete'>&#x2717;</button>";
    this.taskDiv.id = taskName;
    todolist.insertBefore(this.taskDiv, todolist.lastChild);
    this.scrollInterval = setInterval('if (manualScroll != true) { if (todolist.scrollTop < todolist.scrollHeight) { todolist.scrollTop++; } }', 0);
    document.onmousewheel = function...

CSS

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button, ::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 5px;
    border: 1px solid white;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .25);
}

div#todolist {
    width: 500px;
    height: 300px;
    background: lightyellow;
    border: 1px solid #E3E0DA;
    box-shadow: 0 10px 15px lightgray;
    overflow: auto;
}

div#todolist > div#seperator {
    position: fixed;
    left: 50px;
    width: 3px;
    height: 300px;
    border-left: 1px solid #E9D6CF;
    border-right: 1px solid #E9D6CF;
}

div#todolist > div#header, div#todolist > div.item, div#todolist > div#addnew {
    color: #71787D;
    font-family: Helvetica-neue, Helvetica, Arial;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #E5E5E4;
    cursor: default;
    padding: 12px 0 6px 50px;
    overflow: hidden;
}

div#todolist > div.item > button#delete {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: #887777;
    opacity: 0.6;
}

div#todolist > div.item > button#delete:hover {
    opacity: 1;
    border: 1px solid #887777;
    border-radius: 3px;
box-shadow: inset 0 0 4px #887777; 
}

div#todolist > div.item.added {
    -webkit-animation: newTask 400ms;
    -moz-animation: newTask 400ms;
    -ms-animation: newTask 400ms;
}

@-webkit-keyframes newTask {
        0%   { height: 0; padding-top: 0; padding-bottom: 0; color: rgba(113,120,125,0); }
        100% { height: 16px; color: rgba(113,120,125,1); }
}
@-moz-keyframes newTask {
        0%   { height: 0; padding-top: 0; padding-bottom: 0; color: rgba(113,120,125,0); }
        100% { height: 16px; color: rgba(113,120,125,1); }
}
@-ms-keyframes newTask {
        0%   { height: 0; padding-top: 0; padding-bottom: 0; color:...