Ejercicio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visitantes</title>
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid ">
        <div class="row">
            <div class="col">
                <h1 class="display-3 ">Control de visitantes</h1>
                <button id="add" class="btn btn-success ">Añadir visitante</button>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="reutilizar" name="reutilizar" value="something" checked>
                    <label class="form-check-label" for="reutilizar">Reutilizar números</label>
                  </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h1 class="display-4 ">Visitantes</h1>
                <div id="visitantes"></div>
            </div>
            <div class="col">
                <h1 class="display-4 ">Histórico</h1>
                <div id="historico"></div>
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>
.numero{
    display: inline-block;
    border:2px solid blue;
    padding: 5px;
    min-width: 2em;
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    margin: 10px;
}
estado = {}

window.onload = function () {
    estado.lista = [];
    estado.historico = [];
    estado.actual = 1;
    estado.limite = 20;
    estado.add = document.getElementById("add");
    estado.add.addEventListener("click", addVisitante);
    estado.visitantes = document.getElementById("visitantes");
    estado.historicos = document.getElementById("historico");
    estado.reutilizar = document.getElementById("reutilizar");
    iniciar();
}
function iniciar() {
    pintarLista();
}
function addVisitante() {
    if (estado.reutilizar.checked) {
        // Buscar el primer elemento libre de la lista
        let numero = 1;
        while (estado.lista.includes(numero)) {
            numero++;
        }
        estado.lista.push(numero);
        estado.lista.sort((a,b)=>a-b)
    } else {
        estado.lista.push(estado.actual);
        estado.actual++;
    }


    pintarLista();
}
function checkAdd() {
    if (estado.lista.length <= estado.limite) {
        estado.add.classList.remove("disabled")
    } else {
        estado.add.classList.add("disabled")
    }
}
function pintarLista() {
    checkAdd();
    pintarDatos(estado.lista, estado.visitantes);
    pintarDatos(estado.historico, estado.historicos);
}
function pincharCaja() {
    let numero = Number(this.innerHTML);
    estado.historico = estado.historico.concat(estado.lista.filter(x => x == numero))
    if (estado.historico.length>estado.limite){
        estado.historico=estado.historico.slice(-estado.limite);
    }
    estado.lista = estado.lista.filter(x => x != numero);

    pintarLista();
}
function esPrimo(numero){
    for(let i=2;i<=Math.sqrt(numero);i++){
        if (numero%i==0){
            return false;
        }
    }
    return true;
}
function pintarDatos(datos, destino) {

    destino.innerHTML = ""
    for (let elemento of datos) {
        let caja = document.createElement("div");
        caja.innerHTML = elemento;
        caja.classList.add("numero");
        if (esPrimo(elemento)){
            caja.classList.add("bg-warning");
        }
        caja.addEventListener("click", pincharCaja);
        destino.append(caja)
    }
}

Solución ejercicio examen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bolsa de horas</title>
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4  ">
                <form>
                    <h3 class="mt-5 ">Datos del pedido</h3>
                    <div class="mb-3 mt-3">
                        <label for="cliente" class="form-label">Cliente:</label>
                        <input type="text" class="form-control" id="cliente" placeholder="Introduzca el nombre del cliente" name="cliente">
                      </div>
                      <div class="mb-3">
                        <label for="horas" class="form-label">Horas:</label>
                        <input type="number" class="form-control" id="horas" placeholder="Introduzca las horas" name="horas">
                      </div>
                      <div class="btn-group mb-3">
                        <button type="button" class="btn btn-primary tipoEmpleado">Junior</button>
                        <button type="button" class="btn btn-primary tipoEmpleado">Senior</button>
                        <button type="button" class="btn btn-primary tipoEmpleado">Master</button>
                      </div>
                      <div>
                      <button id="addPedido" type="button" class="btn btn-success ">Añadir</button>
                    </div>
               
                </form>
            </div>
            <div class="col-md-8 ">
                <h1 class="mt-3 display-3 ">Bolsa de horas</h1>
                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th>Nombre cliente</th>
                            <th>Horas contratadas</th>
                            <th>Horas restantes</th>
                            <th>Tipo empleado</th>
                            <th>Importe</th>
                            <th>Acciones</th>         
                        </tr>
                    </thead>
                    <tbody id="tabla">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>

</html>
let estado = {} // Para guardar todos los componentes que me hacen falta

