JSFiddle - React, Tailwind, and code Playground

by kalar su

HTML

<body>
  <section id="todo-header" class="block-container">
    <h1>To Do List</h1>
    <form>
      <!-- <label>Enter a new task:</label> -->
      <input type="text" id="inputTask" placeholder="Enter Task...">
      <input type="submit" value="Add" class="addBtn">
    </form>
  </section>
  <section class="block-container">
    <ol>
    
    </ol>
    <div class="displayStatus">
      <div>All Task:<span class="all-task"></span></div>
      <div>Finished Task:<span class="finished-task"></span></div>
    </div>
  </section>
</body>

SCSS

$light-gray: #eaeaea;
$pale-gray: #f9f9f9;
$pale-med-gray: #dcdcdc;
$med-gray: #6f6c6c;
$dark-gray: #444;
$bright-blue: #36BEF5;

$inline-padding: .8em;
$input-padding: .6em;
$secion-header-bg: $bright-blue;
$gray-btn-bg: $pale-med-gray;
$li-bg-color: $pale-gray;
$li-cross-color: #888;
$li-cross-font-color: #aaa;
$body-text-color: $med-gray;
$btn-text-color: $med-gray;
$light-border-color: $light-gray;

html{
	font-size: 100%;
}
body{
  font-family: helvetica;
  color: $body-text-color;
	font-size: 1.2em;
	line-height: 1em;
}
body, h1, h2, h3, h4, h5, h6{
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-feature-settings: '"liga", "dlig"';
	-ms-font-feature-settings: '"liga", "dlig"';
	-webkit-font-feature-settings: '"liga", "dlig"';
	font-feature-settings: '"liga", "dlig"';
}
h1 {
  font-size: 1.5em;
  margin-top: .5em;
  margin-bottom: 1em;
}
h2 {font-size: 1.3em;}
#todo-header{
  background-color: $secion-header-bg;
  color: white;
  text-align: center;
  &:after{
    content: "";
    display: table;
    clear: both;
  }
}
.block-container{
  padding: 8%;
}
input {
  border: none;
  float: left;
  font-size: 1em; 
  &#inputTask{
    width: 68%;
    padding: $input-padding;
  }
  &.addBtn{
    padding: $input-padding;
    width: 25%;
    background: $gray-btn-bg;
    color: $btn-text-color;
    float: left;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
  }
}
ol{
  list-style-type:decimal;   
  padding-left: 1.5em;
  border: 1px solid $light-border-color;
  li {
    &:nth-child(odd) {
      background: $li-bg-color;
    }
    &.checked {
      background: $li-cross-color;
      color: $li-cross-font-color;
      text-decoration: line-through;
    }
    cursor: pointer;
    position: relative;
    padding: $inline-padding;
    background: #eee;
    font-size: 1em;
    transition: 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .rev-btn...

JavaScript

var allTask = 0;
var finishedTask=0;

$(document).ready(function($){
	
	$('form').submit(function(){
  	var newTask = $('#inputTask').val();
  	if( newTask !='' ){
    	allTask++;
      $('.all-task').text(allTask);
    	var newTaskLi = '<li class="taskList"><span>' + newTask + ' </span><span class="rev-btn">×</span></li>';
      $('ol').prepend(newTaskLi);
      $('#inputTask').val('');
      
      $('.rev-btn').on('click', removeTask);
      $('li.taskList').on('click', updateTask);
    }
    return false;
  });

});

function removeTask(){
	$(this).parent().remove();
}
function updateTask(){
  if($(this).hasClass('checked')) {
    $(this).removeClass('checked');
    finishedTask--;
  } else {
    $(this).addClass('checked');
    finishedTask++;
  }
  $('.finished-task').text(finishedTask);
  e.preventDefault();
}