├── miexamen ├── cod.js └── index.html ├── semana 2 ├── focooff.png ├── focoon.png ├── codigo.js └── index.html ├── semana11 ├── assets │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── index.html ├── css │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.min.css.map │ └── bootstrap-grid.min.css └── codigo.js ├── semana1 ├── index.html └── sesion3.js ├── semana9 ├── index.html └── coigo.js ├── semana10 ├── codigo.js ├── consultar.html ├── eliminar.html ├── modificar.html └── index.html ├── semana8 ├── index.html └── codigo.js ├── Semana12 ├── index.html └── codigo.js ├── Semana13 ├── index.html └── codigo.js ├── Semana3 ├── index.html └── unidad2.js ├── semana6 ├── codigo.js └── index.html ├── semana4 ├── index.html └── codigo.js ├── semana7 ├── index.html └── codigo.js └── semana5 ├── codigos.js └── index.html /miexamen/cod.js: -------------------------------------------------------------------------------- 1 | console.log("sdfghhgfdfg"); -------------------------------------------------------------------------------- /semana 2/focooff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana 2/focooff.png -------------------------------------------------------------------------------- /semana 2/focoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana 2/focoon.png -------------------------------------------------------------------------------- /semana11/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana11/assets/1.jpg -------------------------------------------------------------------------------- /semana11/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana11/assets/2.jpg -------------------------------------------------------------------------------- /semana11/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana11/assets/3.jpg -------------------------------------------------------------------------------- /semana11/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arturobl00/EstructurasTec22/HEAD/semana11/assets/4.jpg -------------------------------------------------------------------------------- /miexamen/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

encabezado

12 | 13 | -------------------------------------------------------------------------------- /semana1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Sesion 3

12 | 13 | -------------------------------------------------------------------------------- /semana9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Recurcividad

11 | 12 | 13 | -------------------------------------------------------------------------------- /semana10/codigo.js: -------------------------------------------------------------------------------- 1 | //Arreglo 2 | var usuarios = [ 3 | { 4 | "nombres": "Jan Marco", 5 | "apellidos": "Fourtoul Martinez", 6 | "edad": 20, 7 | "mail": "janmarco@outlook.com" 8 | } 9 | ] 10 | 11 | //Objeto 12 | var usuario = { 13 | "nombres": "carlos", 14 | "apellidos": "fourtoul hernandez", 15 | "edad": 20, 16 | "mail": "carlosFH@outlook.com" 17 | } 18 | 19 | -------------------------------------------------------------------------------- /semana8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Repaso Arreglos y Trabajando con Objetos 8 | 9 | 10 |

Repasando Arreglos Metodo Burbuja

11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Semana12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Convertir numeros decimales a romanos

11 |

Introdusca el numero:

12 |