window.onload = function () {
    // Guardo todos los accesos a los elementos html que necesito
    // Me olvido del html para el resto del código
    estado.tabla=document.getElementById("tabla");
    estado.cliente=document.getElementById("cliente");
    estado.horas=document.getElementById("horas");
    estado.addPedido=document.getElementById("addPedido");
    estado.tipoEmpleado=document.getElementsByClassName("tipoEmpleado");
    estado.tipoSeleccionado=""
    estado.precios={"Junior":30,"Senior":60,"Master":80}
    asociarEventos("tipoEmpleado",clickEmpleado);
    estado.pedidos=[]
    estado.addPedido.addEventListener("click",addPedido);
    iniciar();
}
function iniciar() {
    // Rcupero los datos del storage esto se hace solo una vez
    getStorageData();
    pintarPedidos();
  
}
function addPedido(){
    // Recuperar los datos del formulario
    let horas=Number(estado.horas.value);
    let precio=estado.precios[estado.tipoSeleccionado] || 30;
    let pedido={
        nombre:estado.cliente.value,
        horas:horas,
        tipoEmpleado:estado.tipoSeleccionado, // TODO: a ver que hago con esto
        restantes:horas,
        importe:horas*precio
    }
    // Añadir al pedido el objeto
    estado.pedidos.push(pedido);
    // volver a pintar los datos
    pintarPedidos();
}
function consumir(){
    let idpedido=this.dataset.idpedido;
    estado.pedidos[idpedido].restantes--;
    if (estado.pedidos[idpedido].restantes<=0){
        estado.pedidos.splice(idpedido,1);
    }
    pintarPedidos();
}
function clickEmpleado(){
    
    for (let boton of estado.tipoEmpleado){
        boton.classList.remove("active");
    }
    this.classList.add("active");
    estado.tipoSeleccionado=this.innerHTML
}
// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarPedidos() {
    setStorageData();
    pintarDatos(estado.pedidos, estado.tabla)
}

function pintarDatos(pedidos, destino) {
    lista = "";
    let totalHoras=0;
    let totalImporte=0;
    let i=0;
    for (let pedido of pedidos) {
        lista += `<tr>
        <td>${pedido.nombre}</td>
        <td>${pedido.horas}</td>
        <td>${pedido.restantes}</td>
        <td>${pedido.tipoEmpleado}</td>
        <td>${pedido.importe}</td>
        <td>
        <button data-idpedido="${i}" type="button" class="btn btn-danger btn-sm  consumir">
            Consumir
        </button>
      
        </td></tr>`;
        i++
        
        totalHoras+=pedido.restantes;
        totalImporte+=pedido.importe
    }
     lista += pedidos.length>0?`<tr><td></td><td>Horas</td>
     <td>${totalHoras}</td><td>Importe</td><td>${totalImporte}</td></tr>`:"";

    destino.innerHTML = lista;
    asociarEventos("consumir",consumir)
   
}
// Funciones de localStorage
function getStorageData(){
    let pedidos=localStorage.getItem("pedidos") || "[]";
    pedidos=JSON.parse(pedidos);
    estado.pedidos=pedidos
}
function setStorageData(){
    localStorage.setItem("pedidos",JSON.stringify(estado.pedidos))
}
function asociarEventos(clase,funcion){
    for (let boton of document.getElementsByClassName(clase)) {
        boton.addEventListener("click",funcion);
    }
}

Solución alumnos definitiva

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista alumnos</title>
    <link rel="stylesheet" href="./css/bootstrap1.css">
</head>

<body>
    <div class="container ">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAlumno">
            Añadir alumno
        </button>
        <!--Utilizo la tabla para que quede más o menos bonito-->
        <table class="table table-striped m-4">
            <thead>
                <tr>
                    <th>Alumno</th>
                    <th>Nota</th>
                    <!-- Tengo el id para borrar todas las tareas-->
                    <th> <button type="button" class="btn btn-danger" id="borrar_alumnos">
                            Eliminar todos
                        </button></th>
                </tr>
            </thead>
            <tbody id="lista_alumnos">

            </tbody>
        </table>
        <!-- Utilizamos el Modal de w3school ¡copiado! -->
        <div class="modal fade" id="modalAlumno">
            <div class="modal-dialog  modal-xl modal-dialog-centered">
                <div class="modal-content">

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

                    <!-- El input tiene un id porque necesito el valor -->
                    <div class="modal-body">
                        <input id="nombreAlumno" class="form-control " type="text"
                            placeholder="Introduzca el nombre del alumno">
                        <input id="notaAlumno" class="form-control " type="number"
                            placeholder="Introduzca la nota del alumno">
                    </div>

                    <!-- El boton de nueva tarea tiene un id por la misma razón -->
                    <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="nuevo_alumno">Añadir alumno</button>
                    </div>

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

