Categoría: JavaScript
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; }
Chuletas interactivas HTML CSS y JS
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'))