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'))