#DailyCSSImages2.0:To-do List

dailycssimages2-0-to-do-list.markdown

#DailyCSSImages2.0:To-do List

UI of simple Todo list app. The GUI is created only with CSS.

A Pen by ZaynahGiti on CodePen.

License.

index.html

<div class="main-container">
  <div class="user-form">
    <form class="todo-form">
      <span class="icon-input"></span>
      <input type="text" class="todo-input" placeholder="What will you do today?">
      <button type="submit" class="todo-add not-focused" value="Add"><span></span></button>
    </form>
  </div>
  <div class="my-list" id="my-list">
    <ul class="todo-list">
      <li class="li-item ui-state-default">
        <span class="dragable"></span>
        <span class="checkbox"></span>
        <span class="text">Task 1</span>
        <span class="remove"></span>
      </li>
      <li class="li-item ui-state-default">
        
        <span class="checkbox"></span>
        <span class="text">Task 2</span>
        <span class="remove"></span>
      </li>
      <li class="li-item ui-state-default">
        
        <span class="checkbox"></span>
        <span class="text">Task 3</span>
        <span class="remove"></span>
      </li>
    </ul>
    <ul class="clone-list" id="clone-list">
    </ul>
    
  </div>
  <footer>
    <div class="magic-func">
      <button id="delete">
        <span class="task1"></span>
        <span class="task2"></span>
        <span class="task3"></span>
      </button>
  </div> 
  </footer>
  <div class="text-credit">
    <h5>@ZeinaChallenges</h5>
  </div>
</div>

script.babel

$(function(){
  
  
  var $list = $('.todo-list');
  var $clonelist = $('#clone-list');
  var $input = $('.todo-input');
  var completeNum=0;
  
  // Adding
  function addTodo(text){
  	//item
    var $li = $('<li class="li-item ui-state-default">');
   
    var $checkbox = $('<span class="checkbox"></span>');
    var $text = $('<span class="text">').text(text);
    var $remove = $('<span class="remove"></span>');
    $li.append($checkbox).append($text).append($remove);
   
    
    //new add 
    $list.append($li);


    $li.ready(initListItem($li,$checkbox,$remove));
  }
  

  //Methods 
  $('.todo-form').bind('submit', function(e){
  
    e.preventDefault();
    

    var text = $input.val();
    if(text){
    
    //add
    addTodo(text);
    
    //delete 
    $input.val('');
    }else{
       $('.container').animate({ left: "-5px" }, 100).animate({ left: "20px" }, 100)
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "0px" }, 100);
    }
  });
  
  $('.todo-list').sortable({
    axis:'y',
    revert: 100,
    scroll: false,
    placeholder:"sortable-placeholder",
    
      start:function(event,ui){
      ui.helper.addClass("exclude-me");
      $(".todo-list .li-item:not(.exclude-me)").css("visibility", "hidden");
      ui.helper.data("clone").hide();
      $(".clone-list .li-item").css("visibility", "visible");
    }

   
      });

  //Buttons
  $('.my-func').hover(function(){
    $(this).addClass('hover');
  },function(){
    $(this).removeClass('hover');
  });
  
  $('h1').click(function(){
    var num = $('.todo-list .li-item').length;
    var numComp = $('.todo-list .complete').length;
    
    if(num==numComp){
      if(num){
        
        $('.li-item').each(function(){
          $(this).removeClass('complete');
        });
        $('footer').removeClass('active').prop("disabled", true);
        completeNum = 0;
      }
    }else{
      if(num){
        $('.li-item').each(function(){

              $(this).addClass('complete');
              completeNum++;
        });
        $('footer').addClass('active').prop("disabled", false);
      }
    }
     
     
  });
  $('h1').on('mousedown',function(){
    $(this).addClass('click');
  });
  $('h1').on('mouseup',function(){
    $(this).removeClass('click');
  });
  
	$('#delete').click(function(){
  	$('.complete').each(function(){
    	$(this).remove();
      
    });
    
    completeNum=0;
    $('footer').removeClass('active').prop("disabled", true);
    $('.my-list').height(272);
    
    $(".todo-list .li-item").each(function() {
        var item = $(this);
        var clone = item.data("clone");
        var position = item.position();

        clone.css("left", position.left);
        clone.css("top", position.top);
     });
    setTimeout(function(){
    $('#my-list').perfectScrollbar('update');},300);
  });
  $('.todo-input').focus(function(){
    $('.icon-input').fadeOut('fast');
    $('.todo-add').removeClass('not-focused');
    
  }).blur(function(){
    $('.icon-input').fadeIn('fast');
    var tmpText = $('.todo-input').val();
    if(!tmpText && !$('.todo-add').hasClass('not-focused')){
    $('.todo-add').addClass('not-focused');
      }
  });
  
  $('.todo-add').hover(function(){
    $(this).addClass('hover');
  },function(){
     $(this).removeClass('hover');                  
  });
  
  $('.todo-add').click(function(){
    $(this).addClass('click');
    if(!$('.todo-input').focus()){
    $(this).addClass('not-focused');//.prop("disabled", true);
    }
    setTimeout(function(){
      $('.todo-add').addClass('clickdone');
       
    },400);
    setTimeout(function(){
      $('.todo-add').removeClass('click');
      $('.todo-add').removeClass('clickdone');
      
    },800);
  });
  
  //Functioncs
  function initListItem(li, checkbox, remove){
      var item = li;
      var itemClone= item.clone();
      item.data('clone',itemClone);
      var position = item.position();
     
      itemClone.css({
        left:position.left,
        top:position.top,
        visibility:'hidden'
      }).addClass('clone');
      $('#clone-list').append(itemClone);
      //Complete
      checkbox.click(function(){
        if(li.hasClass('complete')){
          li.removeClass('complete');
          itemClone.removeClass('complete');
          completeNum--;
          if(!completeNum){
            $('footer').removeClass('active').prop("disabled", true);
            $('.my-list').height(272);
          }
        }else{
          li.addClass('complete');
          itemClone.addClass('complete');
          completeNum++;
          if(completeNum){
            $('footer').addClass('active').prop("disabled", false);
            $('.my-list').height(224);
          }
        }
      });
    
      //remove
      remove.click(function(){
        if(li.hasClass('complete')){
          completeNum--;
          if(!completeNum){
            $('footer').removeClass('active').prop("disabled", true);
            $('.my-list').height(272);
          }
        }
        li.remove();
        itemClone.remove();
        
        
        
        $(".todo-list .li-item").each(function() {
        var item = $(this);
        var clone = item.data("clone");
        var position = item.position();

        clone.css("left", position.left);
        clone.css("top", position.top);
        });
        $('#my-list').perfectScrollbar('update');
      });
      
      $('#my-list').perfectScrollbar('update');
      $(".todo-list").sortable('refresh');
  }
  
  //init
  $('#my-list').perfectScrollbar();  
  $('.li-item').each(function(){
      var checkbox = $(this).children('.checkbox');
      var remove =$(this).children('.remove');
      initListItem($(this), checkbox, remove);
    });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/580064/perfect-scrollbar.jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/580064/jquery.ui.touch-punch.min.js"></script>

