Todo list add some thing - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg bg-primary text-light"> <div class="container-fluid"> <a class="navbar-brand " href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 "> <li class="nav-item "> <a class="nav-link active " aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> <form class="d-flex " role="search"> <input class="form-control me-2 " type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success text-light" type="submit">Search</button> </form> </div> </div> </nav> </header> <div class="container mt-3 col-sm-8"> <div class="input-group mb-3 "> <input id="input" type="text " class="form-control " placeholder="Add Text" value="Chapter 2"> <button id="btn" class="input-group-text " id="inputGroup-sizing-default ">Add</button>

    </div>
    <ul id='addUl' class="list-group mt-3">
        <li id="moveing" class="list-group-item">
            <h3 id="h3" class="flex-grow-1 d-inline-flex p-2">Chapter 1</h3>
            <button onclick="removeEle(this)" type="button" class="btn btn-danger float-end">Remove</button>
            <button onclick="editEle(this)" type="button" class="btn btn-warning float-end me-lg-3">Edit</button>
        </li>
    </ul>
</div>

<script src="coustom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js "></script>

</body> </html>

--------------js
// select tags
let inputStor = document.getElementById('input');
let btnCall = document.getElementById('btn');
let addUll = document.getElementById("addUl")
// button click event
btnCall.addEventListener('click', addItems);

// ---- use innerHTML to add Chapter -------
function addItems() {
// catch input value

let inputValue = inputStor.value;
console.log(inputValue);

// on input alert
if (inputValue == "") {
    alert('Nathing is hare input again')
} else {
    // create Element

    let addli = document.createElement("li");
    addli.innerHTML =
        `<h3 id='h3' class="flex-grow-1 d-inline-flex p-2">${inputValue}</h3>
    <button onclick="removeEle(this)" type="button" class="btn btn-danger float-end">Remove</button>
    <button onclick="editEle(this)" type="button" class="btn btn-warning float-end me-lg-3">Edit</button>`;
    addli.className = ('list-group-item');
    addli.setAttribute('id', 'moveing');
    let appenlist = addUll.appendChild(addli);
}

}
// --- Edit function----
function editEle(currElement) {
let createInput = document.createElement('input');
let previEle = currElement.previousElementSibling;
let previEle2 = previEle.previousElementSibling;

if (currElement.textContent == 'Edit') {

    console.log(previEle.previousElementSibling);
    currElement.textContent = 'Done';

    createInput.type = ('input');
    createInput.id = ('input2');
    createInput.className = ('form-control mb-3');
    // createInput.placeholder = inputStor.value;
    createInput.value = 'New text';
    currElement.parentElement.replaceChild(createInput, previEle.previousElementSibling);
} else {
    let newInpurVal = document.getElementById('input2')
    let newInpurValue = newInpurVal.value;
    currElement.textContent = 'Edit';
    let newTextTag = document.createElement('h3');
    newTextTag.className = 'flex-grow-1 d-inline-flex p-2';
    newTextTag.textContent = newInpurValue;
    currElement.parentElement.replaceChild(newTextTag, previEle.previousElementSibling);
}

}
// // remove function

function removeEle(currElement) {
currElement.parentElement.remove();
}

// ---- use create Element to add Chapter 1 But edit now work -------

// function addItems() {
// // catch input value
// let inputValue = inputStor.value;
// console.log(inputValue);

// // on input alert
// if (inputValue == "") {
// alert('Nathing is hare input again')
// } else {
// // create Element
// let addli = document.createElement("li");
// addli.textContent = inputValue;
// addli.className = ('list-group-item');
// addli.setAttribute('id', 'moveing');
// let appenlist = addUll.appendChild(addli);

// // create remove button
// let btn2 = document.createElement('button');
// btn2.textContent = 'Remove';
// // create class
// btn2.setAttribute('class', 'btn btn-primary float-end');
// addli.appendChild(btn2)

// // btn2.setAttribute('id', 'onRemove');
// btn2.setAttribute('onclick', 'removeEle(this)');

// // let callRemoveFun = onRemove.addEventListener('click', removeEle);
// }

// }
// //remove function
// function removeEle(currElement) {
// currElement.parentElement.remove();
// }

// 2 bug '' value work & placeholder