</html>
let estado = {} // Para guardar todos los componentes que me hacen falta
window.onload = function () {
    // Guardo todos los accesos a los elementos html que necesito
    // Me olvido del html para el resto del código
    estado.nuevo = document.getElementById("nuevo_alumno");
    estado.nuevo.addEventListener("click", nuevoAlumno);
    estado.borrar = document.getElementById("borrar_alumnos");
    estado.borrar.addEventListener("click", borrarAlumnos);
    estado.tabla = document.getElementById("lista_alumnos");
    estado.nombre = document.getElementById("nombreAlumno");
    estado.nota = document.getElementById("notaAlumno");
    estado.modal = document.getElementById("modalAlumno");
    estado.alumnos = [];
    iniciar();
}
function iniciar() {
    // Rcupero los datos del storage esto se hace solo una vez
    getStorageData();
    pintarAlumnos();
}


function nuevoAlumno() {
    // Recuperar los datos del modal
    let alumno = getDatosAlumno();
    if (alumno.nota<0 || alumno.nota>10){
        alert("Nota incorrecta")
        return
    }
    // Añadirlos al estado
    estado.alumnos.push(alumno);
    // Pintar los datos
    pintarAlumnos()
    ocultarModal()
}
function borrarAlumnos() {
    estado.alumnos = [];
    pintarAlumnos();
}
function getDatosAlumno() {
    return { nombre: estado.nombre.value, nota: Number(estado.nota.value) }
}
function ocultarModal() {
    bootstrap.Modal.getInstance(estado.modal).hide();
}
function borrarAlumno() {
    let idalumno=this.dataset.idalumno
    estado.alumnos=estado.alumnos.filter((x,i)=>i!=idalumno);
    pintarAlumnos();
}
// Funciones de localStorage
function getStorageData(){
    let alumnos=localStorage.getItem("alumnos") || "[]";
    alumnos=JSON.parse(alumnos);
    estado.alumnos=alumnos
}
function setStorageData(){
    localStorage.setItem("alumnos",JSON.stringify(estado.alumnos))
}

// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarAlumnos() {
    setStorageData();
    pintarDatos(estado.alumnos, estado.tabla)
}
function pintarDatos(alumnos, destino) {
    lista = "";
    let suma=0;
    let i=0;
    for (let alumno of alumnos) {
        lista += `<tr><td>${alumno.nombre}</td><td class=${alumno.nota >= 5 ? "text-success " : "text-danger"}>${alumno.nota}</td><td>
        <button data-idalumno="${i}" type="button" class="btn btn-danger btn-sm  borrar_alumno">
        Borrar
    </button>
        </td></tr>`;
        i++
        suma+=alumno.nota
    }
    let media=Math.round(suma*100/alumnos.length)/100
    lista += alumnos.length>0?`<tr><td>Media</td><td class=${media >= 5 ? "text-success " : "text-danger"}>${media}</td></tr>`:"";

    destino.innerHTML = lista;
    for (let boton of document.getElementsByClassName("borrar_alumno")) {
        boton.addEventListener("click",borrarAlumno);
    }
}

Solución ejercicio alumnos 1 versión

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista alumnos</title>
    <link rel="stylesheet" href="./css/bootstrap1.css">
</head>

<body>
    <div class="container ">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAlumno">
            Añadir alumno
        </button>
        <!--Utilizo la tabla para que quede más o menos bonito-->
        <table class="table table-striped m-4">
            <thead>
                <tr>
                    <th>Alumno</th>
                    <th>Nota</th>
                    <!-- Tengo el id para borrar todas las tareas-->
                    <th> <button type="button" class="btn btn-danger" id="borrar_alumnos">
                            Eliminar todos
                        </button></th>
                </tr>
            </thead>
            <tbody id="lista_alumnos">

            </tbody>
        </table>
        <!-- Utilizamos el Modal de w3school ¡copiado! -->
        <div class="modal fade" id="modalAlumno">
            <div class="modal-dialog  modal-xl modal-dialog-centered">
                <div class="modal-content">

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

                    <!-- El input tiene un id porque necesito el valor -->
                    <div class="modal-body">
                        <input id="nombreAlumno" class="form-control " type="text"
                            placeholder="Introduzca el nombre del alumno">
                        <input id="notaAlumno" class="form-control " type="number"
                            placeholder="Introduzca la nota del alumno">
                    </div>

                    <!-- El boton de nueva tarea tiene un id por la misma razón -->
                    <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="nuevo_alumno">Añadir alumno</button>
                    </div>

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

