Ejemplo uso varias cosas de bootstrap con JS

 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
        Añadir tarea
    </button>
    <button class="btn btn-info " data-bs-toggle="collapse" data-bs-target="#demo">Ver tareas <span id="num_tareas"
            class="badge bg-danger">4</span></button>

    <div id="demo" class="collapse">
        <ul id="lista_tareas"></ul>
    </div>
    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog  modal-xl modal-dialog-centered">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Tarea nueva</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <input id="tarea" class="form-control " type="text" placeholder="Introduzca la tarea">
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" id="nueva_tarea">Añadir tarea</button>
                </div>

            </div>
        </div>
    </div>
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/script.js"></script>

let modal=document.getElementById("myModal");
let nueva_tarea=document.getElementById("nueva_tarea");
let tarea=document.getElementById("tarea");
let lista_tareas=document.getElementById("lista_tareas");
let num_tareas=document.getElementById("num_tareas");
nueva_tarea.addEventListener("click",()=>{
    let tareas=localStorage["tareas"] || "[]"
    tareas=JSON.parse(tareas);
    tareas.push(tarea.value);
    localStorage["tareas"]=JSON.stringify(tareas)
    bootstrap.Modal.getInstance(modal).hide()
    num_tareas.innerHTML=tareas.length
    lista_tareas.innerHTML=tareas.map(x=>"<li>"+x+"</li>").join("")
})