├── 01_prompt ├── index.html └── inicio.js ├── 02_prompt_condicional ├── index.html └── inicio.js ├── 03_contador ├── css │ └── style.css ├── img │ └── contador.jpg ├── index.html └── js │ └── script.js ├── 04_ciclos ├── index.html └── script.js ├── 05_desafio_complementario_1 ├── index.html └── script.js ├── 06_funciones ├── index.html └── script.js ├── 07_funciones_flecha ├── index.html └── script.js ├── 08_desafio_entregable_1_simulador ├── css │ └── style.css ├── index.html ├── script.js └── svg │ └── undraw_medicine_b-1-ol.svg ├── 09_FizzBuzz ├── css │ └── style.css ├── index.html └── script.js ├── 10_objetos ├── index.html └── script2.js ├── 11_arrays ├── index.html └── script.js ├── 13_Desafio_Complementario_incorporar_arrays ├── css │ └── style.css ├── index.html ├── script.js └── svg │ ├── undraw_empty_cart_co35.svg │ ├── undraw_medicine_b-1-ol.svg │ └── undraw_wishlist_re_m7tv.svg ├── 14_funciones_orden_superior ├── index.html └── script.js ├── 15_Lista_pendientes ├── css │ └── style.css ├── index.html └── script.js ├── 16_DOM ├── css │ └── style.css ├── index.html └── script.js ├── 17_Eventos └── script.js ├── 18_Desafio_Complementario_Eventos ├── css │ └── style.css ├── index.html └── script.js ├── 19_Storage_&_JSON ├── data.js └── script.js ├── 20_Anio_bisiesto ├── bisiesto.png ├── index.html ├── main.js └── style.css ├── CODING.gif └── README.md /01_prompt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 01 - prompt 8 | 9 | 10 |

01 - prompt

11 | 12 | 13 | -------------------------------------------------------------------------------- /01_prompt/inicio.js: -------------------------------------------------------------------------------- 1 | let nombre = prompt("Cual es tu nombre?"); 2 | 3 | let edad = prompt("Cual es tu edad?"); 4 | 5 | let pais = prompt("Cual es tu pais de origen?"); 6 | 7 | alert( 8 | "Bienvenid@ " + 9 | nombre + 10 | "! sabemos que tu edad es de " + 11 | edad + 12 | " años y que vives en " + 13 | pais + 14 | "." 15 | ); 16 | -------------------------------------------------------------------------------- /02_prompt_condicional/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 02 - prompt condicional 8 | 9 | 10 |

02 - prompt condicional