</html>
let estado = {} // Para guardar todos los componentes que me hacen falta
window.onload = function () {
    // Guardo todos los accesos a los elementos html que necesito
    // Me olvido del html para el resto del código
    estado.nuevo = document.getElementById("nuevo_alumno");
    estado.nuevo.addEventListener("click", nuevoAlumno);
    estado.borrar = document.getElementById("borrar_alumnos");
    estado.borrar.addEventListener("click", borrarAlumnos);
    estado.tabla = document.getElementById("lista_alumnos");
    estado.nombre = document.getElementById("nombreAlumno");
    estado.nota = document.getElementById("notaAlumno");
    estado.modal = document.getElementById("modalAlumno");
    estado.alumnos = [];
    iniciar();
}
function iniciar() {
    estado.alumnos = [{ nombre: "Ana", nota: 5 }, { nombre: "Eva", nota: 8 }, { nombre: "Pep", nota: 3 }];
    pintarAlumnos()

}
function nuevoAlumno() {
    // Recuperar los datos
    let alumno = getDatosAlumno();
    // Añadirlos al estado
    estado.alumnos.push(alumno);
    // Pintar los datos
    pintarAlumnos()
    ocultarModal()
}
function borrarAlumnos() {
    estado.alumnos = [];
    pintarAlumnos();
}
function getDatosAlumno() {
    return { nombre: estado.nombre.value, nota: Number(estado.nota.value) }
}
function ocultarModal() {
    bootstrap.Modal.getInstance(estado.modal).hide();
}



// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarAlumnos() {
    pintarDatos(estado.alumnos, estado.tabla)
}
function pintarDatos(alumnos, destino) {
    lista = "";
    let suma=0;
    for (let alumno of alumnos) {
        lista += `<tr><td>${alumno.nombre}</td><td class=${alumno.nota >= 5 ? "text-success " : "text-danger"}>${alumno.nota}</td></tr>`;
        suma+=alumno.nota
    }
    let media=Math.round(suma*100/alumnos.length)/100
    lista += `<tr><td>Media</td><td class=${media >= 5 ? "text-success " : "text-danger"}>${media}</td></tr>`;

    destino.innerHTML = lista;
}

Solución ejercicio bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <!-- Mis estilos van después del bootstrap -->
    <link rel="stylesheet" href="css/estilos.css">

</head>

<body>
    <!-- Utilizamos el card de w3school ¡copiado!-->
    <div class="d-flex ">
        <div class="card" style="width:400px">
            <div class="card-body">
                <h4 id="user_name" class="card-title">Jane Doe</h4>
                <p id="user_info" class="card-text">Some example text some example text. Jane Doe is an architect and
                    engineer</p>
                <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">-</span></button>
            </div>
            <img id="user_image" class="card-img-bottom" src="../bootstrap4/img_avatar6.png" alt="Card image"
                style="width:100%">
        </div>

        <div id="demo" class="collapse">
            <!--Utilizo la tabla para que quede más o menos bonito-->
            <table class="table table-striped m-4">
                <thead>
                    <tr>
                        <th>Tareas pendientes</th>
                        <!-- Tengo el id para borrar todas las tareas-->
                        <th> <button type="button" class="btn btn-danger" id="borrar_tareas">
                                Eliminar todas
                            </button></th>
                    </tr>
                </thead>
                <tbody id="lista_tareas">

                </tbody>
            </table>
        </div>
    </div>
    <!-- Utilizamos el Modal de w3school ¡copiado1 -->
    <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>

                <!-- El input tiene un id porque necesito el valor -->
                <div class="modal-body">
                    <input id="tarea" class="form-control " type="text" placeholder="Introduzca la tarea">
                </div>

                <!-- El boton de nueva tarea tiene un id por la misma razón -->
                <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>
    <!-- Aquí los scripts -->
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/script.js"></script>
</body>

