jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<section class="topLogin">
        <div class="container">
            <button onclick="location.href= 'login.html'">LOGIN</button>
            <button onclick="location.href= 'Register.html'">Register</button>
        </div>
    </section>

    <section class="searchBar">
        <div class="container">
                <div class="input-group mb-3">
                        <input type="text" class="form-control item" placeholder="SEARCH" >
                        <div class="input-group-append">
                          <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                      </div>
        </div>
    </section>


    <section class="totalList">
        <div class="container">
            <div id="date">
                <h3>Date</h3>
             </div>
        </div>
    </section>

    <section class="listContent">
        <div class="container">
                <ul class="list" id="deep">
                     <li style="text-align: center" id="itemList">

                     </li> 

                </ul>


         </div>
    </section>


    <section class="new">
        <div class="container">
             <div class="addItem">
                 <i class="fa fa-circle-o" id="addItem" aria-hidden="true"></i>
                 <input type="text" id="addItemText" placeholder="New Item">
             </div>
          </div>
    </section>

JavaScript

const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
const input = document.getElementById("addItemText");

const check = "fa-check-circle";
const uncheck = "fa-circle-o";
const circleThrough = "linethorugh";



//'list srtroing in an array'
let LIST = [] , id = 0;


function addToDo(todo, id, done, trash) { 
    if(trash) { return;}
    //if done is said to tru then check otherwise uncheck
    const DONE = done ? check : uncheck;
    const LINE = done ? linethorugh: "" ;

    const item = `
                     <li style="text-align: center" id="itemList">

                        <i class="fa ${DONE} pull-left" job="complete" id="${id}" aria-hidden="true"></i>
                        <p class="text ${LINE}"> ${todo}</p>
                        <i class="fa fa-trash pull-right" id="id=${id}" job="delete" aria-hidden="true"></i>
                        </li>
                  ` ;


const position = "beforeend";
jeep.insertAdjacentHTML(position, item); //INSERTING ELEMNT IN TO LIST BY THIS FUNCTION 

}


//when user click enter --add itme in list

document.addEventListener("keyup", function(){
    if(event.keyCode == 13) {
        const todo = input.value;

    if(todo){
        addToDo(todo, id, false, false);
    LIST.push(
            { 
                name: todo,
                id : id,
                done : false,
                trash: false
            }
        );
        }

        input.value="";
        id++;
    }
});

function completeToDo(element){
    element.classList.toggle(CHECK);
    element.classList.toggle(UNCHECK);
    element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
    LIST[element.id].done = LIST[element.id].done ? false : true; 
}

function remoToDo(element)
{
debugger;
    element.parentNode.parentNode.removeChild(element.parentNode);
    LIST[element.id].trash = true;
}


//target  item created...