11 | 12 | 13 | -------------------------------------------------------------------------------- /02_prompt_condicional/inicio.js: -------------------------------------------------------------------------------- 1 | let nombre = prompt("Cual es tu nombre?"); 2 | 3 | let edad = prompt("Cual es tu edad?"); 4 | 5 | let pais = prompt("Cual es tu pais de origen?"); 6 | 7 | if (nombre == "jorge") { 8 | alert( 9 | "Bienvenido " + 10 | nombre + 11 | "! sabemos que tu edad es de " + 12 | edad + 13 | " años y que vives en " + 14 | pais + 15 | "." 16 | ); 17 | } else { 18 | alert( 19 | "tu no eres jorge, eres " + 20 | nombre + 21 | " y NO estas autorizado a usar este programa" 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /03_contador/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } -------------------------------------------------------------------------------- /03_contador/img/contador.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GiorgioCode/practicas-js/a023decb90abdeb341aeb37f87f4506bf8d569af/03_contador/img/contador.jpg -------------------------------------------------------------------------------- /03_contador/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | contador manual 12 | 13 | 14 | 15 | 16 |
17 |
18 | ... 19 |
20 |

Este es un ejemplo de uso de javascript con bootstrap 5, 21 | para simular un contador manual de personas

22 |
23 | 25 |
26 | 27 |
28 |
29 |
30 | 31 | 32 | 33 | 57 | 58 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /03_contador/js/script.js: -------------------------------------------------------------------------------- 1 | let contador = 0; 2 | parseInt(contador); 3 | 4 | function sumar() { 5 | contador = contador + 1; 6 | return contador; 7 | } 8 | 9 | function restar() { 10 | if (contador != 0) { 11 | contador = contador - 1; 12 | } else { 13 | return contador; 14 | } 15 | return contador; 16 | } 17 | 18 | function reset() { 19 | contador = 0; 20 | return contador; 21 | } 22 | -------------------------------------------------------------------------------- /04_ciclos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 04 - Ciclos 8 | 9 | 10 |

Practica 04 - Ciclo while

11 |

Adivina el numero!

12 | 13 | 14 | -------------------------------------------------------------------------------- /04_ciclos/script.js: -------------------------------------------------------------------------------- 1 | //ciclo WHILE 2 | 3 | let number; 4 | while (number != 8) { 5 | number = parseInt(prompt("Adivina el numero. Ayuda: es del 1 al 10")); 6 | alert("el numero " + number + " no es el correcto. vuelve a intentarlo."); 7 | } 8 | -------------------------------------------------------------------------------- /05_desafio_complementario_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Desafio complementario 1 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

Bienveníd@s a Ayuda Matemática

22 |

Referencias MENÚ:

23 | 27 |
28 | 29 |

resultado:

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /05_desafio_complementario_1/script.js: -------------------------------------------------------------------------------- 1 | let opcion = prompt("A - Generador de Tablas de multiplicar \n B - Generador de Secuencia Fibonacci.\n ******** \nPor favor, ingrese A o B (MAYUSCULAS) para comenzar:"); 2 | 3 | switch (opcion) { 4 | case "A": 5 | alert("Bienvenido al Generador de Tablas de multiplicar!!") 6 | let number = parseInt(prompt("la tabla de qué numero deseas generar?:")) 7 | 8 | for (let i = 1; i <= 10; i++) { 9 | let resultado = number * i; 10 | document.write(`${number} x ${i} = ${resultado} | `); 11 | } 12 | break; 13 | case "B": 14 | alert("Bienvenido al Generador de Secuencia de Fibonacci!!") 15 | function fibonacci(num) { 16 | if(num < 2) { 17 | return num; 18 | } 19 | else { 20 | return fibonacci(num-1)+fibonacci(num-2); 21 | } 22 | } 23 | let termino = parseInt(prompt("ingrese numero de terminos:")) 24 | if (termino <= 0) { 25 | alert("debe ingresar un entero positivo"); 26 | } 27 | else { 28 | for(let i = 0; i < termino; i++) { 29 | document.write(`${fibonacci(i)} | `); 30 | } 31 | } 32 | break; 33 | default: 34 | alert('Opcion seleccionada no valida.') 35 | break; 36 | } -------------------------------------------------------------------------------- /06_funciones/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 06 - Funciones 8 | 9 | 10 |

Practica 06 - Funciones

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06_funciones/script.js: -------------------------------------------------------------------------------- 1 | function sumar(numero1, numero2) { 2 | resultado = numero1 + numero2; 3 | return resultado; 4 | } 5 | 6 | let sumador1 = parseInt(prompt("insertar numero1:")); 7 | let sumador2 = parseInt(prompt("insertar numero2:")); 8 | alert(sumar(sumador1, sumador2)); 9 | -------------------------------------------------------------------------------- /07_funciones_flecha/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 07 - Funciones flecha 8 | 9 | 10 |

Practica 07 - Funciones Flecha

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /07_funciones_flecha/script.js: -------------------------------------------------------------------------------- 1 | const suma = (a, b) => { 2 | return a + b; 3 | }; 4 | //si es una funcion de una sola linea con retorno podemos evitar escribir el cuerpo. 5 | const resta = (a, b) => a - b; 6 | alert(suma(15, 20)); 7 | alert(resta(20, 5)); 8 | -------------------------------------------------------------------------------- /08_desafio_entregable_1_simulador/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } 4 | 5 | /*GRADIENTE ANIMADO TEXTO*/ 6 | .textogradiente { 7 | color: #7431dd; 8 | background: linear-gradient( 9 | to right, 10 | #dd31dd 20%, 11 | #7431dd 40%, 12 | #0082e6 60%, 13 | #dd31dd 80% 14 | ); 15 | background-size: 200% auto; 16 | text-decoration: bold; 17 | color: #000; 18 | background-clip: text; 19 | text-fill-color: transparent; 20 | -webkit-background-clip: text; 21 | -webkit-text-fill-color: transparent; 22 | animation: shine 5s linear infinite; 23 | } 24 | 25 | @keyframes shine { 26 | to { 27 | background-position: 200% center; 28 | } 29 | } 30 | 31 | .bd-placeholder-img { 32 | font-size: 1.125rem; 33 | text-anchor: middle; 34 | -webkit-user-select: none; 35 | -moz-user-select: none; 36 | user-select: none; 37 | } 38 | 39 | @media (min-width: 768px) { 40 | .bd-placeholder-img-lg { 41 | font-size: 3.5rem; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /08_desafio_entregable_1_simulador/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 08 - DESAFIO ENTREGABLE 1 - SIMULADOR 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 |
26 |

Practica 08 - DESAFIO ENTREGABLE 1 - SIMULADOR INTERACTIVO

27 | 28 |

DOSIFICADOR V0.1

29 | imagen medicos 30 | 31 |
32 | 33 | 34 |
35 |

Seleccione el medicamento:

36 | 41 |
42 |

Cuál es el peso del paciente? (Kg):

43 | 45 |
46 | 47 |

a qué hora inicia la primera toma del medicamento?:

48 | 74 | 75 |
76 |

77 |

78 |

79 | 80 |
81 | 82 |
83 |
84 |
ACLARACIÓN: para un adecuado funcionamiento de la aplicación, 85 | reinicie la misma luego de efectuar un calculo de dosis
86 | 87 |
88 |
89 |

90 | REFERENCIAS: 91 | 92 | Prospecto BENADRYL 94 | Prospecto FEBRATIC 96 | Prospecto VENTOLIN 98 |

99 |
100 | 101 | 102 |
103 | 115 |
116 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /08_desafio_entregable_1_simulador/script.js: -------------------------------------------------------------------------------- 1 | function calcular() { 2 | let peso = document.getElementById("peso").value; 3 | let medicamento = document.getElementById("medicamento").value; 4 | let hora = document.getElementById("hora").value; 5 | 6 | if (peso != 0) { 7 | switch (medicamento) { 8 | case "ventolin": 9 | dosis = parseInt(peso * 0.2); 10 | document.getElementById("recomendacion").innerHTML = 11 | "Usted ha seleccionado VENTOLIN, indicado para el control de broncoespasmo cronico que no responde al tratamiento convencional o para el tratamiento del asma severo agudo. El peso del paciente es de " + 12 | peso + 13 | " kilogramos, por lo tanto, se deben administrar " + 14 | dosis + 15 | " ml por toma, VIA NEBULIZADA, cada 8 horas"; 16 | document.getElementById("recomendacion2").innerHTML = 17 | "el medicamento, se deberá administrar en los horarios de:"; 18 | 19 | for (let i = 0; i < 3; i++) { 20 | let tomas = parseInt(hora) + i * 8; 21 | if (tomas >= 24) { 22 | mostrar = tomas - 24; 23 | } else { 24 | mostrar = tomas; 25 | } 26 | document.getElementById( 27 | "recomendacion3" 28 | ).innerHTML += `${mostrar}:00 , `; 29 | } 30 | break; 31 | case "benadryl": 32 | dosis = parseInt(peso * 0.65); 33 | document.getElementById("recomendacion").innerHTML = 34 | "Usted ha seleccionado BENADRYL, un antihistaminico y antialergico indicado para conjuntivitis alergica , manifestaciones alergicas de la piel u otras reacciones alergicas. El peso del paciente es de " + 35 | peso + 36 | " kilogramos, por lo tanto, se deben administrar " + 37 | dosis + 38 | " ml por toma, VIA ORAL, cada 8 horas"; 39 | document.getElementById("recomendacion2").innerHTML = 40 | "el medicamento, se deberá administrar en los horarios de:"; 41 | 42 | for (let i = 0; i < 3; i++) { 43 | let tomas = parseInt(hora) + i * 8; 44 | if (tomas >= 24) { 45 | mostrar = tomas - 24; 46 | } else { 47 | mostrar = tomas; 48 | } 49 | document.getElementById( 50 | "recomendacion3" 51 | ).innerHTML += `${mostrar}:00 , `; 52 | } 53 | break; 54 | case "febratic": 55 | dosis = parseInt(peso * 0.3); 56 | document.getElementById("recomendacion").innerHTML = 57 | "Usted ha seleccionado FEBRATIC, un antipiretico y analgésico indicado para el tratamiento sintomarico del dolor leve. El peso del paciente es de " + 58 | peso + 59 | " kilogramos, por lo tanto, se deben administrar " + 60 | dosis + 61 | " ml por toma, VIA ORAL, cada 8 horas"; 62 | document.getElementById("recomendacion2").innerHTML = 63 | "el medicamento, se deberá administrar en los horarios de:"; 64 | 65 | for (let i = 0; i < 3; i++) { 66 | let tomas = parseInt(hora) + i * 8; 67 | if (tomas >= 24) { 68 | mostrar = tomas - 24; 69 | } else { 70 | mostrar = tomas; 71 | } 72 | document.getElementById( 73 | "recomendacion3" 74 | ).innerHTML += `${mostrar}:00 , `; 75 | } 76 | break; 77 | } 78 | } else { 79 | alert("Introduzca el peso correcto del paciente"); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /08_desafio_entregable_1_simulador/svg/undraw_medicine_b-1-ol.svg: -------------------------------------------------------------------------------- 1 | medicine -------------------------------------------------------------------------------- /09_FizzBuzz/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } 4 | 5 | /*GRADIENTE ANIMADO TEXTO*/ 6 | .textogradiente { 7 | color: #7431dd; 8 | background: linear-gradient( 9 | to right, 10 | #dd31dd 20%, 11 | #7431dd 40%, 12 | #0082e6 60%, 13 | #dd31dd 80% 14 | ); 15 | background-size: 200% auto; 16 | text-decoration: bold; 17 | color: #000; 18 | background-clip: text; 19 | text-fill-color: transparent; 20 | -webkit-background-clip: text; 21 | -webkit-text-fill-color: transparent; 22 | animation: shine 5s linear infinite; 23 | } 24 | 25 | @keyframes shine { 26 | to { 27 | background-position: 200% center; 28 | } 29 | } 30 | 31 | .bd-placeholder-img { 32 | font-size: 1.125rem; 33 | text-anchor: middle; 34 | -webkit-user-select: none; 35 | -moz-user-select: none; 36 | user-select: none; 37 | } 38 | 39 | @media (min-width: 768px) { 40 | .bd-placeholder-img-lg { 41 | font-size: 3.5rem; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /09_FizzBuzz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 09 - FizzBuzz 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Practica 09 - Práctica Independiente

21 | 22 |

FizzBuzz

23 | 24 | 25 |
26 |
27 |

En esta practica, se genera una sucesion de numeros consecutivos, cumpliendo las siguientes condiciones:
28 |

    29 |
  1. Si un número de la sucesión es múltiplo de 3, se debe imprimir Fizz en lugar del número.
    2. 30 |
  2. Si un número de la sucesión es múltiplo de 5, se debe imprimir Buzz en lugar del número.
    3. 31 |
  3. Si un número de la sucesión es múltiplo de 3 y de 5, se debe imprimir FizzBuzz en lugar del número.
    4. 32 |
33 |

34 | 35 |
36 | 37 | 38 |
39 | 40 |

Cuántos terminos desea generar?:

41 |
42 | 44 | 45 |
46 |
47 |

48 | 49 |
50 | 51 | 52 | 53 |
54 | 66 |
67 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /09_FizzBuzz/script.js: -------------------------------------------------------------------------------- 1 | function fizzbuzz() { 2 | let terminos = document.getElementById("terminos").value; 3 | ciclos = parseInt(terminos); 4 | let mostrar = 0; 5 | 6 | for (let i = 1; i <= ciclos; i++) { 7 | if (i % 3 == 0 && i % 5 == 0) { 8 | mostrar = "FizzBuzz"; 9 | } else if (i % 3 == 0) { 10 | mostrar = "Fizz"; 11 | } else if (i % 5 == 0) { 12 | mostrar = "Buzz"; 13 | } else { 14 | mostrar = i; 15 | } 16 | document.getElementById("sucesion").innerHTML += `${mostrar} - `; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /10_objetos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 - Objetos 8 | 9 | 10 | 17 |

Practica 10 - Objetos

18 |

Para observar resultados, abrir consola del navegador

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /10_objetos/script2.js: -------------------------------------------------------------------------------- 1 | //Practica Objetos 2 | console.log("*******CREACION Y MANIPULACION DE OBJETO*******"); 3 | const producto = { 4 | id: 1, 5 | titulo: "iphone", 6 | precio: 1000, 7 | stock: 5, 8 | }; 9 | 10 | console.log(producto); /*mostrar en consola las propiedades del objeto*/ 11 | console.log(producto.stock); /*mostrar en consola una propiedad del objeto*/ 12 | producto.marca = "apple"; /*sumar una propiedad al objeto*/ 13 | console.log(producto); 14 | 15 | console.log("*******FUNCION CONSTRUCTORA*******"); 16 | 17 | //function Alumno(nombre, edad, pais) { 18 | // this.name = nombre; 19 | // this.age = edad; 20 | // this.country = pais; 21 | //} 22 | 23 | const alumno1 = new Alumno("Mario", 36, "Argentina"); //crea objeto a partir de funcion constructora 24 | console.log(alumno1); 25 | const alumno2 = new Alumno("Ana", 41, "Argentina"); //crea otro objeto a partir de funcion constructora 26 | console.log(alumno2); 27 | //const alumno3 = new Alumno( 28 | // prompt("Inserte nombre"), 29 | // parseInt(prompt("Inserte edad")), 30 | // prompt("Inserte pais") 31 | //); //crea otro objeto a partir de funcion constructora pidiendo datos al usuario 32 | //console.log(alumno3); 33 | 34 | console.log("*******METODO<>FUNCIÓN*******"); 35 | //los metodos son funciones asociadas a un tipo de objeto 36 | let cadena = "hola coders"; 37 | console.log(cadena.length); //muestra cantidad de caracteres 38 | console.log(cadena.toUpperCase); //VERIFICAR - convierte caracteres a mayusculas 39 | 40 | function Alumno(nombre, edad, pais) { 41 | this.name = nombre; 42 | this.age = edad; 43 | this.country = pais; 44 | this.hablar = function () { 45 | console.log("Hola, soy " + this.name); 46 | }; 47 | this.mostrarDatos = function () { 48 | console.log("Datos del alumno:", this.name, this.age, this.country); 49 | }; 50 | } 51 | 52 | alumno2.hablar(); 53 | alumno1.hablar(); 54 | 55 | console.log("*******FOR IN*******"); 56 | 57 | for (const key in producto) { 58 | //los key value son las propiedades del objeto. en este bucle, se recorre cada una de las propiedades 59 | console.log(key, ":", producto[key]); 60 | } 61 | console.log("**************"); 62 | alumno1.mostrarDatos(); 63 | alumno2.mostrarDatos(); 64 | 65 | console.log("*******CLASES*******"); 66 | //en este ejemplo se genera una clase personaje, con diferentes caracteristicas y funciones internas para simular un juego 67 | class Personaje { 68 | constructor(nombre, vida, poder) { 69 | this.nombre = nombre; 70 | this.vida = vida; 71 | this.poder = poder; 72 | } 73 | atacar(valor){ 74 | 75 | this.poder = this.poder - valor; 76 | } 77 | recibirAtaque(valor2){ 78 | if (this.vida <=0) { 79 | console.log(this.nombre, " murió") 80 | } else { 81 | this.vida = this.vida - valor2; 82 | } 83 | 84 | } 85 | mostrarDatos(){ 86 | console.log(this.nombre, "EMPATEne: ",this.vida, " de vida y ",this.poder, "de poder.") 87 | } 88 | } 89 | 90 | const hobbit1 = new Personaje('Frodo', 10, 5); 91 | const elfo = new Personaje('Legolas', 8, 60); 92 | const elfo2 = new Personaje('dobbie', 9, 70); 93 | 94 | elfo.mostrarDatos() 95 | elfo.atacar(5) 96 | elfo.mostrarDatos() 97 | elfo2.recibirAtaque(10) 98 | elfo2.mostrarDatos() 99 | elfo2.recibirAtaque(10) 100 | elfo2.mostrarDatos() 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /11_arrays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 - Arrays 8 | 9 | 10 | 17 |

Practica 11 - Arrays

18 |

Para ver el resultado de los ejemplos, por favor inicie la consola del navegador.

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /11_arrays/script.js: -------------------------------------------------------------------------------- 1 | console.log('Arreglos'); 2 | 3 | // es burro o no? 4 | const calificaciones = [6, 7, 5, 9, 5, 7] 5 | 6 | for( let i = 0; i < calificaciones.length; i++){ 7 | console.log(i, calificaciones[i]) 8 | } 9 | 10 | let califQuitada = calificaciones.shift() 11 | califQuitada++ 12 | 13 | calificaciones.unshift(califQuitada) 14 | 15 | console.log(califQuitada); 16 | console.log(calificaciones.join('-*-')); 17 | 18 | const calificacionesRestantes = [6, 7] 19 | 20 | let todas = calificaciones.concat(calificacionesRestantes) 21 | console.log(todas); 22 | 23 | console.log(todas.indexOf(9)); 24 | 25 | if (todas.includes(9)) { 26 | console.log('No es burro'); 27 | } else { 28 | console.log('Es burro :('); 29 | } 30 | 31 | console.log('Arrays 2'); 32 | 33 | class Grade{ 34 | constructor(name, score){ 35 | this.name = name 36 | this.score = parseInt(score) 37 | } 38 | } 39 | 40 | let subjects = ['Matematica', 'Fisica', 'Química', 'Artes'] 41 | let grades = [] 42 | 43 | for (const subject of subjects) { 44 | let score = prompt(`Calificación de ${subject}`) 45 | grades.push(new Grade(subject, score)) 46 | } 47 | 48 | console.log(grades); 49 | 50 | let total = 0 51 | grades.forEach( g => { 52 | total += g.score 53 | }) 54 | 55 | console.log('promedio: ', total/grades.length); 56 | 57 | -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | .fondonegro { 7 | background-color: #000; 8 | } 9 | #areaImpresion { 10 | background-color: white; 11 | } 12 | #encabezado { 13 | padding-top: 5vh; 14 | } 15 | /*GRADIENTE ANIMADO TEXTO*/ 16 | .textogradiente { 17 | color: #7431dd; 18 | background: linear-gradient( 19 | to right, 20 | #dd31dd 20%, 21 | #7431dd 40%, 22 | #0082e6 60%, 23 | #dd31dd 80% 24 | ); 25 | background-size: 200% auto; 26 | text-decoration: bold; 27 | color: #000; 28 | background-clip: text; 29 | text-fill-color: transparent; 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | animation: shine 5s linear infinite; 33 | } 34 | 35 | @keyframes shine { 36 | to { 37 | background-position: 200% center; 38 | } 39 | } 40 | 41 | .bd-placeholder-img { 42 | font-size: 1.125rem; 43 | text-anchor: middle; 44 | -webkit-user-select: none; 45 | -moz-user-select: none; 46 | user-select: none; 47 | } 48 | 49 | @media (min-width: 768px) { 50 | .bd-placeholder-img-lg { 51 | font-size: 3.5rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 17 | 18 | 13 - DESAFIO COMPLEMENTARIO - INCORPORAR ARRAYS 19 | 20 | 21 | 22 |
23 | 24 |
28 |
29 |
30 |

Practica 13 - DESAFIO COMPLEMENTARIO - INCORPORAR ARRAYS

31 |

COMPRAS 0.1

32 |

33 | Aplicación para generar listas de compras e imprimirlas 34 |

35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |

Ingrese items:

44 |
45 | 63 |
64 |
65 | 77 |
78 |
79 | 80 | 87 | 88 |
89 | 97 |
98 |
99 | 100 |
101 |

Lista de compras:

102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
Cant.MedidaDescripción
111 |
112 |
113 |
114 | 122 |
123 |
124 | 150 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/script.js: -------------------------------------------------------------------------------- 1 | function agregar() { 2 | //definicion de objeto Item 3 | function Item(cantidad, medida, descripcion) { 4 | this.cantidad = cantidad; 5 | this.medida = medida; 6 | this.descripcion = descripcion; 7 | } 8 | //capturar ingresos del formulario 9 | cantidadItem = document.getElementById("cantidad").value; 10 | medidaItem = document.getElementById("medida").value; 11 | descripcionItem = document.getElementById("descripcion").value; 12 | //condicional para no generar elementos vacios 13 | if (descripcionItem != 0 && descripcionItem != undefined) { 14 | nuevoItem = new Item(cantidadItem, medidaItem, descripcionItem); 15 | console.log(nuevoItem); 16 | listar(); 17 | } 18 | } 19 | //generador de array de objetos y agregador de items de tabla 20 | listaCompras = []; 21 | function listar() { 22 | listaCompras.push(nuevoItem); 23 | document.getElementById("tabla").innerHTML += 24 | '' + 25 | nuevoItem.cantidad + 26 | "" + 27 | nuevoItem.medida + 28 | "" + 29 | nuevoItem.descripcion + 30 | ""; 31 | } 32 | //funcion para impresion de elementos del HTML 33 | function imprimirElemento(elemento) { 34 | var recuperarPagina = document.body.innerHTML; 35 | var imprimirContenido = document.getElementById(elemento).innerHTML; 36 | document.body.innerHTML = imprimirContenido; 37 | window.print(); 38 | } 39 | -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/svg/undraw_empty_cart_co35.svg: -------------------------------------------------------------------------------- 1 | empty_cart -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/svg/undraw_medicine_b-1-ol.svg: -------------------------------------------------------------------------------- 1 | medicine -------------------------------------------------------------------------------- /13_Desafio_Complementario_incorporar_arrays/svg/undraw_wishlist_re_m7tv.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /14_funciones_orden_superior/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 - Funciones de orden superior 8 | 9 | 10 | 17 |

Practica 14 - Funciones de orden superior

18 |

Para ver el resultado de los ejemplos, por favor inicie la consola del navegador.

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /14_funciones_orden_superior/script.js: -------------------------------------------------------------------------------- 1 | //FUNCIONES DE ORDEN SUPERIOR 2 | //AYUDA EN VIDEO (CANAL YOUTUBE XK WEB): https://www.youtube.com/watch?v=JW8E0YSNZ7o 3 | 4 | //CALLBACK: ES UNA FUNCION QUE RECIBE COMO PARAMETRO OTRA FUNCION 5 | 6 | //FUNCIONES DE ORDEN SUPERIOR O HIGH ORDER FUNCTIONS: SON FUNCIONES 7 | //QUE RETORNAN OTRA FUNCION Y QUE RECIBEN COMO ARGUMENTO OTRA FUNCION. 8 | 9 | console.log(' '); 10 | console.log('*****************************************'); 11 | console.log('************* RETORNAR FUNCIONES ********'); 12 | console.log('*****************************************'); 13 | console.log(' '); 14 | 15 | function regresaFuncion() { 16 | return () => {console.log('Hola mundo');} 17 | } 18 | 19 | regresaFuncion()() 20 | 21 | const nuevaFuncion = regresaFuncion() 22 | //va a contener 23 | //()=> {console.log('Hola mundo');} 24 | console.log('******** separador resultados nuevaFuncion() ********'); 25 | nuevaFuncion() 26 | nuevaFuncion() 27 | nuevaFuncion() 28 | 29 | console.log('******** separador resultados multiplicarPor() ********'); 30 | 31 | function multiplicarPor(multiplicador) { 32 | return numero => { return numero * multiplicador } 33 | } 34 | 35 | const multiplicarPor10 = multiplicarPor(10) //establece parametro multiplicador * 10 36 | console.log(multiplicarPor10(8)); //multiplica 10 * 8 = 80 37 | const multiplicarPor12 = multiplicarPor(12) //establece parametro multiplicador * 12 38 | console.log(multiplicarPor12(8)); //multiplica 12 * 8 = 96 39 | const multiplicarPorPI = multiplicarPor(3.144) //establece parametro multiplicador * PI 40 | console.log(multiplicarPorPI(8)); //multiplica PI * 8 = 25.152 41 | 42 | console.log('******** separador resultados saludador() ********'); 43 | 44 | function saludador(nombre) { 45 | return() => {console.log('Hola '+ nombre)} 46 | } 47 | 48 | const saludarJuan = saludador('Juan'); 49 | saludarJuan(); 50 | const saludarAna = saludador('Ana') 51 | saludarAna(); 52 | 53 | console.log(' '); 54 | console.log('*****************************************'); 55 | console.log('******** FUNCIONES POR PARAMETRO ********'); 56 | console.log('*****************************************'); 57 | console.log(' '); 58 | 59 | 60 | const nombreClaseJS = ['Jorge', 'Juan', 'Pedro', 'Esmeralda', 'Christian', 'Diego']; 61 | 62 | function transformarNombres(nombres, transformador) { 63 | let nuevosNombres = []; 64 | for (const nombre of nombres) { 65 | nuevosNombres.push(transformador(nombre)) 66 | } 67 | return nuevosNombres 68 | } 69 | 70 | convertirMayusculas = texto => texto.toUpperCase(); 71 | console.log('******** separador resultados transformarNombres() ********'); 72 | 73 | const nombresMayus = transformarNombres(nombreClaseJS, convertirMayusculas) 74 | console.log(nombresMayus.join('-')) 75 | 76 | const nombresMinus = transformarNombres(nombreClaseJS, t=>t.toLowerCase()) 77 | 78 | console.log(nombresMinus.join('-')) 79 | 80 | console.log(' '); 81 | console.log('*****************************************'); 82 | console.log('** FUNCIONES DE ORDEN SUPERIOR **'); 83 | console.log('** **'); 84 | console.log('** forEach **'); 85 | console.log('** map **'); 86 | console.log('** filter **'); 87 | console.log('** find **'); 88 | console.log('** some **'); 89 | console.log('** every **'); 90 | console.log('** reduce **'); 91 | console.log('** sort **'); 92 | console.log('** **'); 93 | console.log('*****************************************'); 94 | console.log(' '); 95 | 96 | console.log(' '); 97 | console.log('*****************************************'); 98 | console.log('** FUNCIONES ORDEN SUPERIOR (forEach) **'); 99 | console.log('*****************************************'); 100 | console.log(' '); 101 | 102 | //LA FUNCION forEach RECORRE TODOS LOS ELEMENTOS DE UN ARRAY ESPECIFICADO, 103 | //APLICANDO LA FUNCION QUE SE LE ORDENE 104 | 105 | const productos = [ 106 | {id: 1, titulo: 'iphone1', precio:1000, stock:5, descuento:50}, 107 | {id: 2, titulo: 'iphone2', precio:2000, stock:7, descuento:40}, 108 | {id: 3, titulo: 'iphone3', precio:3000, stock:10, descuento:30}, 109 | {id: 4, titulo: 'iphone4', precio:4000, stock:15, descuento:20}, 110 | ] 111 | 112 | productos.forEach(elemento => console.table(elemento)) 113 | 114 | function precioConDescuento (precio, descuento) { 115 | return precio - ((precio * descuento)/100) 116 | } 117 | 118 | productos.forEach(e => { 119 | precioDescuento=e.precio*e.descuento/100; 120 | console.log('el precio del ' +e.titulo+' es de: '+precioConDescuento( e.precio, e.descuento)); 121 | 122 | }) 123 | 124 | 125 | console.log(' '); 126 | console.log('*****************************************'); 127 | console.log('** FUNCIONES ORDEN SUPERIOR (map) **'); 128 | console.log('*****************************************'); 129 | console.log(' '); 130 | //RECORRE EL ARRAY AL IGUAL QUE EL forEach PERO NOS RETORNA UN OBJETO NUEVO 131 | //PARA EVITAR MODIFICAR EL ARRAY U OBJETOS INICIALES 132 | const productos2 = [ 133 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 134 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 135 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 136 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 137 | ] 138 | 139 | productos2.map(elemento => console.log(elemento.titulo.toUpperCase())) 140 | 141 | console.log(' '); 142 | console.log('*****************************************'); 143 | console.log('** FUNCIONES ORDEN SUPERIOR (filter) **'); 144 | console.log('*****************************************'); 145 | console.log(' '); 146 | //FILTRA Y EXTRAE EL/LOS OBJETOS DE UN ARRAY QUE CUMPLEN UNA DETERMINADA CONDICION 147 | const productos3 = [ 148 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 149 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 150 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 151 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 152 | ] 153 | //AQUI SE EXTRAEN LOS OBJETOS CON PRECIO MENOR A 3000 Y SE PRESENTAN EN UNA TABLA 154 | let resultadoFiltrado = productos3.filter(elemento => elemento.precio < 3000) 155 | console.table(resultadoFiltrado) 156 | 157 | 158 | console.log(' '); 159 | console.log('*****************************************'); 160 | console.log('** FUNCIONES ORDEN SUPERIOR (find) **'); 161 | console.log('*****************************************'); 162 | console.log(' '); 163 | //DEVUELVE EL PRIMER OBJETO DE UN ARRAY QUE CUMPLA CON UNA DETERMINADA CONDICION 164 | const productos4 = [ 165 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 166 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 167 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 168 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 169 | ] 170 | 171 | let resultadoFiltrado2 = productos4.find(elemento => elemento.precio < 3000) 172 | console.table(resultadoFiltrado2) 173 | 174 | console.log(' '); 175 | console.log('*****************************************'); 176 | console.log('** FUNCIONES ORDEN SUPERIOR (some) **'); 177 | console.log('*****************************************'); 178 | console.log(' '); 179 | //DEVUELVE VALOR BOOLEANO (True o False) SI EXISTE AL MENOS UNO DE LOS OBJETOS DEL ARRAY 180 | //QUE CUMPLE LA CONDICION ESTABLECIDA 181 | const productos5 = [ 182 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 183 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 184 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 185 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 186 | ] 187 | 188 | let resultadoFiltrado3 = productos5.some(elemento => elemento.precio < 3000) 189 | console.log(resultadoFiltrado3) 190 | 191 | console.log(' '); 192 | console.log('*****************************************'); 193 | console.log('** FUNCIONES ORDEN SUPERIOR (every) **'); 194 | console.log('*****************************************'); 195 | console.log(' '); 196 | 197 | //DEVUELVE VALOR BOOLEANO (True o False) SI TODOS LOS OBJETOS DEL ARRAY 198 | //CUMPLEN LA CONDICION ESTABLECIDA 199 | const productos6 = [ 200 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 201 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 202 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 203 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 204 | ] 205 | 206 | let resultadoFiltrado4 = productos6.every(elemento => elemento.precio < 3000) 207 | console.log(resultadoFiltrado4) 208 | 209 | console.log(' '); 210 | console.log('*****************************************'); 211 | console.log('** FUNCIONES ORDEN SUPERIOR (reduce) **'); 212 | console.log('*****************************************'); 213 | console.log(' '); 214 | //JUNTA SEGUN LA CONDICION ESTABLECIDA LOS OBJETOS DE UN ARRAY 215 | //POR EJEMPLO, SIRVE PARA SUMAR LOS PRECIOS DE LOS PRODUCTOS 216 | const productos7 = [ 217 | {id: 1, titulo: 'xiaomi', precio:1000, stock:5, descuento:50}, 218 | {id: 2, titulo: 'huawei', precio:2000, stock:7, descuento:40}, 219 | {id: 3, titulo: 'samsung', precio:3000, stock:10, descuento:30}, 220 | {id: 4, titulo: 'apple', precio:4000, stock:15, descuento:20}, 221 | ] 222 | //en este caso, se guarda en sumaPrecios la acumulacion de los precios de todos los objetos del array, 223 | //tomando como valor de inicio de la suma el numero 0 224 | let sumaPrecios = productos7.reduce((acumulador, elemento) => acumulador + elemento.precio,0) 225 | console.log(sumaPrecios) 226 | //en este caso, se guarda en sumaPrecios2 la acumulacion de los precios de todos los objetos del array, 227 | //tomando como valor de inicio de la suma el numero 1000 (esto ultimo se puede usar para concatenar sumas de 228 | //la misma propiedad de distintos arrays de objetos) 229 | let sumaPrecios2 = productos7.reduce((acumulador2, elemento2) => acumulador2 + elemento2.precio,1000) 230 | console.log(sumaPrecios2) 231 | 232 | //Por ejemplo, tengo dos array de objetos, uno con autos nacionales y otro con autos importados: 233 | const autosImportados = [ 234 | {id: 1, titulo: 'Toyota', precio:1000000, stock:5, descuento:20}, 235 | {id: 2, titulo: 'Mitsubishi', precio:600000, stock:7, descuento:10}, 236 | {id: 3, titulo: 'Nissan', precio:300000, stock:10, descuento:15}, 237 | {id: 4, titulo: 'Volvo', precio:400000, stock:15, descuento:20}, 238 | ] 239 | const autosNacionales = [ 240 | {id: 1, titulo: 'Fiat', precio:180000, stock:5, descuento:20}, 241 | {id: 2, titulo: 'Renault', precio:200000, stock:7, descuento:30}, 242 | {id: 3, titulo: 'Ford', precio:300000, stock:10, descuento:30}, 243 | {id: 4, titulo: 'Chevrolet', precio:400000, stock:15, descuento:20}, 244 | ] 245 | //y deseo saber cual es el total de la suma de los precios de los dos arrays sin tener que juntarlos 246 | //arrancamos sumando los precios desde 0 247 | let sumador1 = autosImportados.reduce((sumas1, autosImp) => sumas1 + autosImp.precio,0) 248 | console.log('la suma de los precios de los autos importados es: '+sumador1) 249 | //ahora arrancamos sumando los precios de los autos nacionales a partir del resultado de sumador1 250 | let sumaTotal = autosNacionales.reduce((sumas2, autosNac) => sumas2 + autosNac.precio,sumador1) 251 | console.log('la suma de los precios de los autos importados mas los nacionales es: '+sumaTotal) 252 | 253 | console.log(' '); 254 | console.log('*****************************************'); 255 | console.log('** FUNCIONES ORDEN SUPERIOR (sort) **'); 256 | console.log('*****************************************'); 257 | console.log(' '); 258 | //El método sort() nos permite reordenar un array según un criterio que definamos. 259 | //Recibe una función de comparación por parámetro que, a la vez, recibe dos elementos del array. 260 | //La función retorna un valor numérico (1, -1, 0) que indica qué elemento se posiciona antes o después. 261 | //CUIDADO! METODO DESTRUCTIVO, MODIFICA EL ARRAY ORIGINAL. 262 | 263 | arrayNumeros = [1, 4, 33, 7, -7, 2, 90, 54] 264 | console.log(arrayNumeros) //muestra el contenido del array 265 | arrayNumeros.sort() //si se llama a sort sin parametros, ordena de menor a mayor SEGUN SU VALOR DE UNICODE 266 | console.log(arrayNumeros) //muestra el contenido ordenado del array 267 | //SE PUEDE VER QUE EL ORDEN NO ES NUMERICO 268 | arrayNumeros.sort((a,b) => { //entonces se debe controlar con una funcion 269 | if (a < b) { 270 | return -1; 271 | } 272 | if (a > b) { 273 | return 1; 274 | } 275 | return 0 276 | }) 277 | console.log(arrayNumeros) //ahora si se observa el array ordenado por su valor 278 | 279 | //otra forma simplificada de escribirlo: 280 | console.log('******** sort simplificado orden ascendente ********'); 281 | arrayNumeros2 = [1, 4, 33, 7, -7, 2, 90, 54] 282 | arrayNumeros2.sort((a,b) => a-b); //para orden ascendente 283 | console.log(arrayNumeros2) 284 | console.log('******** sort simplificado orden descendente ********'); 285 | arrayNumeros3 = [1, 4, 33, 7, -7, 2, 90, 54] 286 | arrayNumeros3.sort((a,b) => b-a); //para orden descendente 287 | console.log(arrayNumeros3) 288 | console.log('******** sort de array de objetos ********'); 289 | 290 | const autos = [ 291 | {id: 1, titulo: 'Fiat', precio:180000, stock:5, descuento:20}, 292 | {id: 2, titulo: 'Renault', precio:200000, stock:7, descuento:30}, 293 | {id: 3, titulo: 'Ford', precio:300000, stock:10, descuento:30}, 294 | {id: 4, titulo: 'Chevrolet', precio:400000, stock:15, descuento:20}, 295 | {id: 5, titulo: 'Toyota', precio:1000000, stock:6, descuento:20}, 296 | {id: 6, titulo: 'Mitsubishi', precio:600000, stock:7, descuento:10}, 297 | {id: 7, titulo: 'Nissan', precio:300000, stock:8, descuento:15}, 298 | {id: 8, titulo: 'Volvo', precio:400000, stock:20, descuento:20}, 299 | ] 300 | 301 | console.table(autos) 302 | console.log('******** sort ascentente por precio ********'); 303 | autos.sort((a, b) => a.precio - b.precio); //orden ascentente por precio 304 | console.table(autos) 305 | console.log('******** sort ascentente por stock ********'); 306 | autos.sort((a, b) => a.stock - b.stock); //orden ascentente segun stock 307 | console.table(autos) 308 | -------------------------------------------------------------------------------- /15_Lista_pendientes/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | .fondonegro { 7 | background-color: #000; 8 | } 9 | #areaImpresion { 10 | background-color: white; 11 | } 12 | #encabezado { 13 | padding-top: 5vh; 14 | } 15 | /*GRADIENTE ANIMADO TEXTO*/ 16 | .textogradiente { 17 | color: #7431dd; 18 | background: linear-gradient( 19 | to right, 20 | #dd31dd 20%, 21 | #7431dd 40%, 22 | #0082e6 60%, 23 | #dd31dd 80% 24 | ); 25 | background-size: 200% auto; 26 | text-decoration: bold; 27 | color: #000; 28 | background-clip: text; 29 | text-fill-color: transparent; 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | animation: shine 5s linear infinite; 33 | } 34 | 35 | @keyframes shine { 36 | to { 37 | background-position: 200% center; 38 | } 39 | } 40 | 41 | .bd-placeholder-img { 42 | font-size: 1.125rem; 43 | text-anchor: middle; 44 | -webkit-user-select: none; 45 | -moz-user-select: none; 46 | user-select: none; 47 | } 48 | 49 | @media (min-width: 768px) { 50 | .bd-placeholder-img-lg { 51 | font-size: 3.5rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /15_Lista_pendientes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lista de pendientes 8 | 10 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

Practica 15 - PRACTICA INDEPENDIENTE - MANEJO DE DOM

22 |

PENDIENTES 0.2

23 |

24 | Aplicación para generar listas de pendientes 25 |

26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 |
39 |
40 | ¡Nuestras tareas se encuentran al dia! 41 |
42 |
43 |
44 | 45 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /15_Lista_pendientes/script.js: -------------------------------------------------------------------------------- 1 | console.log('Suscríbete al canal y dale me gusta 😍') 2 | 3 | const formulario = document.getElementById('formulario') 4 | const listaTareas = document.getElementById('lista-tareas') 5 | const template = document.getElementById('template').content 6 | const fragment = document.createDocumentFragment() 7 | let tareas = {} 8 | 9 | document.addEventListener('DOMContentLoaded', () => { 10 | if (localStorage.getItem('tareas')) { 11 | tareas = JSON.parse(localStorage.getItem('tareas')) 12 | } 13 | pintarTareas() 14 | }) 15 | 16 | listaTareas.addEventListener('click', (e) => {btnAccion(e)}) 17 | 18 | formulario.addEventListener('submit', e => { 19 | e.preventDefault() 20 | // console.log(e.target[0].value) 21 | // console.log(e.target.querySelector('input').value) 22 | setTarea(e) 23 | }) 24 | 25 | const setTarea = e => { 26 | const texto = e.target.querySelector('input').value 27 | 28 | if (texto.trim() === '') { 29 | console.log('está vacio') 30 | return 31 | } 32 | const tarea = { 33 | id: Date.now(), 34 | texto: texto, 35 | estado: false 36 | } 37 | 38 | tareas[tarea.id] = tarea 39 | pintarTareas() 40 | 41 | formulario.reset() 42 | e.target.querySelector('input').focus() 43 | } 44 | 45 | const pintarTareas = () => { 46 | 47 | localStorage.setItem('tareas', JSON.stringify(tareas)) 48 | 49 | if (Object.values(tareas).length === 0) { 50 | listaTareas.innerHTML = ` 51 |
52 | ¡Nuestras tareas se encuentran al dia! 53 |
54 | ` 55 | return 56 | } 57 | 58 | listaTareas.innerHTML = '' 59 | 60 | Object.values(tareas).forEach(tarea => { 61 | const clone = template.cloneNode(true) 62 | clone.querySelector('p').textContent = tarea.texto 63 | 64 | if (tarea.estado) { 65 | clone.querySelectorAll('.fas')[0].classList.replace('fa-check-circle', 'fa-undo-alt') 66 | clone.querySelector('.alert').classList.replace('alert-primary', 'alert-success') 67 | clone.querySelector('p').style.textDecoration = 'line-through' 68 | } 69 | 70 | clone.querySelectorAll('.fas')[0].dataset.id = tarea.id 71 | clone.querySelectorAll('.fas')[1].dataset.id = tarea.id 72 | fragment.appendChild(clone) 73 | }) 74 | listaTareas.appendChild(fragment) 75 | } 76 | 77 | const btnAccion = e => { 78 | // console.log(e.target.classList.contains('fa-check-circle')) 79 | if (e.target.classList.contains('fa-check-circle')) { 80 | tareas[e.target.dataset.id].estado = true 81 | pintarTareas() 82 | } 83 | 84 | if (e.target.classList.contains('fa-minus-circle')) { 85 | // console.log(e.target.dataset.id) 86 | delete tareas[e.target.dataset.id] 87 | pintarTareas() 88 | } 89 | 90 | if (e.target.classList.contains('fa-undo-alt')) { 91 | tareas[e.target.dataset.id].estado = false 92 | pintarTareas() 93 | } 94 | 95 | e.stopPropagation() 96 | } -------------------------------------------------------------------------------- /16_DOM/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | .fondonegro { 7 | background-color: #000; 8 | } 9 | #areaImpresion { 10 | background-color: white; 11 | } 12 | #encabezado { 13 | padding-top: 5vh; 14 | } 15 | /*GRADIENTE ANIMADO TEXTO*/ 16 | .textogradiente { 17 | color: #7431dd; 18 | background: linear-gradient( 19 | to right, 20 | #dd31dd 20%, 21 | #7431dd 40%, 22 | #0082e6 60%, 23 | #dd31dd 80% 24 | ); 25 | background-size: 200% auto; 26 | text-decoration: bold; 27 | color: #000; 28 | background-clip: text; 29 | text-fill-color: transparent; 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | animation: shine 5s linear infinite; 33 | } 34 | 35 | @keyframes shine { 36 | to { 37 | background-position: 200% center; 38 | } 39 | } 40 | 41 | .bd-placeholder-img { 42 | font-size: 1.125rem; 43 | text-anchor: middle; 44 | -webkit-user-select: none; 45 | -moz-user-select: none; 46 | user-select: none; 47 | } 48 | 49 | @media (min-width: 768px) { 50 | .bd-placeholder-img-lg { 51 | font-size: 3.5rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /16_DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 16 DOM 13 | 14 | 15 | 16 | 17 |

Practica 16 - DOM

18 |

Productos:

19 |
20 |
  • Producto 1
    • 21 |
  • Producto 2
    • 22 |
  • Producto 3
    • 23 |
    24 |
    25 | 26 |
    27 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /16_DOM/script.js: -------------------------------------------------------------------------------- 1 | const root = document.getElementById('root'); 2 | console.log(root); 3 | console.log(root.innerHTML); 4 | 5 | const title = document.getElementById('title'); 6 | title.innerText = 'Productos Nuevos' 7 | title.className = 'lead bg-primary display-1' 8 | 9 | const list = document.getElementsByTagName('li') 10 | 11 | for (const element of list) { 12 | const newLi = `${element.innerText}` 13 | element.innerText = '' 14 | element.innerHTML = newLi 15 | } 16 | 17 | const productos = [ 18 | {id: 1, titulo: 'Fiat', precio:180000, stock:5, descuento:20}, 19 | {id: 2, titulo: 'Renault', precio:200000, stock:7, descuento:30}, 20 | {id: 3, titulo: 'Ford', precio:300000, stock:10, descuento:30}, 21 | {id: 4, titulo: 'Chevrolet', precio:400000, stock:15, descuento:20}, 22 | {id: 5, titulo: 'Toyota', precio:1000000, stock:6, descuento:20}, 23 | {id: 6, titulo: 'Mitsubishi', precio:600000, stock:7, descuento:10}, 24 | {id: 7, titulo: 'Nissan', precio:300000, stock:8, descuento:15}, 25 | {id: 8, titulo: 'Volvo', precio:400000, stock:20, descuento:20}, 26 | ]; 27 | 28 | let contenedor = document.getElementById('listaAutos') 29 | productos.forEach ((productos) => { 30 | contenedor.innerHTML += `

    marca: ${productos.titulo}

    31 |

    precio: ${productos.precio}

    32 |

    stock: ${productos.stock}

    33 |

    descuento: ${productos.descuento}

    ` 34 | }) -------------------------------------------------------------------------------- /17_Eventos/script.js: -------------------------------------------------------------------------------- 1 | console.log('Ejemplo eventos'); 2 | 3 | const boton = document.getElementById('boton') 4 | const entrada = document.getElementById('entrada') 5 | 6 | boton.addEventListener('click', () => { 7 | console.log('Hola mundo desde eventos'); 8 | console.log(new Date()); 9 | console.log( entrada.value ); 10 | }) 11 | 12 | console.log(boton); 13 | 14 | console.log('Eventos!'); 15 | 16 | const btn = document.getElementById('boton') 17 | // const btn = document.querySelector('#boton') 18 | 19 | // btn.addEventListener( 'click', onClickHandler ) 20 | 21 | // function onClickHandler() { 22 | // console.log('hiciste click en el botón'); 23 | // } 24 | 25 | // btn.addEventListener('click', ()=>{console.log('hiciste click en el botón');}) 26 | 27 | const inp = document.getElementById('entrada') 28 | inp.oninput = () => { console.log('Hubo cambio'); } 29 | 30 | btn.onclick = () => { 31 | console.log('hiciste click en el botón') 32 | console.log( inp.value ); 33 | } 34 | 35 | console.log('Eventos 2'); 36 | 37 | const boton = document.getElementById('boton') 38 | 39 | boton.addEventListener('click', () => { 40 | const input = document.getElementById('entrada') 41 | const nombreProducto = input.value 42 | 43 | const nuevoProducto = document.createElement('li') 44 | nuevoProducto.innerText = nombreProducto 45 | 46 | const root = document.getElementById('root') 47 | root.appendChild(nuevoProducto) 48 | }) 49 | 50 | console.log('Eventos3'); 51 | 52 | const link = document.getElementById('send') 53 | 54 | // link.addEventListener('click', clickEnEnviar) 55 | link.onclick = clickEnEnviar 56 | 57 | function validarFormulario() { 58 | const user = document.getElementById('user') 59 | const password = document.getElementById('password') 60 | 61 | console.log(user.value); 62 | console.log(password.value); 63 | } 64 | 65 | function clickEnEnviar(evento) { 66 | evento.preventDefault() 67 | console.log('Click en el enlace'); 68 | console.log(evento.target); 69 | validarFormulario() 70 | } 71 | 72 | 73 | console.log('Eventos4'); 74 | 75 | const enviar = document.getElementById('send') 76 | 77 | enviar.onclick = e => { 78 | e.preventDefault() 79 | const parent = e.target.parentNode 80 | console.log( parent.children[0].value ); 81 | console.log( parent.children[1].value ); 82 | console.log(this); 83 | } 84 | 85 | -------------------------------------------------------------------------------- /18_Desafio_Complementario_Eventos/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: #000; 8 | } 9 | 10 | #encabezado { 11 | padding-top: 5vh; 12 | } 13 | /*GRADIENTE ANIMADO TEXTO*/ 14 | .textogradiente { 15 | color: #7431dd; 16 | background: linear-gradient( 17 | to right, 18 | #dd31dd 20%, 19 | #7431dd 40%, 20 | #0082e6 60%, 21 | #dd31dd 80% 22 | ); 23 | background-size: 200% auto; 24 | text-decoration: bold; 25 | color: #000; 26 | background-clip: text; 27 | text-fill-color: transparent; 28 | -webkit-background-clip: text; 29 | -webkit-text-fill-color: transparent; 30 | animation: shine 5s linear infinite; 31 | } 32 | 33 | @keyframes shine { 34 | to { 35 | background-position: 200% center; 36 | } 37 | } 38 | 39 | .bd-placeholder-img { 40 | font-size: 1.125rem; 41 | text-anchor: middle; 42 | -webkit-user-select: none; 43 | -moz-user-select: none; 44 | user-select: none; 45 | } 46 | 47 | @media (min-width: 768px) { 48 | .bd-placeholder-img-lg { 49 | font-size: 3.5rem; 50 | } 51 | } 52 | 53 | .fondonegro { 54 | background-color: #000; 55 | height: 100vh; 56 | padding-top: 1px; 57 | } 58 | 59 | .titulo { 60 | color: white; 61 | text-align: center; 62 | font-size: 40px; 63 | margin-top: 10%; 64 | } 65 | 66 | .mostrar { 67 | color: white; 68 | font-size: 25px; 69 | text-align: center; 70 | margin-top: 1em; 71 | margin-bottom: 1em; 72 | } 73 | 74 | .esconder { 75 | display: none; 76 | } 77 | 78 | .container { 79 | margin: 0 auto; 80 | display: grid; 81 | grid-template-columns: 33% 33% 33%; 82 | grid-template-rows: 33% 33% 33%; 83 | max-width: 300px; 84 | } 85 | 86 | .celda { 87 | border: white; 88 | border-width: 0.5rem; 89 | border-style: solid; 90 | min-width: 100px; 91 | min-height: 100px; 92 | display: flex; 93 | justify-content: center; 94 | align-items: center; 95 | font-size: 50px; 96 | cursor: pointer; 97 | background-color: black; 98 | } 99 | 100 | .JugadorX { 101 | color: #3d6ae6; 102 | } 103 | 104 | .JugadorO { 105 | color: #fb49f2; 106 | } 107 | 108 | .controles { 109 | display: flex; 110 | flex-direction: row; 111 | justify-content: center; 112 | align-items: center; 113 | margin-top: 1em; 114 | } 115 | 116 | .controles button { 117 | color: rgb(255, 255, 255); 118 | padding: 8px; 119 | border-radius: 8px; 120 | border: none; 121 | font-size: 20px; 122 | margin-left: 1em; 123 | cursor: pointer; 124 | } 125 | 126 | .restart { 127 | background-color: #498afb; 128 | } 129 | 130 | #reset { 131 | background-color: #5d38ff; 132 | } 133 | -------------------------------------------------------------------------------- /18_Desafio_Complementario_Eventos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 17 | 18 | 18 Desafio Complementario Eventos 19 | 20 | 21 | 22 |

    23 | Practica 18 - DESAFIO COMPLEMENTARIO - INCORPORAR EVENTOS 24 |

    25 |

    TA - TE - TI

    26 |
    27 |
    28 | Turno de X 29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 | 44 |
    45 |
    46 | 47 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /18_Desafio_Complementario_Eventos/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("DOMContentLoaded", () => { 2 | //escucha evento de carga de contenido 3 | const celdas = Array.from(document.querySelectorAll(".celda")); 4 | const JugadorDisplay = document.querySelector(".mostrar-jugador"); 5 | const botonReset = document.querySelector("#reset"); 6 | const anunciador = document.querySelector(".anunciador"); 7 | 8 | let tablero = ["", "", "", "", "", "", "", "", ""]; 9 | let jugadorActual = "X"; 10 | let juegoActivo = true; 11 | 12 | const JugadorX_GANA = "JugadorX_GANA"; 13 | const JugadorO_GANA = "JugadorO_GANA"; 14 | const EMPATE = "EMPATE"; 15 | 16 | /* 17 | Posiciones de las celdas en el Tablero 18 | [0] [1] [2] 19 | [3] [4] [5] 20 | [6] [7] [8] 21 | */ 22 | 23 | /* 24 | Ejemplo posicion ganadora [1, 4, 7] 25 | [0] [X] [2] 26 | [3] [X] [5] 27 | [6] [X] [8] 28 | */ 29 | 30 | const condicionesGanadoras = [ 31 | [0, 1, 2], 32 | [3, 4, 5], 33 | [6, 7, 8], 34 | [0, 3, 6], 35 | [1, 4, 7], 36 | [2, 5, 8], 37 | [0, 4, 8], 38 | [2, 4, 6], 39 | ]; 40 | 41 | function validaResultado() { 42 | let roundGANA = false; 43 | for (let i = 0; i <= 7; i++) { 44 | const condicionGanar = condicionesGanadoras[i]; 45 | const a = tablero[condicionGanar[0]]; 46 | const b = tablero[condicionGanar[1]]; 47 | const c = tablero[condicionGanar[2]]; 48 | if (a === "" || b === "" || c === "") { 49 | continue; 50 | } 51 | if (a === b && b === c) { 52 | roundGANA = true; 53 | break; 54 | } 55 | } 56 | 57 | if (roundGANA) { 58 | anunciar(jugadorActual === "X" ? JugadorX_GANA : JugadorO_GANA); 59 | juegoActivo = false; 60 | return; 61 | } 62 | 63 | if (!tablero.includes("")) anunciar(EMPATE); 64 | } 65 | 66 | const anunciar = (tipoAnuncio) => { 67 | switch (tipoAnuncio) { 68 | case JugadorO_GANA: 69 | anunciador.innerHTML = 'O GANA'; 70 | break; 71 | case JugadorX_GANA: 72 | anunciador.innerHTML = 'X GANA'; 73 | break; 74 | case EMPATE: 75 | anunciador.innerText = "EMPATE"; 76 | } 77 | anunciador.classList.remove("esconder"); 78 | }; 79 | 80 | const esAccionValida = (celda) => { 81 | if (celda.innerText === "X" || celda.innerText === "O") { 82 | return false; 83 | } 84 | 85 | return true; 86 | }; 87 | 88 | const actualizaTablero = (index) => { 89 | tablero[index] = jugadorActual; 90 | }; 91 | 92 | const cambiaJugador = () => { 93 | JugadorDisplay.classList.remove(`Jugador${jugadorActual}`); 94 | jugadorActual = jugadorActual === "X" ? "O" : "X"; 95 | JugadorDisplay.innerText = jugadorActual; 96 | JugadorDisplay.classList.add(`Jugador${jugadorActual}`); 97 | }; 98 | 99 | const accionUsuario = (celda, index) => { 100 | if (esAccionValida(celda) && juegoActivo) { 101 | celda.innerText = jugadorActual; 102 | celda.classList.add(`Jugador${jugadorActual}`); 103 | actualizaTablero(index); 104 | validaResultado(); 105 | cambiaJugador(); 106 | } 107 | }; 108 | 109 | const resettablero = () => { 110 | tablero = ["", "", "", "", "", "", "", "", ""]; 111 | juegoActivo = true; 112 | anunciador.classList.add("esconder"); 113 | 114 | if (jugadorActual === "O") { 115 | cambiaJugador(); 116 | } 117 | 118 | celdas.forEach((celda) => { 119 | celda.innerText = ""; 120 | celda.classList.remove("JugadorX"); 121 | celda.classList.remove("JugadorO"); 122 | }); 123 | }; 124 | 125 | //ESCUCHAR EVENTOS DE CLICK SOBRE CELDAS O SOBRE BOTON RESET 126 | celdas.forEach((celda, index) => { 127 | celda.addEventListener("click", () => accionUsuario(celda, index)); 128 | }); 129 | 130 | botonReset.addEventListener("click", resettablero); 131 | }); 132 | -------------------------------------------------------------------------------- /19_Storage_&_JSON/data.js: -------------------------------------------------------------------------------- 1 | 2 | export const dataEnJson = 3 | '[{"id":1,"titulo":"Ladrillo","precio":1000,"stock":5,"descuento":10},{"id":2,"titulo":"Xiaomi","precio":200,"stock":6,"descuento":20},{"id":3,"titulo":"Samsung","precio":800,"stock":7,"descuento":15},{"id":4,"titulo":"Motorola","precio":300,"stock":10,"descuento":30}]' -------------------------------------------------------------------------------- /19_Storage_&_JSON/script.js: -------------------------------------------------------------------------------- 1 | console.log('JSON 1'); 2 | 3 | import {dataEnJson} from './data.js' 4 | 5 | // const productos = [ 6 | // {id: 1, titulo: 'iPhone', precio: 1000, stock: 5, descuento: 10}, 7 | // {id: 2, titulo: 'Xiaomi', precio: 200, stock: 6, descuento: 20}, 8 | // {id: 3, titulo: 'Samsung', precio: 800, stock: 7, descuento: 15}, 9 | // {id: 4, titulo: 'Motorola', precio: 300, stock: 10, descuento: 30}, 10 | // ] 11 | 12 | // localStorage.setItem('productos', JSON.stringify(productos) ) 13 | 14 | // const productosJson = localStorage.getItem('productos') 15 | 16 | // console.log(typeof productosJson); 17 | // console.log(productosJson); 18 | 19 | console.log(dataEnJson); 20 | 21 | const data = JSON.parse(dataEnJson) 22 | 23 | data.forEach(e => { 24 | console.log(e.titulo); 25 | }); 26 | 27 | 28 | //guardar fecha 29 | console.log('Storage 1'); 30 | 31 | localStorage.setItem('fecha', new Date()) 32 | 33 | const fechaGuardada = localStorage.getItem('fecha') 34 | 35 | console.log(fechaGuardada); -------------------------------------------------------------------------------- /20_Anio_bisiesto/bisiesto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GiorgioCode/practicas-js/a023decb90abdeb341aeb37f87f4506bf8d569af/20_Anio_bisiesto/bisiesto.png -------------------------------------------------------------------------------- /20_Anio_bisiesto/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | Detector año bisiesto 12 | 13 | 14 | 15 |
    16 |
    17 |
    18 |

    Verificador de año bisiesto

    19 |
    20 | 22 | 23 |
    24 | diagrama de flujo año bisiesto 25 |
    26 |
    27 |
    28 | 29 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /20_Anio_bisiesto/main.js: -------------------------------------------------------------------------------- 1 | let boton = document.getElementById("button-addon2") 2 | let input = document.getElementById("input_anio") 3 | let anio = 0 4 | input.addEventListener("change", (e) => { 5 | anio = e.target.value.toLowerCase(); 6 | }); 7 | 8 | function bisiesto(anio_a_verificar) { 9 | if(anio_a_verificar>=1582){ 10 | if (anio_a_verificar%4==0){ 11 | if (anio_a_verificar%100!=0) { 12 | if(anio_a_verificar%400!=0) { 13 | return("es bisiesto") 14 | }else { 15 | return("no es bisiesto") 16 | } 17 | } else { 18 | return("no es bisiesto") 19 | } 20 | 21 | } else { 22 | return("no es bisiesto") 23 | } 24 | } else { 25 | return("el año no se encuentra dentro del calendario GREGORIANO") 26 | } 27 | } 28 | 29 | boton.addEventListener("click", (e)=>{ 30 | if (anio!==0) { 31 | alert("El año " + anio +" "+bisiesto(anio)) 32 | } else { 33 | alert("debe introducir un año para poder calcularlo =)") 34 | } 35 | }) 36 | 37 | -------------------------------------------------------------------------------- /20_Anio_bisiesto/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(8, 1, 31); 3 | } 4 | -------------------------------------------------------------------------------- /CODING.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GiorgioCode/practicas-js/a023decb90abdeb341aeb37f87f4506bf8d569af/CODING.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aprendiendo Javascript! 2 | 3 | ![Night Coding](https://practicajavascript.netlify.app/coding.gif) 4 | 5 | Hola! Mi nombre es Jorge Paez y me encuentro aprendiendo Javascript con [CODERHOUSE]. 6 | En este repositorio, documentaré mis practicas y pruebas tanto propias del curso como externas al mismo. 7 | Las mismas se encontraran ordenadas en orden ascendente de complejidad. 8 | 9 | --- 10 | 11 | # N° 01 - Uso de prompt y variables. 12 | 13 | Pedir al usuario una seria de datos y mostrarlos en un ALERT. 14 | 15 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/01_prompt) - [VER EJEMPLO](https://practicajavascript.netlify.app/01_prompt/) 16 | 17 | --- 18 | 19 | # N° 02 - Uso de prompt y condicional. 20 | 21 | Pedir al usuario una serie de datos y usarlos para efectuar una validacion simple con un IF. 22 | 23 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/02_prompt_condicional) - [VER EJEMPLO](https://practicajavascript.netlify.app/02_prompt_condicional) 24 | 25 | --- 26 | 27 | # N° 03 - Contador de personas (EXTERNO AL CURSO - PRÁCTICA PERSONAL) 28 | 29 | Generar un simulador de contador manual de personas, implementando bootstrap 5 en el HTML. 30 | 31 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/03_contador) - [VER EJEMPLO](https://practicajavascript.netlify.app/03_contador/) 32 | 33 | --- 34 | 35 | # N° 04 - Ciclos 36 | 37 | ejemplo uso de ciclo while (mantener pregunta mientras no se acierta numero oculto) 38 | 39 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/04_ciclos) - [VER EJEMPLO](https://practicajavascript.netlify.app/04_ciclos/) 40 | 41 | --- 42 | 43 | # N° 05 - Desafio complementario 1 - CICLOS 44 | 45 | Generar una implementacion de un ciclo FOR o WHILE 46 | En este caso, utilizó un SWITCH para elegir si ejecutar un generador de tablas de multiplicar o un generador de secuencias de fibonacci. 47 | 48 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/05_desafio_complementario_1) - [VER EJEMPLO](https://practicajavascript.netlify.app/05_desafio_complementario_1/) 49 | 50 | --- 51 | 52 | # N° 06 - Funciones 53 | 54 | sumar dos numeros pedidos al usuario, usando una funcion. 55 | 56 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/06_funciones) - [VER EJEMPLO](https://practicajavascript.netlify.app/06_funciones) 57 | 58 | --- 59 | 60 | # N° 07 - Funciones flecha 61 | 62 | sumar y restar numeros usando funciones flecha. 63 | 64 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/07_funciones_flecha) - [VER EJEMPLO](https://practicajavascript.netlify.app/07_funciones_flecha) 65 | 66 | --- 67 | 68 | # N° 08 - Desafio Entregable 1 - Simulador Interactivo 69 | 70 | Se realizó un calculador de dosis de medicamentos. 71 | 72 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/08_desafio_entregable_1_simulador/) - [VER EJEMPLO](https://practicajavascript.netlify.app/08_desafio_entregable_1_simulador/) 73 | 74 | --- 75 | 76 | # N° 09 - Práctica Independiente - FizzBuzz 77 | 78 | Se realizó un generador de sucesión FizzBuzz. 79 | 80 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/09_FizzBuzz) - [VER EJEMPLO](https://practicajavascript.netlify.app/09_FizzBuzz) 81 | 82 | --- 83 | 84 | # N° 10 - Objetos, Clases, FOR IN, Funcion Constructora, Metodos y Funciones 85 | 86 | practicas en clase de Objetos, Clases y bucle FOR IN 87 | 88 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/10_objetos) - [VER EJEMPLO](https://practicajavascript.netlify.app/10_objetos) 89 | 90 | --- 91 | 92 | # N° 10 - Objetos, Clases, FOR IN, Funcion Constructora, Metodos y Funciones 93 | 94 | practicas en clase de Objetos, Clases y bucle FOR IN 95 | 96 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/10_objetos) - [VER EJEMPLO](https://practicajavascript.netlify.app/10_objetos) 97 | 98 | --- 99 | 100 | # N° 11 - Práctica Arrays 101 | 102 | practica de Arrays y Arrays de objetos 103 | 104 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/11-arrays) - [VER EJEMPLO](https://practicajavascript.netlify.app/11_arrays) 105 | 106 | --- 107 | 108 | # N° 12 - Presupuesto automáticco [EN PROCESO] 109 | 110 | Práctica para generar una aplicacion de presupuesto de diseño web automático. 111 | 112 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/12_presupuestador) - [VER EJEMPLO](https://practicajavascript.netlify.app/12_presupuestador) 113 | 114 | --- 115 | 116 | # N° 13 - Desafío Complementario - Incorporar Arrays 117 | 118 | En este desafio complementario, se ha desarrollado una aplicacion simple de lista de compras, en donde se utilizan objetos y arrays. 119 | 120 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/13_Desafio_Complementario_incorporar_arrays/) - [VER EJEMPLO](https://practicajavascript.netlify.app/13_Desafio_Complementario_incorporar_arrays/) 121 | 122 | --- 123 | 124 | # N° 14 - Funciones de Orden superior: forEach, map, filter, find, some, every, reduce, sort. 125 | 126 | Practica de funciones de Orden superior 127 | 128 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/14_funciones_orden_superior/) - [VER EJEMPLO](https://practicajavascript.netlify.app/14_funciones_orden_superior/) 129 | 130 | --- 131 | 132 | # N° 15 - Practica Independiente - Lista de Pendientes 133 | 134 | practica desarrollada por Bluuweb en: https://www.youtube.com/watch?v=DEbNCqe2e2U 135 | 136 | Practica de manejo de DOM, addEventListener, LocalStorage, ClassList, DOMContentLoaded, createDocumentFragment, HTML Template, querySelector, JSON.stringify, cloneNode, appendChild, stopPropagation 137 | 138 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/15_Lista_pendientes/) - [VER EJEMPLO](https://practicajavascript.netlify.app/15_Lista_pendientes/) 139 | 140 | --- 141 | 142 | # N° 16 - Practica manejo de DOM 143 | 144 | Práctica manejo de DOM 145 | 146 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/16_DOM/) - [VER EJEMPLO](https://practicajavascript.netlify.app/16_DOM/) 147 | 148 | --- 149 | 150 | # N° 18 - Desafío Complementario - Eventos 151 | 152 | Práctica de eventos: se realizó un TA TE TI, interactuando con el DOM, cuando el usuario clickea en las celdas. 153 | 154 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/18_Desafio_Complementario_Eventos/) - [VER EJEMPLO](https://practicajavascript.netlify.app/18_Desafio_Complementario_Eventos/) 155 | 156 | --- 157 | 158 | # N° 20 - Practica Independiente - Verificador año bisiesto 159 | 160 | En funcion de un año ingresado en un input, se verifica que el año sea o no bisiesto. 161 | [VER CÓDIGO](https://github.com/GiorgioCode/practicas-js/tree/master/20_Anio_bisiesto/) - [VER EJEMPLO](https://practicajavascript.netlify.app/20_Anio_bisiesto/) 162 | 163 | --- 164 | --------------------------------------------------------------------------------