13 |
14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /semana9/coigo.js: -------------------------------------------------------------------------------- 1 | function factorial(x) 2 | { 3 | var res; 4 | if(x==0){ 5 | res=1; 6 | }else{ 7 | res=x * factorial(x-1); 8 | 9 | } 10 | return res; 11 | } 12 | 13 | function hanoi (n, inic, tmp, final) { 14 | if (n > 0) { 15 | // Mover n-1 discos de "inic" a "tmp". 16 | // El temporal es "final". 17 | hanoi (n-1, inic, final, tmp); 18 | // Mover el que queda en "inic" a "final" 19 | console.log("Del poste ", inic, " al poste ", final); 20 | // Mover n-1 discos de "tmp" a "final". // El temporal es "inic". 21 | hanoi (n-1, tmp, inic, final); } } 22 | -------------------------------------------------------------------------------- /semana10/consultar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Consultar Registros. 8 | 9 | 10 |

Bienvenido al Sistema de Registro - Consultar

11 | 17 | 18 | -------------------------------------------------------------------------------- /semana10/eliminar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Eliminar Registros. 8 | 9 | 10 |

Bienvenido al Sistema de Registro - Eliminar

11 | 17 | 18 | -------------------------------------------------------------------------------- /semana10/modificar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modificar Registros. 8 | 9 | 10 |

Bienvenido al Sistema de Registro - Modificar

11 | 17 | 18 | -------------------------------------------------------------------------------- /Semana13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Codigo de Encriptación 8 | 9 | 10 |

Encriptación Julio Cesar

11 |
12 | 13 |
14 | 15 | 1 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /semana 2/codigo.js: -------------------------------------------------------------------------------- 1 | function pasarDato(){ 2 | var miSaludo = document.getElementById("caja").value; 3 | console.log(miSaludo); 4 | document.getElementById("etiqueta").innerHTML = miSaludo; 5 | } 6 | 7 | function miTabla(){ 8 | var codigo = "

" + 9 | "" + 10 | "" + 12 | "" + 13 | "" + 15 | "
Valor1Valor2" + 11 | "
ValorAValorB" + 14 | "
"; 16 | document.getElementById("mTabla").innerHTML = codigo; 17 | } 18 | 19 | function encender(){ 20 | document.getElementById("foco").src="focoon.png"; 21 | } 22 | 23 | function apagar(){ 24 | document.getElementById("foco").src="focooff.png"; 25 | } 26 | -------------------------------------------------------------------------------- /Semana13/codigo.js: -------------------------------------------------------------------------------- 1 | var letras = [" ","A","B","C","D","E","F","G","H","I","J","K","L","M","N","Ñ","O","P","Q","R","S","T","U","V","W","X","Y","Z"]; 2 | var numero = [" ", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27]; 3 | function codificar(){ 4 | palabra =document.getElementById("palabra"); 5 | numero = document.getElementById("rango").value; 6 | palabraArray = [...palabra.value.toUpperCase()]; 7 | tamaño = palabraArray.length; 8 | 9 | alert(numero); 10 | alert(palabraArray); 11 | alert(tamaño); 12 | 13 | for(x = 1; x<=numero; x++){ 14 | switch (palabraArray[x]) { 15 | case "A": 16 | alert(1); 17 | break; 18 | case "B": 19 | alert(2); 20 | break; 21 | case "C": 22 | alert(3); 23 | break; 24 | default: 25 | return 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /semana 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Semana 2 propiedades e identidad de elementos

12 |

Ejemplo 1 Trabajando con document.getElementById

13 |

Formulario pasar datos por ID

14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Semana3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Semana 3 - Unidad 2 9 | 10 | 11 |

Unidad 2 Trabajando con Variables, Arreglos, Objetos y Arreglo de Objetos

12 |

Primer ejemplo una variable


13 |

14 |

15 |

16 | 17 |

Segundo Ejemplo un arreglo

18 |

19 |

20 |

21 | 22 |

Tercer Ejemplo un arreglo

23 |

24 |

25 |

26 | 27 | -------------------------------------------------------------------------------- /semana10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Interfaces y Estructuras de Datos 8 | 9 | 10 |

Bienvenido al Sistema de Registro - Ingresar

11 | 17 |
18 |
19 |

Ingrese Nombres:

20 |

Ingrese Apellidos:

21 |

Ingrese Edad:

22 |

Ingrese Email:

23 |

24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /semana11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Proyecto JS para Carrito de Compras 9 | 10 | 11 | 12 |
13 |

Estructuras de datoskw

14 |
15 | 16 |
17 | 18 | 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Semana3/unidad2.js: -------------------------------------------------------------------------------- 1 | //Decarar una variable 2 | var miVariable; 3 | 4 | //Declarar un Array 5 | var miArreglo = [10,30,6,19]; 6 | 7 | //Declarar un Objeto 8 | var miObjeto = { 9 | nombre: "Arturo", 10 | apellido: "Bustamante", 11 | edad: 41, 12 | telefono: "2381861050" 13 | } 14 | 15 | //Declarar un objeto Arreglo 16 | var miObjArreglo = [ 17 | { 18 | matricula: "21120082", 19 | nombre: "monserrath", 20 | edad: 18 21 | }, 22 | { 23 | matricula: "2222001", 24 | nombre: "mario", 25 | edad: 19 26 | }, 27 | { 28 | matricula: "21120080", 29 | nombre: "Adolfo", 30 | edad: 18 31 | } 32 | ] 33 | 34 | function paraVariable(){ 35 | miVariable = document.getElementById("variable").value; 36 | document.getElementById("respuesta1").innerHTML = miVariable; 37 | } 38 | 39 | function visualizarArreglo(){ 40 | pos = document.getElementById("arreglo").value; 41 | document.getElementById("respuesta2").innerHTML = miArreglo[pos]; 42 | } 43 | 44 | function agregaArreglo(){ 45 | elemento = parseInt(document.getElementById("addArreglo").value); 46 | miArreglo.push(elemento); 47 | pos = miArreglo.length - 1; 48 | document.getElementById("respuesta3").innerHTML = miArreglo[pos]; 49 | } -------------------------------------------------------------------------------- /semana6/codigo.js: -------------------------------------------------------------------------------- 1 | var miArreglo = []; 2 | 3 | function agregar(){ 4 | var elDato = document.getElementById("dato").value; 5 | if(!elDato){ 6 | alert("Coloque un número antes de continuar"); 7 | } 8 | else{ 9 | miArreglo.push(elDato); 10 | } 11 | 12 | document.getElementById("dato").value=""; 13 | var tamaño1 = miArreglo.length; 14 | console.log("El arreglo mide: ",tamaño1); 15 | 16 | } 17 | 18 | function Mostrar(){ 19 | var tamaño = miArreglo.length; 20 | console.log("El arreglo mide: ",tamaño); 21 | 22 | if(tamaño == 0){ 23 | alert("El Arreglo aun no tiene datos"); 24 | } 25 | 26 | //Limpiar caja y contenedor 27 | document.getElementById("mostrarDatos").innerHTML = ""; 28 | 29 | var metodo = document.getElementById("casilla").value; 30 | console.log("Este es el metodo: ",metodo) 31 | 32 | if(metodo == 0){ 33 | for(let pos = tamaño; pos > 0; pos--){ 34 | document.getElementById("mostrarDatos").innerHTML += '

Posición: ' + 35 | pos + ': ' + 36 | miArreglo[pos-1] + '

'; 37 | console.log("Este es pos de pila: ",pos); 38 | } 39 | }else{ 40 | for(let pos = 0; pos < tamaño; pos++){ 41 | document.getElementById("mostrarDatos").innerHTML += '

Posición: ' + 42 | (pos + 1) + ': ' + 43 | miArreglo[pos] + '

'; 44 | console.log("Este es el pos de cola: ",pos); 45 | } 46 | } 47 | } 48 | 49 | 50 | -------------------------------------------------------------------------------- /semana4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Semana 4 Trabajando con Arreglos 9 | 10 | 11 |

Practica de operaciones Crud con Arreglos

12 |

Primera practica leer un Arreglo y mostrar su contenido.

13 | 14 |
    15 |
    16 |
    17 |
18 |
19 |

Segunda practica crear o agregar un registro al Arreglo.

20 | 21 | 22 |
23 |

Tercera practica Eliminar el ultimo registro del Arreglo.

24 | 25 |
26 |

Cuarta practica Eliminar el primer registro del Arreglo.

27 | 28 |
29 |

Quinta practica Eliminar una posición del Arreglo.

30 | 31 | 32 |

Sexta practica Editar el contenido de una posición del Arreglo.

33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /semana6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Estuctura de datos Unidad 3 Metodos de Ordenamiento 12 | 13 | 14 |
15 |

Practica con los metodos Pila, Cola y Burbuja

16 |

Metodo Pila

17 |

Formulario de Registro

18 |

19 |

20 |
21 |

25 |

26 |
27 |
28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /semana7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Estuctura de datos Unidad 3 Metodos de Ordenamiento 12 | 13 | 14 |
15 |

Practica con los metodos Pila, Cola y Burbuja

16 |

Metodo Pila

17 |

Formulario de Registro

18 |

19 |

20 |
21 |

27 |

28 |
29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /semana5/codigos.js: -------------------------------------------------------------------------------- 1 | var peliculas = []; 2 | 3 | function agregar(){ 4 | var titulo = document.getElementById('titulo').value; 5 | if(titulo == ""){ 6 | //console.log("No tiene datos"); 7 | alert("Debe Ingresar los datos antes de precionar Agregar"); 8 | } 9 | else{ 10 | //console.log("Si tiene datos"); 11 | alert("Registro Agregado con !Exito!"); 12 | peliculas.push(titulo); 13 | mostrar(); 14 | } 15 | document.getElementById('titulo').value = ""; 16 | } 17 | 18 | function mostrar(){ 19 | document.getElementById("contenido").innerHTML = "" 20 | peliculas.forEach(function(elemento, index){ 21 | document.getElementById("contenido").innerHTML += "" + 22 | 100 + index + "" + elemento + 23 | "" 25 | }); 26 | } 27 | 28 | 29 | function posicion(pos){ 30 | peliculas.splice(pos, 1); 31 | alert("La " + 100 + pos + " posicion del arreglo fue eliminada"); 32 | mostrar(); 33 | } 34 | 35 | 36 | function editar(pos){ 37 | console.log(pos); 38 | document.getElementById('tituloE').value = peliculas[pos]; 39 | document.getElementById('editar').style.display="block"; 40 | document.getElementById("temporal").value = pos; 41 | //mostrar(); 42 | } 43 | 44 | function guardarcambios(){ 45 | console.log("HOla"); 46 | var tituloE = document.getElementById('tituloE').value; 47 | var posi = document.getElementById("temporal").value; 48 | 49 | if(tituloE == ""){ 50 | //console.log("No tiene datos"); 51 | alert("Debe Ingresar los datos antes de precionar Agregar"); 52 | } 53 | else{ 54 | //console.log("Si tiene datos"); 55 | alert("Registro Editado con !Exito!"); 56 | peliculas[posi] = tituloE; 57 | document.getElementById('editar').style.display="none"; 58 | mostrar(); 59 | } 60 | } -------------------------------------------------------------------------------- /semana8/codigo.js: -------------------------------------------------------------------------------- 1 | const miNumeros = [4,20,29,150,60,90]; 2 | console.log(miNumeros); 3 | 4 | function acendente(){ 5 | let burbuja; 6 | for(let x = 0; x < miNumeros.length - 1; x++){ 7 | //console.log("Valor x:", x); 8 | for(let y = x + 1; y < miNumeros.length; y++){ 9 | //console.log("Valor y:", y); 10 | if(miNumeros[x] > miNumeros[y]){ 11 | burbuja = miNumeros[x]; 12 | miNumeros[x] = miNumeros[y]; 13 | miNumeros[y] = burbuja; 14 | } 15 | } 16 | } 17 | } 18 | 19 | function decendente(){ 20 | let burbuja; 21 | for(let x = 0; x < miNumeros.length - 1; x++){ 22 | //console.log("Valor x:", x); 23 | for(let y = x + 1; y < miNumeros.length; y++){ 24 | //console.log("Valor y:", y); 25 | if(miNumeros[x] < miNumeros[y]){ 26 | burbuja = miNumeros[x]; 27 | miNumeros[x] = miNumeros[y]; 28 | miNumeros[y] = burbuja; 29 | } 30 | } 31 | } 32 | } 33 | 34 | /*Crear una función que devuelva: 35 | 1.-La suma de todos los elementos del arreglo 36 | 2.-El promedio 37 | 3- El número más grande 38 | 4.-El número más pequeño 39 | 5.-El número que este antes del promedio 40 | 6.-El número que este despues del promedio*/ 41 | 42 | function magic(){ 43 | let suma = 0; 44 | let promedio = 0; 45 | let antes; 46 | let despues; 47 | let bandera = 0; 48 | for(let x = 0; x < miNumeros.length; x++){ 49 | suma += miNumeros[x]; 50 | } 51 | promedio = suma/miNumeros.length; 52 | console.log("La suma es: ", suma); 53 | console.log("El promedio es: ", promedio); 54 | decendente(); 55 | console.log("EL numero mas grande: ",miNumeros[0]); 56 | acendente(); 57 | console.log("EL numero mas pequeño: ",miNumeros[0]); 58 | for(let x = 0; x < miNumeros.length; x++){ 59 | if(miNumeros[x] < promedio){ 60 | antes = miNumeros[x]; 61 | } 62 | if(miNumeros[x] > promedio && bandera == 0){ 63 | despues = miNumeros[x]; 64 | bandera = 1; 65 | } 66 | } 67 | console.log("EL numero antes del promedio: ",antes); 68 | console.log("EL numero despues del promedio: ",despues); 69 | } -------------------------------------------------------------------------------- /semana1/sesion3.js: -------------------------------------------------------------------------------- 1 | function sumar3(n1, n2, n3){ 2 | n1 = n1 + n2 + n3; 3 | console.log(n1); 4 | return n1; 5 | } 6 | 7 | //Operaciones en javaScrip 8 | //Incrementar y decrementar ++ y -- 9 | 10 | function incremento(valor){ 11 | valor++; 12 | return valor; 13 | } 14 | 15 | function decremento(valor){ 16 | valor--; 17 | return valor; 18 | } 19 | 20 | //Usar Mod o % 21 | 22 | function dividemod(v1, v2){ 23 | v1 = v1 % v2; 24 | return v1; 25 | } 26 | 27 | //Ejemplo de asignación compuesta 28 | function asignacion(miValor){ 29 | //Propuesta 1 miValor = miValor + 20; 30 | miValor += 20; 31 | return miValor; 32 | } 33 | 34 | function asignacion2(miValor){ 35 | //Propuesta 1 miValor = miValor + 20; 36 | miValor -= 20; 37 | return miValor; 38 | } 39 | 40 | function asignacion3(miValor){ 41 | //Propuesta 1 miValor = miValor + 20; 42 | miValor *= 20; 43 | return miValor; 44 | } 45 | 46 | function asignacion4(miValor){ 47 | //Propuesta 1 miValor = miValor + 20; 48 | miValor /= 2; 49 | return miValor; 50 | } 51 | 52 | function miCambio(valor){ 53 | mil = parseInt(valor/1000); 54 | console.log("Billetes de mil: ", mil); 55 | valor %= 1000; 56 | quini = parseInt(valor/500); 57 | console.log("Billetes de quinientos: ", quini); 58 | valor %= 500; 59 | doci = parseInt(valor/200); 60 | console.log("Billetes de docientos: ", doci); 61 | valor %= 200; 62 | cien = parseInt(valor/100); 63 | console.log("Billetes de cien: ", cien); 64 | valor %= 100; 65 | cincuen = parseInt(valor/50); 66 | console.log("Billetes de cincuenta: ", cincuen); 67 | valor %= 50; 68 | veinte = parseInt(valor/20); 69 | console.log("Billetes de veinte: ", veinte); 70 | valor %= 20; 71 | diez = parseInt(valor/10); 72 | console.log("Monedas de diez: ", diez); 73 | valor %= 10; 74 | cinco = parseInt(valor/5); 75 | console.log("Monedas de cinco: ", cinco); 76 | valor %= 5; 77 | dos = parseInt(valor/2); 78 | console.log("Monedas de dos: ", dos); 79 | valor %= 2; 80 | peso = parseInt(valor/1); 81 | console.log("Monedas de peso: ", peso); 82 | valor %= 1; 83 | } 84 | 85 | //Trabajando con if 86 | if(true){ 87 | console.log("Es true"); 88 | } 89 | 90 | if(false){ 91 | console.log("Hola false"); 92 | } 93 | 94 | if(false){ 95 | console.log("Hola false"); 96 | } 97 | else{ 98 | console.log("Hola no false"); 99 | } 100 | 101 | //Primera comparacion 102 | function compara1(n){ 103 | if(n == 10){ 104 | console.log("N vale 10"); 105 | } 106 | else{ 107 | console.log("N no vale 10"); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /semana5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | CRUD DINAMICO CON ARRAY 12 | 13 | 14 |
15 |

Operaciones Crud con Array

16 |

Practica Semana5 Estructuras de datos. Metodo CRUD sobre Arrays.

17 |
18 |
19 |

Formulario de Registro

20 |

Agrege elementos al arreglo de forma dinamica.

21 |
22 | 23 | 24 |
25 |

26 | 27 |

28 |
29 |
30 |

Tabla Registro Peliculas

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
IDNOMBRE PELICULAELIMINAREDITAR
44 |
45 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /semana4/codigo.js: -------------------------------------------------------------------------------- 1 | var paises = ["México","Guatemala","Perú","Chile"]; 2 | var error = []; 3 | 4 | //repaso ejemplo de como asignar y como concatenar un valor 5 | var nombre = "Henrry"; 6 | var apellido = " Manson"; 7 | nombre += apellido; 8 | var dato = 10; 9 | dato += 40; 10 | 11 | //Funcion que recorre el contenido de un arreglo y lo muestra en pantalla 12 | //Para concatenar un resultado de getElementById se le coloca + al = osea += 13 | //Funcion READ 14 | function mostrarPaises(){ 15 | document.getElementById("tablaPaises").innerHTML = ""; 16 | paises.forEach(function(elemento){ 17 | document.getElementById("tablaPaises").innerHTML += "
  • " + elemento + "
    • "; 18 | console.log(elemento); 19 | }); 20 | } 21 | 22 | //Funcion Create 23 | //Funcion para agregar elementos a mi arreglo. 24 | function agregarPaises(){ 25 | dato = document.getElementById("pais").value; 26 | if(dato != ""){ 27 | paises.push(dato); 28 | alert("Dato Registrado con exito!"); 29 | document.getElementById("pais").value = ""; 30 | }else{ 31 | alert("Debes agregar el pais antes de precionar el boton"); 32 | } 33 | 34 | mostrarPaises(); 35 | } 36 | 37 | //Funcion eliminar el ultimo elemento en el array 38 | function eliminarUltimo(){ 39 | //funcion para determiar el tamaño de un arreglo 40 | var tamaño = paises.length; 41 | if(tamaño > 0){ 42 | paises.pop(); 43 | alert("La ultima posicion del arreglo fue eliminada"); 44 | }else{ 45 | alert("El arreglo ya esta vacio"); 46 | } 47 | mostrarPaises(); 48 | } 49 | 50 | //Funcion para eliminar la primera posicion del array 51 | function primeroUltimo(){ 52 | //funcion para determiar el tamaño de un arreglo 53 | var tamaño = paises.length; 54 | if(tamaño > 0){ 55 | paises.shift(); 56 | alert("La primera posicion del arreglo fue eliminada"); 57 | }else{ 58 | alert("El arreglo ya esta vacio"); 59 | } 60 | mostrarPaises(); 61 | } 62 | 63 | //Funcion para eliminar un registro en una posición 64 | function posicion(){ 65 | var pos = document.getElementById("pos").value; 66 | if (pos >= 1){ 67 | if(pos <= paises.length){ 68 | paises.splice(pos-1, 1); 69 | alert("La " + pos + " posicion del arreglo fue eliminada"); 70 | } 71 | else{ 72 | alert("La " + pos + " no esta disponible"); 73 | } 74 | } 75 | else{ 76 | alert("La " + pos + " no esta disponible"); 77 | } 78 | mostrarPaises(); 79 | } 80 | 81 | //Funcion para editar el contenido de una posición 82 | function editar(){ 83 | var pos1 = document.getElementById("pos1").value; 84 | var val1 = document.getElementById("val1").value; 85 | console.log(pos1); 86 | 87 | if (pos1 >= 1){ 88 | if(pos1 <= paises.length){ 89 | paises[pos1-1] = val1; 90 | alert("La " + pos1 + " posicion del arreglo fue Editada"); 91 | } 92 | else{ 93 | alert("La " + pos1 + " no Existe"); 94 | } 95 | } 96 | else{ 97 | alert("La " + pos1 + " no Existe"); 98 | } 99 | mostrarPaises(); 100 | } -------------------------------------------------------------------------------- /semana7/codigo.js: -------------------------------------------------------------------------------- 1 | var miArreglo = []; 2 | 3 | function agregar(){ 4 | //Obtener dato como cadena 5 | var MelDato = document.getElementById("dato").value; 6 | //Convertir en entero 7 | var elDato = parseInt(MelDato); 8 | if(!elDato){ 9 | alert("Coloque un número antes de continuar"); 10 | } 11 | else{ 12 | parseInt(elDato); 13 | miArreglo.push(elDato); 14 | } 15 | 16 | document.getElementById("dato").value=""; 17 | var tamaño1 = miArreglo.length; 18 | console.log("El arreglo mide: ",tamaño1); 19 | 20 | } 21 | 22 | function Mostrar(){ 23 | var tamaño = miArreglo.length; 24 | console.log("El arreglo mide: ",tamaño); 25 | 26 | if(tamaño == 0){ 27 | alert("El Arreglo aun no tiene datos"); 28 | } 29 | 30 | //Limpiar caja y contenedor 31 | document.getElementById("mostrarDatos").innerHTML = ""; 32 | 33 | var metodo = document.getElementById("casilla").value; 34 | console.log("Este es el metodo: ",metodo) 35 | 36 | if(metodo == 0){ 37 | for(let pos = tamaño; pos > 0; pos--){ 38 | document.getElementById("mostrarDatos").innerHTML += '

    Posición: ' + 39 | pos + ': ' + 40 | miArreglo[pos-1] + '

    '; 41 | console.log("Este es pos de pila: ",pos); 42 | } 43 | }else if(metodo == 1){ 44 | for(let pos = 0; pos < tamaño; pos++){ 45 | document.getElementById("mostrarDatos").innerHTML += '

    Posición: ' + 46 | (pos + 1) + ': ' + 47 | miArreglo[pos] + '

    '; 48 | console.log("Este es el pos de cola: ",pos); 49 | } 50 | }else if(metodo == 2){ 51 | console.log("Burbuja Acendente"); 52 | let burbuja; 53 | for(let pos = 0; pos < tamaño-1; pos++){ 54 | for(let pos1 = (pos + 1); pos1 < tamaño; pos1++){ 55 | console.log(pos, "-", miArreglo[pos],pos1, "-", miArreglo[pos1]); 56 | if(miArreglo[pos] > miArreglo[pos1]){ 57 | burbuja = miArreglo[pos]; 58 | miArreglo[pos] = miArreglo[pos1]; 59 | miArreglo[pos1] = burbuja; 60 | console.log("Hay cambio"); 61 | } 62 | } 63 | } 64 | for(let pos = 0; pos < tamaño; pos++){ 65 | document.getElementById("mostrarDatos").innerHTML += '

    Posición: ' + 66 | (pos + 1) + ': ' + 67 | miArreglo[pos] + '

    '; 68 | } 69 | }else{ 70 | console.log("Burbuja Decendente"); 71 | let burbuja; 72 | for(let pos = 0; pos < tamaño-1; pos++){ 73 | for(let pos1 = (pos + 1); pos1 < tamaño; pos1++){ 74 | console.log(pos, "-", miArreglo[pos],pos1, "-", miArreglo[pos1]); 75 | if(miArreglo[pos] < miArreglo[pos1]){ 76 | burbuja = miArreglo[pos]; 77 | miArreglo[pos] = miArreglo[pos1]; 78 | miArreglo[pos1] = burbuja; 79 | console.log("Hay cambio"); 80 | } 81 | } 82 | } 83 | for(let pos = 0; pos < tamaño; pos++){ 84 | document.getElementById("mostrarDatos").innerHTML += '

    Posición: ' + 85 | (pos + 1) + ': ' + 86 | miArreglo[pos] + '

    '; 87 | } 88 | } 89 | 90 | } 91 | 92 | 93 | -------------------------------------------------------------------------------- /semana11/css/bootstrap-reboot.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.2.2 (https://getbootstrap.com/) 3 | * Copyright 2011-2022 The Bootstrap Authors 4 | * Copyright 2011-2022 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color);text-decoration:underline}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 7 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */ -------------------------------------------------------------------------------- /Semana12/codigo.js: -------------------------------------------------------------------------------- 1 | //I - 1 * 2 | //V - 5 3 | //X - 10 * 4 | //L - 50 5 | //C - 100 * 6 | //D - 500 7 | //M - 1000 * No se Pueden escribir mas de 3 veces 8 | 9 | /*Se suman sus valores 10 | Se colocan a la izquierda las letras de mayor valor y a la derecha las de menor valor, su valor se suma. 11 | Las letras M, C, X, I se pueden repetir y colocar hasta tres veces seguidas. 12 | Las letras D, L, V se pueden colocar a la derecha para ser sumado su valor, pero sólo una vez, no se pueden repetir. Ejemplos: 13 | III = 3 14 | XV =15 15 | MM = 2000 16 | CCCLII = 352 17 | A la izquierda de otra, colocada sólo una vez le resta su valor 18 | La letra I colocada a la izquierda de V o de X le resta 1 19 | La letra X colocada a la izquierda de L o de C le resta 10 20 | La letra C colocada a la izquierda de D o de M le resta 100 21 | Cada una de esas letras no se puede restar a otra que sea de un valor que esté a más dos puestos por delante de ella. 22 | Las letras D, L, V no se pueden colocar a la izquierda para restar. 23 | IV = 4 24 | IX = 9 25 | XL =40 26 | XC = 90 27 | CD = 400 28 | CM = 900 29 | Para escribir números mayores de 3999 30 | El valor de una expresión queda multiplicado por mil poniendo una raya horizontal encima.*/ 31 | 32 | 33 | function cambiar(){ 34 | var u = 0; 35 | var d = 0, d1 = 0; 36 | var c = 0, c1 = 0; 37 | var m = 0, m1 = 0; 38 | var resultado = ""; 39 | 40 | var num = document.getElementById("numero").value; 41 | //var num = parseInt(vnum); 42 | 43 | if(num >= 1 && num<=3999){ 44 | console.log("Cumple") 45 | if(num >= 1000){ 46 | m = parseInt(num / 1000); 47 | num = num % 1000; 48 | } 49 | 50 | if(num >= 100){ 51 | c = parseInt(num / 100); 52 | num = num % 100; 53 | } 54 | 55 | if(num >= 10){ 56 | d = parseInt(num / 10); 57 | num = num % 10; 58 | } 59 | 60 | if(num >= 1){ 61 | u = num; 62 | } 63 | 64 | switch (m) { 65 | case 1: 66 | console.log("M") 67 | resultado += "M"; 68 | break; 69 | case 2: 70 | console.log("MM") 71 | resultado += "MM"; 72 | break; 73 | case 3: 74 | console.log("MMM") 75 | resultado += "MMM"; 76 | break; 77 | } 78 | 79 | switch (c) { 80 | case 1: 81 | console.log("C") 82 | resultado += "C"; 83 | break; 84 | case 2: 85 | console.log("CC") 86 | resultado += "CC"; 87 | break; 88 | case 3: 89 | console.log("CCC") 90 | resultado += "CCC"; 91 | break; 92 | case 4: 93 | console.log("CD") 94 | resultado += "CD"; 95 | break; 96 | case 5: 97 | console.log("D") 98 | resultado += "D"; 99 | break; 100 | case 6: 101 | console.log("DC") 102 | resultado += "DC"; 103 | break; 104 | case 7: 105 | console.log("DCC") 106 | resultado += "DCC"; 107 | break; 108 | case 8: 109 | console.log("DCCC") 110 | resultado += "DCCC"; 111 | break; 112 | case 9: 113 | console.log("CM") 114 | resultado += "CM"; 115 | break; 116 | } 117 | 118 | switch (d) { 119 | case 1: 120 | console.log("X") 121 | resultado += "X"; 122 | break; 123 | case 2: 124 | console.log("XX") 125 | resultado += "XX"; 126 | break; 127 | case 3: 128 | console.log("XXX") 129 | resultado += "XXX"; 130 | break; 131 | case 4: 132 | console.log("XL") 133 | resultado += "XL"; 134 | break; 135 | case 5: 136 | console.log("L") 137 | resultado += "L"; 138 | break; 139 | case 6: 140 | console.log("LX") 141 | resultado += "LX"; 142 | break; 143 | case 7: 144 | console.log("LXX") 145 | resultado += "LXX"; 146 | break; 147 | case 8: 148 | console.log("LXXX") 149 | resultado += "LXXX"; 150 | break; 151 | case 9: 152 | console.log("XC") 153 | resultado += "XC"; 154 | break; 155 | } 156 | 157 | switch (u) { 158 | case 1: 159 | console.log("I") 160 | resultado += "I"; 161 | break; 162 | case 2: 163 | console.log("II") 164 | resultado += "II"; 165 | break; 166 | case 3: 167 | console.log("III") 168 | resultado += "III"; 169 | break; 170 | case 4: 171 | console.log("IV") 172 | resultado += "IV"; 173 | break; 174 | case 5: 175 | console.log("V") 176 | resultado += "V"; 177 | break; 178 | case 6: 179 | console.log("VI") 180 | resultado += "VI"; 181 | break; 182 | case 7: 183 | console.log("VII") 184 | resultado += "VII"; 185 | break; 186 | case 8: 187 | console.log("VIII") 188 | resultado += "VIII"; 189 | break; 190 | case 9: 191 | console.log("IX") 192 | resultado += "IX"; 193 | break; 194 | } 195 | 196 | 197 | 198 | console.log("Millares: ", m, " Centenas: ", c, " Decenas: ", d, " Unidades: ",u); 199 | console.log(resultado) 200 | document.getElementById("res").innerHTML = "En Romano: " + resultado; 201 | } 202 | else{ 203 | console.log("No Cumple") 204 | } 205 | } 206 | -------------------------------------------------------------------------------- /semana11/css/bootstrap-reboot.rtl.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.2.2 (https://getbootstrap.com/) 3 | * Copyright 2011-2022 The Bootstrap Authors 4 | * Copyright 2011-2022 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-right:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-right:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color);text-decoration:underline}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:right}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:right;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:right}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}[type=email],[type=number],[type=tel],[type=url]{direction:ltr}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important} 7 | /*# sourceMappingURL=bootstrap-reboot.rtl.min.css.map */ -------------------------------------------------------------------------------- /semana11/codigo.js: -------------------------------------------------------------------------------- 1 | const basedatos = [ 2 | { 3 | id: 1, 4 | nombre: "Patata", 5 | precio: 10, 6 | descripcion: "Papas Blancas de Tierra Negra", 7 | imagen: './assets/1.jpg' 8 | }, 9 | { 10 | id: 2, 11 | nombre: 'Cebolla', 12 | precio: 1.2, 13 | descripcion: "Blanca de Veracruz", 14 | imagen: './assets/2.jpg' 15 | }, 16 | { 17 | id: 3, 18 | nombre: 'Calabacin', 19 | precio: 2.1, 20 | descripcion: "Fresco y Tierno", 21 | imagen: './assets/3.jpg' 22 | }, 23 | { 24 | id: 4, 25 | nombre: 'Fresas', 26 | precio: 0.6, 27 | descripcion: "De la huerta a su mesa", 28 | imagen: './assets/4.jpg' 29 | } 30 | ]; 31 | 32 | let carrito = []; 33 | 34 | const divisa = '$'; 35 | const DOMitems = document.querySelector('#items'); 36 | const DOMcarrito = document.querySelector('#carrito'); 37 | const DOMtotal = document.querySelector('#total'); 38 | const DOMbotonVaciar = document.querySelector('#boton-vaciar'); 39 | 40 | //Funciones 41 | 42 | //Funcion agregar los elemetos del Json a productos 43 | renderizarProductos(); 44 | renderizarCarrito(); 45 | 46 | 47 | 48 | 49 | 50 | function renderizarProductos(){ 51 | basedatos.forEach((info) => { 52 | const miNodo = document.createElement('div'); 53 | miNodo.classList.add('card', 'col-sm-4'); 54 | const miNodoCardBody = document.createElement('div'); 55 | miNodoCardBody.classList.add('card-body'); 56 | // Titulo 57 | const miNodoTitle = document.createElement('h5'); 58 | miNodoTitle.classList.add('card-title'); 59 | miNodoTitle.textContent = info.nombre; 60 | // Subtitulo 61 | const miNodoSubTitle = document.createElement('h6'); 62 | miNodoSubTitle.classList.add('card-subtitle'); 63 | miNodoSubTitle.textContent = info.descripcion; 64 | // Imagen 65 | const miNodoImagen = document.createElement('img'); 66 | miNodoImagen.classList.add('img-fluid'); 67 | miNodoImagen.setAttribute('src', info.imagen); 68 | // Precio 69 | const miNodoPrecio = document.createElement('p'); 70 | miNodoPrecio.classList.add('card-text'); 71 | miNodoPrecio.textContent = `${divisa}${info.precio}`; 72 | // Boton 73 | const miNodoBoton = document.createElement('button'); 74 | miNodoBoton.classList.add('btn', 'btn-primary'); 75 | miNodoBoton.textContent = '+ Agregar'; 76 | miNodoBoton.setAttribute('marcador', info.id); 77 | miNodoBoton.addEventListener('click', anyadirProductoAlCarrito); 78 | 79 | // Insertamos 80 | miNodoCardBody.appendChild(miNodoImagen); 81 | miNodoCardBody.appendChild(miNodoTitle); 82 | miNodoCardBody.appendChild(miNodoSubTitle); 83 | miNodoCardBody.appendChild(miNodoPrecio); 84 | miNodoCardBody.appendChild(miNodoBoton); 85 | miNodo.appendChild(miNodoCardBody); 86 | DOMitems.appendChild(miNodo); 87 | }); 88 | } 89 | 90 | function anyadirProductoAlCarrito(evento) { 91 | // Anyadimos el Nodo a nuestro carrito 92 | carrito.push(evento.target.getAttribute('marcador')) 93 | // Actualizamos el carrito 94 | renderizarCarrito(); 95 | } 96 | 97 | function renderizarCarrito(){ 98 | // Vaciamos todo el html 99 | DOMcarrito.textContent = ''; 100 | // Quitamos los duplicados 101 | const carritoSinDuplicados = [...new Set(carrito)]; 102 | // Generamos los Nodos a partir de carrito 103 | carritoSinDuplicados.forEach((item) => { 104 | // Obtenemos el item que necesitamos de la variable base de datos 105 | const miItem = basedatos.filter((itemBaseDatos) => { 106 | // ¿Coincide las id? Solo puede existir un caso 107 | return itemBaseDatos.id === parseInt(item); 108 | }); 109 | // Cuenta el número de veces que se repite el producto 110 | const numeroUnidadesItem = carrito.reduce((total, itemId) => { 111 | // ¿Coincide las id? Incremento el contador, en caso contrario no mantengo 112 | return itemId === item ? total += 1 : total; 113 | }, 0); 114 | // Creamos el nodo del item del carrito 115 | const miNodo = document.createElement('li'); 116 | miNodo.classList.add('list-group-item', 'text-right', 'mx-2'); 117 | miNodo.textContent = `${numeroUnidadesItem} x ${miItem[0].nombre} - ${miItem[0].precio}${divisa}`; 118 | // Boton de borrar 119 | const miBoton = document.createElement('button'); 120 | miBoton.classList.add('btn', 'btn-danger', 'mx-2'); 121 | miBoton.textContent = 'X'; 122 | miBoton.style.marginLeft = '1rem'; 123 | miBoton.dataset.item = item; 124 | miBoton.addEventListener('click', borrarItemCarrito); 125 | //Boton descontar 126 | const miBoton1 = document.createElement('button'); 127 | miBoton1.classList.add('btn', 'btn-warning', 'mx-2'); 128 | miBoton1.textContent = '-'; 129 | miBoton1.style.marginLeft = '1rem'; 130 | miBoton1.dataset.item = item; 131 | miBoton1.addEventListener('click', borrarItem); 132 | // Mezclamos nodos 133 | miNodo.appendChild(miBoton); 134 | DOMcarrito.appendChild(miNodo); 135 | 136 | miNodo.appendChild(miBoton1); 137 | DOMcarrito.appendChild(miNodo); 138 | }); 139 | // Renderizamos el precio total en el HTML 140 | DOMtotal.textContent = calcularTotal(); 141 | } 142 | 143 | function borrarItemCarrito(evento) { 144 | // Obtenemos el producto ID que hay en el boton pulsado 145 | const id = evento.target.dataset.item; 146 | // Borramos todos los productos 147 | carrito = carrito.filter((carritoId) => { 148 | return carritoId !== id; 149 | }); 150 | // volvemos a renderizar 151 | renderizarCarrito(); 152 | } 153 | 154 | function borrarItem(evento){ 155 | console.log("Entro") 156 | // Obtenemos el producto ID que hay en el boton pulsado 157 | const id = evento.target.dataset.item; 158 | const pos = carrito.indexOf(id); 159 | carrito.splice(pos,1); 160 | console.log(id) 161 | console.log(pos) 162 | renderizarCarrito(); 163 | } 164 | 165 | function calcularTotal() { 166 | // Recorremos el array del carrito 167 | return carrito.reduce((total, item) => { 168 | // De cada elemento obtenemos su precio 169 | const miItem = basedatos.filter((itemBaseDatos) => { 170 | return itemBaseDatos.id === parseInt(item); 171 | }); 172 | // Los sumamos al total 173 | return total + miItem[0].precio; 174 | }, 0).toFixed(2); 175 | } 176 | 177 | function vaciarCarrito() { 178 | // Limpiamos los productos guardados 179 | carrito = []; 180 | // Renderizamos los cambios 181 | renderizarCarrito(); 182 | } 183 | 184 | 185 | -------------------------------------------------------------------------------- /semana11/css/bootstrap-reboot.rtl.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.2.2 (https://getbootstrap.com/) 3 | * Copyright 2011-2022 The Bootstrap Authors 4 | * Copyright 2011-2022 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | :root { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-white-rgb: 255, 255, 255; 48 | --bs-black-rgb: 0, 0, 0; 49 | --bs-body-color-rgb: 33, 37, 41; 50 | --bs-body-bg-rgb: 255, 255, 255; 51 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 52 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 53 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 54 | --bs-body-font-family: var(--bs-font-sans-serif); 55 | --bs-body-font-size: 1rem; 56 | --bs-body-font-weight: 400; 57 | --bs-body-line-height: 1.5; 58 | --bs-body-color: #212529; 59 | --bs-body-bg: #fff; 60 | --bs-border-width: 1px; 61 | --bs-border-style: solid; 62 | --bs-border-color: #dee2e6; 63 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 64 | --bs-border-radius: 0.375rem; 65 | --bs-border-radius-sm: 0.25rem; 66 | --bs-border-radius-lg: 0.5rem; 67 | --bs-border-radius-xl: 1rem; 68 | --bs-border-radius-2xl: 2rem; 69 | --bs-border-radius-pill: 50rem; 70 | --bs-link-color: #0d6efd; 71 | --bs-link-hover-color: #0a58ca; 72 | --bs-code-color: #d63384; 73 | --bs-highlight-bg: #fff3cd; 74 | } 75 | 76 | *, 77 | *::before, 78 | *::after { 79 | box-sizing: border-box; 80 | } 81 | 82 | @media (prefers-reduced-motion: no-preference) { 83 | :root { 84 | scroll-behavior: smooth; 85 | } 86 | } 87 | 88 | body { 89 | margin: 0; 90 | font-family: var(--bs-body-font-family); 91 | font-size: var(--bs-body-font-size); 92 | font-weight: var(--bs-body-font-weight); 93 | line-height: var(--bs-body-line-height); 94 | color: var(--bs-body-color); 95 | text-align: var(--bs-body-text-align); 96 | background-color: var(--bs-body-bg); 97 | -webkit-text-size-adjust: 100%; 98 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 99 | } 100 | 101 | hr { 102 | margin: 1rem 0; 103 | color: inherit; 104 | border: 0; 105 | border-top: 1px solid; 106 | opacity: 0.25; 107 | } 108 | 109 | h6, h5, h4, h3, h2, h1 { 110 | margin-top: 0; 111 | margin-bottom: 0.5rem; 112 | font-weight: 500; 113 | line-height: 1.2; 114 | } 115 | 116 | h1 { 117 | font-size: calc(1.375rem + 1.5vw); 118 | } 119 | @media (min-width: 1200px) { 120 | h1 { 121 | font-size: 2.5rem; 122 | } 123 | } 124 | 125 | h2 { 126 | font-size: calc(1.325rem + 0.9vw); 127 | } 128 | @media (min-width: 1200px) { 129 | h2 { 130 | font-size: 2rem; 131 | } 132 | } 133 | 134 | h3 { 135 | font-size: calc(1.3rem + 0.6vw); 136 | } 137 | @media (min-width: 1200px) { 138 | h3 { 139 | font-size: 1.75rem; 140 | } 141 | } 142 | 143 | h4 { 144 | font-size: calc(1.275rem + 0.3vw); 145 | } 146 | @media (min-width: 1200px) { 147 | h4 { 148 | font-size: 1.5rem; 149 | } 150 | } 151 | 152 | h5 { 153 | font-size: 1.25rem; 154 | } 155 | 156 | h6 { 157 | font-size: 1rem; 158 | } 159 | 160 | p { 161 | margin-top: 0; 162 | margin-bottom: 1rem; 163 | } 164 | 165 | abbr[title] { 166 | -webkit-text-decoration: underline dotted; 167 | text-decoration: underline dotted; 168 | cursor: help; 169 | -webkit-text-decoration-skip-ink: none; 170 | text-decoration-skip-ink: none; 171 | } 172 | 173 | address { 174 | margin-bottom: 1rem; 175 | font-style: normal; 176 | line-height: inherit; 177 | } 178 | 179 | ol, 180 | ul { 181 | padding-right: 2rem; 182 | } 183 | 184 | ol, 185 | ul, 186 | dl { 187 | margin-top: 0; 188 | margin-bottom: 1rem; 189 | } 190 | 191 | ol ol, 192 | ul ul, 193 | ol ul, 194 | ul ol { 195 | margin-bottom: 0; 196 | } 197 | 198 | dt { 199 | font-weight: 700; 200 | } 201 | 202 | dd { 203 | margin-bottom: 0.5rem; 204 | margin-right: 0; 205 | } 206 | 207 | blockquote { 208 | margin: 0 0 1rem; 209 | } 210 | 211 | b, 212 | strong { 213 | font-weight: bolder; 214 | } 215 | 216 | small { 217 | font-size: 0.875em; 218 | } 219 | 220 | mark { 221 | padding: 0.1875em; 222 | background-color: var(--bs-highlight-bg); 223 | } 224 | 225 | sub, 226 | sup { 227 | position: relative; 228 | font-size: 0.75em; 229 | line-height: 0; 230 | vertical-align: baseline; 231 | } 232 | 233 | sub { 234 | bottom: -0.25em; 235 | } 236 | 237 | sup { 238 | top: -0.5em; 239 | } 240 | 241 | a { 242 | color: var(--bs-link-color); 243 | text-decoration: underline; 244 | } 245 | a:hover { 246 | color: var(--bs-link-hover-color); 247 | } 248 | 249 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 250 | color: inherit; 251 | text-decoration: none; 252 | } 253 | 254 | pre, 255 | code, 256 | kbd, 257 | samp { 258 | font-family: var(--bs-font-monospace); 259 | font-size: 1em; 260 | } 261 | 262 | pre { 263 | display: block; 264 | margin-top: 0; 265 | margin-bottom: 1rem; 266 | overflow: auto; 267 | font-size: 0.875em; 268 | } 269 | pre code { 270 | font-size: inherit; 271 | color: inherit; 272 | word-break: normal; 273 | } 274 | 275 | code { 276 | font-size: 0.875em; 277 | color: var(--bs-code-color); 278 | word-wrap: break-word; 279 | } 280 | a > code { 281 | color: inherit; 282 | } 283 | 284 | kbd { 285 | padding: 0.1875rem 0.375rem; 286 | font-size: 0.875em; 287 | color: var(--bs-body-bg); 288 | background-color: var(--bs-body-color); 289 | border-radius: 0.25rem; 290 | } 291 | kbd kbd { 292 | padding: 0; 293 | font-size: 1em; 294 | } 295 | 296 | figure { 297 | margin: 0 0 1rem; 298 | } 299 | 300 | img, 301 | svg { 302 | vertical-align: middle; 303 | } 304 | 305 | table { 306 | caption-side: bottom; 307 | border-collapse: collapse; 308 | } 309 | 310 | caption { 311 | padding-top: 0.5rem; 312 | padding-bottom: 0.5rem; 313 | color: #6c757d; 314 | text-align: right; 315 | } 316 | 317 | th { 318 | text-align: inherit; 319 | text-align: -webkit-match-parent; 320 | } 321 | 322 | thead, 323 | tbody, 324 | tfoot, 325 | tr, 326 | td, 327 | th { 328 | border-color: inherit; 329 | border-style: solid; 330 | border-width: 0; 331 | } 332 | 333 | label { 334 | display: inline-block; 335 | } 336 | 337 | button { 338 | border-radius: 0; 339 | } 340 | 341 | button:focus:not(:focus-visible) { 342 | outline: 0; 343 | } 344 | 345 | input, 346 | button, 347 | select, 348 | optgroup, 349 | textarea { 350 | margin: 0; 351 | font-family: inherit; 352 | font-size: inherit; 353 | line-height: inherit; 354 | } 355 | 356 | button, 357 | select { 358 | text-transform: none; 359 | } 360 | 361 | [role=button] { 362 | cursor: pointer; 363 | } 364 | 365 | select { 366 | word-wrap: normal; 367 | } 368 | select:disabled { 369 | opacity: 1; 370 | } 371 | 372 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 373 | display: none !important; 374 | } 375 | 376 | button, 377 | [type=button], 378 | [type=reset], 379 | [type=submit] { 380 | -webkit-appearance: button; 381 | } 382 | button:not(:disabled), 383 | [type=button]:not(:disabled), 384 | [type=reset]:not(:disabled), 385 | [type=submit]:not(:disabled) { 386 | cursor: pointer; 387 | } 388 | 389 | ::-moz-focus-inner { 390 | padding: 0; 391 | border-style: none; 392 | } 393 | 394 | textarea { 395 | resize: vertical; 396 | } 397 | 398 | fieldset { 399 | min-width: 0; 400 | padding: 0; 401 | margin: 0; 402 | border: 0; 403 | } 404 | 405 | legend { 406 | float: right; 407 | width: 100%; 408 | padding: 0; 409 | margin-bottom: 0.5rem; 410 | font-size: calc(1.275rem + 0.3vw); 411 | line-height: inherit; 412 | } 413 | @media (min-width: 1200px) { 414 | legend { 415 | font-size: 1.5rem; 416 | } 417 | } 418 | legend + * { 419 | clear: right; 420 | } 421 | 422 | ::-webkit-datetime-edit-fields-wrapper, 423 | ::-webkit-datetime-edit-text, 424 | ::-webkit-datetime-edit-minute, 425 | ::-webkit-datetime-edit-hour-field, 426 | ::-webkit-datetime-edit-day-field, 427 | ::-webkit-datetime-edit-month-field, 428 | ::-webkit-datetime-edit-year-field { 429 | padding: 0; 430 | } 431 | 432 | ::-webkit-inner-spin-button { 433 | height: auto; 434 | } 435 | 436 | [type=search] { 437 | outline-offset: -2px; 438 | -webkit-appearance: textfield; 439 | } 440 | 441 | [type="tel"], 442 | [type="url"], 443 | [type="email"], 444 | [type="number"] { 445 | direction: ltr; 446 | } 447 | ::-webkit-search-decoration { 448 | -webkit-appearance: none; 449 | } 450 | 451 | ::-webkit-color-swatch-wrapper { 452 | padding: 0; 453 | } 454 | 455 | ::-webkit-file-upload-button { 456 | font: inherit; 457 | -webkit-appearance: button; 458 | } 459 | 460 | ::file-selector-button { 461 | font: inherit; 462 | -webkit-appearance: button; 463 | } 464 | 465 | output { 466 | display: inline-block; 467 | } 468 | 469 | iframe { 470 | border: 0; 471 | } 472 | 473 | summary { 474 | display: list-item; 475 | cursor: pointer; 476 | } 477 | 478 | progress { 479 | vertical-align: baseline; 480 | } 481 | 482 | [hidden] { 483 | display: none !important; 484 | } 485 | /*# sourceMappingURL=bootstrap-reboot.rtl.css.map */ -------------------------------------------------------------------------------- /semana11/css/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.2.2 (https://getbootstrap.com/) 3 | * Copyright 2011-2022 The Bootstrap Authors 4 | * Copyright 2011-2022 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | :root { 8 | --bs-blue: #0d6efd; 9 | --bs-indigo: #6610f2; 10 | --bs-purple: #6f42c1; 11 | --bs-pink: #d63384; 12 | --bs-red: #dc3545; 13 | --bs-orange: #fd7e14; 14 | --bs-yellow: #ffc107; 15 | --bs-green: #198754; 16 | --bs-teal: #20c997; 17 | --bs-cyan: #0dcaf0; 18 | --bs-black: #000; 19 | --bs-white: #fff; 20 | --bs-gray: #6c757d; 21 | --bs-gray-dark: #343a40; 22 | --bs-gray-100: #f8f9fa; 23 | --bs-gray-200: #e9ecef; 24 | --bs-gray-300: #dee2e6; 25 | --bs-gray-400: #ced4da; 26 | --bs-gray-500: #adb5bd; 27 | --bs-gray-600: #6c757d; 28 | --bs-gray-700: #495057; 29 | --bs-gray-800: #343a40; 30 | --bs-gray-900: #212529; 31 | --bs-primary: #0d6efd; 32 | --bs-secondary: #6c757d; 33 | --bs-success: #198754; 34 | --bs-info: #0dcaf0; 35 | --bs-warning: #ffc107; 36 | --bs-danger: #dc3545; 37 | --bs-light: #f8f9fa; 38 | --bs-dark: #212529; 39 | --bs-primary-rgb: 13, 110, 253; 40 | --bs-secondary-rgb: 108, 117, 125; 41 | --bs-success-rgb: 25, 135, 84; 42 | --bs-info-rgb: 13, 202, 240; 43 | --bs-warning-rgb: 255, 193, 7; 44 | --bs-danger-rgb: 220, 53, 69; 45 | --bs-light-rgb: 248, 249, 250; 46 | --bs-dark-rgb: 33, 37, 41; 47 | --bs-white-rgb: 255, 255, 255; 48 | --bs-black-rgb: 0, 0, 0; 49 | --bs-body-color-rgb: 33, 37, 41; 50 | --bs-body-bg-rgb: 255, 255, 255; 51 | --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 52 | --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 53 | --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); 54 | --bs-body-font-family: var(--bs-font-sans-serif); 55 | --bs-body-font-size: 1rem; 56 | --bs-body-font-weight: 400; 57 | --bs-body-line-height: 1.5; 58 | --bs-body-color: #212529; 59 | --bs-body-bg: #fff; 60 | --bs-border-width: 1px; 61 | --bs-border-style: solid; 62 | --bs-border-color: #dee2e6; 63 | --bs-border-color-translucent: rgba(0, 0, 0, 0.175); 64 | --bs-border-radius: 0.375rem; 65 | --bs-border-radius-sm: 0.25rem; 66 | --bs-border-radius-lg: 0.5rem; 67 | --bs-border-radius-xl: 1rem; 68 | --bs-border-radius-2xl: 2rem; 69 | --bs-border-radius-pill: 50rem; 70 | --bs-link-color: #0d6efd; 71 | --bs-link-hover-color: #0a58ca; 72 | --bs-code-color: #d63384; 73 | --bs-highlight-bg: #fff3cd; 74 | } 75 | 76 | *, 77 | *::before, 78 | *::after { 79 | box-sizing: border-box; 80 | } 81 | 82 | @media (prefers-reduced-motion: no-preference) { 83 | :root { 84 | scroll-behavior: smooth; 85 | } 86 | } 87 | 88 | body { 89 | margin: 0; 90 | font-family: var(--bs-body-font-family); 91 | font-size: var(--bs-body-font-size); 92 | font-weight: var(--bs-body-font-weight); 93 | line-height: var(--bs-body-line-height); 94 | color: var(--bs-body-color); 95 | text-align: var(--bs-body-text-align); 96 | background-color: var(--bs-body-bg); 97 | -webkit-text-size-adjust: 100%; 98 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 99 | } 100 | 101 | hr { 102 | margin: 1rem 0; 103 | color: inherit; 104 | border: 0; 105 | border-top: 1px solid; 106 | opacity: 0.25; 107 | } 108 | 109 | h6, h5, h4, h3, h2, h1 { 110 | margin-top: 0; 111 | margin-bottom: 0.5rem; 112 | font-weight: 500; 113 | line-height: 1.2; 114 | } 115 | 116 | h1 { 117 | font-size: calc(1.375rem + 1.5vw); 118 | } 119 | @media (min-width: 1200px) { 120 | h1 { 121 | font-size: 2.5rem; 122 | } 123 | } 124 | 125 | h2 { 126 | font-size: calc(1.325rem + 0.9vw); 127 | } 128 | @media (min-width: 1200px) { 129 | h2 { 130 | font-size: 2rem; 131 | } 132 | } 133 | 134 | h3 { 135 | font-size: calc(1.3rem + 0.6vw); 136 | } 137 | @media (min-width: 1200px) { 138 | h3 { 139 | font-size: 1.75rem; 140 | } 141 | } 142 | 143 | h4 { 144 | font-size: calc(1.275rem + 0.3vw); 145 | } 146 | @media (min-width: 1200px) { 147 | h4 { 148 | font-size: 1.5rem; 149 | } 150 | } 151 | 152 | h5 { 153 | font-size: 1.25rem; 154 | } 155 | 156 | h6 { 157 | font-size: 1rem; 158 | } 159 | 160 | p { 161 | margin-top: 0; 162 | margin-bottom: 1rem; 163 | } 164 | 165 | abbr[title] { 166 | -webkit-text-decoration: underline dotted; 167 | text-decoration: underline dotted; 168 | cursor: help; 169 | -webkit-text-decoration-skip-ink: none; 170 | text-decoration-skip-ink: none; 171 | } 172 | 173 | address { 174 | margin-bottom: 1rem; 175 | font-style: normal; 176 | line-height: inherit; 177 | } 178 | 179 | ol, 180 | ul { 181 | padding-left: 2rem; 182 | } 183 | 184 | ol, 185 | ul, 186 | dl { 187 | margin-top: 0; 188 | margin-bottom: 1rem; 189 | } 190 | 191 | ol ol, 192 | ul ul, 193 | ol ul, 194 | ul ol { 195 | margin-bottom: 0; 196 | } 197 | 198 | dt { 199 | font-weight: 700; 200 | } 201 | 202 | dd { 203 | margin-bottom: 0.5rem; 204 | margin-left: 0; 205 | } 206 | 207 | blockquote { 208 | margin: 0 0 1rem; 209 | } 210 | 211 | b, 212 | strong { 213 | font-weight: bolder; 214 | } 215 | 216 | small { 217 | font-size: 0.875em; 218 | } 219 | 220 | mark { 221 | padding: 0.1875em; 222 | background-color: var(--bs-highlight-bg); 223 | } 224 | 225 | sub, 226 | sup { 227 | position: relative; 228 | font-size: 0.75em; 229 | line-height: 0; 230 | vertical-align: baseline; 231 | } 232 | 233 | sub { 234 | bottom: -0.25em; 235 | } 236 | 237 | sup { 238 | top: -0.5em; 239 | } 240 | 241 | a { 242 | color: var(--bs-link-color); 243 | text-decoration: underline; 244 | } 245 | a:hover { 246 | color: var(--bs-link-hover-color); 247 | } 248 | 249 | a:not([href]):not([class]), a:not([href]):not([class]):hover { 250 | color: inherit; 251 | text-decoration: none; 252 | } 253 | 254 | pre, 255 | code, 256 | kbd, 257 | samp { 258 | font-family: var(--bs-font-monospace); 259 | font-size: 1em; 260 | } 261 | 262 | pre { 263 | display: block; 264 | margin-top: 0; 265 | margin-bottom: 1rem; 266 | overflow: auto; 267 | font-size: 0.875em; 268 | } 269 | pre code { 270 | font-size: inherit; 271 | color: inherit; 272 | word-break: normal; 273 | } 274 | 275 | code { 276 | font-size: 0.875em; 277 | color: var(--bs-code-color); 278 | word-wrap: break-word; 279 | } 280 | a > code { 281 | color: inherit; 282 | } 283 | 284 | kbd { 285 | padding: 0.1875rem 0.375rem; 286 | font-size: 0.875em; 287 | color: var(--bs-body-bg); 288 | background-color: var(--bs-body-color); 289 | border-radius: 0.25rem; 290 | } 291 | kbd kbd { 292 | padding: 0; 293 | font-size: 1em; 294 | } 295 | 296 | figure { 297 | margin: 0 0 1rem; 298 | } 299 | 300 | img, 301 | svg { 302 | vertical-align: middle; 303 | } 304 | 305 | table { 306 | caption-side: bottom; 307 | border-collapse: collapse; 308 | } 309 | 310 | caption { 311 | padding-top: 0.5rem; 312 | padding-bottom: 0.5rem; 313 | color: #6c757d; 314 | text-align: left; 315 | } 316 | 317 | th { 318 | text-align: inherit; 319 | text-align: -webkit-match-parent; 320 | } 321 | 322 | thead, 323 | tbody, 324 | tfoot, 325 | tr, 326 | td, 327 | th { 328 | border-color: inherit; 329 | border-style: solid; 330 | border-width: 0; 331 | } 332 | 333 | label { 334 | display: inline-block; 335 | } 336 | 337 | button { 338 | border-radius: 0; 339 | } 340 | 341 | button:focus:not(:focus-visible) { 342 | outline: 0; 343 | } 344 | 345 | input, 346 | button, 347 | select, 348 | optgroup, 349 | textarea { 350 | margin: 0; 351 | font-family: inherit; 352 | font-size: inherit; 353 | line-height: inherit; 354 | } 355 | 356 | button, 357 | select { 358 | text-transform: none; 359 | } 360 | 361 | [role=button] { 362 | cursor: pointer; 363 | } 364 | 365 | select { 366 | word-wrap: normal; 367 | } 368 | select:disabled { 369 | opacity: 1; 370 | } 371 | 372 | [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { 373 | display: none !important; 374 | } 375 | 376 | button, 377 | [type=button], 378 | [type=reset], 379 | [type=submit] { 380 | -webkit-appearance: button; 381 | } 382 | button:not(:disabled), 383 | [type=button]:not(:disabled), 384 | [type=reset]:not(:disabled), 385 | [type=submit]:not(:disabled) { 386 | cursor: pointer; 387 | } 388 | 389 | ::-moz-focus-inner { 390 | padding: 0; 391 | border-style: none; 392 | } 393 | 394 | textarea { 395 | resize: vertical; 396 | } 397 | 398 | fieldset { 399 | min-width: 0; 400 | padding: 0; 401 | margin: 0; 402 | border: 0; 403 | } 404 | 405 | legend { 406 | float: left; 407 | width: 100%; 408 | padding: 0; 409 | margin-bottom: 0.5rem; 410 | font-size: calc(1.275rem + 0.3vw); 411 | line-height: inherit; 412 | } 413 | @media (min-width: 1200px) { 414 | legend { 415 | font-size: 1.5rem; 416 | } 417 | } 418 | legend + * { 419 | clear: left; 420 | } 421 | 422 | ::-webkit-datetime-edit-fields-wrapper, 423 | ::-webkit-datetime-edit-text, 424 | ::-webkit-datetime-edit-minute, 425 | ::-webkit-datetime-edit-hour-field, 426 | ::-webkit-datetime-edit-day-field, 427 | ::-webkit-datetime-edit-month-field, 428 | ::-webkit-datetime-edit-year-field { 429 | padding: 0; 430 | } 431 | 432 | ::-webkit-inner-spin-button { 433 | height: auto; 434 | } 435 | 436 | [type=search] { 437 | outline-offset: -2px; 438 | -webkit-appearance: textfield; 439 | } 440 | 441 | /* rtl:raw: 442 | [type="tel"], 443 | [type="url"], 444 | [type="email"], 445 | [type="number"] { 446 | direction: ltr; 447 | } 448 | */ 449 | ::-webkit-search-decoration { 450 | -webkit-appearance: none; 451 | } 452 | 453 | ::-webkit-color-swatch-wrapper { 454 | padding: 0; 455 | } 456 | 457 | ::-webkit-file-upload-button { 458 | font: inherit; 459 | -webkit-appearance: button; 460 | } 461 | 462 | ::file-selector-button { 463 | font: inherit; 464 | -webkit-appearance: button; 465 | } 466 | 467 | output { 468 | display: inline-block; 469 | } 470 | 471 | iframe { 472 | border: 0; 473 | } 474 | 475 | summary { 476 | display: list-item; 477 | cursor: pointer; 478 | } 479 | 480 | progress { 481 | vertical-align: baseline; 482 | } 483 | 484 | [hidden] { 485 | display: none !important; 486 | } 487 | 488 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /semana11/css/bootstrap-reboot.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../scss/mixins/_banner.scss","../../scss/_root.scss","../../scss/vendor/_rfs.scss","../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","../../scss/mixins/_border-radius.scss"],"names":[],"mappings":"AACE;;;;;ACDF,MAQI,UAAA,QAAA,YAAA,QAAA,YAAA,QAAA,UAAA,QAAA,SAAA,QAAA,YAAA,QAAA,YAAA,QAAA,WAAA,QAAA,UAAA,QAAA,UAAA,QAAA,WAAA,KAAA,WAAA,KAAA,UAAA,QAAA,eAAA,QAIA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAAA,cAAA,QAIA,aAAA,QAAA,eAAA,QAAA,aAAA,QAAA,UAAA,QAAA,aAAA,QAAA,YAAA,QAAA,WAAA,QAAA,UAAA,QAIA,iBAAA,EAAA,CAAA,GAAA,CAAA,IAAA,mBAAA,GAAA,CAAA,GAAA,CAAA,IAAA,iBAAA,EAAA,CAAA,GAAA,CAAA,GAAA,cAAA,EAAA,CAAA,GAAA,CAAA,IAAA,iBAAA,GAAA,CAAA,GAAA,CAAA,EAAA,gBAAA,GAAA,CAAA,EAAA,CAAA,GAAA,eAAA,GAAA,CAAA,GAAA,CAAA,IAAA,cAAA,EAAA,CAAA,EAAA,CAAA,GAGF,eAAA,GAAA,CAAA,GAAA,CAAA,IACA,eAAA,CAAA,CAAA,CAAA,CAAA,EACA,oBAAA,EAAA,CAAA,EAAA,CAAA,GACA,iBAAA,GAAA,CAAA,GAAA,CAAA,IAMA,qBAAA,SAAA,CAAA,aAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,mBACA,oBAAA,cAAA,CAAA,KAAA,CAAA,MAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,UACA,cAAA,2EAOA,sBAAA,0BC4PI,oBAAA,KD1PJ,sBAAA,IACA,sBAAA,IACA,gBAAA,QAIA,aAAA,KAIA,kBAAA,IACA,kBAAA,MACA,kBAAA,QACA,8BAAA,qBAEA,mBAAA,SACA,sBAAA,QACA,sBAAA,OACA,sBAAA,KACA,uBAAA,KACA,wBAAA,MAGA,gBAAA,QACA,sBAAA,QAEA,gBAAA,QAEA,kBAAA,QExDF,EC8DA,QADA,SD1DE,WAAA,WAeE,8CANJ,MAOM,gBAAA,QAcN,KACE,OAAA,EACA,YAAA,2BDmPI,UAAA,yBCjPJ,YAAA,2BACA,YAAA,2BACA,MAAA,qBACA,WAAA,0BACA,iBAAA,kBACA,yBAAA,KACA,4BAAA,YASF,GACE,OAAA,KAAA,EACA,MAAA,QACA,OAAA,EACA,WAAA,IAAA,MACA,QAAA,IAUF,GAAA,GAAA,GAAA,GAAA,GAAA,GACE,WAAA,EACA,cAAA,MAGA,YAAA,IACA,YAAA,IAIF,GD6MQ,UAAA,uBAlKJ,0BC3CJ,GDoNQ,UAAA,QC/MR,GDwMQ,UAAA,sBAlKJ,0BCtCJ,GD+MQ,UAAA,MC1MR,GDmMQ,UAAA,oBAlKJ,0BCjCJ,GD0MQ,UAAA,SCrMR,GD8LQ,UAAA,sBAlKJ,0BC5BJ,GDqMQ,UAAA,QChMR,GDqLM,UAAA,QChLN,GDgLM,UAAA,KCrKN,EACE,WAAA,EACA,cAAA,KAUF,YACE,wBAAA,UAAA,OAAA,gBAAA,UAAA,OACA,OAAA,KACA,iCAAA,KAAA,yBAAA,KAMF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QAMF,GCqBA,GDnBE,aAAA,KCyBF,GDtBA,GCqBA,GDlBE,WAAA,EACA,cAAA,KAGF,MCsBA,MACA,MAFA,MDjBE,cAAA,EAGF,GACE,YAAA,IAKF,GACE,cAAA,MACA,YAAA,EAMF,WACE,OAAA,EAAA,EAAA,KAQF,ECWA,ODTE,YAAA,OAQF,MDmFM,UAAA,OC5EN,KACE,QAAA,QACA,iBAAA,uBASF,ICHA,IDKE,SAAA,SD+DI,UAAA,MC7DJ,YAAA,EACA,eAAA,SAGF,IAAM,OAAA,OACN,IAAM,IAAA,MAKN,EACE,MAAA,qBACA,gBAAA,UAEA,QACE,MAAA,2BAWF,2BAAA,iCAEE,MAAA,QACA,gBAAA,KCPJ,KACA,IDaA,ICZA,KDgBE,YAAA,yBDqBI,UAAA,ICbN,IACE,QAAA,MACA,WAAA,EACA,cAAA,KACA,SAAA,KDSI,UAAA,OCJJ,SDII,UAAA,QCFF,MAAA,QACA,WAAA,OAIJ,KDHM,UAAA,OCKJ,MAAA,qBACA,UAAA,WAGA,OACE,MAAA,QAIJ,IACE,QAAA,SAAA,QDfI,UAAA,OCiBJ,MAAA,kBACA,iBAAA,qBEpSE,cAAA,OFuSF,QACE,QAAA,EDtBE,UAAA,ICiCN,OACE,OAAA,EAAA,EAAA,KAMF,ICjCA,IDmCE,eAAA,OAQF,MACE,aAAA,OACA,gBAAA,SAGF,QACE,YAAA,MACA,eAAA,MACA,MAAA,QACA,WAAA,KAOF,GAEE,WAAA,QACA,WAAA,qBCxCF,MAGA,GAFA,MAGA,GDuCA,MCzCA,GD+CE,aAAA,QACA,aAAA,MACA,aAAA,EAQF,MACE,QAAA,aAMF,OAEE,cAAA,EAQF,iCACE,QAAA,ECtDF,OD2DA,MCzDA,SADA,OAEA,SD6DE,OAAA,EACA,YAAA,QDrHI,UAAA,QCuHJ,YAAA,QAIF,OC5DA,OD8DE,eAAA,KAKF,cACE,OAAA,QAGF,OAGE,UAAA,OAGA,gBACE,QAAA,EAOJ,0IACE,QAAA,eClEF,cACA,aACA,cDwEA,OAIE,mBAAA,OCxEF,6BACA,4BACA,6BDyEI,sBACE,OAAA,QAON,mBACE,QAAA,EACA,aAAA,KAKF,SACE,OAAA,SAUF,SACE,UAAA,EACA,QAAA,EACA,OAAA,EACA,OAAA,EAQF,OACE,MAAA,KACA,MAAA,KACA,QAAA,EACA,cAAA,MD1MM,UAAA,sBC6MN,YAAA,QD/WE,0BCwWJ,OD/LQ,UAAA,QCwMN,SACE,MAAA,KChFJ,kCDuFA,uCCxFA,mCADA,+BAGA,oCAJA,6BAKA,mCD4FE,QAAA,EAGF,4BACE,OAAA,KASF,cACE,eAAA,KACA,mBAAA,UAmBF,4BACE,mBAAA,KAKF,+BACE,QAAA,EAOF,6BACE,KAAA,QACA,mBAAA,OAFF,uBACE,KAAA,QACA,mBAAA,OAKF,OACE,QAAA,aAKF,OACE,OAAA,EAOF,QACE,QAAA,UACA,OAAA,QAQF,SACE,eAAA,SAQF,SACE,QAAA","sourcesContent":["@mixin bsBanner($file) {\n /*!\n * Bootstrap #{$file} v5.2.2 (https://getbootstrap.com/)\n * Copyright 2011-2022 The Bootstrap Authors\n * Copyright 2011-2022 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n}\n\n",":root {\n // Note: Custom variable values only support SassScript inside `#{}`.\n\n // Colors\n //\n // Generate palettes for full colors, grays, and theme colors.\n\n @each $color, $value in $colors {\n --#{$prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $grays {\n --#{$prefix}gray-#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors-rgb {\n --#{$prefix}#{$color}-rgb: #{$value};\n }\n\n --#{$prefix}white-rgb: #{to-rgb($white)};\n --#{$prefix}black-rgb: #{to-rgb($black)};\n --#{$prefix}body-color-rgb: #{to-rgb($body-color)};\n --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};\n\n // Fonts\n\n // Note: Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n --#{$prefix}font-monospace: #{inspect($font-family-monospace)};\n --#{$prefix}gradient: #{$gradient};\n\n // Root and body\n // scss-docs-start root-body-variables\n @if $font-size-root != null {\n --#{$prefix}root-font-size: #{$font-size-root};\n }\n --#{$prefix}body-font-family: #{$font-family-base};\n @include rfs($font-size-base, --#{$prefix}body-font-size);\n --#{$prefix}body-font-weight: #{$font-weight-base};\n --#{$prefix}body-line-height: #{$line-height-base};\n --#{$prefix}body-color: #{$body-color};\n @if $body-text-align != null {\n --#{$prefix}body-text-align: #{$body-text-align};\n }\n --#{$prefix}body-bg: #{$body-bg};\n // scss-docs-end root-body-variables\n\n // scss-docs-start root-border-var\n --#{$prefix}border-width: #{$border-width};\n --#{$prefix}border-style: #{$border-style};\n --#{$prefix}border-color: #{$border-color};\n --#{$prefix}border-color-translucent: #{$border-color-translucent};\n\n --#{$prefix}border-radius: #{$border-radius};\n --#{$prefix}border-radius-sm: #{$border-radius-sm};\n --#{$prefix}border-radius-lg: #{$border-radius-lg};\n --#{$prefix}border-radius-xl: #{$border-radius-xl};\n --#{$prefix}border-radius-2xl: #{$border-radius-2xl};\n --#{$prefix}border-radius-pill: #{$border-radius-pill};\n // scss-docs-end root-border-var\n\n --#{$prefix}link-color: #{$link-color};\n --#{$prefix}link-hover-color: #{$link-hover-color};\n\n --#{$prefix}code-color: #{$code-color};\n\n --#{$prefix}highlight-bg: #{$mark-bg};\n}\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated responsive values for font sizes, paddings, margins and much more\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)\n\n// Configuration\n\n// Base value\n$rfs-base-value: 1.25rem !default;\n$rfs-unit: rem !default;\n\n@if $rfs-unit != rem and $rfs-unit != px {\n @error \"`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.\";\n}\n\n// Breakpoint at where values start decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n}\n\n// Resize values based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != number or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Mode. Possibilities: \"min-media-query\", \"max-media-query\"\n$rfs-mode: min-media-query !default;\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-rfs to false\n$enable-rfs: true !default;\n\n// Cache $rfs-base-value unit\n$rfs-base-value-unit: unit($rfs-base-value);\n\n@function divide($dividend, $divisor, $precision: 10) {\n $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n $dividend: abs($dividend);\n $divisor: abs($divisor);\n @if $dividend == 0 {\n @return 0;\n }\n @if $divisor == 0 {\n @error \"Cannot divide by 0\";\n }\n $remainder: $dividend;\n $result: 0;\n $factor: 10;\n @while ($remainder > 0 and $precision >= 0) {\n $quotient: 0;\n @while ($remainder >= $divisor) {\n $remainder: $remainder - $divisor;\n $quotient: $quotient + 1;\n }\n $result: $result * 10 + $quotient;\n $factor: $factor * .1;\n $remainder: $remainder * 10;\n $precision: $precision - 1;\n @if ($precision < 0 and $remainder >= $divisor * 5) {\n $result: $result + 1;\n }\n }\n $result: $result * $factor * $sign;\n $dividend-unit: unit($dividend);\n $divisor-unit: unit($divisor);\n $unit-map: (\n \"px\": 1px,\n \"rem\": 1rem,\n \"em\": 1em,\n \"%\": 1%\n );\n @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n $result: $result * map-get($unit-map, $dividend-unit);\n }\n @return $result;\n}\n\n// Remove px-unit from $rfs-base-value for calculations\n@if $rfs-base-value-unit == px {\n $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);\n}\n@else if $rfs-base-value-unit == rem {\n $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == px {\n $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Calculate the media query value\n$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);\n$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query {\n @if $rfs-two-dimensional {\n @if $rfs-mode == max-media-query {\n @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n @content;\n }\n }\n @else {\n @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n @content;\n }\n }\n }\n @else {\n @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {\n @content;\n }\n }\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-rule {\n @if $rfs-class == disable and $rfs-mode == max-media-query {\n // Adding an extra class increases specificity, which prevents the media query to override the property\n &,\n .disable-rfs &,\n &.disable-rfs {\n @content;\n }\n }\n @else if $rfs-class == enable and $rfs-mode == min-media-query {\n .enable-rfs &,\n &.enable-rfs {\n @content;\n }\n }\n @else {\n @content;\n }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-media-query-rule {\n\n @if $rfs-class == enable {\n @if $rfs-mode == min-media-query {\n @content;\n }\n\n @include _rfs-media-query {\n .enable-rfs &,\n &.enable-rfs {\n @content;\n }\n }\n }\n @else {\n @if $rfs-class == disable and $rfs-mode == min-media-query {\n .disable-rfs &,\n &.disable-rfs {\n @content;\n }\n }\n @include _rfs-media-query {\n @content;\n }\n }\n}\n\n// Helper function to get the formatted non-responsive value\n@function rfs-value($values) {\n // Convert to list\n $values: if(type-of($values) != list, ($values,), $values);\n\n $val: '';\n\n // Loop over each value and calculate value\n @each $value in $values {\n @if $value == 0 {\n $val: $val + ' 0';\n }\n @else {\n // Cache $value unit\n $unit: if(type-of($value) == \"number\", unit($value), false);\n\n @if $unit == px {\n // Convert to rem if needed\n $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);\n }\n @else if $unit == rem {\n // Convert to px if needed\n $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);\n }\n @else {\n // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n $val: $val + ' ' + $value;\n }\n }\n }\n\n // Remove first space\n @return unquote(str-slice($val, 2));\n}\n\n// Helper function to get the responsive value calculated by RFS\n@function rfs-fluid-value($values) {\n // Convert to list\n $values: if(type-of($values) != list, ($values,), $values);\n\n $val: '';\n\n // Loop over each value and calculate value\n @each $value in $values {\n @if $value == 0 {\n $val: $val + ' 0';\n }\n\n @else {\n // Cache $value unit\n $unit: if(type-of($value) == \"number\", unit($value), false);\n\n // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $unit or $unit != px and $unit != rem {\n $val: $val + ' ' + $value;\n }\n\n @else {\n // Remove unit from $value for calculations\n $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));\n\n // Only add the media query if the value is greater than the minimum value\n @if abs($value) <= $rfs-base-value or not $enable-rfs {\n $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);\n }\n @else {\n // Calculate the minimum value\n $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);\n\n // Calculate difference between $value and the minimum value\n $value-diff: abs($value) - $value-min;\n\n // Base value formatting\n $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);\n\n // Use negative value if needed\n $min-width: if($value < 0, -$min-width, $min-width);\n\n // Use `vmin` if two-dimensional is enabled\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n // Return the calculated value\n $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';\n }\n }\n }\n }\n\n // Remove first space\n @return unquote(str-slice($val, 2));\n}\n\n// RFS mixin\n@mixin rfs($values, $property: font-size) {\n @if $values != null {\n $val: rfs-value($values);\n $fluidVal: rfs-fluid-value($values);\n\n // Do not print the media query if responsive & non-responsive values are the same\n @if $val == $fluidVal {\n #{$property}: $val;\n }\n @else {\n @include _rfs-rule {\n #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);\n\n // Include safari iframe resize fix if needed\n min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n }\n\n @include _rfs-media-query-rule {\n #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);\n }\n }\n }\n}\n\n// Shorthand helper mixins\n@mixin font-size($value) {\n @include rfs($value);\n}\n\n@mixin padding($value) {\n @include rfs($value, padding);\n}\n\n@mixin padding-top($value) {\n @include rfs($value, padding-top);\n}\n\n@mixin padding-right($value) {\n @include rfs($value, padding-right);\n}\n\n@mixin padding-bottom($value) {\n @include rfs($value, padding-bottom);\n}\n\n@mixin padding-left($value) {\n @include rfs($value, padding-left);\n}\n\n@mixin margin($value) {\n @include rfs($value, margin);\n}\n\n@mixin margin-top($value) {\n @include rfs($value, margin-top);\n}\n\n@mixin margin-right($value) {\n @include rfs($value, margin-right);\n}\n\n@mixin margin-bottom($value) {\n @include rfs($value, margin-bottom);\n}\n\n@mixin margin-left($value) {\n @include rfs($value, margin-left);\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n @if $font-size-root != null {\n @include font-size(var(--#{$prefix}root-font-size));\n }\n\n @if $enable-smooth-scroll {\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n margin: 0; // 1\n font-family: var(--#{$prefix}body-font-family);\n @include font-size(var(--#{$prefix}body-font-size));\n font-weight: var(--#{$prefix}body-font-weight);\n line-height: var(--#{$prefix}body-line-height);\n color: var(--#{$prefix}body-color);\n text-align: var(--#{$prefix}body-text-align);\n background-color: var(--#{$prefix}body-bg); // 2\n -webkit-text-size-adjust: 100%; // 3\n -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n\nhr {\n margin: $hr-margin-y 0;\n color: $hr-color; // 1\n border: 0;\n border-top: $hr-border-width solid $hr-border-color;\n opacity: $hr-opacity;\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n// By default, `

    `-`

    ` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: $headings-color;\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

    `s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 2. Add explicit cursor to indicate changed behavior.\n// 3. Prevent the text-decoration to be skipped.\n\nabbr[title] {\n text-decoration: underline dotted; // 1\n cursor: help; // 2\n text-decoration-skip-ink: none; // 3\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: var(--#{$prefix}highlight-bg);\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: var(--#{$prefix}link-color);\n text-decoration: $link-decoration;\n\n &:hover {\n color: var(--#{$prefix}link-hover-color);\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: var(--#{$prefix}code-color);\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n border-color: inherit;\n border-style: solid;\n border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // 1\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n text-transform: none;\n}\n// Set the cursor for non-`