style.scss

*{
  box-sizing:border-box;
}
html,body{
  width:100%;
  height:100%;
  background: lighten(#5565fd,15%);
  font-family: 'Khand', sans-serif;
  font-size:22px;
}
.main-container{
  width:320px;
  height:520px;
  margin:5% auto;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: lighten(#F2B50F,20%);
  border-radius:8px;
  overflow:hidden;
}

.header{
  color:#F2B50F;
  
  
  h1{
   
    user-select: none;
    border-radius:8px;
    width: 24px;
    height:36px;
    text-indent:40px;
    white-space:nowrap;
    position:relative;
    margin-left:16px;
    margin-top:6px;
    line-height:36px;
    
    &::before{
      cursor:pointer;
      box-sizing:border-box;
      width:14px;
      height:20px;
      display:block;
      content:"";
      position:absolute;
      border-right:5px solid #000;
      border-bottom:5px solid #000;
      transform:rotate(45deg);
      bottom:0px;
      left:5px;
      z-index:2;
      box-shadow:4px 4px 4px 0 rgba(0,0,0,0.2);
      transition:bottom 0.1s;
    }
    &::after{
      cursor:pointer;
      box-sizing:border-box;
      width:14px;
      height:20px;
      display:block;
      content:"";
      position:absolute;
      border-right:5px solid #fff;
      border-bottom:5px solid #fff;
      transform:rotate(45deg);
      bottom:21px;
      left:5px;
      box-shadow:4px 4px 4px 0 rgba(0,0,0,0.2);
      z-index:100;
      transition:bottom 0.2s;
    }
    span{
      &::before{
        cursor:pointer;
        box-sizing:border-box;
        width:14px;
        height:20px;
        display:block;
        content:"";
        position:absolute;
        border-right:5px solid #dadada;
        border-bottom:5px solid #dadada;
        transform:rotate(45deg);
        bottom:14px;
        left:5px;
        z-index:3;
        box-shadow:4px 4px 4px 0 rgba(0,0,0,0.2);
        transition:bottom 0.2s;
      }
      &::after{
        cursor:pointer;
        box-sizing:border-box;
        width:14px;
        height:20px;
        display:block;
        content:"";
        position:absolute;
        border-right:5px solid #aeaeae;
        border-bottom:5px solid #aeaeae;
        transform:rotate(45deg);
        bottom:7px;
        left:5px;
        z-index:2;
        box-shadow:4px 4px 4px 0 rgba(0,0,0,0.2);
        transition:bottom 0.2s;
      }
    }
    
    &.click{
      &::before{
       
      }
      &::after{
        bottom:18px;
      }
      span{
        &::before{
        bottom:12px;
        }
        &::after{
         bottom:6px;
        }
      }
    }
  }
}

footer{
  width:100%;
  height:48px;
  position:absolute;
  bottom:-48px;
  left:0;
  border-top:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.1);
  border-radius:0 0 8px 8px;
  transition:bottom 0.2s, opacity 0.2s;
  
  &.active{
    bottom:0;
    
    #delete{
      cursor:pointer;
    }
  }
}
.magic-func{
  position:absolute;
  bottom:0;
  right:0px;
  width:48px;
  height:48px;
  overflow:hidden;
      #delete{
     // display:none;

      border:none;
      border-radius:4px 4px 0 0;
      background:none;
      position:absolute;
      width:48px;
      height:48px;
      top:0;
      left:0;
      

      &:focus{
        outline:none;
      }

      .task1{
        display:block;
        width:12px;
        height:8px;
        border-top:2px solid #f8f8f8;
        border-left:2px solid #f8f8f8;
        border-right:2px solid #f8f8f8;
        border-radius:2px 2px 0 0;
        position:absolute;
        top:10px;
        right:0;
        left:0;
        margin:0 auto;
        transition:top 0.2s;

        &::before{
          content:"";
          display:block;
          width:28px;
          height:2px;
          background:#f8f8f8;
          position:absolute;
          top:4px;
          left:-10px;
        }
        &::after{
        
          display:block;
          width:16px;
          height:2px;
          background:#f8f8f8;
          position:absolute;
          top:24px;
          left:-4px;
          border-radius:0 0 4px 4px;
        }

      }
      .task2{
        display:block;
        width:2px;
        height:20px;
        background:#f8f8f8;
        position:absolute;
        top:16px;
        left:15px;
        transform:rotate(-5deg);
        &::after{
          content:"";
          display:block;

          width:2px;
          height:20px;
          background:#f8f8f8;
          position:absolute;
          top:2px;
          right:-16px;
          transform:rotate(10deg);
        }

      }
      .task3{
        display:block;
        width:16px;
        height:2px;
        background:#f8f8f8;
        position:absolute;
        top:36px;
        left:16px;
        border-radius:0 0 4px 4px;
       
      }

    }

  &.active{
    #delete{
      top:0px;
      opacity:1;
      cursor:pointer;
    }
  }
  
  &.hover{
    #delete{
      .task1{
        display:block;
        width:12px;
        height:8px;
        border-top:2px solid #f8f8f8;
        border-left:2px solid #f8f8f8;
        border-right:2px solid #f8f8f8;
        border-radius:2px 2px 0 0;
        position:absolute;
        top:6px;
        right:0;
        left:0;
        margin:0 auto;
      }
    }
  }
}




