Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
​
Copyright (c) 2017 by amitbmark (http://jsbin.com/waqijis/9/edit)
​
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style type="text/css">
  .finished {
    color: gray !important;
    text-decoration: line-through;
  }
</style>
</head>
<body onload="initTodoList()">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
​
<input id="task" type="text" placeholder="Description text"/>
​
<select id="priority">
 <option value="Normal" id="Normal">Normal</option> 
 <option value="Urgent" id="Urgent" >Urgent</option>
 <option value="Critical" id="Critical">Critical</option>
 <option value="If You Can" id="IfYouCan">If You Can</option>
</select>
​
<button onclick="amitFunction()">Add</button>
​
<hr/>
<table style="min-height:40px;">
  <tr >
    ToDo List:
    <th id="result"></th>
    <div id="error" style="color:red">
    <th id="priorit"></th>
  </tr>
</table>
  
  </body>
</html>
​
 
​
 
var todo_list = [];
​
// Init to do list
function initTodoList() {
    todo_list.push(
    {
      priority : 'Critical',
      task : 'Attend Selection Day',
      finished: false
    } );
    todo_list.push(
    {
      priority : 'Normal',
      task : 'Register to Full Stack Web Course',
      finished: false
    } );
    todo_list.push(
    {
      priority : 'If You Can',
      task : 'Go see X-Men apocalypse movie',
      finished: false
    } );
​
    var pro_array = ['Urgent','Critical','Normal','If You Can'];
​
    var priorities = 
        {
          'Critical' : 1,
          'Urgent' : 0, 
          'Normal' : 2,
          'If You Can' : 3
        }
    var listResult = [],
        listPri = [];
    for(var i =0; i < todo_list.length; i++)
    {
            var lia = document.createElement("p");
            var lib = document.createElement("p");
  
            /* Set attributes for new to do list element */
​
            lia.setAttribute("class", 'item-' + i);
            lib.setAttribute("class", 'item-' + i);
​
            lia.dataset.currentNumber = i;
            lib.dataset.currentNumber = i;
​
            todo_list[i].currentIndex = i;
              /*  Change text color base on priority  */
            if(todo_list[i].priority == pro_array[0])
            {
                 lia.style.color = 'red';
                 lib.style.color = 'red';
            }
            if(todo_list[i].priority == pro_array[1])
            {
                lia.style.color = 'orange';
                lib.style.color = 'orange';
            }
            if(todo_list[i].priority == pro_array[2])
            {
                lia.style.color = 'green';
                lib.style.color = 'green';             
            }
            if(todo_list[i].priority == pro_array[3])
            {
                lia.style.color = 'blue';
                lib.style.color = 'blue';          
            }
​
            /* Set text for new to do list element */
            var item_list = document.createTextNode(todo_list[i].task);
            var item_pro = document.createTextNode(todo_list[i].priority);
 
            lia.appendChild(item_list);
            lib.appendChild(item_pro);
            listResult.push( lia.outerHTML );
            listPri.push( lib.outerHTML );
  
    }
​
    document.getElementById("result").innerHTML = listResult.join(' ');
    document.getElementById("priorit").innerHTML = listPri.join(' ');
    document.getElementById('task').value='';
​
}
​
function amitFunction() {
    
  
/* Define vars and values  */
  
        var item = document.getElementById('task').value;
​
  /*  Check if text is less than 6 chars or more than 42 chars  */
        if(item.length<6){
             alert('Your text must have at least 6 chars');
             return;
        }else if(item.length>42){
             alert('Your text must have less than 42 chars');
            return;
        }
  
 
​
​
        var pro = document.getElementById('priority').value;
​
        var pro_array = ['Urgent','Critical','Normal','If You Can'];
  
        var priorities = 
            {
              'Critical' : 1,
              'Urgent' : 0, 
              'Normal' : 2,
              'If You Can' : 3
            }
​
        todo_list.push(
          {
            priority : pro,
            task : item,
            finished: false
          }
        );
  
        // sort by priority
        todo_list.sort(function (task1, task2) {
          return priorities[task1.priority] - priorities[task2.priority];
        });
        
        // sort by letter in same priority
        for(var i =0; i < todo_list.length - 1; i++)
        {
          for ( var j = i + 1; j < todo_list.length; j++ )
          {
            if ( priorities[todo_list[i].priority] == priorities[todo_list[j].priority] ) 
            {
              if ( 1 == todo_list[i].task.localeCompare( todo_list[j].task ) ) 
              {
                  var tmpValue = todo_list[i].task;
                  todo_list[i].task = todo_list[j].task;
                  todo_list[j].task = tmpValue;
                  var tmpFinished = todo_list[i].finished;
                  todo_list[i].finished = todo_list[j].finished;
                  todo_list[j].finished = tmpFinished;
              }
            }
          }
        }
​
        var listResult = [];
        var listPri = [];
        
        for(var i =0; i < todo_list.length; i++)
          {
            var lia = document.createElement("p");
            var lib = document.createElement("p");
  
            /* Set attributes for new to do list element */
​
            lia.setAttribute("class", 'item-' + i);
            lib.setAttribute("class", 'item-' + i);
​
            if ( todo_list[i].finished ) 
            {
              lia.setAttribute("class", lia.getAttribute( 'class' ) + ' finished' );
              lib.setAttribute("class", lib.getAttribute( 'class' ) + ' finished' );
            }
​
            lia.dataset.currentNumber = i;
            lib.dataset.currentNumber = i;
​
            todo_list[i].currentIndex = i;
              /*  Change text color base on priority  */
            if(todo_list[i].priority == pro_array[0])
            {
                 lia.style.color = 'red';
                 lib.style.color = 'red';
            }
            if(todo_list[i].priority == pro_array[1])
            {
                lia.style.color = 'orange';
                lib.style.color = 'orange';
            }
            if(todo_list[i].priority == pro_array[2])
            {
                lia.style.color = 'green';
                lib.style.color = 'green';             
            }
            if(todo_list[i].priority == pro_array[3])
            {
                lia.style.color = 'blue';
                lib.style.color = 'blue';          
            }
​
            /* Set text for new to do list element */
            var item_list = document.createTextNode(todo_list[i].task);
            var item_pro = document.createTextNode(todo_list[i].priority);
 
            lia.appendChild(item_list);
            lib.appendChild(item_pro);     
            listResult.push( lia.outerHTML );
            listPri.push( lib.outerHTML );
  
         }
​
        document.getElementById("result").innerHTML = listResult.join(' ');
        document.getElementById("priorit").innerHTML = listPri.join(' ');
        document.getElementById('task').value='';
​
  }
​
document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'p') {
    var currentItem = event.target.dataset.currentNumber;
    var todoListElements = document.getElementsByClassName( 'item-' + currentItem );
      
    if ( todoListElements[0].className.indexOf( ' finished' ) == -1  && todoListElements[1].className.indexOf( ' finished' ) == -1 ) 
    {
      todoListElements[0].setAttribute( 'class', todoListElements[0].getAttribute( 'class' ) + ' finished' );
      todoListElements[1].setAttribute( 'class', todoListElements[1].getAttribute( 'class' ) + ' finished' );
      todo_list[currentItem].finished = true;
    }
​
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
amitbmarkpro
0viewers