├── docs ├── images │ ├── Demo.png │ ├── iconmonstr-school-6-240.png │ ├── iconmonstr-chart-4.svg │ ├── iconmonstr-banknote-thin.svg │ ├── iconmonstr-cube-6.svg │ └── iconmonstr-tag-21.svg ├── Talleres │ ├── assets │ │ ├── iconmonstr-chart-3-240.png │ │ ├── iconmonstr-coin-7-240.png │ │ ├── iconmonstr-cube-5-240.png │ │ ├── iconmonstr-tag-23-240.png │ │ ├── iconmonstr-triangle-2.svg │ │ ├── iconmonstr-square-6.svg │ │ ├── triangle.svg │ │ └── iconmonstr-circle-3.svg │ ├── t2 │ │ ├── app.js │ │ ├── index.htm │ │ └── styles.css │ ├── t4 │ │ ├── analisis.js │ │ ├── salarios.js │ │ ├── index.htm │ │ └── styles.css │ ├── t3 │ │ ├── index.htm │ │ ├── app.js │ │ └── styles.css │ └── t1 │ │ ├── styles.css │ │ ├── app.js │ │ └── index.htm ├── js │ └── app.js ├── Retos │ ├── reto_03.js │ ├── reto_04.js │ ├── reto_02.js │ └── reto_01.js ├── styles │ ├── glide.default.css │ ├── glide.theme.css │ └── styles.css └── index.html └── README.md /docs/images/Demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/images/Demo.png -------------------------------------------------------------------------------- /docs/images/iconmonstr-school-6-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/images/iconmonstr-school-6-240.png -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-chart-3-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/Talleres/assets/iconmonstr-chart-3-240.png -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-coin-7-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/Talleres/assets/iconmonstr-coin-7-240.png -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-cube-5-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/Talleres/assets/iconmonstr-cube-5-240.png -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-tag-23-240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sergio9815/curso-practicoJS/HEAD/docs/Talleres/assets/iconmonstr-tag-23-240.png -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-triangle-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/iconmonstr-chart-4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-square-6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/Talleres/assets/triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/js/app.js: -------------------------------------------------------------------------------- 1 | var glide = new Glide('.glide', { 2 | type: 'slider', 3 | perView: 3, 4 | focusAt: 0, 5 | bound: true, 6 | rewind: true, 7 | hoverpause: true, 8 | autoplay: "5000", 9 | gap: -2, 10 | breakpoints: { 11 | 980: { 12 | perView: 3 13 | }, 14 | 650: { 15 | perView: 2 16 | }, 17 | 520: { 18 | perView: 1 19 | } 20 | } 21 | }) 22 | 23 | glide.mount() -------------------------------------------------------------------------------- /docs/Retos/reto_03.js: -------------------------------------------------------------------------------- 1 | const coupons = [ 2 | { 3 | name: 'JSCoupon', 4 | discount: 15 5 | }, 6 | { 7 | name: 'PL-12345', 8 | discount: 25 9 | }, 10 | { 11 | name: 'PlatziCoupon', 12 | discount: 45 13 | }, 14 | ] 15 | 16 | function descuentosConCupones(price, coupon) { 17 | const value = coupons.find((element) => element.name === coupon) 18 | const percentDiscount = 100 - value.discount 19 | const finalPrice = (price * percentDiscount) / 100 20 | return finalPrice; 21 | } 22 | 23 | const result = descuentosConCupones(100, 'JSCoupon') 24 | console.log(result); -------------------------------------------------------------------------------- /docs/Talleres/assets/iconmonstr-circle-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/iconmonstr-banknote-thin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/Retos/reto_04.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------------- 2 | // MEDIA CUADRÁTICA 3 | 4 | // Esta se define como la raíz cuadrada del promedio de los elementos al cuadrado. 5 | 6 | // Es útil para calcular la media de variables que toman valores negativos y positivos. 7 | // Se suele utilizar cuando el símbolo de la variable no es importante y lo que interesa 8 | // es el valor absoluto del elemento. Por ejemplo, para calcular la media de errores de medida. 9 | 10 | 11 | const rootMeanSquare = (list) => { 12 | const squaredNumbers = (list.map((num) => Math.pow(num, 2))) 13 | const avg = (squaredNumbers.reduce((a = 0, b) => a + b)) / list.length 14 | return Math.sqrt(avg).toFixed(3) 15 | } 16 | 17 | let result = rootMeanSquare([1, -2, 24, -15, 17, 25, 10]) 18 | console.log(result); 19 | -------------------------------------------------------------------------------- /docs/Talleres/t2/app.js: -------------------------------------------------------------------------------- 1 | // PRECIOS Y DESCUENTOS 2 | // --------------------------------------------------------------------------- 3 | 4 | function calcularDescuentos(precio, descuento) { 5 | const porcentajePrecioDescuento = 100 - descuento 6 | const precioTotal = (precio * porcentajePrecioDescuento) / 100 7 | return precioTotal; 8 | } 9 | 10 | const btn_CalcularDesc = document.getElementById('CalcularDesc') 11 | const result = document.getElementById('main__result') 12 | 13 | btn_CalcularDesc.addEventListener('click', function descuentos() { 14 | const precio = document.getElementById('inputPrecio') 15 | const desc = document.getElementById('inputDesc') 16 | let data = calcularDescuentos(parseFloat(precio.value), parseFloat(desc.value)) 17 | 18 | result.innerHTML = `PRECIO A PAGAR:
$ ${data.toFixed(2)}` 19 | }) 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](docs/images/Demo.png) 2 | ... 3 | 4 | ## Taller #1: figuras geométricas 5 | 6 | - Primer paso: definir las fórmulas 7 | - Segundo paso: implementar la fórmulas en JavaScript 8 | - Tercer paso: crear funciones 9 | - Cuarto paso: integrar JS con HTML 10 | 11 | 12 | ## Taller #2: porcentaajes y descuentos 13 | 14 | - Primer paso: definir las fórmulas 15 | - Segundo paso: implementar la fórmulas en JavaScript 16 | - Tercer paso: crear funciones 17 | - Cuarto paso: integrar JS con HTML 18 | 19 | ## Taller #3: promedio, mediana y moda 20 | 21 | - Primer paso: definir las fórmulas 22 | - Segundo paso: implementar la fórmulas en JavaScript 23 | - Tercer paso: crear funciones 24 | - Cuarto paso: integrar JS con HTML 25 | 26 | ## Taller #4: análisis salarial 27 | 28 | - Primer paso: definir las fórmulas 29 | - Segundo paso: implementar la fórmulas en JavaScript 30 | - Tercer paso: crear funciones 31 | - Cuarto paso: integrar JS con HTML 32 | -------------------------------------------------------------------------------- /docs/Retos/reto_02.js: -------------------------------------------------------------------------------- 1 | // En este ejercicio debes crear una función para calcular la altura de un triángulo isósceles. 2 | 3 | // La función debe recibir, como parámetros, la longitud de los 3 lados del triángulo. 4 | // La función debe validar que la longitud de los 3 lados del triángulo corresponden a un triángulo isósceles. 5 | // La función debe retornar la altura del triángulo. 6 | 7 | const errors = [ 8 | { 9 | name: 'Error 1', 10 | message: '😵 Ooops, los lados a y b son distintos.' 11 | }, 12 | { 13 | name: 'Error 2', 14 | message: '🤔 No corresponde a un triángulo isósceles.' 15 | }, 16 | ] 17 | 18 | const calculate = (lados, base) => { 19 | let a = Math.pow(lados, 2) 20 | let b = (Math.pow(base, 2)) / 4 21 | const altura = parseFloat(Math.sqrt(a - b)).toFixed(2) 22 | return altura; 23 | } 24 | 25 | function alturaIsoceles(lado1, lado2, base) { 26 | let value = 0 27 | 28 | lado1 === lado2 29 | ? value = calculate(lado1, base) 30 | : value = errors[0].message 31 | lado1 != base 32 | ? ' ' 33 | : value = errors[1].message 34 | 35 | return value 36 | } 37 | 38 | export { alturaIsoceles } -------------------------------------------------------------------------------- /docs/images/iconmonstr-cube-6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/iconmonstr-tag-21.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/Talleres/t4/analisis.js: -------------------------------------------------------------------------------- 1 | // import { calcularMediana } from "../t3/app.js"; 2 | 3 | // OBTENER SALARIOS 4 | 5 | // const salarioPanama = panama.map((persona) => persona.salary) 6 | 7 | // SALARIOS ORDENADOS 8 | 9 | // const salariosSorted = salarioPanama.sort((a, b) => a - b) 10 | 11 | // MEDIANA GENERAL 12 | // const medianaGeneral = calcularMediana(salariosSorted) 13 | // console.log(`Mediana general de Panama $${medianaGeneral}`); 14 | 15 | // MEDIANA DEL TOP 10% 16 | // const spStart = ((salariosSorted.length) * 90) / 100 17 | // const spCount = salariosSorted.length - spStart 18 | 19 | // const salariosTop = salariosSorted.splice(spStart, spCount) 20 | // const medianaTop = calcularMediana(salariosTop) 21 | // console.log(`Mediana general de salarios Top en Panama $${medianaTop}`); 22 | 23 | // ---------------------------------------------------------------------------------------------------------------- 24 | // CAPACIDAD DE CREDITO 25 | 26 | const btn_Calcular = document.getElementById('calcular') 27 | const main__result = document.getElementById('main__result') 28 | const LIMIT = 40 29 | 30 | btn_Calcular.addEventListener('click', () => { 31 | const salary = document.getElementById('inputIngresos') 32 | const expenses = document.getElementById('inputGastos') 33 | 34 | const netIncome = salary.value - expenses.value 35 | 36 | const debtCapacity = ((LIMIT / 100) * netIncome).toFixed(2) 37 | console.log(debtCapacity); 38 | 39 | main__result.innerText = `🧐Usted tiene una capacidad de endeudamiento de $${debtCapacity}. Por lo tanto, puede asumir una deuda cuya cuota mensual no supere ese monto. 💸` 40 | }) -------------------------------------------------------------------------------- /docs/styles/glide.default.css: -------------------------------------------------------------------------------- 1 | /* --- --- -- CONTENEDOR PRINCIPAL -- --- --- */ 2 | 3 | .glide { 4 | position: relative; 5 | width: 100%; 6 | box-sizing: border-box; 7 | } 8 | 9 | .glide * { 10 | box-sizing: inherit; 11 | } 12 | 13 | /* --- --- -- CONTENEDOR DEL CAROUSEL -- --- --- */ 14 | 15 | .glide__track { 16 | overflow: hidden; 17 | } 18 | 19 | .glide__slides { 20 | position: relative; 21 | width: 100%; 22 | list-style: none; 23 | backface-visibility: hidden; 24 | transform-style: preserve-3d; 25 | touch-action: pan-Y; 26 | overflow: hidden; 27 | padding: 0; 28 | white-space: nowrap; 29 | display: flex; 30 | flex-wrap: nowrap; 31 | will-change: transform; 32 | } 33 | 34 | .glide__slides--dragging { 35 | user-select: none; 36 | } 37 | 38 | /* --- --- -- CONTENEDOR DE SLIDES -- --- --- */ 39 | 40 | .glide__slide { 41 | width: 90%; 42 | height: 100%; 43 | flex-shrink: 0; 44 | margin-top: 25px; 45 | white-space: normal; 46 | user-select: none; 47 | -webkit-touch-callout: none; 48 | -webkit-tap-highlight-color: transparent; 49 | text-align: center; 50 | } 51 | 52 | /* --- --- -- CONTENIDO -- --- --- */ 53 | 54 | .glide__slide { 55 | /* border: 2px solid #0B090A; */ 56 | width: 100px; 57 | height: 350px; 58 | margin-top: -35px; 59 | } 60 | 61 | /* --- --- -- CONTENEDOR DE FLECHAS -- --- --- */ 62 | 63 | .glide__arrows { 64 | -webkit-touch-callout: none; 65 | user-select: none; 66 | } 67 | 68 | /* --- --- -- CONTENEDOR DE INDICADORES -- --- --- */ 69 | 70 | .glide__bullets { 71 | -webkit-touch-callout: none; 72 | user-select: none; 73 | } 74 | 75 | .glide--rtl { 76 | direction: rtl; 77 | } 78 | -------------------------------------------------------------------------------- /docs/Talleres/t4/salarios.js: -------------------------------------------------------------------------------- 1 | const panama = [] 2 | 3 | panama.push({ 4 | name: 'Sergio', 5 | salary: 1000 6 | }) 7 | 8 | panama.push({ 9 | name: 'Juan', 10 | salary: 1500 11 | }) 12 | 13 | panama.push({ 14 | name: 'Aurora', 15 | salary: 1300 16 | }) 17 | 18 | panama.push({ 19 | name: 'Pedrito', 20 | salary: 1200 21 | }) 22 | 23 | panama.push({ 24 | name: 'Lionel', 25 | salary: 500 26 | }) 27 | 28 | panama.push({ 29 | name: 'Adelaida', 30 | salary: 800 31 | }) 32 | 33 | panama.push({ 34 | name: 'Kenia', 35 | salary: 400 36 | }) 37 | 38 | panama.push({ 39 | name: 'Alexis', 40 | salary: 1000 41 | }) 42 | 43 | panama.push({ 44 | name: 'Edgar', 45 | salary: 880 46 | }) 47 | 48 | panama.push({ 49 | name: 'Margarita', 50 | salary: 300 51 | }) 52 | 53 | panama.push({ 54 | name: "Carla", 55 | salary: 500, 56 | }) 57 | 58 | panama.push({ 59 | name: "Antonieta", 60 | salary: 1500, 61 | }) 62 | 63 | panama.push({ 64 | name: "Alicia", 65 | salary: 1300, 66 | }) 67 | 68 | panama.push({ 69 | name: "Ana", 70 | salary: 2400, 71 | }) 72 | 73 | panama.push({ 74 | name: "Julia", 75 | salary: 3400, 76 | }) 77 | 78 | panama.push({ 79 | name: "Rosa", 80 | salary: 400, 81 | }) 82 | 83 | panama.push({ 84 | name: "Angélica", 85 | salary: 400, 86 | }) 87 | 88 | panama.push({ 89 | name: "Tatiana", 90 | salary: 400, 91 | }) 92 | 93 | panama.push({ 94 | name: "Lorena", 95 | salary: 600, 96 | }) 97 | 98 | panama.push({ 99 | name: "Carolina", 100 | salary: 1600, 101 | }) 102 | -------------------------------------------------------------------------------- /docs/Talleres/t2/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Precios y descuentos 15 | 16 | 17 | 18 |
19 | 33 |
34 |

Porcentajes y descuentos %

35 |

Segundo taller del curso práctico de JavaScript 🔮

36 |
37 |
38 |
39 | 40 |
41 |

CALCULE SU DESCUENTO

42 |
43 | 44 | 45 | 46 | 47 | 48 |
49 | (¬‿¬) 50 |
51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/Talleres/t4/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Análisis de salarios 15 | 16 | 17 | 18 |
19 | 33 |
34 |

Análisis de salarios

35 |

Último taller del curso práctico de JavaScript 🍭

36 |
37 |
38 |
39 | 40 |
41 |

VERIFIQUE SU CAPACIDAD DE CRÉDITO

42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | (❁´◡`❁) 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/styles/glide.theme.css: -------------------------------------------------------------------------------- 1 | .glide__arrow { 2 | position: absolute; 3 | display: block; 4 | top: 50%; 5 | z-index: 2; 6 | color: #0B090A; 7 | text-transform: uppercase; 8 | width: 50px; 9 | padding: 9px 12px; 10 | background-color: transparent; 11 | /* --- --- -- SOLO FLECHAS -- --- --- */ 12 | /* border: none; */ 13 | border: 2px solid #0B090A; 14 | border-radius: 4px; 15 | box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); 16 | text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); 17 | /* --- --- --- --- -- --- --- --- --- */ 18 | opacity: 1; 19 | cursor: pointer; 20 | transition: opacity 150ms ease, border 300ms ease-in-out; 21 | transform: translateY(-50%); 22 | line-height: 1; 23 | } 24 | 25 | 26 | /* --- --- -- SOLO FLECHAS -- --- --- */ 27 | 28 | /* .fas { 29 | color: white; 30 | opacity: 0.33; 31 | } 32 | 33 | .fas:hover { 34 | opacity: 100%; 35 | } */ 36 | 37 | .glide__arrow:focus { 38 | outline: none; 39 | } 40 | 41 | .glide__arrow:hover { 42 | border-color: #0B090A; 43 | color: white; 44 | opacity: 100%; 45 | } 46 | 47 | /* --- --- -- SOLO FLECHAS -- --- --- */ 48 | .glide__arrow--left { 49 | left: 1.2rem; 50 | } 51 | 52 | .glide__arrow--right { 53 | right: 1.2rem; 54 | } 55 | 56 | /* .glide__arrow--left { 57 | left: -38px; 58 | } 59 | 60 | .glide__arrow--right { 61 | right: -38px; 62 | } */ 63 | 64 | .glide__arrow--disabled { 65 | opacity: 0.33; 66 | } 67 | 68 | /* --- --- -- POSICION INDICADORES -- --- --- */ 69 | 70 | .glide__bullets { 71 | position: absolute; 72 | z-index: 2; 73 | bottom: 0rem; 74 | left: 50%; 75 | display: inline-flex; 76 | list-style: none; 77 | transform: translateX(-50%); 78 | } 79 | 80 | /* --- --- -- ESTILO INDICADORES -- --- --- */ 81 | 82 | .glide__bullet { 83 | background-color: rgba(0, 0, 0, 0.432); 84 | width: 30px; 85 | height: 3px; 86 | padding: 0; 87 | border-radius: 5%; 88 | border: 2px solid transparent; 89 | transition: all 300ms ease-in-out; 90 | cursor: pointer; 91 | line-height: 0; 92 | box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); 93 | margin: 0 0.25em; 94 | } 95 | 96 | /* --- --- -- EFECTOS DE LOS INDICADORES -- --- --- */ 97 | 98 | .glide__bullet:focus { 99 | outline: none; 100 | } 101 | 102 | .glide__bullet:hover, 103 | .glide__bullet:focus { 104 | border: 2px solid #0B090A; 105 | background-color: #0B090A; 106 | } 107 | 108 | .glide__bullet--active { 109 | background-color: #0B090A; 110 | } 111 | 112 | .glide--swipeable { 113 | cursor: grab; 114 | cursor: -moz-grab; 115 | cursor: -webkit-grab; 116 | } 117 | 118 | .glide--dragging { 119 | cursor: grabbing; 120 | cursor: -moz-grabbing; 121 | cursor: -webkit-grabbing; 122 | } 123 | -------------------------------------------------------------------------------- /docs/Talleres/t3/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Promedio, moda, mediana 15 | 16 | 17 | 18 |
19 | 33 |
34 |

Promedio, moda y mediana

35 |

Tercer taller del curso práctico de JavaScript 🎈

36 |
37 |
38 |
39 | 40 |
41 |

CÁLCULOS ESTADÍSTICOS

42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 |
50 |
PROMEDIO
51 |
MEDIANA
52 |
MODA
53 |
54 | 55 |
56 | ^_^ 57 |
58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /docs/Talleres/t2/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #ffadad; 3 | } 4 | 5 | .header__nav a{ 6 | color:var(--main); 7 | } 8 | 9 | .fcolor { 10 | color: var(--main); 11 | } 12 | 13 | .header { 14 | height: 200px; 15 | gap: 20px; 16 | } 17 | 18 | .header__nav { 19 | height: 40px; 20 | } 21 | 22 | .header-decoration { 23 | height: 54px; 24 | margin-top: 40px; 25 | background: linear-gradient(to top left, transparent 50%, var(--gray) 51%); 26 | margin-bottom: 20px; 27 | } 28 | 29 | .main { 30 | width: 100%; 31 | height: 450px; 32 | display: flex; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: center; 36 | gap: 20px; 37 | margin-bottom: 50px; 38 | margin: auto; 39 | } 40 | 41 | #main-title { 42 | text-align: center; 43 | } 44 | 45 | .main__desc-form { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: space-around; 49 | width: 40%; 50 | height: 220px; 51 | } 52 | 53 | h2 { 54 | font-size: 25px; 55 | text-transform: uppercase; 56 | } 57 | 58 | label { 59 | font-weight: bold; 60 | font-size: 20px; 61 | } 62 | 63 | ::placeholder { 64 | font-size: 15px; 65 | color: var(--black-2); 66 | } 67 | 68 | .input { 69 | outline: none; 70 | width: 100%; 71 | height: 30px; 72 | font-weight: bold; 73 | font-size: 20px; 74 | text-align: center; 75 | color: var(--black); 76 | border: 2px solid var(--black); 77 | background-color: transparent; 78 | } 79 | 80 | button { 81 | width: 100%; 82 | background-color: var(--black-3); 83 | border: none; 84 | height: 35px; 85 | color: white; 86 | letter-spacing: 3px; 87 | text-transform: uppercase; 88 | outline: none; 89 | cursor: pointer; 90 | font-weight: bold; 91 | border-radius: 5px; 92 | } 93 | 94 | button:hover { 95 | color: white; 96 | background-color: var(--black); 97 | transition-duration: 0.4s; 98 | } 99 | 100 | .result { 101 | color: var(--black); 102 | font-size: 20px; 103 | font-weight: bold; 104 | width: 40%; 105 | height: 150px; 106 | border-radius: 20px; 107 | border: 2px solid ; 108 | display: flex; 109 | align-items: center; 110 | justify-content: center; 111 | text-align: center; 112 | } 113 | 114 | /* ------------------------------------------------------------------------------------------------ */ 115 | 116 | @media screen and (max-width: 900px) { 117 | .result, .main__desc-form { 118 | width: 60%; 119 | } 120 | 121 | .header__info-title { 122 | font-size: 29px; 123 | } 124 | 125 | label { 126 | text-align: center; 127 | } 128 | } 129 | 130 | @media screen and (max-width: 870px) { 131 | #main-title { 132 | font-size: 22px; 133 | } 134 | } 135 | 136 | @media screen and (max-width: 480px) { 137 | .header__info-desc { 138 | font-size: 14px; 139 | } 140 | 141 | .result, .main__desc-form { 142 | width: 85%; 143 | } 144 | } 145 | 146 | -------------------------------------------------------------------------------- /docs/Talleres/t1/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #87d1ab; 3 | } 4 | 5 | .header__nav a { 6 | color: var(--main); 7 | } 8 | 9 | .fcolor { 10 | color: var(--main); 11 | } 12 | 13 | .header { 14 | height: 200px; 15 | gap: 20px; 16 | } 17 | 18 | .header__nav { 19 | height: 40px; 20 | } 21 | 22 | .header-decoration { 23 | height: 54px; 24 | margin-top: 40px; 25 | background: linear-gradient(to top left, transparent 50%, var(--gray) 51%); 26 | margin-bottom: -30px; 27 | } 28 | 29 | .main { 30 | width: 100%; 31 | display: grid; 32 | grid-template-columns: 1fr 1fr; 33 | margin-bottom: 50px; 34 | margin-top: 35px; 35 | padding-bottom: 10px; 36 | } 37 | 38 | .main__figuras { 39 | margin-top: 50px; 40 | display: flex; 41 | align-items: center; 42 | justify-content: space-around; 43 | flex-direction: column; 44 | height: 400px; 45 | } 46 | 47 | h2 { 48 | font-family: "Josefin Sans", sans-serif; 49 | letter-spacing: 3px; 50 | text-align: center; 51 | } 52 | 53 | .main__figuras-form { 54 | font-family: "Josefin Sans", sans-serif; 55 | display: flex; 56 | flex-direction: column; 57 | align-items: center; 58 | gap: 10px; 59 | width: 300px; 60 | text-align: center; 61 | } 62 | 63 | svg { 64 | width: 150px; 65 | } 66 | 67 | path { 68 | fill: var(--black); 69 | } 70 | 71 | .result { 72 | color: var(--black); 73 | font-size: 30px; 74 | font-weight: bold; 75 | } 76 | 77 | label { 78 | font-family: "Josefin Sans", sans-serif; 79 | font-weight: bold; 80 | } 81 | 82 | ::placeholder { 83 | font-size: 15px; 84 | color: var(--black-2); 85 | } 86 | 87 | .input { 88 | outline: none; 89 | width: 300px; 90 | height: 30px; 91 | font-weight: bold; 92 | font-size: 20px; 93 | text-align: center; 94 | color: var(--black); 95 | border: 2px solid var(--black); 96 | background-color: transparent; 97 | } 98 | 99 | button { 100 | width: 300px; 101 | background-color: var(--black-3); 102 | border: 2px solid var(--black-3); 103 | height: 30px; 104 | color: var(--main); 105 | letter-spacing: 3px; 106 | text-transform: uppercase; 107 | outline: none; 108 | cursor: pointer; 109 | font-weight: bold; 110 | } 111 | 112 | button:hover { 113 | color: white; 114 | background-color: var(--black); 115 | transition: 1s; 116 | } 117 | 118 | .form__input-tri { 119 | display: flex; 120 | } 121 | 122 | .tri { 123 | width: 75px; 124 | } 125 | 126 | .triIC { 127 | width: 150px; 128 | } 129 | 130 | /* ------------------------------------------------------------------------------------------------ */ 131 | 132 | @media screen and (max-width: 780px) { 133 | .main { 134 | grid-template-columns: 1fr; 135 | } 136 | 137 | .header__info-title { 138 | font-size: 40px; 139 | } 140 | } 141 | 142 | @media screen and (max-width: 466px) { 143 | .header__info-title { 144 | font-size: 30px; 145 | } 146 | 147 | .header__info-desc { 148 | font-size: 14px; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /docs/Talleres/t4/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #e4c1f9; 3 | } 4 | 5 | .header__nav a { 6 | color: var(--main); 7 | } 8 | 9 | .fcolor { 10 | color: var(--main); 11 | } 12 | 13 | .header { 14 | height: 200px; 15 | gap: 20px; 16 | } 17 | 18 | .header__nav { 19 | height: 40px; 20 | } 21 | 22 | .header-decoration { 23 | height: 54px; 24 | margin-top: 40px; 25 | background: linear-gradient(to top left, transparent 50%, var(--gray) 51%); 26 | margin-bottom: 0px; 27 | } 28 | 29 | .main { 30 | width: 100%; 31 | height: 480px; 32 | display: flex; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: center; 36 | gap: 20px; 37 | margin-bottom: 50px; 38 | margin: auto; 39 | } 40 | 41 | #main-title { 42 | text-align: center; 43 | } 44 | 45 | .main__desc-form { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: space-around; 49 | width: 40%; 50 | height: 320px; 51 | } 52 | 53 | h2 { 54 | font-size: 25px; 55 | text-transform: uppercase; 56 | } 57 | 58 | label { 59 | font-weight: bold; 60 | font-size: 18px; 61 | } 62 | 63 | ::placeholder { 64 | font-size: 15px; 65 | color: var(--black-2); 66 | } 67 | 68 | .container { 69 | display: flex; 70 | align-items: center; 71 | justify-content: space-around; 72 | 73 | } 74 | 75 | .input { 76 | outline: none; 77 | width: 100%; 78 | height: 30px; 79 | font-weight: bold; 80 | font-size: 20px; 81 | text-align: center; 82 | color: var(--black); 83 | border: 2px solid var(--black); 84 | background-color: transparent; 85 | } 86 | 87 | button { 88 | width: 100%; 89 | background-color: var(--black-3); 90 | border: none; 91 | height: 35px; 92 | color: white; 93 | letter-spacing: 3px; 94 | text-transform: uppercase; 95 | outline: none; 96 | cursor: pointer; 97 | font-weight: bold; 98 | border-radius: 5px; 99 | } 100 | 101 | button:hover { 102 | background-color: var(--black-2); 103 | transition-duration: 0.4s; 104 | } 105 | 106 | .result { 107 | color: var(--black); 108 | font-size: 18px; 109 | font-weight: bold; 110 | width: 40%; 111 | height: 150px; 112 | padding: 20px; 113 | border-radius: 20px; 114 | border: 2px solid; 115 | display: flex; 116 | align-items: center; 117 | justify-content: center; 118 | text-align: justify; 119 | } 120 | 121 | /* ------------------------------------------------------------------------------------------------ */ 122 | 123 | @media screen and (max-width: 1160px) { 124 | 125 | label { 126 | text-align: center; 127 | } 128 | 129 | .main__desc-form, .result { 130 | width: 50%; 131 | } 132 | } 133 | 134 | @media screen and (max-width: 870px) { 135 | .main__desc-form, .result { 136 | width: 70%; 137 | } 138 | 139 | #main-title { 140 | font-size: 22px; 141 | } 142 | } 143 | 144 | @media screen and (max-width: 480px) { 145 | .header__info-desc { 146 | font-size: 14px; 147 | } 148 | 149 | .main__desc-form, .result { 150 | width: 90%; 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /docs/Talleres/t3/app.js: -------------------------------------------------------------------------------- 1 | // PROMEDIO, MODA, MEDIANA 2 | // --------------------------------------------------------------------------- 3 | 4 | const promedio = document.getElementById("promedio"); 5 | const mediana = document.getElementById("mediana"); 6 | const moda = document.getElementById("moda"); 7 | const btn_Calcular = document.getElementById('calcular') 8 | const clear = document.getElementById('clear') 9 | const main__result = document.getElementById('main__result') 10 | let selection = '' 11 | 12 | const buttons = [ 13 | { name: 'promedio', value: promedio }, 14 | { name: 'mediana', value: mediana }, 15 | { name: 'moda', value: moda }, 16 | ] 17 | 18 | clear.addEventListener('click', () => { 19 | const list = document.getElementById('inputValues') 20 | list.value = '' 21 | }) 22 | 23 | function getList() { 24 | const list = document.getElementById('inputValues').value 25 | let nums = list.toString().split(",").map((value) => parseInt(value)); 26 | return nums 27 | } 28 | 29 | function active(btn) { 30 | buttons.forEach((element) => { 31 | element.value === btn 32 | ? element.value.classList.add('active') 33 | : element.value.classList.remove('active') 34 | }) 35 | } 36 | 37 | // --------------------------------------------------------------------------- 38 | // PROMEDIO 39 | 40 | function calcularPromedio(nums) { 41 | let totalSuma = nums.reduce((acumlador, value) => acumlador + value) 42 | let promedio = totalSuma / nums.length 43 | return promedio 44 | } 45 | 46 | promedio.addEventListener('click', (ev) => { 47 | const option = ev.target.dataset.option; 48 | selection = option 49 | active(promedio) 50 | }) 51 | 52 | // --------------------------------------------------------------------------- 53 | // MEDIANA 54 | 55 | const esPar = (num) => { 56 | if (num % 2 === 0) { 57 | return true 58 | } else { 59 | return false 60 | } 61 | } 62 | 63 | function calcularMediana(nums) { 64 | let a = nums[parseInt((nums.length) / 2)] 65 | let b = nums[parseInt((nums.length) / 2) - 1] 66 | 67 | if (esPar(nums.length)) { 68 | return calcularPromedio([a, b]) 69 | } 70 | else { 71 | return a 72 | } 73 | } 74 | 75 | mediana.addEventListener('click', (ev) => { 76 | const option = ev.target.dataset.option; 77 | selection = option 78 | active(mediana) 79 | }) 80 | 81 | // export { calcularMediana } //Exporta la funcion para utilizarla en otros sitio 82 | 83 | // --------------------------------------------------------------------------- 84 | // MODA 85 | 86 | function calcularModa(nums) { 87 | const arr = [] 88 | nums.map((a, index) => { 89 | arr[index] = [a, 0] 90 | nums.map((b) => { 91 | a === b 92 | ? arr[index][1] += 1 93 | : console.log(' '); 94 | }) 95 | }) 96 | return arr.sort((a, b) => a[1] - b[1]).pop() 97 | } 98 | 99 | moda.addEventListener('click', (ev) => { 100 | const option = ev.target.dataset.option; 101 | selection = option 102 | active(moda) 103 | }) 104 | 105 | // --------------------------------------------------------------------------- 106 | 107 | function calcular(opc) { 108 | let nums = getList() 109 | if (opc === 'promedio') { 110 | let result = calcularPromedio(nums) 111 | main__result.innerText = `El promedio es: ${result.toFixed(2)}` 112 | } 113 | else if (opc === 'mediana') { 114 | let numsInOrder = nums.sort((a, b) => a - b) 115 | let result = calcularMediana(numsInOrder) 116 | main__result.innerText = `La mediana es: ${result.toFixed(2)}` 117 | } 118 | else if (opc === 'moda') { 119 | let result = calcularModa(nums) 120 | main__result.innerText = `La moda es: ${result[0]}` 121 | } 122 | } 123 | 124 | btn_Calcular.addEventListener('click', () => { 125 | let opcion = buttons.find((e) => e.name === selection) 126 | console.log(opcion); 127 | if (opcion) { 128 | calcular(opcion.name) 129 | } 130 | else { 131 | alert('Oops, debe seleccionar una operación 😬') 132 | } 133 | }) 134 | 135 | // --------------------------------------------------------------------------- -------------------------------------------------------------------------------- /docs/Talleres/t3/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #a4cefc; 3 | } 4 | 5 | .header__nav a { 6 | color: var(--main); 7 | } 8 | 9 | .fcolor { 10 | color: var(--main); 11 | } 12 | 13 | .header { 14 | height: 200px; 15 | gap: 20px; 16 | } 17 | 18 | .header__nav { 19 | height: 40px; 20 | } 21 | 22 | .header-decoration { 23 | height: 54px; 24 | margin-top: 40px; 25 | background: linear-gradient(to top left, transparent 50%, var(--gray) 51%); 26 | margin-bottom: 0px; 27 | } 28 | 29 | .main { 30 | width: 100%; 31 | height: 480px; 32 | display: flex; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: center; 36 | gap: 20px; 37 | margin-bottom: 50px; 38 | margin: auto; 39 | } 40 | 41 | #main-title { 42 | text-align: center; 43 | } 44 | 45 | .main__desc-form { 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: space-around; 49 | width: 40%; 50 | height: 320px; 51 | } 52 | 53 | h2 { 54 | font-size: 25px; 55 | text-transform: uppercase; 56 | } 57 | 58 | label { 59 | font-weight: bold; 60 | font-size: 18px; 61 | } 62 | 63 | ::placeholder { 64 | font-size: 15px; 65 | color: var(--black-2); 66 | } 67 | 68 | .container { 69 | display: flex; 70 | align-items: center; 71 | justify-content: space-around; 72 | } 73 | 74 | #clear { 75 | width: 30%; 76 | height: 30px; 77 | border-top-left-radius: 0px; 78 | border-bottom-left-radius: 0px; 79 | } 80 | 81 | .input { 82 | outline: none; 83 | width: 100%; 84 | height: 30px; 85 | font-weight: bold; 86 | font-size: 20px; 87 | text-align: center; 88 | color: var(--black); 89 | border: 2px solid var(--black); 90 | background-color: transparent; 91 | } 92 | 93 | .select { 94 | width: 100%; 95 | display: flex; 96 | align-items: center; 97 | justify-content: space-around; 98 | } 99 | 100 | .options { 101 | padding: 30px; 102 | width: 150px; 103 | letter-spacing: 2px; 104 | display: flex; 105 | justify-content: center; 106 | border-radius: 20px; 107 | background-color: var(--black-2); 108 | cursor: pointer; 109 | color: white; 110 | } 111 | 112 | .options:hover { 113 | background-color: #e63947bb; 114 | transition: 0.5s; 115 | } 116 | 117 | .active { 118 | background-color: #e63947ab; 119 | border: 2px solid white; 120 | transition: 0.5s; 121 | } 122 | 123 | button { 124 | width: 100%; 125 | background-color: var(--black-3); 126 | border: none; 127 | height: 35px; 128 | color: white; 129 | letter-spacing: 3px; 130 | text-transform: uppercase; 131 | outline: none; 132 | cursor: pointer; 133 | font-weight: bold; 134 | border-radius: 5px; 135 | } 136 | 137 | button:hover { 138 | background-color: var(--black-2); 139 | transition-duration: 0.4s; 140 | } 141 | 142 | .result { 143 | color: var(--black); 144 | font-size: 20px; 145 | font-weight: bold; 146 | width: 40%; 147 | height: 150px; 148 | border-radius: 20px; 149 | border: 2px solid; 150 | display: flex; 151 | align-items: center; 152 | justify-content: center; 153 | text-align: center; 154 | } 155 | 156 | /* ------------------------------------------------------------------------------------------------ */ 157 | 158 | @media screen and (max-width: 1160px) { 159 | .header__info-title { 160 | font-size: 29px; 161 | } 162 | 163 | label { 164 | text-align: center; 165 | } 166 | 167 | .select { 168 | gap: 20px; 169 | } 170 | 171 | .options { 172 | padding: 5px; 173 | border-radius: 2px; 174 | } 175 | 176 | .main__desc-form, .result { 177 | width: 50%; 178 | } 179 | } 180 | 181 | @media screen and (max-width: 870px) { 182 | #main-title { 183 | font-size: 22px; 184 | } 185 | } 186 | 187 | @media screen and (max-width: 750px) { 188 | .select {flex-direction: column; 189 | } 190 | } 191 | 192 | @media screen and (max-width: 480px) { 193 | .header__info-desc { 194 | font-size: 14px; 195 | } 196 | 197 | .main__desc-form, .result { 198 | width: 90%; 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /docs/Talleres/t1/app.js: -------------------------------------------------------------------------------- 1 | // --- AGRUPAR console.logs --- 2 | //ABRIR console.group("NOMBRE") 3 | //CERRAR console.groupEnd() 4 | 5 | import { alturaIsoceles } from '../../Retos/reto_02.js'; 6 | 7 | // CUADRADO 8 | // --------------------------------------------------------------------------- 9 | 10 | const btn_CuaPer = document.getElementById('btn-CuaPer') 11 | const btn_CuaArea = document.getElementById('btn-CuaArea') 12 | 13 | const sqrPerimetro = (lado) => lado * 4 14 | const sqrArea = (lado) => Math.pow(lado, 2) 15 | 16 | const result = document.getElementById('main__figuras-result-cuadrado') 17 | 18 | btn_CuaPer.addEventListener('click', function perimetroCuadrado() { 19 | const lado = document.getElementById('inputCuadrado') 20 | let data = sqrPerimetro(parseFloat(lado.value)) 21 | 22 | result.innerHTML = `${data.toFixed(2)} cm` 23 | }) 24 | 25 | btn_CuaArea.addEventListener('click', function areaCuadrado() { 26 | const lado = document.getElementById('inputCuadrado') 27 | let data = sqrArea(parseFloat(lado.value)) 28 | 29 | result.innerHTML = `${data.toFixed(2)} cm^2` 30 | }) 31 | 32 | // TRIANGULO 33 | // --------------------------------------------------------------------------- 34 | 35 | const btn_TrPer = document.getElementById('btn-TrPer') 36 | const btn_TrArea = document.getElementById('btn-TrArea') 37 | 38 | const triPerimetro = (lado1, lado2, base) => lado1 + lado2 + base 39 | const triArea = (base, altura) => (base * altura) / 2 40 | 41 | const result2 = document.getElementById('main__figuras-result-triangulo') 42 | 43 | btn_TrPer.addEventListener('click', function perimetroTriangulo() { 44 | const ladoA = document.getElementById('inputTrianguloA') 45 | const ladoB = document.getElementById('inputTrianguloB') 46 | const ladoC = document.getElementById('inputTrianguloC') 47 | 48 | let data = triPerimetro(parseFloat(ladoA.value), parseFloat(ladoB.value), parseFloat(ladoC.value)) 49 | result2.innerHTML = `${data.toFixed(2)} cm` 50 | }) 51 | 52 | btn_TrArea.addEventListener('click', function areaTriangulo() { 53 | const ladoC = document.getElementById('inputTrianguloC') 54 | const altura = document.getElementById('inputTriangulo') 55 | 56 | let data = triArea(parseFloat(ladoC.value), parseFloat(altura.value)) 57 | result2.innerHTML = `${data.toFixed(2)} cm^2` 58 | }) 59 | 60 | // CIRCULOS 61 | // --------------------------------------------------------------------------- 62 | 63 | const btn_CirArea = document.getElementById('btn-CirArea') 64 | const btn_CirPer = document.getElementById('btn-CirPer') 65 | 66 | const PI = Math.PI 67 | 68 | const cirDiametro = (radio) => radio * 2 69 | 70 | const cirPerimetro = (radio) => { 71 | let diametro = cirDiametro(radio) 72 | return diametro * PI 73 | } 74 | 75 | const cirArea = (radio) => Math.pow(radio, 2) * PI 76 | 77 | const result3 = document.getElementById('main__figuras-result-circulo') 78 | 79 | btn_CirPer.addEventListener('click', function perimetroCirculo() { 80 | const radio = document.getElementById('inputCirculo') 81 | 82 | let data = cirPerimetro(parseFloat(radio.value)) 83 | result3.innerHTML = `${data.toFixed(2)} cm` 84 | }) 85 | 86 | btn_CirArea.addEventListener('click', function areaCirculo() { 87 | const radio = document.getElementById('inputCirculo') 88 | 89 | let data = cirArea(parseFloat(radio.value)) 90 | result3.innerHTML = `${data.toFixed(2)} cm^2` 91 | }) 92 | 93 | // TRIANGULO ISÓSCELES 94 | // --------------------------------------------------------------------------- 95 | 96 | const btn_TrIcBase = document.getElementById('btn-TrIcBase') 97 | 98 | btn_TrIcBase.addEventListener('click', function alturaISO() { 99 | 100 | const result4 = document.getElementById('main__figuras-result-trIso') 101 | 102 | const ladoA = document.getElementById('inputTrIcA') 103 | const ladoB = document.getElementById('inputTrIcB') 104 | const ladoC = document.getElementById('inputTrIcBase') 105 | 106 | const data = alturaIsoceles(parseFloat(ladoA.value), parseFloat(ladoB.value), parseFloat(ladoC.value)) 107 | 108 | data >= 0 109 | ? result4.innerHTML = `${data} cm` 110 | : alert(data) 111 | }) -------------------------------------------------------------------------------- /docs/styles/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #FFE268; 3 | --black: #0B090A; 4 | --black-2: rgba(0, 0, 0, 0.432); 5 | --black-3: rgba(0, 0, 0, 0.671); 6 | --gray: #191b1d; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | font-family: 'M PLUS Rounded 1c', sans-serif; 12 | color: #0B090A; 13 | } 14 | 15 | body { 16 | background-color: var(--main); 17 | min-height: 100vh; 18 | width: 100%; 19 | margin: auto; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: flex-start; 23 | padding-bottom: 40px; 24 | } 25 | 26 | .header { 27 | display: flex; 28 | width: 100%; 29 | height: 236px; 30 | align-items: center; 31 | justify-content: flex-start; 32 | flex-direction: column; 33 | background-color: var(--gray); 34 | margin-bottom: -40px; 35 | } 36 | 37 | .header__nav { 38 | width: 100%; 39 | background-color: var(--black); 40 | height: 50px; 41 | display: flex; 42 | justify-content: flex-end; 43 | align-items: center; 44 | } 45 | 46 | .header__nav a{ 47 | color:#FFE268 ; 48 | } 49 | 50 | .header__nav-links{ 51 | width: 375px; 52 | height: 100%; 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | gap: 20px; 57 | } 58 | 59 | .talleres { 60 | display: flex; 61 | gap: 10px; 62 | } 63 | 64 | .fcolor { 65 | color: var(--main); 66 | } 67 | 68 | .header__links-btn { 69 | color: var(--main); 70 | font-weight: 500; 71 | letter-spacing: 2px; 72 | text-transform: uppercase; 73 | text-decoration: none; 74 | display: flex; 75 | justify-content: center; 76 | gap: 5px; 77 | align-items: center; 78 | } 79 | 80 | .header__links-btn:hover { 81 | border-bottom: 2px solid var(--main); 82 | } 83 | 84 | .header__info{ 85 | width: 90%; 86 | text-align: center; 87 | } 88 | 89 | .darkHeart { 90 | font-size: 25px; 91 | color: var(--main); 92 | } 93 | 94 | p { 95 | color: var(--main); 96 | } 97 | 98 | #title-js{ 99 | display: flex; 100 | align-items: center; 101 | justify-content: center; 102 | gap: 10px; 103 | } 104 | 105 | .header__info-title { 106 | font-size: 40px; 107 | color: var(--main); 108 | font-weight: normal; 109 | letter-spacing: 2px; 110 | margin: 0; 111 | } 112 | 113 | .slide__info { 114 | display: flex; 115 | width: 100%; 116 | height: 100%; 117 | flex-direction: column; 118 | justify-content: space-around; 119 | align-items: center; 120 | } 121 | 122 | .slide__info-title { 123 | text-transform: uppercase; 124 | font-weight: normal; 125 | letter-spacing: 3px; 126 | } 127 | 128 | .slide__info-desc { 129 | width: 90%; 130 | display: flex; 131 | align-items: center; 132 | justify-content: center; 133 | } 134 | 135 | svg { 136 | width: 150px; 137 | } 138 | 139 | path { 140 | fill: var(--black-3); 141 | } 142 | 143 | .slide__info-btn { 144 | font-size: 14px; 145 | background-color: var(--black-3); 146 | color: var(--main); 147 | padding: 7px; 148 | font-weight: 500; 149 | width: 200px; 150 | letter-spacing: 3px; 151 | text-transform: uppercase; 152 | text-decoration: none; 153 | transition: 0.5s; 154 | } 155 | 156 | .slide__info-btn:hover { 157 | background-color: var(--black); 158 | } 159 | 160 | 161 | .header-decoration { 162 | height: 54px; 163 | margin-top: 40px; 164 | background: linear-gradient(to top right, transparent 50%, var(--gray) 51%); 165 | margin-bottom: 36px; 166 | } 167 | 168 | 169 | /* ------------------------------------------------------------------------------------------------ */ 170 | 171 | @media screen and (max-width: 500px) { 172 | .talleres { 173 | display: none; 174 | } 175 | 176 | .header__nav-links{ 177 | width: 230px; 178 | } 179 | } 180 | 181 | @media screen and (max-width: 440px) { 182 | .header__info-title { 183 | font-size: 35px; 184 | } 185 | .header__info-desc { 186 | font-size: 14px; 187 | } 188 | } 189 | 190 | @media screen and (max-width: 360px) { 191 | .header__info-title { 192 | font-size: 27px; 193 | } 194 | .header__info-desc { 195 | font-size: 13px; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /docs/Talleres/t1/index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Figuras Geométricas 15 | 16 | 17 | 18 |
19 | 33 |
34 |

Figuras Geométricas

35 |

Primer taller del curso práctico de JavaScript 🌞

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

CUADRADO

44 | 45 | 47 | 48 |

49 |
50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 |
58 |

TRIÁNGULO

59 | 60 | 61 | 62 |

63 |
64 | 66 |
67 | 68 | 69 | 70 | 71 |
72 | 73 | 74 |
75 |
76 | 77 |
78 |

CÍRCULO

79 | 80 | 82 | 83 |

84 |
85 | 86 | 87 | 88 | 89 |
90 |
91 | 92 |
93 |

TRIÁNGULO ISÓSCELES

94 | 95 | 96 | 99 | 100 | 101 |

102 |
103 | 104 |
105 | 106 | 107 |
108 | 109 | 110 |
111 |
112 | 113 |
114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /docs/Retos/reto_01.js: -------------------------------------------------------------------------------- 1 | // 1. Responde las siguientes preguntas 2 | 3 | // Es un espacion en memoria que sirve para almacenar datos. 4 | // Al declarar le decimos al SO que debe reservar un espacion en memoria, mientras que al inicializar estamos almacenando un valor en dicha variable. 5 | // Sumar numeros es una operacion matematica, mientras que concatenar strings no es mas que unir dos o mas cadenas de texto para forma una frase. 6 | // Se utiliza el operador de + 7 | 8 | // 2. Determina el nombre y tipo de dato para almacenar en variables la siguiente información: 9 | 10 | // firstName = string 11 | // lastName = string 12 | // platziUsername =string 13 | // age = number 14 | // mail = string 15 | // isAdult = boolean 16 | // savedMoney = number 17 | // debts = number 18 | 19 | // 3. 20 | 21 | let name = 'Montgomery' 22 | let lastname = 'Burns' 23 | let platziUsername = '@mrBurns' 24 | let age = 104 25 | let email = 'mr.burns@thesimpsons.com' 26 | let isAdult = true 27 | let savedMoney = 16800000000 28 | let debts = 50000 29 | let realMoney = savedMoney - debts 30 | 31 | console.log('Nombre completo : ' + firstName + ' ' + lastName); 32 | console.log('Dinero real : ' + realMoney); 33 | 34 | // Funciones: 35 | 36 | // 1. Responde las siguientes preguntas en la sección de comentarios: 37 | 38 | // Instrucciones de programacion encapsuladas o agrupadas en un bloque de codigo que permiten por medio de una o varias entradas obtener una salida. 39 | // Cuando tenemos instrucciones que se repiten a menudo a lo largo de nuestro codigo. 40 | // Un parametro es el valor que una funcion espera, mientras que un argumento es el valor que se le pasa a una funcion al llamarla. 41 | 42 | // 2. Convierte el siguiente código en una función, pero, cambiando cuando sea necesario las variables constantes por parámetros y argumentos en una función: 43 | 44 | function saludar(name, lastname, nickname) { 45 | const completeName = name + ' ' + lastname; 46 | console.log("Mi nombre es " + completeName + ", pero prefiero que me digas " + nickname + "."); 47 | } 48 | 49 | saludar('Montgomery', 'Burns', '@mrBurns') 50 | 51 | // Condicionales 52 | 53 | // 1. Responde las siguientes preguntas en la sección de comentarios: 54 | 55 | // Instrucciones que evaluan si se cumple cierta condicion para ejecutar alguna accion 56 | // Tenemos if, switch, operadores ternarios 57 | // el if evalua si se cumple una condicion.Si el resultado es verdadero ejecuta un codigo, de lo contrario ejecuta otro. 58 | // el switch recibe como parametro el valor a evaluar, y realiza una comparacion con los distintos casos que tiene definidos para llevar a cabo la accion que corresponde. 59 | // Los ternerios funcionan de forma similar al if solo que su sintaxis es diferente. 60 | // Si 61 | 62 | // 2. Replica el comportamiento del siguiente código que usa la sentencia switch utilizando if, else y else if: 63 | 64 | function planPlatzi(plan = "Basic") { 65 | tipoDeSuscripcion = plan.toUpperCase() 66 | if (tipoDeSuscripcion === "FREE") { 67 | console.log("Solo puedes tomar los cursos gratis"); 68 | }else if (tipoDeSuscripcion === "BASIC") { 69 | console.log("Puedes tomar casi todos los cursos de Platzi durante un mes"); 70 | }else if (tipoDeSuscripcion === "EXPERT") { 71 | console.log("Puedes tomar casi todos los cursos de Platzi durante un año"); 72 | } 73 | } 74 | 75 | planPlatzi('EXPERT') 76 | 77 | // 3. BONUS 78 | 79 | let planes = [ 80 | {name: 'FREE', desc: 'Solo puedes tomar los cursos gratis'}, 81 | {name: 'BASIC', desc: 'Puedes tomar casi todos los cursos de Platzi durante un mes'}, 82 | {name: 'EXPERT', desc: 'Puedes tomar casi todos los cursos de Platzi durante un año'} 83 | ] 84 | 85 | const planPlatzi = (plan) => { 86 | var tipoDeSuscripcion = planes.find((element) => element.name === plan.toUpperCase()) 87 | 88 | if (tipoDeSuscripcion) { 89 | console.log(tipoDeSuscripcion.desc) 90 | } 91 | } 92 | 93 | planPlatzi('basic') 94 | 95 | // Ciclos 96 | 97 | // 1. Responde las siguientes preguntas en la sección de comentarios: 98 | 99 | // Estructura de codigo que repite instrucciones hasta cumplir con una condicion. 100 | // Estan el for, while, do while, foreach, for in. 101 | // Es un ciclo se se repite indefinidamente.Es un problema debido a que puede causar un mal funcionamiento en el rendimiento de un sitio web. 102 | // Si 103 | 104 | 105 | // 2. Replica el comportamiento de los siguientes ciclos for utilizando ciclos while: 106 | 107 | for (let i = 0; i < 5; i++) { 108 | console.log("El valor de i es: " + i); 109 | } 110 | 111 | let i = 0 112 | while (i<5) { 113 | console.log("El valor de i es: " + i); 114 | i++ 115 | } 116 | 117 | for (let i = 10; i >= 2; i--) { 118 | console.log("El valor de i es: " + i); 119 | } 120 | 121 | let i = 10 122 | while (i>=2) { 123 | console.log("El valor de i es: " + i); 124 | i-- 125 | } 126 | 127 | // 3. Escribe un código en JavaScript que le pregunte a los usuarios cuánto es 2 + 2. 128 | // Si responden bien, mostramos un mensaje de felicitaciones, pero si responden mal, volvemos a empezar. 129 | 130 | function dosMasDos() { 131 | const num = 2 132 | const SOLUTION = 4 133 | let result = 0 134 | 135 | do { 136 | result = prompt('¿Sabes cuanto es ' + num + ' + ' + num + '?') 137 | if (result != SOLUTION) { 138 | alert('Ooops, Inténtalo otra vez! 😜') 139 | } else { 140 | alert('Excelente, tu respuesta es la correcta! 🎉') 141 | } 142 | } while (result != SOLUTION) 143 | } 144 | 145 | dosMasDos() 146 | 147 | // Listas 148 | 149 | // 1. Responde las siguientes preguntas en la sección de comentarios: 150 | 151 | // Estructura de datos que permite almecenar valores en una lista de elementos, a los cuales podemos acceder por medio de un indice asignado a la posicion que este ocupa en dicha lista. 152 | // Conjunto de datos relacionados entre si por una clave y su valor. 153 | // Varia de las necesidades de la tarea a realizar. 154 | // Si, a esto le conozco como un arreglo de objetos. 155 | 156 | // 2. Crea una función que pueda recibir cualquier array como parámetro e imprima su primer elemento. 157 | 158 | function firstElement(elements) { 159 | console.log(elements[0]); 160 | } 161 | 162 | firstElement(['Banana', 'Mango', 'Fresa']) 163 | 164 | // 3. Crea una función que pueda recibir cualquier array como parámetro e imprima todos sus elementos uno por uno (no se vale imprimir el array completo). 165 | 166 | function allElement(fruits) { 167 | fruits.forEach(element => { 168 | console.log(element); 169 | }); 170 | } 171 | 172 | allElement(['Banana', 'Mango', 'Fresa']) 173 | 174 | // 4. Crea una función que pueda recibir cualquier objeto como parámetro e imprima todos sus elementos uno por uno (no se vale imprimir el objeto completo). 175 | 176 | let character = { 177 | name: 'Rick Sánchez', 178 | age: 70, 179 | species: 'Human', 180 | origin: 'Earth (C-137)' 181 | } 182 | 183 | function showCharacter(character) { 184 | for (const i in character) { 185 | if (Object.hasOwnProperty.call(character, i)) { 186 | const element = character[i]; 187 | console.log(i + ': ' + element); 188 | } 189 | } 190 | } 191 | 192 | showCharacter(character) 193 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Curso Práctico JS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 35 |
36 |

Curso práctico de

37 |
38 |

JavaScript

39 | 40 |
41 |

Sitio web creado con el fin de poner en práctica
lo aprendido en Platzi.

42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 | 50 |
51 |
    52 | 53 |
  • 54 |
    55 |

    Taller # 1
    Figuras geométricas

    56 |
    57 | 58 | 60 | 61 |
    62 | Visitar 63 |
    64 |
    • 65 | 66 |
  • 67 |
    68 |

    Taller # 2
    Precios y descuentos

    69 |
    70 | 71 | 73 | 74 |
    75 | Visitar 76 |
    77 |
    • 78 | 79 |
  • 80 |
    81 |

    Taller # 3
    Promedio, moda y mediana

    82 |
    83 | 84 | 85 | 86 |
    87 | Visitar 88 |
    89 |
    • 90 | 91 |
  • 92 |
    93 |

    Taller # 4
    Análisis salarial

    94 |
    95 | 96 | 98 | 99 |
    100 | Visitar 101 |
    102 |
    • 103 | 104 | 105 |
106 |
107 | 108 |
109 | 111 | 113 |
114 | 115 |
116 | 117 | 118 |
119 | 120 |
121 |
122 | 123 |
124 | 125 | 126 | 127 | 128 | 129 | --------------------------------------------------------------------------------