//form
.user-form{
  width:100%;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  z-index:100;
  .todo-form{
    background:#fff;
     border-radius:8px 8px 0 0;
    height:48px;
  }
  .icon-input{
    display:block;
      position:absolute;
      width:8px;
      height:18px;
      background:#F90101;
      transform:rotate(45deg);
      top:0;
      bottom:0;
      margin:auto;
      left:25px;
    &::before{
      content:"";
      display:block;
      position:absolute;
      width:1px;
      height:14px;
      background:#fff;
      top:2px;
      left:2px;
      z-index:3;
    }
    &::after{
      content:"";
      display:block;
      position:absolute;
      width:0px;
      height:4px;
      border-left:4px solid transparent;
      border-right:4px solid transparent;
      border-top:8px solid #F2B50F;
      top:18px;
      left:0;
    }
   
  }
  .todo-input{
    width:272px;
    border:none;
    font-size:1rem;
    font-family: 'Khand', sans-serif;
    padding-left:3rem;
    line-height:48px;
   background:none;
    position:relative;
    transition:padding-left 0.2s;
    &:focus{
      outline:none;
      padding-left:1rem;
    }
  }
  .todo-add{
    cursor:pointer;
    width:48px;
    height:48px;
    display:block;
    position:absolute;
    top:2px;
    right:0;
    overflow:hidden;
    text-indent:9999px;
    background:none;
    border:none;
    opacity:1;
    transition:top 0.2s, opacity 0.2s;
    
     &:focus{
      outline:none;
    }
 
    span{
      display:block;
      width:36px;
      height:36px;
      position:absolute;
      top:4px;
       left:0;
        right:0;
        margin:auto;
      line-height:1;
      box-shadow:0 2px 10px 0 rgba(0,0,0,0.3);
      &::after{
        content:"Add";
        display:block;
        width:2px;
        height:20px; 
        background:#F2B50F;
        transform:rotate(90deg);
        position:absolute;
        top:0;
        bottom:0;
        left:2px;
        right:0;
        margin:auto;
        transition:left 0.2s,width 0.2s, height 0.2s, background 0.2s;
      }
    }
    
    &::before{
      width:2px;
      height:20px;
      display:block;
      content:"Add";
      position:absolute;
      background:#F2B50F;
      border-radius:0 0 4px 0;
      top:12px;
      left:2px;
      right:0;
      margin:auto;
      transition:transform 0.2s ease-out;
      z-index:5;
    }
    &::after{
      width:0px;
      height:0px;
      display:block;
      content:"";
      position:absolute;
      //background:#fff;
      //border-right:6px solid #fff;
      //border-top:6px solid transparent;
      //border-bottom:6px solid transparent;
      //top:19px;
      //left:14px;
      //right:0;
      margin:auto;
      transition:transform 0.2s ease-out;
    }
    
    &.hover{
       
      &::before{
        
      }
      &::after{
       
      }
      
    }
    &.click{
      
      span::after{
        width:48px;
        height:48px;
        left:-6px;
        background:rgba(33,158,138,0);
      }
    }
    &.clickdone{
      
      span::after{
        width:36px;
        height:36px;
        left:0px;
        
      }
    }
    
    &.not-focused{
      top:24px;
      opacity:0;
      curosur:default;
    }
  }
}