</html>
// Todas las acciones las hago cuando se ha cargado la página
window.onload = function () {
    // recojo todos  los elementos con los que voy a trabajar
    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");
    let borrar_tareas = document.getElementById("borrar_tareas");
    // Cuando pulsen borrar_tareas elimino todas las tareas
    // Cómo? Obtener tareas->Modificar tareas->guardar tareas->pintar tareas
    borrar_tareas.addEventListener("click", () => {
        // borrar tareas
        localStorage.setItem("tareas", "[]");
        // pintar tareas
        pintaTareas();
    });
    // Cuando pulsen nueva_tarea añado la tarea a la lista
    nueva_tarea.addEventListener("click", () => {
        // obtener tareas
        let tareas = getTareas();
        // modificar taras
        tareas.push(tarea.value);
        // guardar tareas
        setTareas(tareas);
        // Oculto el modal
        bootstrap.Modal.getInstance(modal).hide();
        // pintar tareas
        pintaTareas();
    })
    // Obtengo los datos de la api
    fetch("https://randomuser.me/api")
        .then(response => response.json())
        .then(resultado => {
            // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
            console.log(resultado);
            // Llamo a una función con el usuario devuelto
            pintaUsuario(resultado.results[0]);
        });
    // pinto las tareas al iniciar la página para que si refresco me pinte lo que hay
    pintaTareas();
    function pintaTareas() {
        // Recupera las tareas
        let tareas = getTareas();
        // Modifica el número del badge
        num_tareas.innerHTML = tareas.length;
        // Si no tengo tareas no muestro el botón
        if (tareas.length==0){
            borrar_tareas.classList.add("d-none")
        }else{
            borrar_tareas.classList.remove("d-none")
        }
        // Crea los elementos de la tabla de tareas, lo hago con map
        // A cada botón le pongo el indice de la tarea que quiero borrar
        // Cómo? con el segundo parámetro del map
        // lo guardo en un atributo especial del html que es el data-
        // En el dataset tendré un atributo idtarea que valdrá el índice de la tarea que quiero borrar
        lista_tareas.innerHTML = tareas.map((x, i) => "<tr><td>" + x + `</td><td><button data-idtarea="${i}" type="button" class="btn btn-danger btn-sm  borrar_tarea">
        Borrar
    </button></td></tr>`).join("");
        // A cada botón le añado el evento de borrar
        for (let boton of document.getElementsByClassName("borrar_tarea")) {
            boton.addEventListener("click", function () {
                // Obtengo la tarea
                let tareas = getTareas();
                // Modifico las tareas: yo en dataset.idtarea tengo el id de la tarea que quiero eliminar
                tareas = tareas.filter((x, i) => i != this.dataset.idtarea);
                // Guardo las tareas
                setTareas(tareas);
                // Pinto las tareas
                pintaTareas();
            })
        }
    }
}
function getTareas() {
    // Recupero las tareas del storage y las parseo del JSON
    let tareas = localStorage["tareas"] || "[]";
    tareas = JSON.parse(tareas);
    return tareas;
}
function setTareas(tareas) {
    // Lo guardo en el localstorage
    localStorage["tareas"] = JSON.stringify(tareas);
}
function pintaUsuario(usuario) {
    // Ponemos los datos en el card
    let nombre = document.getElementById("user_name");
    let email = document.getElementById("user_info");
    let foto = document.getElementById("user_image");

    // nombre.innerHTML = Object.values(usuario.name).join(" ");
    nombre.innerHTML = usuario.name.title + " " + usuario.name.first + " " + usuario.name.last;
    email.innerHTML = usuario.email;
    foto.src = usuario.picture.large;
}

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("")
})

Ejemplo barra bootstrap

html

 <div class="progress">
        <div id="barra" class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
    </div>

jd

let barra = document.getElementById("barra")
let cont = 10
setTimeout(incrementarBarra, 1000)
function incrementarBarra() {
    cont+=5
    barra.style.width = cont + "%"
    barra.innerHTML = cont + "%"
    if (cont < 100) {
        setTimeout(incrementarBarra, 1000)
    }
}

Solución examen

function repetir(cadena, numero) {
    if (cadena.length != 1) { return ""; }
    return cadena.repeat(numero);
}

console.log(repetir("a", 6))
console.log(repetir("aasdasd", 6))

function masLarga(cad1, cad2) {
    return cad1.length > cad2.length ? cad1 : cad2
}

console.log(masLarga("hola", "adios"))
console.log(masLarga("hola amigos", "adios"))

function eliminarPares(lista) {
    return lista.filter(cad => cad.length % 2 != 0)
}

console.log(eliminarPares(["aa", "bbb", "ccccc", "dddd"]))

function repetidas(cadena){
    for(i=1;i<cadena.length;i++){
        if (cadena.at(i)==cadena.at(i-1) && cadena.at(i)!=" "){
            return true;
        }
    }
    return false;
}

function repetidasForeach(cadena){
    let res=false
    cadena.split('').forEach((valor,i)=>{
        if (valor==cadena.at(i+1)){
            res= true;
            return
        }
    })
    return res;
}


console.log(repetidasForeach('La luvia  en madrid'))