How do I verify that the input value actually exists?

Question

I wanna check if the value of the input is already on the to-do list or not? and don't add another task with the same content as one of the tasks instead add a sweet alert (in the comment). The rest of the code is like this: https://www.w3schools.com/howto/howto_js_todolist.asp

let theinput = document.querySelector(".add-task input");
let theaddbutton = document.querySelector(".add-task .plus");
let taskscontainer = document.querySelector(".tasks-content");
let taskscount = document.querySelector(".tasks-count span");
let taskscompleted = document.querySelector(".tasks-completed span");


window.onload = () => {
  theinput.focus();
};
theaddbutton.onclick = () => {
  if (theinput.value === '') {
    Swal.fire("you should type something");
  }
  /*if (theinput.value === document.querySelector(".task-box").textContent) {
      swal.fire("You have already added this task")
  } */
  else {
    let notasks = document.querySelector(".no-tasks");
    if (document.body.contains(document.querySelector(".no-tasks"))) {
      notasks.remove();
    }
    let mainspan = document.createElement('span');
    let deletespan = document.createElement('span');
    let text = document.createTextNode(theinput.value);
    let deletetext = document.createTextNode("delete");

    mainspan.appendChild(text);
    mainspan.className = 'task-box';

    deletespan.appendChild(deletetext);
    deletespan.className = 'delete';

    mainspan.appendChild(deletespan);
    taskscontainer.appendChild(mainspan);

    theinput.value = '';
    calctasks();
  }
};

Answer 1

I found the solution to my question so I wanted to share it here maybe it'll be useful.

I don't know if the code is logical or not 😅 (because I'm a beginner).

I made a loop to the array and subtracted 1 so it won't check the new value.

Anyway, here is the code :

    // the array of todos
    var todos = [];
    // Fetch items from local storage
    if (localStorage.getItem("task")) {
        todos = JSON.parse(localStorage.getItem("task"));
    }
    getlocalstorage();

    window.onload = () => { theinput.focus(); };
    //add tasks
    if (taskscontainer.innerHTML == "") {
        // Show no tasks message
        notasksfunction();
    }

    theaddbutton.onclick = () => {
        if ( theinput.value === '' ) {Swal.fire("you should type something");}

        else {
            
            addtodo(theinput.value);

            // this is the function which checks the todos 
            checking();
            function checking() {
                //
                for (let i = 0; i < todos.length -1 ; i++) {
                    
                    if (theinput.value === todos[i].title ) {
                        Swal.fire(`You've already added this task`);
                    } 
                }
            }

            theinput.value = '';
            theinput.focus();

        }
    } ;
    document.addEventListener('click' , function (e) {
        if (e.target.className === "delete") {
            deletestorage(e.target.parentNode.getAttribute('data-id'));

            e.target.parentNode.remove();
            
            if (taskscontainer.childElementCount == 0 ) {
                notasksfunction();
            }
        };
        if (e.target.classList.contains('task-box')) {
            
            isitcompleted(e.target.getAttribute("data-id"));
            e.target.classList.toggle('finish');
            
            localstorage(todos);
        };
        if (e.target.className === "deleteall") {
            taskscontainer.innerHTML = "";
            todos = [];localstorage(todos);
            notasksfunction();

        }
        
        calctasks();
    })
    //functions
    function addtodo(text) {
        //task data
        const  task = {
            id: Date.now(),
            title: text,
            completed: false,
        }
        todos.push(task);

        addelements(todos);
        localstorage(todos);
        
    }
    function addelements(todos) {
        // remove the notasks div
        taskscontainer.innerHTML = '';
        
        todos.forEach(task => {
            
            let todo = document.createElement('div');
            todo.className = 'task-box';

            if (task.completed) {todo.className = 'task-box finish';}

            let text = document.createTextNode(task.title);
            todo.setAttribute("data-id", task.id);
            todo.appendChild(text);

            let deletespan = document.createElement('span');
            let deletetext = document.createTextNode("delete");

            deletespan.appendChild(deletetext);
            deletespan.className = 'delete';

            todo.appendChild(deletespan);
            taskscontainer.appendChild(todo);
            
            calctasks()
        } );

    }