li.complete{
  text-decoration:line-through;
}

.checkbox{
  cursor:pointer;
  display:block;
  width:24px;
  height:24px;
  border:2px solid #F8f8f8;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  left:16px;
}

.complete{
  .checkbox{
    //background:red;
    background:#f8f8f8;
    &::after{
      content:"";
      display:block;
      width:4px;
      height:10px;
      border-right:2px solid #219e8a;
      border-bottom:2px solid #219e8a;
      transform:rotate(45deg);
      position:absolute;
      left:7px;
      top:3px;
      
    }
  }
}

.dragable{
  cursor:move;
  display:block;
  position:absolute;
  width:36px;
  height:18px;
  top:0;
  right:0;
  bottom:0;
  margin:auto;
  
  &::before{
    content:"";
    display:block;
    position:absolute;
    width:18px;
    height:14px;
    top:0;
    right:0;
    border-top:none;
    border-bottom:none;
  }
  &::after{
    content:"";
    display:block;
    position:absolute;
    width:18px;
    height:2px;
    background:none;
    top:8px;
    right:0;
    
  }
}
.remove{
 
  cursor:pointer;
  width:24px;
  height:48px;
  display:none;
  position:absolute;
  right:28px;
  top:0;
  bottom:0;
  margin:auto;
  opacity:0.5;
  
  &::after{
    position:absolute;
    right:11px;
    top:12px;
    content:"";
    display:block;
    width:2px;
    height:24px;
    background:#f8f8f8;
    transform:rotate(45deg);
  }
  &::before{
    position:absolute;
    right:0;
    top:23px;
    content:"";
    display:block;
    height:2px;
    width:24px;
    background:#f8f8f8;
    transform:rotate(45deg);
  }
  
}



.my-list{
  position: relative;
  top:48px;
  left:0;
  //margin-top:6px;
  //border-top:1px solid rgba(255,255,255,0.2);
  height:272px;
  overflow-y:auto;
  overflow-x:hidden;
  //z-index:300;
  }
.clone-list, .todo-list{
 
  position: absolute;
  }

  
.ui-sortable-helper {
  transition: none !important;

}
.li-item{
    position:relative;
    list-style:none;
    width:320px;
    background:rgba(255,255,255,0);
    line-height:1;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.2);
    padding:0.8333333rem 4rem 0.8333333rem 3rem;
    box-sizing:border-box;
    box-shadow:0 4px 4px 0 rgba(0,0,0,0);
    font-weight:300;
    
  &.exclude-me{
    background:rgba(255,255,255,0.2);
  }
    .text{
      
    }
  } 
.sortable-placeholder {
  height:48px;
  width: 320px;
  border-left: 2px solid #219e8a; 
  //margin-bottom:1rem;
  background:rgba(33,158,138,0.2);
  position: relative;
  z-index: 6;
  list-style:none;
}

.clone-list{

  .li-item{
    position: absolute;
   z-index: 1;
  }
}
.clone {
  transition:top 300ms;
}

.text-credit{
  position:relative;
  left:25%;
  top:40%;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/580064/perfect-scrollbar.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />