├── .gitignore ├── DMP ├── 1-curso-introducción-a-C# │ └── 1-Csharp-intro.md ├── 2-xamarin-forms │ └── 2-xamarin-forms.md ├── 3-xamarin-forms-mvvm │ └── 3-mvvm-xamarin-forms.md ├── 4-shopping-app │ └── 4-shopping-app.md ├── 5-curso-flutter │ └── 5-flutter.md └── Curso de Introducción a Java SE │ └── Apuntes Curso de Introducción a Java SE.txt ├── DW ├── 1-basico │ ├── 000-obsidian │ │ ├── 1.obsidian.md │ │ ├── 2.mermaid.md │ │ ├── mermaid-ejemplos.md │ │ ├── notaprueba01.md │ │ └── notaprueba02.md │ ├── 001-computacion-basica │ │ └── compu-basica.md │ ├── 002-intro-a-la-web │ │ └── introduccion-a-la-web.md │ ├── 003-prework │ │ ├── entorno-linux │ │ │ ├── commands.md │ │ │ ├── entorno-linux.md │ │ │ ├── grub-config.md │ │ │ ├── prework-linux.md │ │ │ └── visual-studio-code.md │ │ └── entorno-windows │ │ │ ├── 0-prework-windows.md │ │ │ ├── 1-virtual-box.md │ │ │ ├── activar-w10.md │ │ │ ├── customize-wsl.md │ │ │ ├── instalacion-W10.md │ │ │ ├── office-install.md │ │ │ ├── remove-linux-dualboot.md │ │ │ ├── vsc-chrome.md │ │ │ └── vsc │ │ │ ├── atajos-vsc.md │ │ │ ├── atajos.md │ │ │ ├── prettier.md │ │ │ ├── setting.md │ │ │ └── x.txt │ ├── 004-terminal-linea-de-comandos │ │ ├── bash-script.md │ │ ├── resources │ │ │ ├── Diferencia de permisos entre archivos y directorios.docx │ │ │ ├── code-bash │ │ │ │ ├── helloworld.sh │ │ │ │ └── hola.txt │ │ │ ├── movies.csv │ │ │ ├── sintowers.txt │ │ │ └── ubuntu.md │ │ └── terminal-linea-de-comandos.md │ ├── 005-git-github │ │ ├── gh-pages.md │ │ ├── git-github.md │ │ ├── notas-con-git-github.md │ │ ├── personalizar-git.md │ │ ├── resources │ │ │ └── infografia │ │ │ │ ├── eliminar-repo-local.jpeg │ │ │ │ ├── eliminar-repo-remoto.jpeg │ │ │ │ └── ignorar-archivos.jpeg │ │ └── termux.md │ ├── 006-html-css │ │ ├── 1-html │ │ │ ├── 1.html-css.md │ │ │ ├── 4.emmet.md │ │ │ ├── 5.bem.md │ │ │ └── tags.md │ │ ├── 2-css │ │ │ ├── animation.md │ │ │ ├── games-to-learn-css │ │ │ │ ├── 2.display-flex.md │ │ │ │ └── 3.type-selector.md │ │ │ ├── properties.md │ │ │ └── pseudo-clases.md │ │ ├── resources │ │ │ └── html+css │ │ │ │ └── codigo │ │ │ │ ├── BEM │ │ │ │ ├── Metodología BEM.txt │ │ │ │ ├── estilos.css │ │ │ │ └── index.html │ │ │ │ ├── CSS │ │ │ │ ├── Reto │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── RetoDos │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── RetoDosEjemplo │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── RetoDosMejorado │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── RetoEjemplo │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseCombinadores │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseCss │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseDisplay │ │ │ │ │ ├── blockInline │ │ │ │ │ │ ├── index.html │ │ │ │ │ │ └── style.css │ │ │ │ │ └── flex │ │ │ │ │ │ ├── index.html │ │ │ │ │ │ └── style.css │ │ │ │ ├── claseEspecificidad │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseHerencia │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseMedidas │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseModeloCaja │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── clasePosition │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── clasePseudoClase │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseVariables │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── claseWebFonts │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── em │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── minMax │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ └── rem │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── HTML │ │ │ │ ├── claseButton │ │ │ │ │ └── index.html │ │ │ │ ├── claseCalendario │ │ │ │ │ ├── index.html │ │ │ │ │ └── select.html │ │ │ │ ├── claseForms │ │ │ │ │ └── index.html │ │ │ │ ├── claseImg │ │ │ │ │ └── index.html │ │ │ │ ├── claseIndex │ │ │ │ │ ├── css │ │ │ │ │ │ └── style.css │ │ │ │ │ └── index.html │ │ │ │ └── claseVideo │ │ │ │ │ └── index.html │ │ │ │ ├── README.md │ │ │ │ ├── ResponsiveDesign │ │ │ │ ├── RetoTres │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── columnDrop │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── layoutShifter │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ └── mostlyFluid │ │ │ │ │ ├── desktop.css │ │ │ │ │ ├── index.html │ │ │ │ │ ├── style.css │ │ │ │ │ └── tablet.css │ │ │ │ ├── ResponsiveImgs │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ └── accesibilidad │ │ │ │ ├── claseLabelAltTitle │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ └── texto │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ └── responsive-design.md │ ├── 007-frontend-developer-practico │ │ └── frontend-developer.md │ ├── 008-disenio-developers │ │ ├── disenio-developers.md │ │ └── ex-disenio.txt │ ├── 009-sistemas-disenio │ │ ├── ex-sistemas-disenio.txt │ │ └── sistemas-disenio.md │ ├── 010-css-grid-basico │ │ ├── css-grid-basico.md │ │ ├── grid-garden.md │ │ └── resources │ │ │ └── codigo │ │ │ ├── 3.propiedades-del-contenedor │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── 4.propiedades-de-alineacion │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── 5.propiedades-de-ubicacion │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── 6.funciones-especiales │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── 7.keywords-especiales │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── index.html │ │ │ ├── proyecto-responsive │ │ │ ├── desktop.css │ │ │ ├── index.html │ │ │ ├── mobile.css │ │ │ └── tablet.css │ │ │ ├── proyecto-solucion-previa │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── proyecto │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── retoOne │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── retoThree │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── retoTwo │ │ │ ├── index.html │ │ │ └── style.css │ │ │ └── style.css │ ├── 011-maquetacion-en-css │ │ └── maquetacion-grid.md │ ├── 012-css-grid-layout │ │ ├── grid-layout.md │ │ ├── proceso-creativo.md │ │ └── resources │ │ │ └── codigo │ │ │ ├── 14-quiz │ │ │ ├── index.html │ │ │ └── style.css │ │ │ ├── 23-reto │ │ │ ├── index.html │ │ │ └── style.css │ │ │ └── Monster │ │ │ ├── index.html │ │ │ └── style.css │ ├── 013-disenio-web-grid-flexbox │ │ ├── grid-and-flexbox.md │ │ └── resources │ │ │ └── 10-reto │ │ │ ├── index.html │ │ │ └── style.css │ ├── 014-transform-transition │ │ ├── resources │ │ │ └── codigo │ │ │ │ ├── 12-transition property y duration │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 13-transition timing function y delay │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 14-movimiento impulsado por la acción │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 15-tiempos de espera │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 16-parpadeo │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 18-will-change │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── 19-prefers-reduced-motion │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── Transform rotate, scale, skew y matrix │ │ │ │ ├── rotate │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── scale │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ └── skew │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── Transform style y perspective │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── backface-visibility │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── efecto-parallax-practica │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── efecto-parallax │ │ │ │ ├── alice │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ └── cohete │ │ │ │ │ ├── index.html │ │ │ │ │ └── style.css │ │ │ │ ├── perspective-origin │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ ├── transform-origin │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ │ │ └── translate │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ └── transform-y-transition.md │ ├── 015-figma │ │ ├── figma.md │ │ ├── prototipado-e-interfaces.md │ │ └── resources │ │ │ └── images │ │ │ ├── pluma-union-black.svg │ │ │ └── pluma-union-rose.svg │ ├── 016.programacion-basica │ │ ├── Anotaciones │ │ │ ├── 1 Html Css JS.txt │ │ │ ├── 10 Codigo dibujar con flechas.txt │ │ │ ├── 11 Math.txt │ │ │ ├── 12 Cargar Imagen.txt │ │ │ ├── 13 Clases y Arrays.txt │ │ │ ├── 13 No es !.txt │ │ │ ├── 15 retos.txt │ │ │ ├── 15.1 Cajero HTML.txt │ │ │ ├── 15.2 ClassBillete JS.txt │ │ │ ├── 16 Modelo Cliente Servidor.txt │ │ │ ├── 17 Cursos.txt │ │ │ ├── 2 Inicio.txt │ │ │ ├── 3 Qué es HTML CSS JS.txt │ │ │ ├── 4 JavaScript no es Java.txt │ │ │ ├── 5 Primeros pasos en el navegador con alert.txt │ │ │ ├── 6 HTML CSS JS de verdad.txt │ │ │ ├── 7 Algunas etiquetas.txt │ │ │ ├── 8 El DOM nuestro lugar de trabajo en la web.txt │ │ │ └── 9 Detectar eventos del teclado con JavaScript.txt │ │ └── resources │ │ │ ├── 1 dom │ │ │ ├── 4 1 codigo.js │ │ │ └── 4 document.html │ │ │ ├── 1 primero.html │ │ │ ├── 2 Canvas │ │ │ ├── Practica │ │ │ │ ├── dibujo.html │ │ │ │ └── dibujo.js │ │ │ ├── codigo.txt │ │ │ ├── dibujo.html │ │ │ └── dibujo.js │ │ │ ├── 2 marte.html │ │ │ ├── 3 marte_jupiter.html │ │ │ ├── 3 teclas │ │ │ ├── eventos.js │ │ │ └── flechas.html │ │ │ ├── 4 Mouse │ │ │ ├── dibujoMouse.html │ │ │ ├── dibujoMouse.js │ │ │ └── pruebaMouse.html │ │ │ ├── 5 villaplatzi │ │ │ ├── Muestra │ │ │ │ ├── lobo.html │ │ │ │ └── lobo.js │ │ │ ├── platzi.js │ │ │ └── villa.html │ │ │ ├── 6 fizzbuz │ │ │ ├── fizz.js │ │ │ └── modulo.html │ │ │ ├── 7 pakiman │ │ │ ├── Practica │ │ │ │ ├── classPlanta.js │ │ │ │ ├── classPlantas.js │ │ │ │ ├── classPlantasZombies.js │ │ │ │ ├── imagePlanta.js │ │ │ │ ├── imagePlantas.js │ │ │ │ ├── imagePlantasZombies.js │ │ │ │ ├── planta.html │ │ │ │ ├── plantas.html │ │ │ │ └── plantasZombies.html │ │ │ ├── paki.js │ │ │ ├── pakiman.html │ │ │ └── pakiman.js │ │ │ ├── 8 cajero │ │ │ ├── Practica │ │ │ │ ├── cajero.html │ │ │ │ └── classBillete.js │ │ │ ├── atm.html │ │ │ └── cajero.js │ │ │ └── 9 express │ │ │ ├── express │ │ │ ├── package-lock.json │ │ │ └── servidor.js │ │ │ └── servidor.js │ ├── 017.pensamiento-lógico │ │ ├── 17.algoritmos-y-pensamiento-logico │ │ │ ├── algoritmos-y-pensamiento-logico.md │ │ │ └── resources │ │ │ │ ├── Minusculas a mayusculas │ │ │ │ ├── minus.html │ │ │ │ └── minus.js │ │ │ │ ├── Ordenar numeros │ │ │ │ ├── Codigo.jpeg │ │ │ │ ├── Explicacion.jpeg │ │ │ │ ├── masGrande.html │ │ │ │ ├── masGrande.js │ │ │ │ ├── prueba.html │ │ │ │ └── prueba.js │ │ │ │ └── masGrande.js │ │ └── algoritmos-diagramas-de-flujo │ │ │ └── algoritmos-y-diagramas-de-flujo.md │ ├── 018.desarrollo-moderno-CodeStream │ │ └── codeStream.md │ ├── 019.fundamentosde-ingenieria-de-sotware │ │ ├── Apuntes totales.txt │ │ └── fundamentos-ing-software.md │ ├── 020.redes-informaticas-en-internet │ │ └── redes-informaticas-de-internet.md │ ├── 021.intro-seo │ │ ├── resources │ │ │ └── SEO 9. Herramientas para dar estructura.html │ │ └── seo.md │ ├── 022.sass │ │ ├── fundamentos-sass.md │ │ ├── resources │ │ │ └── resources │ │ │ │ └── code │ │ │ │ ├── css │ │ │ │ ├── style.css │ │ │ │ └── style.css.map │ │ │ │ ├── index.html │ │ │ │ ├── package-lock.json │ │ │ │ ├── package.json │ │ │ │ └── sass │ │ │ │ ├── _animaciones.scss │ │ │ │ ├── _hero.scss │ │ │ │ ├── _mixinsfunc.scss │ │ │ │ ├── _navbar.scss │ │ │ │ ├── _reset.scss │ │ │ │ └── style.scss │ │ ├── sass.md │ │ └── sass.txt │ └── 023.tailwind-2-y-3-basico │ │ ├── resources │ │ └── imgs │ │ │ └── svg │ │ │ ├── heart.svg │ │ │ ├── home.svg │ │ │ ├── instagram.svg │ │ │ ├── moon.svg │ │ │ ├── search.svg │ │ │ ├── twitter.svg │ │ │ └── user.svg │ │ └── tailwind-basico.md ├── 2-intermedio │ ├── 001-js-basico │ │ ├── events.md │ │ ├── js-basico.md │ │ └── methods.md │ ├── 002-js-practico │ │ ├── js-practico.md │ │ └── test-js │ │ │ ├── 1-functions.js │ │ │ ├── 12-interactuar-usuarios.html │ │ │ ├── 12-script.js │ │ │ ├── 13-addEventListener.html │ │ │ ├── 13.script.js │ │ │ ├── 2-if-elseif-else.js │ │ │ ├── 3-if-array.js │ │ │ ├── 4-for-to-while.js │ │ │ ├── 5-prompt.js │ │ │ ├── 6-array-function.js │ │ │ ├── 7-array-function-ciclo.js │ │ │ ├── 8-object-function-ciclo.js │ │ │ ├── 8.1-object-to-array.js │ │ │ ├── 9-conectar-js-html.html │ │ │ ├── 9-script.js │ │ │ ├── Bonus-reducir-condicionales.js │ │ │ └── Practica │ │ │ ├── 12-interactuar.html │ │ │ ├── 12.script.js │ │ │ ├── 9-html-y-js.html │ │ │ └── 9-script.js │ ├── 003-ECMAScript │ │ ├── ECMAScript-historia-y-versiones-de-javascript.md │ │ └── resources │ │ │ └── code │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── src │ │ │ ├── es10 │ │ │ ├── 00-flat-map.js │ │ │ ├── 01-trimstart-trimend.js │ │ │ ├── 02-try-catch.js │ │ │ └── 03-fromentries.js │ │ │ ├── es11 │ │ │ ├── 00-optional-chaining.js │ │ │ ├── 01-bigint.js │ │ │ ├── 02-nullish.js │ │ │ ├── 03-promise-allsettled.js │ │ │ ├── 04-globalthis.js │ │ │ ├── 05-matchall.js │ │ │ ├── 06-dynamic-import.js │ │ │ ├── 06-index.html │ │ │ └── 06-module.js │ │ │ ├── es12 │ │ │ ├── 00-numeric-separator.js │ │ │ ├── 01-replaceall.js │ │ │ ├── 02-promise-any.js │ │ │ └── 03-private.js │ │ │ ├── es13 │ │ │ ├── 00-at.js │ │ │ ├── 01-products.js │ │ │ └── 01-top-level-await.js │ │ │ ├── es6 │ │ │ ├── 00-let-const.js │ │ │ ├── 01-arrow-function.js │ │ │ ├── 03-strings.js │ │ │ ├── 04-default-params.js │ │ │ ├── 04-rest-spread.js │ │ │ ├── 05-object-literals.js │ │ │ ├── 06-promises.js │ │ │ ├── 07-clases.js │ │ │ ├── 08-module.js │ │ │ ├── 09-challenge.js │ │ │ ├── 09-generator.js │ │ │ ├── 10-set-add.js │ │ │ ├── 14-challenge-api.js │ │ │ ├── 14-challenge-exercise.js │ │ │ ├── 16-challenge-generador.js │ │ │ └── module.js │ │ │ ├── es7 │ │ │ ├── 00-exponential.js │ │ │ └── 01-array-includes.js │ │ │ ├── es8 │ │ │ ├── 00-object-entries.js │ │ │ ├── 01-object-values.js │ │ │ ├── 03-string-padding.js │ │ │ ├── 04-trailing-commas.js │ │ │ └── 05-async-functions.js │ │ │ └── es9 │ │ │ ├── 00-regex.js │ │ │ ├── 01-spread.js │ │ │ ├── 02-finally.js │ │ │ └── 03-async.js │ ├── 004.taller-js-mate-y-estadistica │ │ ├── resources │ │ │ └── codigo │ │ │ │ ├── 10.encuentra-el-ID │ │ │ │ └── main.js │ │ │ │ ├── 12.promedio │ │ │ │ └── main.js │ │ │ │ ├── 14.mediana-impar │ │ │ │ └── main.js │ │ │ │ ├── 15.mediana-par │ │ │ │ └── main.js │ │ │ │ ├── 16.sort │ │ │ │ └── main.js │ │ │ │ ├── 17.moda │ │ │ │ └── main.js │ │ │ │ ├── 19.objetos-to-arrays │ │ │ │ └── main.js │ │ │ │ ├── 20.promedio-ponderado │ │ │ │ ├── calculos.xlsx │ │ │ │ └── main.js │ │ │ │ ├── 21.clases-metodos-estaticos │ │ │ │ ├── analisis.js │ │ │ │ ├── index.html │ │ │ │ ├── platziMath.js │ │ │ │ └── salarios.js │ │ │ │ ├── 25.reestructurando-informacion │ │ │ │ ├── analisis.js │ │ │ │ ├── index.html │ │ │ │ ├── platziMath.js │ │ │ │ └── salarios.js │ │ │ │ ├── 7.Percentages │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ │ ├── 8.Coupon │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ │ ├── 9.Coupon-array │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ │ ├── 9.Coupon-objeto │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ │ ├── math.html │ │ │ │ ├── math.js │ │ │ │ └── practice │ │ │ │ ├── 10.find-id │ │ │ │ └── main.js │ │ │ │ ├── 12.promedio │ │ │ │ ├── average.js │ │ │ │ └── reduce │ │ │ │ │ └── main.js │ │ │ │ ├── 14.mediana │ │ │ │ ├── practice-one │ │ │ │ │ ├── index.html │ │ │ │ │ └── main.js │ │ │ │ └── practice-two │ │ │ │ │ └── main.js │ │ │ │ ├── 17.moda │ │ │ │ ├── practice-one │ │ │ │ │ └── moda.js │ │ │ │ └── practice-two │ │ │ │ │ └── moda.js │ │ │ │ ├── 19.objetos-to-arrays │ │ │ │ ├── entries-map.js │ │ │ │ └── map │ │ │ │ │ └── map.js │ │ │ │ ├── 2.mate │ │ │ │ ├── index.html │ │ │ │ └── square_triangle.js │ │ │ │ ├── 20.promedio-ponderado │ │ │ │ └── media-aritmetica-ponderada.js │ │ │ │ ├── 21.salario │ │ │ │ ├── analisis.js │ │ │ │ ├── index.html │ │ │ │ ├── platziMath.js │ │ │ │ └── salarios.js │ │ │ │ ├── 3.circle │ │ │ │ ├── circle.js │ │ │ │ └── index.html │ │ │ │ ├── 4.escaleno │ │ │ │ ├── height.js │ │ │ │ └── index.html │ │ │ │ ├── 8.coupon │ │ │ │ ├── practice-one │ │ │ │ │ ├── index.html │ │ │ │ │ └── main.js │ │ │ │ └── practice-two │ │ │ │ │ ├── index.html │ │ │ │ │ └── main.js │ │ │ │ └── others │ │ │ │ └── main.js │ │ └── taller-js-mate-y-estadistica.md │ ├── 005.primer-videojuego │ │ ├── resources │ │ │ └── code │ │ │ │ ├── game.js │ │ │ │ ├── index.html │ │ │ │ ├── maps.js │ │ │ │ └── styles.css │ │ └── taller-js-primer-videojuego.md │ ├── 006.closures_scope-en-js │ │ ├── closures_scope-en-js.md │ │ └── resources │ │ │ └── code │ │ │ ├── src │ │ │ ├── closure │ │ │ │ ├── 10.playground.js │ │ │ │ ├── 7.lexical.js │ │ │ │ ├── 8.playground.js │ │ │ │ ├── 9.1.practice.js │ │ │ │ └── 9.practice.js │ │ │ ├── debug │ │ │ │ └── main.js │ │ │ ├── hoisting │ │ │ │ └── main.js │ │ │ └── scope │ │ │ │ ├── 1.global.js │ │ │ │ ├── 2.function-scope.js │ │ │ │ ├── 3.block-scope.js │ │ │ │ ├── 5.reasignacion-redeclaracion.js │ │ │ │ └── 6.strict-mode.js │ │ │ └── test │ │ │ └── 7.lexical.js │ ├── 007.poo-js │ │ ├── pilares.md │ │ ├── poo-js.md │ │ └── resources │ │ │ └── code │ │ │ ├── 05.obj-literal-vs-proto.js │ │ │ ├── 06.clases.js │ │ │ ├── 07.ventajas.js │ │ │ ├── 08.manejo-clases.js │ │ │ ├── 10.abstraccion.js │ │ │ ├── 11.getters-setters.js │ │ │ ├── 12.getters-setters.js │ │ │ ├── 13.module.mjs │ │ │ ├── 13.modulos.mjs │ │ │ ├── 14.playgrounds-get-set.js │ │ │ ├── 15.inheritance.js │ │ │ ├── 16.herencia.js │ │ │ ├── 18.polimorfismo.js │ │ │ ├── 19.Comments.js │ │ │ ├── 19.Student.js │ │ │ ├── 19.exercise.js │ │ │ ├── index.html │ │ │ ├── practice │ │ │ ├── index.html │ │ │ └── poo.js │ │ │ └── test │ │ │ ├── 05.obj-literal-vs-proto.js │ │ │ ├── 06.clases.js │ │ │ ├── 07.ventajas.js │ │ │ ├── 08.manejo-clases.js │ │ │ ├── 08.otro-metodo.js │ │ │ ├── 10.abstraccion.js │ │ │ ├── 12.getters-setters.js │ │ │ ├── 14.playgrounds-get-set.mjs │ │ │ ├── 14.playgrounds.mjs │ │ │ ├── 16.herencia.js │ │ │ ├── 18.poli.js │ │ │ ├── 18.polimorfismo.js │ │ │ ├── 19.Comment.mjs │ │ │ ├── 19.Exercise.mjs │ │ │ └── 19.Student.mjs │ ├── 008.poo-js-intermedio │ │ ├── poo-js-intermedio.md │ │ └── resources │ │ │ └── code │ │ │ ├── 1.static.js │ │ │ ├── 10.Playground-deepFreeze.mjs │ │ │ ├── 10.data.mjs │ │ │ ├── 11.abstracción.mjs │ │ │ ├── 11.validation.mjs │ │ │ ├── 12.factory-pattern-roro.mjs │ │ │ ├── 13.module-pattern-namespaces.js │ │ │ ├── 14.getters-setters.js │ │ │ ├── 16.duck-typing.mjs │ │ │ ├── 17.instance-Of.js │ │ │ ├── 18.atributos-metodos.mjs │ │ │ ├── 19.metodos-estaticos.mjs │ │ │ ├── 3.metodos-staticos.js │ │ │ ├── 4.defineProperty.js │ │ │ ├── 5.memory.js │ │ │ ├── 6.shallow-copy.js │ │ │ ├── 7.JSON.parse-JSON.stringify.js │ │ │ ├── 8.recursividad.js │ │ │ ├── 9.deep-copy+recursividad.js │ │ │ ├── index.html │ │ │ ├── test │ │ │ ├── 13.module-pattern.mjs │ │ │ ├── 16.duck-typing.js │ │ │ ├── 17.instance-of.mjs │ │ │ ├── 4.seal-freeze.js │ │ │ └── deep_copy │ │ │ │ ├── data.mjs │ │ │ │ ├── deep_copy.mjs │ │ │ │ ├── index.html │ │ │ │ └── validation.mjs │ │ │ └── x.js │ ├── 009.npm-paquetes-dependencias │ │ ├── npm-gestion-de-paquetes-y-dependencias.md │ │ └── resources │ │ │ └── code │ │ │ └── npm │ │ │ ├── npm-init │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── src │ │ │ │ └── index.js │ │ │ ├── react-base │ │ │ ├── .babelrc │ │ │ ├── .eslintrc │ │ │ ├── .prettierrc │ │ │ ├── README.md │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ │ └── index.html │ │ │ ├── src │ │ │ │ ├── components │ │ │ │ │ └── App.jsx │ │ │ │ ├── index.js │ │ │ │ └── styles │ │ │ │ │ └── components │ │ │ │ │ └── App.styl │ │ │ └── webpack.config.js │ │ │ └── react-npm │ │ │ ├── README.md │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ ├── 010.arrays-en-js │ │ ├── arrays-en-js.md │ │ └── resource │ │ │ └── code │ │ │ └── curso-manipulacion-de-arrays │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── 01-for-each.html │ │ │ └── 02-map.html │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── playground │ │ │ ├── 12.reduce.js │ │ │ ├── 14.some.js │ │ │ ├── 16.every.js │ │ │ ├── 19.include.js │ │ │ ├── 21.join.js │ │ │ ├── 25-reto.js │ │ │ ├── 5.map.js │ │ │ ├── 7.propagacion.js │ │ │ └── 9-filter.js │ │ │ └── server │ │ │ ├── 01-for-each.js │ │ │ ├── 02-map.js │ │ │ ├── 03-map-reloaded.js │ │ │ ├── 04-filter.js │ │ │ ├── 05-reduce.js │ │ │ ├── 06-reduce-reloaded.js │ │ │ ├── 07-some.js │ │ │ ├── 08-find.js │ │ │ ├── 09-every.js │ │ │ ├── 11-includes.js │ │ │ ├── 12-join-split.js │ │ │ ├── 13-concat.js │ │ │ ├── 14-flat.js │ │ │ ├── 15-flatmap.js │ │ │ ├── 16-mutable.js │ │ │ └── 17-sort.js │ ├── 011.js-engine-v8 │ │ ├── debugger-vsc.md │ │ └── js-engine-v8+nav.md │ ├── 012.asincronismo-js │ │ ├── asincronismo-con-js.md │ │ ├── fetch_async-await_try-catch+archivo-json.md │ │ ├── get-post-put-delete.md │ │ └── resources │ │ │ └── code │ │ │ ├── asincronismo │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ │ ├── async │ │ │ │ │ ├── 15.async-await.js │ │ │ │ │ ├── 16.try-catch.js │ │ │ │ │ └── 17.playground.js │ │ │ │ ├── callback │ │ │ │ │ ├── 6.callback.js │ │ │ │ │ ├── 7.playground.js │ │ │ │ │ └── 8.xmlhttprequest.js │ │ │ │ ├── generator │ │ │ │ │ ├── 19.generators.js │ │ │ │ │ └── 23.playground.js │ │ │ │ └── promise │ │ │ │ │ ├── 11.promesas.js │ │ │ │ │ ├── 12.playground.js │ │ │ │ │ ├── 13.fetch.js │ │ │ │ │ └── 14.post.js │ │ │ └── x.md │ │ │ └── project │ │ │ ├── LICENSE │ │ │ ├── README.md │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── public │ │ │ ├── css │ │ │ ├── desktop.css │ │ │ ├── light-mode.css │ │ │ ├── style.css │ │ │ └── tablet.css │ │ │ ├── index.html │ │ │ ├── light-mode.js │ │ │ ├── main.js │ │ │ └── svg │ │ │ ├── black-logo-01.svg │ │ │ ├── black-logo-02.svg │ │ │ ├── black-logo-03.svg │ │ │ ├── facebook.svg │ │ │ ├── gray-logo-01.svg │ │ │ ├── moon.svg │ │ │ ├── pink-logo-01.svg │ │ │ ├── pink-logo-02.svg │ │ │ ├── purple-logo-01.svg │ │ │ ├── purple-logo-02.svg │ │ │ ├── purple-logo-03.svg │ │ │ ├── shadow-logo-01.svg │ │ │ ├── sun-moon.svg │ │ │ ├── sun.svg │ │ │ ├── test-logo.svg │ │ │ ├── transpt-logo-01.svg │ │ │ ├── transpt-logo-02.svg │ │ │ ├── twitter.svg │ │ │ └── white-logo-02.svg │ ├── 013.expresiones-regulares │ │ ├── RegExp.md │ │ └── resources │ │ │ └── code │ │ │ ├── 1.regex.js │ │ │ ├── 19.busqueda-reemplazo │ │ │ ├── main.js │ │ │ ├── movies.dat │ │ │ └── package.json │ │ │ ├── 2.caracter(.)punto.txt │ │ │ └── 21.lenguajes │ │ │ ├── football_results.csv │ │ │ ├── index.html │ │ │ └── main.js │ ├── 014.api-rest-js │ │ ├── 1.api-rest-js-fundamentos │ │ │ ├── api-rest-js-fundamentos.md │ │ │ └── resources │ │ │ │ └── code │ │ │ │ ├── 3.consumo-api-rest │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ │ ├── 4.endpoints-query-parameters │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ └── style.css │ │ │ │ ├── 7.proyecto │ │ │ │ ├── index.html │ │ │ │ ├── main.js │ │ │ │ ├── style.css │ │ │ │ └── svg │ │ │ │ │ ├── delete.svg │ │ │ │ │ └── heart.svg │ │ │ │ ├── code │ │ │ │ ├── code_clase │ │ │ │ │ ├── index.html │ │ │ │ │ └── main.js │ │ │ │ └── code_clone │ │ │ │ │ ├── index.html │ │ │ │ │ ├── main.js │ │ │ │ │ └── style.css │ │ │ │ ├── package-lock.json │ │ │ │ ├── package.json │ │ │ │ ├── practice │ │ │ │ ├── css │ │ │ │ │ └── styles.css │ │ │ │ ├── index.html │ │ │ │ ├── main.mjs │ │ │ │ ├── methods │ │ │ │ │ ├── delete-favorites.mjs │ │ │ │ │ ├── get-favorites.mjs │ │ │ │ │ ├── get.mjs │ │ │ │ │ ├── parameters.mjs │ │ │ │ │ └── post.mjs │ │ │ │ ├── random.mjs │ │ │ │ └── svg │ │ │ │ │ ├── delete.svg │ │ │ │ │ └── heart.svg │ │ │ │ └── test │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── test.md │ │ ├── 2.api-rest-js-ejemplos │ │ │ ├── api-rest-ejemplos.md │ │ │ └── resources │ │ │ │ └── code │ │ │ │ ├── index.html │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ ├── API │ │ │ │ │ ├── axios.mjs │ │ │ │ │ ├── get-by-category.mjs │ │ │ │ │ ├── get-categories.mjs │ │ │ │ │ ├── get-movie-by-id.mjs │ │ │ │ │ ├── get-search.mjs │ │ │ │ │ ├── get-similar.mjs │ │ │ │ │ └── get-trending-movies.mjs │ │ │ │ ├── main.mjs │ │ │ │ ├── navigation.mjs │ │ │ │ ├── nodes.mjs │ │ │ │ ├── parameters.mjs │ │ │ │ ├── secrets.mjs │ │ │ │ └── utils │ │ │ │ │ ├── create-categories.mjs │ │ │ │ │ └── create-movies.mjs │ │ │ │ └── styles │ │ │ │ └── app.css │ │ └── 3.api-rest-js-performance │ │ │ └── 3.api-rest-js-performance.md │ ├── 016.fundamentos-typescript │ │ ├── fundamentos-typescript.md │ │ └── resources │ │ │ └── code │ │ │ └── ts-project │ │ │ ├── .editorconfig │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── 01.hello.ts │ │ │ ├── 02.demo.ts │ │ │ ├── 03.demo.ts │ │ │ ├── 03.typing.ts │ │ │ ├── 04.number.ts │ │ │ ├── 05.boolean.ts │ │ │ ├── 06.string.ts │ │ │ ├── 07.arrays.ts │ │ │ ├── 08.any.ts │ │ │ ├── 09.union-type.ts │ │ │ ├── 10.alias.ts │ │ │ ├── 11.null-undefined.ts │ │ │ ├── 12.function.ts │ │ │ ├── 13.return-function.ts │ │ │ ├── 14.function-obj.ts │ │ │ ├── 15.obj.ts │ │ │ └── products │ │ │ │ ├── main.ts │ │ │ │ ├── product-model.ts │ │ │ │ └── product-service.ts │ │ │ └── tsconfig.json │ ├── 017.tipos-funciones-avanzadas │ │ ├── resources │ │ │ └── code │ │ │ │ ├── .editorconfig │ │ │ │ ├── package-lock.json │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ ├── 01.enum.ts │ │ │ │ ├── 02.tuplas.ts │ │ │ │ ├── 03.unknow.ts │ │ │ │ ├── 04.never.ts │ │ │ │ ├── 05.optionals.ts │ │ │ │ ├── 06.default.ts │ │ │ │ ├── 07.rest.ts │ │ │ │ ├── 08.overload.ts │ │ │ │ ├── 09.overload2.ts │ │ │ │ ├── 10.interfaces.ts │ │ │ │ ├── app │ │ │ │ │ ├── base.model.ts │ │ │ │ │ ├── categories │ │ │ │ │ │ └── category.model.ts │ │ │ │ │ ├── main.ts │ │ │ │ │ ├── orders │ │ │ │ │ │ └── order.model.ts │ │ │ │ │ ├── products │ │ │ │ │ │ ├── product.dto.ts │ │ │ │ │ │ ├── product.model.ts │ │ │ │ │ │ └── product.service.ts │ │ │ │ │ └── users │ │ │ │ │ │ └── user.model.ts │ │ │ │ └── demo.ts │ │ │ │ └── tsconfig.json │ │ └── ts-tipos-funciones.md │ ├── 019.empaquetadores │ │ ├── 1.intro-empaquetadores-web.md │ │ ├── 2.vite.md │ │ └── resources │ │ │ └── code │ │ │ └── webpack │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ └── index.html │ │ │ ├── src │ │ │ └── index.js │ │ │ └── webpack.config.js │ ├── 023.SPA-js-vanilla │ │ └── spa-js-vanilla.md │ ├── 025.debugging-devtools │ │ └── debugging-devtools.md │ ├── 026.manipulacion-dom │ │ ├── img │ │ │ └── 22.intersection-observer.webp │ │ └── manipulacion-dom.md │ ├── 027.optimizacion-web │ │ └── web-optimization.md │ ├── 028.accesibilidad │ │ ├── 0.audiocurso-accesibilidad-web.md │ │ ├── 1.accesibilidad-web.md │ │ └── sources │ │ │ └── 23.icons.webp │ ├── 029.web-components │ │ ├── code │ │ │ ├── 1.custom-elements │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 10.css-custom-properties │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 12.third-party-components │ │ │ │ └── index.html │ │ │ ├── 2.template │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 3.shadow-dom │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 4.slot │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 5.attributes │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 6.attributeChangedCallback │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 7.disconnectedCallback │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 8.host │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ ├── 9.slotted │ │ │ │ ├── index.html │ │ │ │ └── my-element.js │ │ │ └── project │ │ │ │ ├── app.js │ │ │ │ ├── components │ │ │ │ └── Product-card.js │ │ │ │ ├── index.html │ │ │ │ └── styles.css │ │ └── web-components.md │ └── vim │ │ ├── Personal-configuration │ │ ├── vimrc-plug.md │ │ └── vimrc.md │ │ ├── configs │ │ ├── .vim │ │ │ ├── UltiSnips │ │ │ │ ├── htmldjango.snippets │ │ │ │ └── javascript.snippets │ │ │ ├── autoload │ │ │ │ └── plug.vim │ │ │ ├── maps.vim │ │ │ ├── plugin-config.vim │ │ │ └── plugins.vim │ │ ├── .vimrc │ │ ├── .zshrc │ │ └── karabiner.json │ │ └── vim.md ├── 3-avanzado │ ├── 1.react.js │ │ ├── Platzi │ │ │ └── reactjs.md │ │ ├── YouTube │ │ │ ├── code │ │ │ │ └── vite-project │ │ │ │ │ ├── .eslintrc.cjs │ │ │ │ │ ├── README.md │ │ │ │ │ ├── index.html │ │ │ │ │ ├── package-lock.json │ │ │ │ │ ├── package.json │ │ │ │ │ ├── public │ │ │ │ │ └── vite.svg │ │ │ │ │ ├── src │ │ │ │ │ ├── App.css │ │ │ │ │ ├── App.jsx │ │ │ │ │ ├── ListApp.jsx │ │ │ │ │ ├── UsersApp.jsx │ │ │ │ │ ├── assets │ │ │ │ │ │ ├── react+vite.svg │ │ │ │ │ │ └── react.svg │ │ │ │ │ ├── components │ │ │ │ │ │ ├── AddTask.jsx │ │ │ │ │ │ ├── Counter.jsx │ │ │ │ │ │ ├── FirstComponent.jsx │ │ │ │ │ │ └── UserList.jsx │ │ │ │ │ ├── helpers │ │ │ │ │ │ └── fetchData.js │ │ │ │ │ ├── hooks │ │ │ │ │ │ └── useFetchData.js │ │ │ │ │ ├── index.css │ │ │ │ │ ├── main.jsx │ │ │ │ │ └── stylesheets │ │ │ │ │ │ ├── FirstComponent.css │ │ │ │ │ │ └── styles.css │ │ │ │ │ └── vite.config.js │ │ │ └── react-js-desde-cero.md │ │ ├── devTalles │ │ │ ├── img │ │ │ │ └── 6-naming-components.jpeg │ │ │ ├── material-ui.md │ │ │ └── react-hooks-mern.md │ │ ├── freeCodeCamp │ │ │ └── react.js-freeCodeCamp.md │ │ ├── modules.md │ │ └── resource │ │ │ ├── code │ │ │ ├── README.md │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ ├── index.html │ │ │ │ ├── manifest.json │ │ │ │ └── robots.txt │ │ │ └── src │ │ │ │ ├── UseEffect.js │ │ │ │ ├── index.js │ │ │ │ └── stylesheets │ │ │ │ ├── App.css │ │ │ │ └── index.css │ │ │ └── roadmap.md │ ├── 2.vue.js │ │ └── vue.js-intro │ │ │ └── vue.js-intro.md │ ├── 3.next │ │ └── Nextjs-Tailwind.md │ ├── 4.css-modules │ │ └── css-modules.md │ └── contributions │ │ └── contributions-to-open-source.md └── super-hero │ └── challenges.md ├── README.md └── others ├── 1.english-Academy ├── 1.aprender-Ingles-online │ ├── ingles-online.md │ └── resources │ │ └── plantilla-plan-semanal.xlsx ├── 2.ingles-para-principiantes │ └── 2.ingles-para-principiantes.md └── 3.taller-de-ingles-para-principiantes │ └── taller-ingles-principiante.md ├── CheatSheets-HTML-CSS-JavaScript └── README.md ├── Django └── Django.md ├── anki └── add-ons.md ├── estrategias-para-Aprender-en-linea ├── aprender-en-linea.md └── resources │ └── flux-setup.exe ├── excel ├── Introducción a Excel para Principiantes.md └── sources │ └── Libro1.xlsx ├── gestion-efectiva-del-tiempo ├── gestion-efectiva-del-tiempo.md └── resources │ ├── clase-3_-mapa-de-areas.docx │ ├── clase-4_-convirtiendo-a-actividades.docx │ └── matriz-de-administracion-del-tiempo.docx ├── git.md └── set-grub.md /DW/1-basico/000-obsidian/notaprueba01.md: -------------------------------------------------------------------------------- 1 | Probamos los enlaces entre notas 01 2 | Ejemplo de prueba: [[1.resumen-obsidian]] - [[notaprueba02]] 3 | -------------------------------------------------------------------------------- /DW/1-basico/000-obsidian/notaprueba02.md: -------------------------------------------------------------------------------- 1 | Probamos los enlaces entre notas 02 2 | Ejemplo de prueba: [[1.resumen-obsidian]] - [[notaprueba01]] 3 | -------------------------------------------------------------------------------- /DW/1-basico/004-terminal-linea-de-comandos/bash-script.md: -------------------------------------------------------------------------------- 1 | # Curso de Bash Script 2 | 3 | Usando en sistemas Linux. 4 | 5 | Comprobar shells disponibles 6 | 7 | ```bash 8 | Ver lista: 9 | cat /etc/shells 10 | 11 | Ver bash en uso: 12 | echo $SHELL 13 | ``` -------------------------------------------------------------------------------- /DW/1-basico/004-terminal-linea-de-comandos/resources/Diferencia de permisos entre archivos y directorios.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/004-terminal-linea-de-comandos/resources/Diferencia de permisos entre archivos y directorios.docx -------------------------------------------------------------------------------- /DW/1-basico/004-terminal-linea-de-comandos/resources/code-bash/helloworld.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | echo "Hello World" > hola.txt -------------------------------------------------------------------------------- /DW/1-basico/004-terminal-linea-de-comandos/resources/code-bash/hola.txt: -------------------------------------------------------------------------------- 1 | Hello World 2 | -------------------------------------------------------------------------------- /DW/1-basico/004-terminal-linea-de-comandos/resources/ubuntu.md: -------------------------------------------------------------------------------- 1 | ubunturoot 2 | ghostcode -------------------------------------------------------------------------------- /DW/1-basico/005-git-github/resources/infografia/eliminar-repo-local.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/005-git-github/resources/infografia/eliminar-repo-local.jpeg -------------------------------------------------------------------------------- /DW/1-basico/005-git-github/resources/infografia/eliminar-repo-remoto.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/005-git-github/resources/infografia/eliminar-repo-remoto.jpeg -------------------------------------------------------------------------------- /DW/1-basico/005-git-github/resources/infografia/ignorar-archivos.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/005-git-github/resources/infografia/ignorar-archivos.jpeg -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/BEM/estilos.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | font-family: Arial, Helvetica, sans-serif; 9 | } 10 | .nav{ 11 | background: slateblue; 12 | height: 70px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-around; 16 | } 17 | 18 | .nav__logo { 19 | height: 100%; 20 | background: #fff; 21 | } 22 | 23 | .nav__img { 24 | height: 100%; 25 | } 26 | 27 | .nav__link{ 28 | color: #fff; 29 | } 30 | 31 | .nav__link--color{ 32 | color: #000; 33 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseCombinadores/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Hermano Adyacente o Cercano (Adjacent sibling) 3 | */ 4 | h2 + p { 5 | color: red; 6 | } 7 | 8 | /* 9 | Hermano general (General sibling) 10 | */ 11 | h2 ~ p { 12 | color: aqua 13 | } 14 | /* 15 | Hijo (Child) 16 | */ 17 | div > p { 18 | color: red; 19 | } 20 | 21 | /* 22 | Descendiente (Descendant) 23 | */ 24 | div p { 25 | color: red; 26 | } 27 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseCss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clase CSS 8 | 9 | 10 | 11 |
12 |

Soy un texto

13 |

Textitos

14 |
15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseCss/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: blue; 3 | font-size: 30px; 4 | } 5 | 6 | /* class */ 7 | .parrafo { 8 | color: aqua; 9 | } 10 | 11 | /* ID alt + shift + a */ 12 | #texto { 13 | color: yellow; 14 | font-size: 24px; 15 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseDisplay/blockInline/style.css: -------------------------------------------------------------------------------- 1 | .block-element { 2 | background-color: green; 3 | margin: 10px; 4 | padding: 20px; 5 | } 6 | 7 | .nav { 8 | background-color: peachpuff; 9 | padding: 20px; 10 | list-style: none; 11 | text-align: center; 12 | } 13 | .nav li { 14 | display: inline-block; 15 | font-size: 20px; 16 | margin: 10px 0; 17 | padding-left: 20px; 18 | padding-right: 20px; 19 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseDisplay/flex/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | html { 7 | font-size: 62.5%; 8 | } 9 | body { 10 | font-size: 1.6rem; 11 | } 12 | .container { 13 | border: 0.3rem solid black; 14 | display: flex; 15 | } 16 | .box { 17 | width: 10rem; 18 | height: 10rem; 19 | } 20 | .box1 { 21 | background-color: blue; 22 | } 23 | .box2 { 24 | background-color: blueviolet; 25 | } 26 | .box3 { 27 | background-color: burlywood; 28 | } 29 | .box4 { 30 | background-color: cadetblue; 31 | } 32 | .box5 { 33 | background-color: coral; 34 | } 35 | .box6 { 36 | background-color: salmon; 37 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseEspecificidad/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | h1 { 7 | color: purple; 8 | font-family: serif; 9 | margin-bottom: 10px; 10 | } 11 | .title { 12 | font-size: 18px; 13 | font-family: monospace; 14 | } 15 | .nav { 16 | margin-top: 10px; 17 | list-style-type: none; 18 | padding-left: 0; 19 | } 20 | 21 | .nav li { 22 | display: inline-block; 23 | } 24 | 25 | .nav a { 26 | color: white; 27 | background-color: #13a4a4; 28 | padding: 5px; 29 | border-radius: 2px; 30 | text-decoration: none; 31 | } 32 | 33 | .nav .blog { 34 | background-color: red; 35 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseHerencia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Herencia 9 | 10 | 11 | 12 |
13 |

Soy un titulo

14 |

Soy un parrafo

15 |
16 | 17 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseHerencia/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 75%; 3 | font-family: Verdana, Geneva, Tahoma, sans-serif; 4 | } 5 | 6 | h1 { 7 | font-size: inherit; 8 | } 9 | 10 | /*h1 recibe por el navegador un tamaño especifico*/ 11 | /*h1 está dentro del html pero no está tomando el 75% 12 | de tamaño de fuente que le indicamos a todo nuestro 13 | html solo está tomando el tipo de fuente, así que 14 | usamos inherit en h1 para que herede esa propiedad*/ 15 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseMedidas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Medidas 10 | 11 | 12 | 13 |
14 |

Hola soy un texto ejemplo para la clase

15 |
16 | 17 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseMedidas/style.css: -------------------------------------------------------------------------------- 1 | main { 2 | background-color: red; 3 | width: 600px; 4 | height: 50%; 5 | } 6 | 7 | p { 8 | font-size: 16px; 9 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseModeloCaja/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modelo de Caja 8 | 9 | 10 | 11 |
12 |
13 |

Soy un titulo

14 |
15 |

Soy un parrafo

16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseModeloCaja/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | main { 8 | width: 100%; 9 | height: 500px; 10 | border: 10px solid grey; 11 | padding: 20px 35px; /*De arriba hacia abajo y de derecha a izqu*/ 12 | } 13 | /*Si solo colocamos 20px el navegador entiendo que debe 14 | colocar 20px arriba abajo y a los costados 15 | */ -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/clasePosition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
17 | 18 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/clasePosition/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | .parent { 7 | border: 2px aqua dotted; 8 | display: inline-block; 9 | } 10 | .box { 11 | display: inline-block; 12 | background-color: red; 13 | width: 100px; 14 | height: 100px; 15 | } 16 | #two { 17 | background-color: orange; 18 | position: relative; 19 | bottom: -15px; 20 | } 21 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/clasePseudoClase/style.css: -------------------------------------------------------------------------------- 1 | .main-nav { 2 | margin-top: 10px; 3 | list-style: none; 4 | padding-left: 0; 5 | background-color: #13a4a4; 6 | } 7 | .main-nav__item { 8 | display: inline-block; 9 | } 10 | .main-nav__item a { 11 | color: white; 12 | padding: 5px; 13 | border-radius: 2px; 14 | text-decoration: none; 15 | } 16 | 17 | /*Pseudo Clase*/ 18 | .main-nav__item a:hover { 19 | color: blue; 20 | } 21 | .main-nav__item a:active { 22 | color: red; 23 | } 24 | 25 | /*Pseudo Elementos*/ 26 | .main-nav__item a::after { 27 | content: " | "; 28 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseVariables/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #003476; 3 | --secundary-color: #b4d2f7; 4 | --header-size: 4rem; 5 | --font: 1.8rem; 6 | } 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | html { 13 | font-size: 62.5; 14 | } 15 | header { 16 | width: 100vw; 17 | height: 15vh; 18 | background-color: var(--primary-color); 19 | } 20 | main { 21 | width: 100vw; 22 | height: 70vh; 23 | font-size: var(--font); 24 | } 25 | h1 { 26 | font-size: var(--header-size); 27 | color: var(--primary-color); 28 | } 29 | footer { 30 | width: 100vw; 31 | height: 15vh; 32 | background-color: var(--secundary-color); 33 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/claseWebFonts/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | font-family: 'Licorice', cursive; 3 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/em/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

Soy texto ejemplo

13 |
14 |

Soy otro texto ejemplo

15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/em/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 20px; 3 | } 4 | 5 | .text-container { 6 | font-size: 1em; 7 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/minMax/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | main { 8 | width: 100vw; 9 | height: 100vh; 10 | background-color: purple; 11 | } 12 | 13 | section { 14 | width: 80%; 15 | min-width: 320px; 16 | max-width: 500px; 17 | min-height: 900px; 18 | /* height: 500px; */ 19 | margin: 0 auto; 20 | background-color: red; 21 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/CSS/rem/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | html { 7 | font-size: 62.5%; 8 | } 9 | p { 10 | font-size: 1.6rem; 11 | } 12 | main div { 13 | font-size: 1.6rem; 14 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/HTML/claseButton/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Submit vs Button 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 |
18 | 21 | 22 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/HTML/claseIndex/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/006-html-css/resources/html+css/codigo/HTML/claseIndex/css/style.css -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/README.md: -------------------------------------------------------------------------------- 1 | # cursoDefinitivoHTMLyCSS 2 | Primer curso sobre html y css 3 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveDesign/columnDrop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Column Drop 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveDesign/layoutShifter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Layout Shifter 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveDesign/mostlyFluid/desktop.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 800px; 3 | margin-left: auto; 4 | margin-right: auto; 5 | } 6 | .c1, .c2 { 7 | width: 50%; 8 | } 9 | .c3, .c4 { 10 | width: 33%; 11 | } 12 | .c5 { 13 | width: 34%; 14 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveDesign/mostlyFluid/tablet.css: -------------------------------------------------------------------------------- 1 | .c2, .c3, .c4 { 2 | width: 50%; 3 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveImgs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | Descripción en caso no cargue la imagen 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/ResponsiveImgs/style.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/accesibilidad/claseLabelAltTitle/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | img { 8 | width: 350px; 9 | } -------------------------------------------------------------------------------- /DW/1-basico/006-html-css/resources/html+css/codigo/accesibilidad/texto/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-style: 62.5%; 3 | } 4 | 5 | h1 { 6 | font-size: 3rem; 7 | } 8 | p { 9 | font-size: 1.8rem; 10 | } -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/3.propiedades-del-contenedor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/3.propiedades-del-contenedor/style.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | grid-template-rows: 100px 200px; 4 | /* grid-template-rows: 150px 250px; */ 5 | grid-auto-columns: 100px; 6 | grid-auto-flow: column; 7 | /* row-gap: 15px; 8 | column-gap: 30px; */ 9 | gap: 40px; 10 | 11 | border: 5px solid #e1bee7; 12 | background-color: #fff1ff; 13 | } 14 | 15 | .item { 16 | border: 5px solid #00bcd4; 17 | font-size: 4rem; 18 | } -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/4.propiedades-de-alineacion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/4.propiedades-de-alineacion/style.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | gap: 40px; 4 | grid-template-columns: 150px 150px 150px; 5 | grid-auto-rows: 150px; 6 | /* justify-content: center; 7 | align-content: center; */ 8 | place-content: end; /* center */ 9 | justify-items: end; 10 | align-items: start; 11 | height: 600px; 12 | 13 | 14 | border: 5px solid #e1bee7; 15 | background-color: #fff1ff; 16 | } 17 | 18 | .item { 19 | border: 5px solid #00bcd4; 20 | font-size: 4rem; 21 | } 22 | 23 | .item-2 { 24 | justify-self: start; 25 | align-self: flex-end; 26 | } -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/5.propiedades-de-ubicacion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
16 | 17 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/6.funciones-especiales/style.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | grid-template-columns: minmax(60px, 300px) 200px minmax(60px, 250px); 4 | grid-template-rows: repeat(3, auto); 5 | place-content: center; 6 | 7 | border: 5px solid #e1bee7; 8 | background-color: white; 9 | } 10 | 11 | .item { 12 | border: 5px solid #00bcd4; 13 | font-size: 2rem; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/7.keywords-especiales/style.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 4 | 5 | border: 5px solid #e1bee7; 6 | background-color: white; 7 | } 8 | 9 | .contenedor-2 { 10 | display: grid; 11 | grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 12 | margin-top: 100px; 13 | 14 | border: 5px solid #e1bee7; 15 | background-color: white; 16 | } 17 | 18 | .item { 19 | border: 5px solid #00bcd4; 20 | font-size: 2rem; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/retoOne/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/retoOne/style.css: -------------------------------------------------------------------------------- 1 | /* --------- RETO 01 ---------- */ 2 | .contenedor { 3 | border: 5px solid #e1bee7; 4 | background-color: #fff1ff; 5 | display: grid; 6 | grid-template-columns: 150px 150px; 7 | grid-template-rows: 150px 150px 150px; 8 | grid-auto-flow: column; 9 | gap: 20px; 10 | } 11 | 12 | .item { 13 | display: flex; 14 | justify-content: flex-end; 15 | align-items: flex-end; 16 | border: 5px solid #00bcd4; 17 | font-size: 4rem; 18 | } 19 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/retoThree/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
6
18 |
7
19 |
20 | 21 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/retoTwo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
17 | 18 | -------------------------------------------------------------------------------- /DW/1-basico/010-css-grid-basico/resources/codigo/retoTwo/style.css: -------------------------------------------------------------------------------- 1 | .contenedor { 2 | display: grid; 3 | gap: 15px; 4 | grid-template-columns: 150px 150px; 5 | grid-auto-rows: 150px; 6 | 7 | place-content: center; 8 | place-items: end; 9 | 10 | border: 5px solid #e1bee7; 11 | background-color: #fff1ff; 12 | } 13 | 14 | .item { 15 | width: 40px; 16 | height: 70px; 17 | 18 | border: 5px solid #00bcd4; 19 | font-size: 4rem; 20 | background-color: #00bcd4; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /DW/1-basico/012-css-grid-layout/proceso-creativo.md: -------------------------------------------------------------------------------- 1 | # Proceso Creativo 2 | ## 1. Preparación 3 | 🔎 Call of Duty 4 | - [Cronología](https://www.timetoast.com/timelines/cronologia-de-cod-call-of-duty) 5 | - [Mejores juegos (del peor al mejor)](https://es.digitaltrends.com/videojuego/juegos-de-call-of-duty/) 6 | 7 | ## 2. Incubación 8 | 🧬 Comenzaremos con la cronología y luego los clasificaremos del peor al mejor. De poderse, añadiré algunas curiosidades del juego. 9 | 10 | ## 3. Iluminación 11 | 💡 Haré una pantalla inicial con la imagen del juego, 2 o 3 hyper vínculos a la cronología y a la clasificación del juego. 12 | 13 | ## 4. Evaluación 14 | ✔ Buscare imágenes sin derechos de autor 😅 15 | 16 | ## 5. Implementación 17 | ⚙ Umm, veremos que sucede, estoy un poco nervioso. Rick 🤔 -------------------------------------------------------------------------------- /DW/1-basico/012-css-grid-layout/resources/codigo/14-quiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz-14 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Platzi 💚

15 |
16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /DW/1-basico/012-css-grid-layout/resources/codigo/14-quiz/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .container-big { 8 | width: 100%; 9 | height: 80px; 10 | background-color: blueviolet; 11 | } 12 | 13 | .container-medium { 14 | width: 50%; 15 | height: 40px; 16 | background-color: pink; 17 | } 18 | 19 | .container-small { 20 | width: 50%; 21 | height: 20px; 22 | background-color: aqua; 23 | } 24 | -------------------------------------------------------------------------------- /DW/1-basico/012-css-grid-layout/resources/codigo/Monster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Monster 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/12-transition property y duration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transition: Property y duration 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/12-transition property y duration/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 30px; 3 | width: 400px; 4 | height: 100px; 5 | display: flex; 6 | justify-content: space-between; 7 | 8 | background-color: aqua; 9 | } 10 | 11 | .container:hover .box { 12 | transform: scale(1.2); 13 | } 14 | 15 | .box { 16 | width: 100px; 17 | height: 100px; 18 | } 19 | 20 | .box1 { 21 | transition: transform 500ms; 22 | 23 | background-color: darkslategrey; 24 | } 25 | 26 | .box2 { 27 | transition: transform 1s; 28 | 29 | background-color: hotpink; 30 | } 31 | 32 | .box3 { 33 | transition: transform 1.5s; 34 | 35 | background-color: springgreen; 36 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/13-transition timing function y delay/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/14-movimiento impulsado por la acción/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/14-movimiento impulsado por la acción/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 100px; 3 | height: 100px; 4 | 5 | transition: transform 1.8s linear; 6 | border-radius: 50%; 7 | background-color: darkslateblue; 8 | } 9 | 10 | div:hover { 11 | transform: translateX(200px); 12 | transition: transform 1s linear; 13 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/16-parpadeo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/16-parpadeo/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 100px; 3 | height: 100px; 4 | 5 | } 6 | 7 | .item { 8 | width: 100px; 9 | height: 100px; 10 | 11 | border-radius: 50%; 12 | background-color: aqua; 13 | } 14 | 15 | .container:hover .item { 16 | transform: translateX(60px); 17 | 18 | background-color: darkslateblue; 19 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/18-will-change/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/18-will-change/style.css: -------------------------------------------------------------------------------- 1 | button { 2 | width: 100px; 3 | height: 30px; 4 | 5 | background-color: aqua; 6 | } 7 | 8 | .better { /* Mejor */ 9 | will-change: transform; 10 | transition: transform 500ms; 11 | } 12 | 13 | .better:hover { 14 | transform: translateY(5px); 15 | } 16 | 17 | .worst { /* Peor */ 18 | will-change: margin-top; 19 | transition: margin-top 500ms; 20 | } 21 | 22 | .worst:hover { 23 | margin-top: 5px; 24 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/19-prefers-reduced-motion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
Señálame
13 |
🤯
14 |
15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/rotate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/rotate/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 150px; 3 | height: 100px; 4 | 5 | background-color: aqua; 6 | } 7 | 8 | div:hover { 9 | transform: rotate(20deg); 10 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/scale/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/scale/style.css: -------------------------------------------------------------------------------- 1 | .circle { 2 | width: 100px; 3 | height: 100px; 4 | 5 | border-radius: 50%; 6 | background-color: aqua; 7 | } 8 | 9 | .circle:hover { 10 | transform: scale(1.2); 11 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/skew/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform rotate, scale, skew y matrix/skew/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 100px; 3 | height: 100px; 4 | 5 | border-radius: 20%; 6 | background-color: aqua; 7 | } 8 | 9 | div:hover { 10 | transform: skew(20deg); 11 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform style y perspective/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/Transform style y perspective/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | width: 100px; 4 | height: 100px; 5 | border: 5px solid aqua; 6 | perspective: 100px; 7 | } 8 | 9 | .item { 10 | position: absolute; 11 | width: 95px; 12 | height: 95px; 13 | 14 | transform-style: preserve-3d; 15 | opacity: 0.5; 16 | border: 3px solid black; 17 | background-color: darkslateblue; 18 | } 19 | 20 | .item:hover { 21 | transform: rotateX(20deg); 22 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/backface-visibility/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/backface-visibility/style.css: -------------------------------------------------------------------------------- 1 | .card { 2 | position: relative; 3 | width: 200px; 4 | height: 200px; 5 | transform-style: preserve-3d; 6 | } 7 | 8 | .card:hover { 9 | transform: rotateY(180deg); 10 | } 11 | 12 | .face { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | 17 | backface-visibility: hidden; 18 | border-radius: 20px; 19 | } 20 | 21 | .face.front { 22 | background-color: aqua; 23 | } 24 | 25 | .face.back { 26 | transform: rotateX(180deg); 27 | background-color: darkslateblue; 28 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/perspective-origin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Perspective origin 8 | 9 | 10 | 11 |
12 |
Señálame
13 |
14 | 15 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/perspective-origin/style.css: -------------------------------------------------------------------------------- 1 | .shadow{ 2 | width: 100px; 3 | height: 100px; 4 | /* Perspectiva */ 5 | perspective: 100px; 6 | perspective-origin: left top; 7 | 8 | border: 1px solid transparent; 9 | background-color: grey; 10 | } 11 | 12 | .transform{ 13 | width: 100px; 14 | height: 100px; 15 | /* Transform */ 16 | transform-style: preserve-3d; 17 | 18 | font-size: 1.5rem; 19 | border: 1px solid black; 20 | background-color: skyblue; 21 | cursor: pointer; 22 | } 23 | 24 | /* Transformaciones */ 25 | .transform:hover { 26 | transform: rotateY(15deg); 27 | } 28 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/transform-origin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/transform-origin/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 150px; 3 | height: 100px; 4 | transform-origin: left top; 5 | 6 | background-color: aqua; 7 | } 8 | 9 | div:hover { 10 | transform: rotate(30deg); 11 | } -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/translate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transform translate 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /DW/1-basico/014-transform-transition/resources/codigo/translate/style.css: -------------------------------------------------------------------------------- 1 | .shadow { 2 | width: 100px; 3 | height: 100px; 4 | 5 | border-radius: 50%; 6 | background-color: black; 7 | } 8 | 9 | .circle { 10 | width: 100px; 11 | height: 100px; 12 | 13 | border-radius: 50%; 14 | background-color: aqua; 15 | } 16 | 17 | .circle:hover { 18 | transform: translate(20px, -20px); 19 | } 20 | 21 | 22 | /* 23 | .circle:hover { 24 | transform: translateX(-20px); or Y 25 | } 26 | */ -------------------------------------------------------------------------------- /DW/1-basico/015-figma/resources/images/pluma-union-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/1-basico/015-figma/resources/images/pluma-union-rose.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/1 Html Css JS.txt: -------------------------------------------------------------------------------- 1 | La creación de aplicaciones web se basa en: 2 | 3 | HTML (.html): donde se define el contenido 4 | CSS (.css): donde se define diseño y parte visual 5 | JAVASCRIPT (.js): crea dinamismo 6 | Todo lenguaje de programación trabaja con determinados elementos 7 | 8 | VARIABLE: Elemento que almacena valores 9 | CONDICIONAL: circunstancia requerida para correr código 10 | FUNCIÓN: Conjunto de instrucciones que crean nuevas variables - reusable 11 | CLASE: Define las características del objeto 12 | ARREGLO: Conjunto variado de datos con orden definido y agrupados en una variable -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/11 Math.txt: -------------------------------------------------------------------------------- 1 | Math: Colección de funciones 2 | Math.ceil(): Redondea hacia arriba. 3 | Math.floor(): Redondea hacia abajo 4 | Math.random(): numero aleatorios entre 0.1 y 0.9 5 | 6 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/15.1 Cajero HTML.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cajero Automatico 6 | 7 | 8 |

Bienvenido "Cajero Automatico"

9 |

10 | 11 |

12 |

13 | 14 | 15 |

16 |

17 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/16 Modelo Cliente Servidor.txt: -------------------------------------------------------------------------------- 1 | CARRERA: 2 | Base de Datos 3 | Platzi.com/db 4 | 5 | Backend 6 | PHP PYTHON NODE JS 7 | Platzi.com/backend 8 | 9 | Servidor 10 | http://direccion.com:puerto 11 | 12 | Frontend 13 | HTML CSS JS ANGULAR 14 | 15 | Stack 16 | Grupo de tecnologías, colección de tecnología 17 | -> El stack mas popular para desarrollo web es: 18 | LAMP: Linux Apache MySQL PHP 19 | 20 | Metodo de comunicación entre Frontend y Backend 21 | GET 22 | POST 23 | AJAX 24 | SOCKETS 25 | 26 | Protocolo HTTP 27 | 28 | Curso Definitivo de JavaScript 29 | Curso Desarrollo Web 30 | Curso Responsive Design 31 | 32 | Platzi.com/js 33 | 34 | Curso de terminal 35 | Para usar la linea de comandos del cmd 36 | Platzi.com/terminal -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/17 Cursos.txt: -------------------------------------------------------------------------------- 1 | Curso: 2 | Frontend: Curso de diseño web online y curso de Responsive disen 3 | Curso definitivo de JavaScript 4 | 5 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/2 Inicio.txt: -------------------------------------------------------------------------------- 1 | Dentro de consola del Navegador: 2 | 3 | alert("Mi nombre es Freddy"); 4 | 5 | nombre = prompt("Cuál es tu nombre?"); -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/3 Qué es HTML CSS JS.txt: -------------------------------------------------------------------------------- 1 | HTML -> info 2 | CSS -> diseño 3 | JS -> interactividad 4 | 5 | -> Interpretado por el navegador 6 | 7 | 8 | CURSO: Diseño web online -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/4 JavaScript no es Java.txt: -------------------------------------------------------------------------------- 1 | JavaScript != Java 2 | Web Oracle 3 | Servidor Server 4 | NodeJS Bancos 5 | Robots Android 6 | 7 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/5 Primeros pasos en el navegador con alert.txt: -------------------------------------------------------------------------------- 1 | string--- 2 | alert("un mensaje"); 3 | 4 | alert: Metodo que dispara algo. 5 | var: declara la existencia de una variable en memoria 6 | 7 | var z = x + y 8 | 9 | La suma de x + y ocurre primero, luego esta se almacena en z 10 | 11 | Concatenación: + z 12 | alert("El valor de z es: " + z); 13 | 14 | 15 | Skills: Habilidades 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/6 HTML CSS JS de verdad.txt: -------------------------------------------------------------------------------- 1 | sd -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/7 Algunas etiquetas.txt: -------------------------------------------------------------------------------- 1 | style: Debe ir en el head para que los cambios se vean primero, dentro de esta etiqueta van las etiquetas que se desean cambiar 2 | body 3 | { 4 | background-color: #pagina; 5 | color: #texto; 6 | Font-family: fuente; 7 | } 8 | 9 | body: almacena el texto y el script 10 | script: document.write("texto" + x); escribe en pantalla 11 | strong: negrita 12 | alert("Mensajes emergentes al iniciar la pagina") 13 | prompt("Pedir datos al usuario"); 14 | parseInt(convierte a entero) 15 | var texto = "algo"; -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/Anotaciones/8 El DOM nuestro lugar de trabajo en la web.txt: -------------------------------------------------------------------------------- 1 | DOM: 2 | En aplicaciones web tenemos un concepto llamado DOM (Document Object Model) es la forma en que internamente el navegador organiza todo el HTML dentro de una estructura de árbol 3 | 4 | NAVIGATOR 5 | 6 | WINDOW 7 | 8 | DOCUMENT 9 | 10 | Método: Función que hace parte de un objeto 11 | console.log: Revisar o depurar errores -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/1 dom/4 1 codigo.js: -------------------------------------------------------------------------------- 1 | var ruta = window.location; 2 | console.log(ruta.origin); 3 | document.write("Estás en: " + ruta); 4 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/1 dom/4 document.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document Object Model 6 | 7 | 8 |

Vamos a jugar con window y con document

9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/1 primero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mi primer archivo HTML 5 | 17 | 18 | 19 |

Hola estoy aprendiendo

20 |

Este es otro parrafo

21 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/2 Canvas/Practica/dibujo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dibujo en Canvas 6 | 12 | 13 | 14 |

Dibujo hecho en Canvas

15 |

16 | Ingresa cantidad de lineas
17 | 18 | 19 |

20 | 21 |

Tú dibujo termina arriba

22 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/3 teclas/flechas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 |

Mueve las flechas para dibujar

16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/4 Mouse/dibujoMouse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 |

Usa el mouse para dibujar arriba

16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/4 Mouse/dibujoMouse.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("mousemove", dibujarMouse); 2 | var area = document.getElementById("areaDibujo"); 3 | var papel = area.getContext("2d"); 4 | var colorcito = "red"; 5 | var x, y; 6 | 7 | function dibujarLinea(color, xinicio, yinicio, xfinal, yfinal, lienzo) 8 | { 9 | lienzo.beginPath(); 10 | lienzo.strokeStyle = color; 11 | lienzo.lineWidth = 3; 12 | lienzo.moveTo(xinicio, yinicio); 13 | lienzo.lineTo(xfinal, yfinal); 14 | lienzo.stroke(); 15 | lienzo.closePath(); 16 | } 17 | 18 | function dibujarMouse(evento) 19 | { 20 | if (evento.buttons == 1) { 21 | dibujarLinea(colorcito, x, y, evento.offsetX, evento.offsetY, papel); 22 | } 23 | x = evento.offsetX; 24 | y = evento.offsetY; 25 | } 26 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/5 villaplatzi/villa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Usa las flechas del teclado para mover al lobo multiple XD

10 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/6 fizzbuz/fizz.js: -------------------------------------------------------------------------------- 1 | var n = 100; 2 | var f = "Fizz "; 3 | var b = "Buzz "; 4 | 5 | for(var i = 1; i <= n; i++) 6 | { 7 | if(esDivisible(i, 3)) 8 | { 9 | document.write(f); 10 | } 11 | if(esDivisible(i, 5)) 12 | { 13 | document.write(b); 14 | } 15 | if(!esDivisible(i, 3) && !esDivisible(i, 5)) 16 | { 17 | document.write(i); 18 | } 19 | document.write("
"); 20 | } 21 | 22 | function esDivisible(nEvaluar, divisor) 23 | { 24 | if(nEvaluar % divisor == 0) 25 | { 26 | return true; 27 | } 28 | 29 | else 30 | { 31 | return false; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/6 fizzbuz/modulo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FizzBuz dame un empleo 6 | 7 | 8 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/classPlanta.js: -------------------------------------------------------------------------------- 1 | class Planta 2 | { 3 | constructor(n, v, a) 4 | { 5 | this.imagen = new Image(); 6 | this.nombre = n; 7 | this.vida = v; 8 | this.ataque = a; 9 | 10 | this.imagen.src = imagenes[this.nombre]; 11 | } 12 | 13 | hablar() 14 | { 15 | alert(this.nombre); 16 | } 17 | 18 | mostrar() 19 | { 20 | document.body.appendChild(this.imagen); 21 | document.write("
" + this.nombre + "
"); 22 | document.write("Vida: " + this.vida + "
"); 23 | document.write("Ataque: " + this.ataque + "
"); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/classPlantas.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/classPlantas.js -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/classPlantasZombies.js: -------------------------------------------------------------------------------- 1 | class PlantasZombies 2 | { 3 | constructor(n, v, a) 4 | { 5 | this.imagen = new Image(); 6 | this.nombre = n; 7 | this.vida = v; 8 | this.ataque = a; 9 | 10 | this.imagen.src = imagenes[this.nombre]; 11 | } 12 | hablar() 13 | { 14 | alert(this.nombre); 15 | } 16 | mostrar() 17 | { 18 | document.body.appendChild(this.imagen); 19 | document.write("
" + this.nombre + "
"); 20 | document.write("Vida: " + this.vida + "
"); 21 | document.write("Ataque: " + this.ataque + "
"); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/imagePlanta.js: -------------------------------------------------------------------------------- 1 | var imagenes = []; 2 | imagenes["PlantaUno"] = "plantaUno.png"; 3 | imagenes["PlantaDos"] = "plantaDos.png"; 4 | imagenes["PlantaTres"] = "plantaTres.png"; 5 | 6 | var coleccion = []; 7 | coleccion.push(new Planta("PlantaUno", 150, 80)); 8 | coleccion.push(new Planta("PlantaDos", 200, 100)); 9 | coleccion.push(new Planta("PlantaTres", 300, 180)); 10 | 11 | for(var p of coleccion) 12 | { 13 | p.mostrar(); 14 | } 15 | 16 | for(var x in coleccion[0]) 17 | { 18 | console.log(x); 19 | } 20 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/imagePlantas.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/imagePlantas.js -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/imagePlantasZombies.js: -------------------------------------------------------------------------------- 1 | var imagenes = []; 2 | imagenes["plantaUno"] = "plantaUno.png"; 3 | imagenes["plantaDos"] = "plantaDos.png"; 4 | imagenes["plantaTres"] = "plantaTres.png"; 5 | 6 | var coleccion = []; 7 | coleccion.push(new PlantasZombies("plantaUno", 100, 80)); 8 | coleccion.push(new PlantasZombies("plantaDos", 200, 120)); 9 | coleccion.push(new PlantasZombies("plantaTres", 80, 150)); 10 | 11 | for(var plazom of coleccion) 12 | { 13 | plazom.mostrar(); 14 | } 15 | 16 | for(var x in coleccion[0]) 17 | { 18 | console.log(x); 19 | } 20 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/planta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plantasmagoricas 6 | 7 | 8 |

Plantas vs Zombies

9 | 11 | 12 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/plantas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plantas vs Zombies 6 | 7 | 8 |

Planta vs Zombies

9 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/plantasZombies.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/016.programacion-basica/resources/7 pakiman/Practica/plantasZombies.html -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/paki.js: -------------------------------------------------------------------------------- 1 | var imagenes = []; 2 | imagenes["Cauchin"] = "vaca.png"; 3 | imagenes["Pokacho"] = "pollo.png"; 4 | imagenes["Tocinauro"] = "cerdo.png"; 5 | 6 | var coleccion = []; 7 | coleccion.push(new Pakiman("Cauchin", 100, 30)); 8 | coleccion.push(new Pakiman("Pokacho", 80, 50)); 9 | coleccion.push(new Pakiman("Tocinauro", 120, 40)); 10 | 11 | for(var pakin of coleccion) 12 | { 13 | pakin.mostrar(); 14 | } 15 | 16 | for(var x in coleccion[0]) 17 | { 18 | console.log(x); 19 | } 20 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/pakiman.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PakimanDex! 6 | 7 | 8 |

Pakimanes que he atrapado!

9 | 12 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/7 pakiman/pakiman.js: -------------------------------------------------------------------------------- 1 | class Pakiman 2 | { 3 | constructor(n, v, a) 4 | { 5 | this.imagen = new Image(); 6 | this.nombre = n; 7 | this.vida = v; 8 | this.ataque = a; 9 | 10 | this.imagen.src = imagenes[this.nombre]; 11 | } 12 | hablar() 13 | { 14 | alert(this.nombre); 15 | } 16 | mostrar() 17 | { 18 | document.body.appendChild(this.imagen); 19 | document.write("
" + this.nombre + "
"); 20 | document.write("Vida: " + this.vida + "
"); 21 | document.write("Ataque: " + this.ataque + "
"); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/8 cajero/Practica/cajero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cajero Automatico 6 | 7 | 8 |

Bienvenidos "Cajero Automatico"

9 |

10 |

Billetes en Soles:

11 |

100 - 50 - 20 - 10

12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/8 cajero/atm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cajero automatico 6 | 7 | 8 |

9 | 10 |

11 |

12 | 13 | 14 |

15 |

16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/9 express/express/servidor.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); // Libreria express 2 | var aplicacion = express(); // invoca express como si fuera una funcion 3 | 4 | aplicacion.get("/", inicio); // slash home 5 | aplicacion.get("/cursos", cursos); 6 | 7 | function inicio(peticion, resultado) 8 | { 9 | resultado.send("Este es el home del Servidor genial!!") 10 | } 11 | 12 | function cursos(peticion, resultado) 13 | { 14 | resultado.send("Estos son los cursos.") 15 | } 16 | aplicacion.listen(8989); 17 | -------------------------------------------------------------------------------- /DW/1-basico/016.programacion-basica/resources/9 express/servidor.js: -------------------------------------------------------------------------------- 1 | var express = require("express") // Libreria express 2 | var aplicacion = express(); // Invoca express como si fuera una funcion 3 | 4 | aplicacion.get("/", inicio); // Slash home 5 | aplicacion.get("/cursos", cursos); 6 | 7 | function inicio(peticion, resultado) 8 | { 9 | resultado.send("Este es el Home del Servidor") 10 | } 11 | 12 | function cursos(peticion, resultado) 13 | { 14 | resultado.send("Estos son los cursos"); 15 | } 16 | 17 | aplicacion.listen(8989); 18 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Minusculas a mayusculas/minus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Minusculas a mayusculas/minus.js: -------------------------------------------------------------------------------- 1 | // Opcion 1 No funciona 2 | let saludo = ["h", "o", "l", "a"] 3 | mayusculas(saludo); 4 | 5 | function mayusculas(parametro){ 6 | for(i=0; i < parametro.length; i++){ 7 | parametro[i].toUpperCase(); 8 | console.log(parametro[i]); 9 | } 10 | } 11 | 12 | 13 | // Opcion 2 14 | let texto = prompt("Ingresa tu nombre"); 15 | document.write(texto.toUpperCase()); 16 | 17 | //Opcion 3 18 | let frase = " hola platzinauta"; 19 | document.write(frase.toUpperCase()); 20 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/Codigo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/Codigo.jpeg -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/Explicacion.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/Explicacion.jpeg -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/masGrande.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/masGrande.js: -------------------------------------------------------------------------------- 1 | function secondLargestNumber(numbers){ 2 | let first = numbers[0] 3 | let second = 0; 4 | 5 | for(let i=0; i < numbers.length; i++){ 6 | if(numbers[i] > first){ // comparación para ver quien 7 | second = first; // es mayor 8 | first = numbers[i] 9 | } 10 | if(numbers[i] > second && numbers[i] < first){ 11 | second = numbers[i]; // comparación para ver quien 12 | } // es menor 13 | } 14 | return second 15 | } 16 | let nums = [8, 4, 6, 10, 9, 11] 17 | console.log(secondLargestNumber(nums)) 18 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/prueba.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/Ordenar numeros/prueba.js: -------------------------------------------------------------------------------- 1 | /*function segundoNumeroGrande(numero) 2 | { 3 | 4 | console.log(numero); 5 | } 6 | 7 | let nums = [8, 4, 6, 10, 9, 11] 8 | 9 | nums.sort(); 10 | parseInt(nums); 11 | segundoNumeroGrande(nums); 12 | */ 13 | /* 14 | function compare(a, b) { 15 | if (a < b) { 16 | return -1; 17 | } 18 | if (a > b) { 19 | return 1; 20 | } 21 | // a debe ser igual b 22 | return 0; 23 | } 24 | */ 25 | function compareNumbers(a, b) { 26 | return a - b; 27 | } 28 | 29 | var numbers = [4, 2, 5, 1, 3]; 30 | numbers.sort(function(a, b) { 31 | return a - b; 32 | }); 33 | console.log(numbers); 34 | -------------------------------------------------------------------------------- /DW/1-basico/017.pensamiento-lógico/17.algoritmos-y-pensamiento-logico/resources/masGrande.js: -------------------------------------------------------------------------------- 1 | function secondLargestNumber(numbers){ 2 | let first = numbers[0] 3 | let second = 0; 4 | 5 | for(let i=0; i < numbers.length; i++){ 6 | if(numbers[i] > first){ 7 | second = first; 8 | first = numbers[i] 9 | } 10 | if(numbers[i] > second && numbers[i] < first){ 11 | second = numbers[i]; 12 | } 13 | } 14 | return second 15 | } 16 | let nums = [8, 4, 6, 10, 9, 11] 17 | console.log(secondLargestNumber(nums)) 18 | -------------------------------------------------------------------------------- /DW/1-basico/022.sass/resources/resources/code/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/_mixinsfunc.scss","../sass/_navbar.scss","../sass/_hero.scss","../sass/style.scss"],"names":[],"mappings":"AAEA;AAOA;ACJA;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EDXJ;EACA;EACA,iBCUsC;EAClC;;AAGJ;EACI;EACA;AAMA;AAAA;AAAA;;AAJA;EACI;;AAQR;EACI;IACI;;;;ACrBR;EACI;EACA;EFZJ;EACA;EACA,iBEYsC;EAdlC;EACA;EACA;AAEJ;AAAA;AAAA;;AAcA;EACI;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;;;ACjCR;AAIA;EACI","file":"style.css"} -------------------------------------------------------------------------------- /DW/1-basico/022.sass/resources/resources/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "sass": "^1.63.6" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DW/1-basico/022.sass/resources/resources/code/sass/_mixinsfunc.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | /* Podemos usarlos con o sin argumentos */ 4 | @mixin crear-flexbox($justify) { 5 | display: flex; 6 | align-items: center; 7 | justify-content: $justify; 8 | } 9 | 10 | /* Funciones */ 11 | 12 | @function pixeles-rem($pixeles){ 13 | // 32/16 = 2 * 1rem = 2rem 14 | $resultado: math.div($pixeles, 16) * 1rem; 15 | 16 | @return $resultado; 17 | } -------------------------------------------------------------------------------- /DW/1-basico/022.sass/resources/resources/code/sass/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family:Arial, Helvetica, sans-serif; 8 | } -------------------------------------------------------------------------------- /DW/1-basico/022.sass/resources/resources/code/sass/style.scss: -------------------------------------------------------------------------------- 1 | @use 'navbar'; 2 | /* @use 'animaciones'; */ 3 | @use 'hero'; 4 | @use 'mixinsfunc'; 5 | 6 | h2 { 7 | background-color: slateblue; 8 | } 9 | -------------------------------------------------------------------------------- /DW/1-basico/022.sass/sass.txt: -------------------------------------------------------------------------------- 1 | ## 🔥 README.md 2 | Si te quedaste con ganas de ver más, te dejo estos enlaces con cursos gratuitos, probé el primero y me gustó y ahora mismo voy a hacer el segundo curso hecho por la gente de código facilito ✨😃✌ 3 | 4 | - [📌 Uno](https://youtu.be/kaSVabk-jbA) 5 | - [📌 Dos: Código Facilito](https://codigofacilito.com/videos/introduccion-a-sass) 6 | - [📌 Tres](https://www.youtube.com/watch?v=T6g5xTpuS0c&list=PLNHUeJiZHbgZ3HnKe0XtEH7AfQ_sIlYOY) 7 | 8 | > Estos son algunos apuntes que tomé del [primer curso gratuito](https://github.com/aleroses/Platzi/blob/master/DW/1-basico/22.sass/sass.md), espero te sean de utilidad! -------------------------------------------------------------------------------- /DW/1-basico/023.tailwind-2-y-3-basico/resources/imgs/svg/instagram.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/1-basico/023.tailwind-2-y-3-basico/resources/imgs/svg/instagram.svg -------------------------------------------------------------------------------- /DW/1-basico/023.tailwind-2-y-3-basico/resources/imgs/svg/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/1-basico/023.tailwind-2-y-3-basico/resources/imgs/svg/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/1-functions.js: -------------------------------------------------------------------------------- 1 | /* 2 | const name = "Juan David"; 3 | const lastname = "Castro Gallego"; 4 | const completeName = name + lastname; 5 | const nickname = "juandc"; 6 | 7 | console.log("Mi nombre es " + completeName + ", pero prefiero que me digas " + nickname + "."); 8 | */ 9 | 10 | 11 | function hola(name, lastname, nickname){ 12 | const completeName = name + " " + lastname; 13 | 14 | console.log("Mi nombre es " + completeName + ", pero prefiero que me digas " + nickname + "."); 15 | } 16 | 17 | hola("ale", "vel", "ghost"); -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/12-interactuar-usuarios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Manipulación del DOM 8 | 9 | 10 |

Manipulación

11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/12-script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1'); 2 | const input1 = document.querySelector('#calculo1'); 3 | const input2 = document.querySelector('#calculo2'); 4 | const btn = document.querySelector('#btnCalcular'); 5 | const result = document.querySelector('#result'); 6 | 7 | function btnOnClick(){ 8 | const sumaInputs = input1.value + input2.value; 9 | result.innerText = "Resultado: " + sumaInputs; 10 | } -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/4-for-to-while.js: -------------------------------------------------------------------------------- 1 | /* 2 | for (let i = 0; i < 5; i++) { 3 | console.log("El valor de i es: " + i); 4 | } 5 | 6 | for (let i = 10; i >= 2; i--) { 7 | console.log("El valor de i es: " + i); 8 | } 9 | */ 10 | 11 | var i = 0; 12 | 13 | while (i >= 0 && i < 5){ 14 | console.log("El valor de i es: " + i); 15 | i++ 16 | } 17 | 18 | 19 | var i = 10; 20 | 21 | while (i <= 10 && i >= 2){ 22 | console.log("El valor de i es: " + i); 23 | i-- 24 | } -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/5-prompt.js: -------------------------------------------------------------------------------- 1 | var user = prompt("Cúanto es 2 + 2?? "); 2 | 3 | while (user != "4"){ 4 | user = prompt("Cúanto es 2 + 2?? "); 5 | } 6 | 7 | console.log("\nExcelente, es ", user); -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/6-array-function.js: -------------------------------------------------------------------------------- 1 | var frutas = ["Manzana", "Pera", "Uva"] 2 | 3 | 4 | function algo(lista){ 5 | console.log(lista[0]); 6 | } 7 | 8 | algo(frutas); 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/7-array-function-ciclo.js: -------------------------------------------------------------------------------- 1 | var frutas = ["Manzana", "Pera", "Uva"] 2 | 3 | for (i = 0; i < frutas.length; i++){ 4 | 5 | function algo(lista){ 6 | console.log(lista[i]); 7 | } 8 | 9 | algo(frutas); 10 | } 11 | 12 | 13 | /* Otra solución */ 14 | var frutas = ["Manzana", "Pera", "Uva"] 15 | 16 | function algo(lista){ 17 | for(i=0; i < frutas.length; i++){ 18 | console.log(lista[i]); 19 | } 20 | } 21 | 22 | algo(frutas); -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/8-object-function-ciclo.js: -------------------------------------------------------------------------------- 1 | var car = { 2 | brand: "Totoya", 3 | model: "Corolla", 4 | year: 2020, 5 | } 6 | 7 | 8 | 9 | /* EJEMPLO DE COMPAÑERO */ 10 | let myCar = { 11 | make: 'Ford', 12 | model: 'Mustang', 13 | year: 1969 14 | }; 15 | 16 | function readObject(object){ 17 | for (let key in object) { 18 | console.log(key, ":", object[key]); 19 | } 20 | } 21 | 22 | readObject(myCar); 23 | 24 | 25 | //PRACTICANDO 26 | 27 | let car = { 28 | brand: "Ford", 29 | model: "Mustang", 30 | year: 1969, 31 | } 32 | 33 | function readObject(object){ 34 | for (let key in object){ 35 | console.log(key, ":", object[key]); 36 | } 37 | } 38 | 39 | readObject(car); -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/8.1-object-to-array.js: -------------------------------------------------------------------------------- 1 | const car = { 2 | brand: "Totoya", 3 | model: "Corolla", 4 | year: 2020, 5 | } 6 | 7 | // Object.values(car) 8 | // const array = Object.values(car) 9 | 10 | function imprimirElementos(objeto){ 11 | 12 | const array = Object.values(objeto); 13 | 14 | for (let i = 0; i < array.length; i++){ 15 | console.log(array[i]); 16 | } 17 | } 18 | 19 | imprimirElementos(car); -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/Practica/12-interactuar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Manipulación del DOM 8 | 9 | 10 |

Titulo del Documento

11 | 12 | 13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/002-js-practico/test-js/Practica/12.script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector("h1"); 2 | const input1 = document.querySelector('#number1'); 3 | const input2 = document.querySelector('#number2'); 4 | let suma; 5 | const btnCalcular = document.querySelector('#btnCalcular'); 6 | const result = document.querySelector('#result'); 7 | 8 | function btnOnClick(){ 9 | suma = Number(input1.value) + parseInt(input2.value); 10 | result.innerText = "Resultado: " + suma; 11 | } 12 | 13 | // 📌 Para pasar los strings a números utilizar el atributo “+” antes del string para cambiar su valor. -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "curso-ecmascript", 3 | "version": "1.0.0", 4 | "description": "Parte del curso de EcmaScript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "javascript", 11 | "ecmascript" 12 | ], 13 | "author": "Ale Vel ", 14 | "license": "MIT", 15 | "type": "module", 16 | "dependencies": { 17 | "node-fetch": "^3.3.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es10/00-flat-map.js: -------------------------------------------------------------------------------- 1 | // flat 2 | const array = [1,1,2,3,4, [1,3,5,6, [1,2,4]]]; 3 | console.log(array.flat(3)); 4 | 5 | // flatmap 6 | const array2 = [1,2,3,4,5]; 7 | console.log(array2.flatMap(v => [v, v * 2])); 8 | // 1, 1*2 = 2, 2, 2*2 = 4, etc 9 | 10 | 11 | /* const array2 = [1, 2, [3, 4, [5, 6]]]; 12 | const result2 = array2.flat() 13 | console.log(result2); */ 14 | 15 | /* const strings = ["Nunca pares", "de Aprender"] 16 | console.log(strings.map(string => string.split(" "))); 17 | // [ [ 'Nunca', 'pares' ], [ 'de', 'Aprender' ] ] 18 | console.log(strings.flatMap(string => string.split(" "))); 19 | // [ 'Nunca', 'pares', 'de', 'Aprender' ] */ 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es10/01-trimstart-trimend.js: -------------------------------------------------------------------------------- 1 | const hello = ' Hello World! '; 2 | console.log(hello.trimStart()); 3 | console.log(hello.trimEnd()); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es10/02-try-catch.js: -------------------------------------------------------------------------------- 1 | try { 2 | hello(); 3 | }catch (error) { 4 | console.log(error); 5 | } 6 | 7 | try { 8 | anotherFn(); 9 | } catch { 10 | console.log('Esto es un error'); 11 | } -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es10/03-fromentries.js: -------------------------------------------------------------------------------- 1 | const entries = new Map([["name", "oscar"], ["age", 34]]); 2 | console.log(entries); 3 | console.log(Object.fromEntries(entries)); 4 | 5 | 6 | 7 | // Otro ejemplo 8 | const arrayEntries = [ 9 | [ 'name', 'Andres' ], 10 | [ 'email', 'andres@correo.com' ], 11 | [ 'age', 23 ] 12 | ]; 13 | 14 | const usuario = Object.fromEntries(arrayEntries); 15 | 16 | console.log(usuario); 17 | 18 | // Otro ejemplo 19 | 20 | const object = { 21 | name: "ale", 22 | age: 21 23 | } 24 | const array = Object.entries(object); 25 | console.log(array); 26 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/00-optional-chaining.js: -------------------------------------------------------------------------------- 1 | const users = { 2 | gndx: { 3 | country: "MX" 4 | }, 5 | anna: { 6 | country: "CO" 7 | } 8 | }; 9 | 10 | console.log(users.gndx.country); 11 | // No existe 12 | console.log(users.anna.age); 13 | // Esto devuelve algo mas amigable 14 | console.log(users?.ale?.country); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/01-bigint.js: -------------------------------------------------------------------------------- 1 | const aBigNumber = 323428423842848n; 2 | const anotherBigNumber = BigInt(323428423842848); 3 | 4 | console.log(aBigNumber); 5 | console.log(typeof(aBigNumber)); 6 | 7 | console.log(anotherBigNumber); 8 | console.log(typeof(anotherBigNumber)); 9 | 10 | 11 | // Otro ejemplo 12 | const max = Number.MAX_SAFE_INTEGER 13 | const min = Number.MIN_SAFE_INTEGER 14 | 15 | console.log(max) // 9007199254740991 16 | console.log(min) // -9007199254740991 -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/02-nullish.js: -------------------------------------------------------------------------------- 1 | const anotherNumber = null; 2 | const validate = anotherNumber ?? 5; 3 | console.log(validate); 4 | 5 | 6 | // otro ejemplo 7 | const usuario1 = {} 8 | const nombre1 = usuario1.name ?? "Andres" 9 | 10 | const usuario2 = {name: "Juan"} 11 | const nombre2 = usuario2.name ?? "Andres" 12 | 13 | console.log(nombre1) // 'Andres' 14 | console.log(nombre2) // 'Juan' 15 | 16 | 17 | // comparación con or 18 | const id = 0; // 2 19 | 20 | const orId = id || "Sin id" 21 | const nullishId = id ?? "Sin id" 22 | 23 | console.log( orId ) // 'Sin id' 24 | console.log( nullishId ) // 0 -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/03-promise-allsettled.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject) => reject("Reject")); 2 | const promise2 = new Promise((resolve, reject) => resolve("Resolve")); 3 | const promise3 = new Promise((resolve, reject) => resolve("Resolve 02")); 4 | 5 | Promise.allSettled([promise1, promise2, promise3]) 6 | .then(response => console.log(response)); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/04-globalthis.js: -------------------------------------------------------------------------------- 1 | console.log(window); // navegador 2 | console.log(global); // node 3 | console.log(self); // webworker 4 | console.log(globalThis); 5 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/05-matchall.js: -------------------------------------------------------------------------------- 1 | const regex = /\b(Apple)+\b/g; 2 | 3 | const fruit = 'Apple, Banana, Kiwi, Apple, Orange, etc., etc., etc'; 4 | 5 | for (const match of fruit.matchAll(regex)){ 6 | console.log(match); 7 | }; -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/06-dynamic-import.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('btn'); 2 | 3 | button.addEventListener('click', async function(){ 4 | const module = await import('./06-module.js'); 5 | console.log(module); 6 | module.hello(); 7 | }); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/06-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dynamic Import 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es11/06-module.js: -------------------------------------------------------------------------------- 1 | export function hello() { 2 | console.log('Hola mundo!'); 3 | } -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es12/00-numeric-separator.js: -------------------------------------------------------------------------------- 1 | const value = 100_000_000_000_000; 2 | console.log(value); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es12/01-replaceall.js: -------------------------------------------------------------------------------- 1 | const string = "JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web."; 2 | 3 | const replacedString = string.replace('JavaScript', "TypeScript"); 4 | 5 | console.log(replacedString); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es12/02-promise-any.js: -------------------------------------------------------------------------------- 1 | const promise1 = new Promise((resolve, reject) => reject("Reject")); 2 | const promise2 = new Promise((resolve, reject) => resolve("Resolve")); 3 | const promise3 = new Promise((resolve, reject) => resolve("Resolve 02")); 4 | 5 | Promise.any([promise1, promise2, promise3]) 6 | .then(response => console.log(response)); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es12/03-private.js: -------------------------------------------------------------------------------- 1 | class user { 2 | // Constructor 3 | constructor(name, age) { 4 | this.name = name; 5 | this.age = age; 6 | } 7 | // Metodos 8 | #speak() { 9 | return 'Hello'; 10 | } 11 | greeting() { 12 | return `${this.speak()} ${this.name}`; 13 | } 14 | 15 | get #uAge() { 16 | return this.age; 17 | } 18 | set #uAge(n) { 19 | this.age = n; 20 | } 21 | } 22 | 23 | const dev = new user('David', 15); 24 | console.log(dev.uAge); 25 | console.log(dev.uAge = 20); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es13/00-at.js: -------------------------------------------------------------------------------- 1 | const array = ["one", "two", "three", "four", "five", "six"]; 2 | 3 | console.log(array[array.length -1]); 4 | 5 | console.log(array.at(-1)); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es13/01-products.js: -------------------------------------------------------------------------------- 1 | import fetch from "node-fetch"; 2 | 3 | const response = await fetch('https://api.escuelajs.co/api/v1/products'); 4 | const products = await response.json(); 5 | 6 | export { products }; 7 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es13/01-top-level-await.js: -------------------------------------------------------------------------------- 1 | import { products } from "./01-products.js"; 2 | 3 | console.log(products); 4 | console.log('Hey!!'); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/01-arrow-function.js: -------------------------------------------------------------------------------- 1 | function square(num) { 2 | return num * num; 3 | } 4 | 5 | /* Arrow funtion */ 6 | const square = (num) => { 7 | return num + num; 8 | } 9 | 10 | const square = num => num * num; -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/03-strings.js: -------------------------------------------------------------------------------- 1 | let hello = 'Hello'; 2 | let world = 'World'; 3 | let epicPhrase = hello + ' ' + world + '!'; 4 | console.log(epicPhrase); 5 | 6 | // Template literals 7 | let epicPhrase2 = `${hello} ${world}!`; 8 | console.log(epicPhrase); 9 | 10 | // Multi-line strings 11 | let lorem = 'Esto es un string \n ' + 'Esta es la segunda línea!'; 12 | let lorem2 = `Esta es una frase epica primera línea 13 | y esta es la segunda línea 14 | Tercera línea`; 15 | console.log(lorem); 16 | console.log(lorem2); 17 | 18 | 19 | const mensaje = `Línea 1 20 | línea 2` 21 | 22 | console.log(mensaje) -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/04-default-params.js: -------------------------------------------------------------------------------- 1 | function newUser(name, age, country){ 2 | var name = name || 'Oscar'; 3 | var age = age || 34; 4 | var country = country || 'MX'; 5 | console.log(name, age, country); 6 | } 7 | 8 | newUser(); 9 | newUser('David', 15, 'CO'); 10 | 11 | /* Metodo dos */ 12 | function newAdmin(name = 'Oscar', age = 32, country = 'CL') { 13 | console.log(name, age, country); 14 | } 15 | 16 | newAdmin(); 17 | newAdmin('Ana', 28, 'PE'); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/05-object-literals.js: -------------------------------------------------------------------------------- 1 | // enahced object literals 2 | 3 | /* function newUser(user, age, country, uId) { 4 | return { 5 | user: user, 6 | age: age, 7 | country: country, 8 | id: uId 9 | } 10 | } 11 | 12 | console.log(newUser('ghost', 16, 'PE', 1)); */ 13 | 14 | function newUser(user, age, country, uId) { 15 | return { 16 | user, 17 | age, 18 | country, 19 | uId 20 | } 21 | } 22 | 23 | console.log(newUser('ghost', 16, 'PE', 1)); 24 | 25 | 26 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/08-module.js: -------------------------------------------------------------------------------- 1 | import saludo from "./module.js"; 2 | 3 | saludo(); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/09-challenge.js: -------------------------------------------------------------------------------- 1 | function solution(json1, json2) { 2 | var json1 = json1 || {name: 'Mr. Michi', food: 'Pescado'} 3 | var json2 = json2 || {age: 12, color: 'Blanco'} 4 | var data = {...json1, ...json2} 5 | 6 | console.log(data); 7 | } 8 | 9 | solution({name: 'Mr. Bigotes', food: 'Pollito'}/* , { age: 12, color: 'Blanco'} */); 10 | 11 | // Solución: 12 | export function solution( 13 | json1 = { 14 | name: "Mr. Michi", 15 | food: "Pescado", 16 | }, 17 | json2 = { 18 | age: 12, 19 | color: "Blanco", 20 | } 21 | ) { 22 | /* return {...json1, ...json2}; */ 23 | console.log({...json1, ...json2}); 24 | } 25 | 26 | solution({ 27 | name: "Bigotes", 28 | food: "Pollito" 29 | }) -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/09-generator.js: -------------------------------------------------------------------------------- 1 | function* iterate(array){ 2 | for(let value of array){ 3 | yield value; 4 | } 5 | } 6 | 7 | const it = iterate(['Oscar', 'David', 'Ana', 'Ulises', 'Jennifer']); 8 | 9 | console.log(it.next().value); 10 | console.log(it.next().value); 11 | console.log(it.next().value); 12 | console.log(it.next().value); 13 | console.log(it.next().value); 14 | console.log(it.next().value); 15 | console.log(it.next().value); 16 | console.log(it.next().value); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/10-set-add.js: -------------------------------------------------------------------------------- 1 | const list = new Set(); 2 | 3 | list.add('item 01'); 4 | list.add('item 02').add('item 03'); 5 | 6 | console.log(list); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/14-challenge-api.js: -------------------------------------------------------------------------------- 1 | export async function getData() { 2 | return new Promise((resolve) => { 3 | setTimeout(() => { 4 | resolve([{ 5 | movie: "El despertar de los michis", 6 | year: 2021, 7 | protagonist: "Mr. Michi" 8 | }, { 9 | movie: "101 Michis", 10 | year: 2019, 11 | protagonist: "Tommy Michiguire" 12 | }]); 13 | }, 1000); 14 | }); 15 | } -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/14-challenge-exercise.js: -------------------------------------------------------------------------------- 1 | import { getData } from "./14-challenge-api.js"; 2 | 3 | /* export */ function solution() { 4 | // Tu código aquí 👈 5 | return getData() 6 | .then(respuesta => console.log(respuesta)) 7 | .catch(error => console.log(error)); 8 | } 9 | 10 | solution(); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es6/module.js: -------------------------------------------------------------------------------- 1 | const saludo = () => { 2 | console.log('Hello!'); 3 | } 4 | 5 | export default saludo; -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es7/00-exponential.js: -------------------------------------------------------------------------------- 1 | const data = 3 ** 4; 2 | console.log(data); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es7/01-array-includes.js: -------------------------------------------------------------------------------- 1 | let numbers = [1, 3, 4, 6, 7, 8,]; 2 | 3 | console.log(numbers.includes(4)); 4 | 5 | const list = ['oscar', 'david', 'anna']; 6 | 7 | // Las mayusculas importan: Oscar 8 | console.log(list.includes('oscar')); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es8/00-object-entries.js: -------------------------------------------------------------------------------- 1 | const countries = { MX: 'Mexico', CO: 'Colombia', CL: 'Chile', PE: 'Peru' }; 2 | 3 | console.log(Object.entries(countries)); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es8/01-object-values.js: -------------------------------------------------------------------------------- 1 | const countries = { MX: 'Mexico', CO: 'Colombia', CL: 'Chile', PE: 'Peru'}; 2 | console.log(Object.values(countries)); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es8/03-string-padding.js: -------------------------------------------------------------------------------- 1 | const string = 'Hello'; 2 | 3 | console.log(string.padStart(7, '_')); 4 | console.log(string.padEnd(7, '_')); 5 | 6 | 7 | console.log('abc'.padStart(10, '_')); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es8/04-trailing-commas.js: -------------------------------------------------------------------------------- 1 | const ages = [24, 34, 25, 24, , , , , 45]; 2 | 3 | console.log(ages); 4 | console.log(ages.length); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es9/00-regex.js: -------------------------------------------------------------------------------- 1 | const regex = /(\d{4})-(\d{2})-(\d{2})/; 2 | const matchers = regex.exec('2022-01-01'); 3 | console.table(matchers); 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es9/01-spread.js: -------------------------------------------------------------------------------- 1 | const user = { username: 'gndx', age: 34, country: 'CO'}; 2 | const { username, ...values } = user; 3 | console.log(username); 4 | console.log(values); 5 | -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es9/02-finally.js: -------------------------------------------------------------------------------- 1 | const promesas = () => { 2 | return new Promise((resolve, reject) => { 3 | if(false){ 4 | resolve("This was resolved"); 5 | }else { 6 | reject("This wasn't resolved"); 7 | } 8 | }) 9 | } 10 | 11 | promesas() 12 | .then(respuesta => console.log(respuesta + ', then...')) 13 | .catch(error => console.log(error + ', catch...' )) 14 | .finally(() => console.log('Finally')); -------------------------------------------------------------------------------- /DW/2-intermedio/003-ECMAScript/resources/code/src/es9/03-async.js: -------------------------------------------------------------------------------- 1 | async function* anotherGenerator() { 2 | yield await Promise.resolve(1); 3 | yield await Promise.resolve(2); 4 | yield await Promise.resolve(3); 5 | } 6 | 7 | const other = anotherGenerator(); 8 | other.next().then(response => console.log(response.value)); 9 | other.next().then(response => console.log(response.value)); 10 | other.next().then(response => console.log(response.value)); 11 | console.log('Hello!'); 12 | 13 | 14 | // otro ejemplo 15 | async function arrayOfNames(array){ 16 | for await (let value of array){ 17 | console.log(value); 18 | } 19 | } 20 | 21 | const names = arrayOfNames(['Oscar', 'David', 'Anna']); 22 | console.log('After'); -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/20.promedio-ponderado/calculos.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/20.promedio-ponderado/calculos.xlsx -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/21.clases-metodos-estaticos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Salarios 8 | 9 | 10 |

Calculate Salaries

11 |

Open the console: Control + Shift + I

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/25.reestructurando-informacion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Salarios 8 | 9 | 10 |

Calculate Salaries

11 |

Open the console: Control + Shift + I

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/8.Coupon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coupon 8 | 9 | 10 |

Get a discount with your coupon 🔥😃

11 | 12 |

This item is $12, 345.00 🎃

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

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/math.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Revisa la consola 😄👉

11 |

Usando Control + Shift + I

12 | 13 | 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/10.find-id/main.js: -------------------------------------------------------------------------------- 1 | const users = []; 2 | users.push({ id: 123, name: 'Juanito Alcachofa' }); 3 | users.push({ id: 456, name: 'Juanita Alcaparra' }); 4 | 5 | function solution(array, id){ 6 | const output = array.find(item => item.id == id); 7 | 8 | console.log(output ? output.name : false); 9 | return output ? output.name : false; 10 | } 11 | 12 | solution(users, 456); 13 | solution(users, 999); 14 | 15 | 16 | 17 | 18 | /* 19 | Juanita Alcaparra 20 | false 21 | */ 22 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/12.promedio/average.js: -------------------------------------------------------------------------------- 1 | // "Promedio" se traduce al inglés como "average" o "mean" 2 | 3 | const numbers = [1, 2, 3, 4]; 4 | const average = (numbers.reduce((a,b) => a + b)) / numbers.length; 5 | 6 | console.log(average); 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | /* 15 | - promedio or mediana aritmética +++ / lenght 16 | - mediana 17 | - 450, 500, 600 rpt: 500 18 | - 100, 200, 300, 400 rpt: 200+300/2 19 | - moda: valor que se repite mas veces (cualquier dato) 20 | */ -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/12.promedio/reduce/main.js: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4]; 2 | 3 | const rta = numbers.reduce((sum, element) => sum + element, 0); 4 | 5 | console.log(rta); 6 | 7 | // otro ejemplo 8 | const ventasPrimerTrimestre = [ 10, 20, 30 ]; 9 | 10 | function getMedia(array){ 11 | const initialValue = 0; 12 | const sumWithInitial = array.reduce( 13 | (previousValue, currentValue) => previousValue + currentValue, initialValue 14 | ); 15 | 16 | return sumWithInitial / array.length; 17 | }; 18 | 19 | getMedia(ventasPrimerTrimestre); -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/14.mediana/practice-one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculate Median 8 | 9 | 10 |

Revisa la consola

11 |

control + shift + i

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/14.mediana/practice-two/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | - promedio or mediana aritmética +++ / lenght 3 | - 1, 2, 3 rpt: 6/3 4 | - mediana 5 | - 450, 500, 600 rpt: 500 6 | - 100, 200, 300, 400 rpt: 200+300/2 7 | - moda: valor que se repite mas veces (cualquier dato) 8 | */ 9 | 10 | const array = [5,2,1,4,3]; 11 | const what_is_it = array.length % 2 == 0; 12 | // true is par (even) and false is impar (odd) 13 | 14 | const sorted_array = array.sort(); 15 | 16 | const mediana = what_is_it 17 | ? (sorted_array[((sorted_array.length / 2) - 1)] + sorted_array[(sorted_array.length / 2)]) / 2 18 | : sorted_array[Math.floor(sorted_array.length / 2)]; 19 | 20 | console.log(sorted_array, 'is', mediana); 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/21.salario/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Salarios 8 | 9 | 10 |

Calculate Salaries

11 |

Open the console: Control + Shift + I

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/004.taller-js-mate-y-estadistica/resources/codigo/practice/8.coupon/practice-two/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Discount calculation 8 | 9 | 10 |

Discount calculation

11 |

The price of the product is: $250.00

12 |
13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/closure/10.playground.js: -------------------------------------------------------------------------------- 1 | function data() { 2 | let pet = []; 3 | 4 | function add(new_pet) { 5 | new_pet ? pet.push(new_pet) : console.log(pet); 6 | } 7 | 8 | return add; 9 | } 10 | 11 | const my_pet = data(); 12 | my_pet("cat"); 13 | my_pet({ pet: "dog" }); 14 | my_pet(["fish", "pig"]); 15 | my_pet(); 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/closure/8.playground.js: -------------------------------------------------------------------------------- 1 | function add(first_number) { 2 | function calculate(second_number) { 3 | if (second_number) { 4 | return first_number + second_number; 5 | } else { 6 | return first_number; 7 | } 8 | } 9 | 10 | return calculate; 11 | } 12 | 13 | const result = add(2)(3); 14 | const result_two = add(90)(); 15 | 16 | console.log(result, result_two); 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/closure/9.1.practice.js: -------------------------------------------------------------------------------- 1 | /* function moneyBox(coins) { 2 | let saveCoins = 0; 3 | saveCoins += coins; 4 | 5 | console.log(`MoneyBox: ${saveCoins}`); 6 | } 7 | 8 | moneyBox(5); 9 | moneyBox(5); 10 | moneyBox(5); */ 11 | 12 | function moneyBox() { 13 | let saveCoins = 0; 14 | 15 | function countCoins(coins) { 16 | saveCoins += coins; 17 | 18 | console.log(`MoneyBox: ${saveCoins}`); 19 | } 20 | 21 | return countCoins; 22 | } 23 | 24 | const myMoneyBox = moneyBox(); 25 | myMoneyBox(5); 26 | myMoneyBox(5); 27 | myMoneyBox(5); 28 | 29 | const moneyBoxAle = moneyBox(); 30 | moneyBoxAle(10); 31 | moneyBoxAle(20); 32 | moneyBoxAle(30); 33 | 34 | myMoneyBox(10); 35 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/closure/9.practice.js: -------------------------------------------------------------------------------- 1 | function greeting() { 2 | let username = "Ale"; 3 | 4 | function displayUsername() { 5 | return `Hello ${username}`; 6 | } 7 | 8 | return displayUsername; 9 | } 10 | 11 | const message = greeting(); 12 | console.log(message); 13 | console.log(message()); 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/debug/main.js: -------------------------------------------------------------------------------- 1 | /* var a = "Hello"; 2 | 3 | function hello() { 4 | let b = "Hello world"; 5 | const c = "Hello world"; 6 | 7 | debugger; 8 | } 9 | 10 | hello(); */ 11 | 12 | const fruits = () => { 13 | if (true) { 14 | var fruit1 = "apple"; 15 | const fruit2 = "banana"; 16 | let fruit3 = "kiwi"; 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/hoisting/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/006.closures_scope-en-js/resources/code/src/hoisting/main.js -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/scope/1.global.js: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | // Declarando 4 | var a; 5 | // Declarar y asignar o inicializar 6 | var b = "b"; 7 | 8 | // Redeclarar 9 | var a = "aa"; 10 | // Asignar o inicializar 11 | a = "aaaaa"; 12 | // Reasignar o Reinicializar 13 | b = "bb"; 14 | 15 | // Global Scope 16 | var fruit = "Apple"; 17 | 18 | function bestFruit() { 19 | console.log(fruit); 20 | } 21 | 22 | bestFruit(); 23 | 24 | function countries() { 25 | var country = "Colombia"; // Global 26 | console.log(country); 27 | } 28 | 29 | countries(); 30 | console.log(country); 31 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/scope/2.function-scope.js: -------------------------------------------------------------------------------- 1 | function greeting() { 2 | let userName = "Anna"; 3 | console.log(userName); 4 | 5 | if (userName === "Anna") { 6 | console.log(`Hello ${userName}!`); 7 | } 8 | } 9 | 10 | greeting(); 11 | // No tiene alcance 👀👇 12 | // console.log(userName); 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/scope/3.block-scope.js: -------------------------------------------------------------------------------- 1 | function fruits() { 2 | if (true) { 3 | var fruitOne = "Apple"; 4 | let fruitTwo = "Kiwi"; 5 | const fruitThree = "Banana"; 6 | } 7 | 8 | console.log(fruitOne); 9 | console.log(fruitTwo); 10 | console.log(fruitThree); 11 | } 12 | 13 | fruits(); 14 | 15 | function example() { 16 | for (let i = 0; i < 10; i++) { 17 | setTimeout(function () { 18 | console.log(i); 19 | }, 1000); 20 | } 21 | } 22 | 23 | example(); 24 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/src/scope/6.strict-mode.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | pi = 2.1416; 3 | console.log(pi); 4 | 5 | function myFunction() { 6 | "use strict"; 7 | 8 | return (pi = 3.1416); 9 | } 10 | 11 | console.log(myFunction()); 12 | -------------------------------------------------------------------------------- /DW/2-intermedio/006.closures_scope-en-js/resources/code/test/7.lexical.js: -------------------------------------------------------------------------------- 1 | /* let number = 1; 2 | 3 | function increase(i) { 4 | console.log(number); 5 | number += i; 6 | } 7 | 8 | increase(1); 9 | increase(1); 10 | increase(1); 11 | increase(1); 12 | increase(1); */ 13 | 14 | function principal(i) { 15 | let number = 1; 16 | 17 | function increase() { 18 | console.log(number); 19 | number += i; 20 | } 21 | 22 | return increase; 23 | } 24 | 25 | const closure = principal(1); 26 | closure(); 27 | closure(); 28 | closure(); 29 | closure(); 30 | closure(); 31 | closure(); 32 | -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/pilares.md: -------------------------------------------------------------------------------- 1 | # Paradigma: 2 | Es la teoría que suministra las bases y el modelo para resolver problemas. 3 | 4 | # Abstracción: 5 | Es la capacidad de representar objetos del mundo real en términos de sus características y comportamientos esenciales, ocultando los detalles complejos de su implementación. 6 | 7 | # Encapsulamiento: 8 | Es la capacidad de ocultar la complejidad interna de los objetos, protegiendo sus propiedades (atributos) y métodos para que no sean accesibles desde fuera de la clase 9 | 10 | Polimorfismo: 11 | 12 | Herencia: -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/12.getters-setters.js: -------------------------------------------------------------------------------- 1 | class Course { 2 | constructor({ name, classes = [] }) { 3 | this._name = name; 4 | this.classes = classes; 5 | } 6 | 7 | get name() { 8 | return this._name; 9 | } 10 | 11 | set name(new_name) { 12 | if (new_name === "Bad") { 13 | console.log("Incorrect"); 14 | } else { 15 | this._name = new_name; 16 | } 17 | } 18 | } 19 | 20 | const course_one = new Course({ 21 | name: "Course 01", 22 | classes: [{ topic: "Class 01" }], 23 | }); 24 | 25 | console.log("Message 01", course_one); 26 | console.log("Message 02", course_one.name); 27 | 28 | course_one.name = "Bad"; 29 | course_one._name = "Bad"; 30 | console.log("Message 03", course_one._name); 31 | -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/13.modulos.mjs: -------------------------------------------------------------------------------- 1 | function play_video(id) { 2 | const secret_url = 3 | "https://platzisecret.com/" + id; 4 | console.log("Playing from url " + secret_url); 5 | } 6 | function pause_video(id) { 7 | const secret_url = 8 | "https://platzisecret.com/" + id; 9 | console.log("Paused from url " + secret_url); 10 | } 11 | 12 | class PlatziClass { 13 | constructor({ name, videoID }) { 14 | this.name = name; 15 | this.videoID = videoID; 16 | } 17 | 18 | play() { 19 | play_video(this.videoID); 20 | } 21 | pause() { 22 | pause_video(this.videoID); 23 | } 24 | } 25 | 26 | export { PlatziClass }; 27 | -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/19.Comments.js: -------------------------------------------------------------------------------- 1 | export class Comment { 2 | constructor({ 3 | content, 4 | studentName, 5 | studentRole = "estudiante", 6 | }) { 7 | this.content = content; 8 | this.studentName = studentName; 9 | this.studentRole = studentRole; 10 | this.likes = 0; 11 | } 12 | 13 | publicar() { 14 | const comentario = { 15 | studentName: this.studentName + " (" + this.studentRole + ")", 16 | likes: this.likes + " likes", 17 | content: this.content 18 | } 19 | return comentario 20 | } 21 | } -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/19.exercise.js: -------------------------------------------------------------------------------- 1 | import { Comment } from "./19.Comments.js"; 2 | import { Student } from "./19.Student.js"; 3 | 4 | export class TeacherStudent extends Student { 5 | constructor(props, skills = []) { 6 | super(props); 7 | this.skills = skills; 8 | } 9 | 10 | publicarComentario(commentContent) { 11 | const comment = new Comment({ 12 | content: commentContent, 13 | studentName: this.name, 14 | studentRole: `profesor de ${this.skills.join()}` 15 | }); 16 | return comment.publicar(); 17 | } 18 | } -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/practice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/test/12.getters-setters.js: -------------------------------------------------------------------------------- 1 | class Course { 2 | constructor({ name, classes = [] }) { 3 | this._name = name; 4 | this.classes = classes; 5 | } 6 | 7 | get name() { 8 | return this._name; 9 | } 10 | 11 | set name(new_name) { 12 | if (new_name === "Bad") { 13 | console.log("Incorrect"); 14 | } else { 15 | this._name = new_name; 16 | } 17 | } 18 | } 19 | 20 | const course_one = new Course({ 21 | name: "Course 01", 22 | classes: [{ topic: "Class 01" }], 23 | }); 24 | 25 | console.log("Message 01", course_one); 26 | console.log("Message 02", course_one.name); 27 | 28 | course_one.name = "Bad"; 29 | course_one._name = "Bad"; 30 | console.log("Message 03", course_one._name); 31 | -------------------------------------------------------------------------------- /DW/2-intermedio/007.poo-js/resources/code/test/19.Comment.mjs: -------------------------------------------------------------------------------- 1 | class Comment { 2 | constructor({ 3 | content, 4 | name_of_commenter, 5 | commenter_rol = "student", 6 | }) { 7 | this.content = content; 8 | this.name_of_commenter = name_of_commenter; 9 | this.commenter_rol = commenter_rol; 10 | this.likes = 0; 11 | } 12 | 13 | publish() { 14 | const comment = { 15 | name_of_commenter: `${this.name_of_commenter} (${this.commenter_rol})`, 16 | likes: `${this.likes} likes`, 17 | content: this.content, 18 | }; 19 | 20 | return comment; 21 | } 22 | } 23 | 24 | export { Comment }; 25 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/10.data.mjs: -------------------------------------------------------------------------------- 1 | const student = { 2 | name: "Ale Roses", 3 | approvedCourses: ["Course 1", "Course 2"], 4 | caracteristicas: { 5 | age: 22, 6 | colorCabello: "Black", 7 | gustos: { 8 | musica: ["rock", "punk", "metal"], 9 | peliculas: ["history", "horror", "comedy"], 10 | }, 11 | }, 12 | 13 | addCourse(newCourse) { 14 | console.log("This", this); 15 | console.log( 16 | "This.approvedCourses", 17 | this.approvedCourses 18 | ); 19 | 20 | this.approvedCourses.push(newCourse); 21 | }, 22 | }; 23 | 24 | export { student }; 25 | 26 | 27 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/11.validation.mjs: -------------------------------------------------------------------------------- 1 | function is_object(subject) { 2 | return typeof subject === "object"; 3 | } 4 | 5 | function is_array(subject) { 6 | return Array.isArray(subject); 7 | } 8 | export { is_object, is_array }; 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/5.memory.js: -------------------------------------------------------------------------------- 1 | const ale = { 2 | age: 18, 3 | email: "aleroses@mail.com", 4 | }; 5 | 6 | const nath = ale; 7 | nath.email = "nath@mail.com"; 8 | nath.age = 22; 9 | 10 | console.log({ ale, nath }); 11 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/7.JSON.parse-JSON.stringify.js: -------------------------------------------------------------------------------- 1 | const object_one = { 2 | a: "one", 3 | b: "two", 4 | c: { 5 | d: "three", 6 | e: "four", 7 | }, 8 | 9 | edit() { 10 | this.a = "new valor" 11 | } 12 | }; 13 | 14 | const text_object = JSON.stringify(object_one); 15 | const object_two = JSON.parse(text_object); 16 | 17 | object_one.a = "AAA"; 18 | object_one.c.d = "DDD"; 19 | 20 | object_two.b = "BBB"; 21 | object_two.c.e = "EEE"; 22 | 23 | console.log({ object_one, object_two }); 24 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | Course POO 9 | 10 | 11 |

Intermediate POO

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/test/deep_copy/data.mjs: -------------------------------------------------------------------------------- 1 | const object_one = { 2 | a: "one", 3 | b: "two", 4 | c: { 5 | d: "three", 6 | e: "four", 7 | }, 8 | 9 | edit() { 10 | this.a = "New valor A!!!"; 11 | }, 12 | }; 13 | 14 | const array_two = [ 15 | "one", 16 | "two", 17 | [ 18 | "three", 19 | "four", 20 | ["five", "six", "seven", "eight"], 21 | ], 22 | ]; 23 | 24 | const other_three = "This is a text!!!"; 25 | 26 | export { object_one, array_two, other_three }; 27 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/test/deep_copy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | Document 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/test/deep_copy/validation.mjs: -------------------------------------------------------------------------------- 1 | function is_object(subject) { 2 | return typeof subject === "object"; 3 | } 4 | 5 | function is_array(subject) { 6 | return Array.isArray(subject); 7 | } 8 | export { is_object, is_array }; 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/008.poo-js-intermedio/resources/code/x.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/008.poo-js-intermedio/resources/code/x.js -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/npm-init/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-init", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node src/index.js", 8 | "node": "node src/index.js && node src/index.js" 9 | }, 10 | "keywords": [ 11 | "javascript", 12 | "angular", 13 | "node" 14 | ], 15 | "author": "ale roses ", 16 | "license": "MIT", 17 | "optionalDependencies": { 18 | "eslint": "^8.42.0" 19 | }, 20 | "dependencies": { 21 | "howler": "^2.2.3", 22 | "json-server": "^0.17.3", 23 | "moment": "^2.29.4", 24 | "react": "^18.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/npm-init/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('Hi world!!!'); -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-transform-runtime", 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": true, 4 | "singleQuote": true 5 | } -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/README.md: -------------------------------------------------------------------------------- 1 | # react-base 2 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Base 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../styles/components/App.styl'; 3 | 4 | const App = () =>

Hello React!

; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-base/src/styles/components/App.styl: -------------------------------------------------------------------------------- 1 | body 2 | background-color blue -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/public/favicon.ico -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/009.npm-paquetes-dependencias/resources/code/npm/react-npm/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/README.md: -------------------------------------------------------------------------------- 1 | # curso-manipulacion-de-arrays -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-arrays", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/platzi/curso-manipulacion-de-arrays.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/platzi/curso-manipulacion-de-arrays/issues" 18 | }, 19 | "homepage": "https://github.com/platzi/curso-manipulacion-de-arrays#readme", 20 | "dependencies": { 21 | "date-fns": "^2.30.0", 22 | "http-server": "^14.1.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/12.reduce.js: -------------------------------------------------------------------------------- 1 | function calc_sum(array){ 2 | console.log(array.reduce((sum, item) => sum + item, 0)); 3 | } 4 | 5 | calc_sum([1, 1, 1]); 6 | calc_sum([2, 4, 8]); 7 | calc_sum([]); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/14.some.js: -------------------------------------------------------------------------------- 1 | function check_array(numbers){ 2 | return numbers.some(number => number % 2 === 0) 3 | } 4 | 5 | check_array([1, 3, 5, 7, 10, 11]); 6 | check_array([1, 3, 5]); 7 | check_array([]); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/16.every.js: -------------------------------------------------------------------------------- 1 | // Evaluar si todos son pares 2 | 3 | function check_array(array) { 4 | return array.length > 0 5 | ? array.every(index => index % 2 === 0) 6 | : false; 7 | } 8 | 9 | check_array([2, 4, 6, 8, 10]); 10 | check_array([1, 3, 5, 7, 10, 11]); 11 | check_array([1, 3, 5]); 12 | check_array([]); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/19.include.js: -------------------------------------------------------------------------------- 1 | // Retornar un array solo con las palabras que cumplan con la condición 2 | 3 | function filter_by_term(array, term) { 4 | return array.filter(x => x.includes(term)); 5 | } 6 | 7 | filter_by_term(["ana", "santi", "nico", "anastasia"], "ana"); 8 | filter_by_term(["ana", "santi", "nico", "anastasia"], "xyz"); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/21.join.js: -------------------------------------------------------------------------------- 1 | // Unir con -- y volver a minusculas 2 | function parse_to_url(title) { 3 | return title.split(' ').join('-').toLowerCase() 4 | } 5 | 6 | parse_to_url("La forma de correr Python"); 7 | parse_to_url("La API para nunca parar de aprender"); 8 | parse_to_url("Curso de arrays"); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/5.map.js: -------------------------------------------------------------------------------- 1 | const array_one = [2, 4, 5, 6, 8]; 2 | const array_two = [1, 1, -2, -3]; 3 | 4 | function multiply_elements(array){ 5 | console.log(array.map(n => n * 2)); 6 | } 7 | 8 | multiply_elements(array_one); 9 | multiply_elements(array_two) -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/playground/9-filter.js: -------------------------------------------------------------------------------- 1 | // Obtener las que tienen 4 o mas letras 2 | 3 | // Metodo 01 4 | /* const words = ['amor', 'sol', 'piedra', 'día']; 5 | const new_words = words.filter(word => word.length >= 4); 6 | 7 | console.log({words, new_words}); */ 8 | 9 | 10 | // Metodo 02 11 | const words = ['amor', 'sol', 'piedra', 'día']; 12 | 13 | function filter_by_length(array){ 14 | return array.filter(word => word.length >= 4) 15 | } 16 | 17 | filter_by_length(words); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/01-for-each.js: -------------------------------------------------------------------------------- 1 | const letters = ['a', 'b', 'c']; 2 | 3 | for (let i = 0; i < letters.length; i++) { 4 | const element = letters[i]; 5 | console.log(element); 6 | } 7 | 8 | letters.forEach((item, index) => console.log(item, index)); 9 | 10 | -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/02-map.js: -------------------------------------------------------------------------------- 1 | const letters = ['a', 'b', 'c']; 2 | 3 | const new_letters = []; 4 | for (let i = 0; i < letters.length; i++) { 5 | const element = letters[i]; 6 | new_letters.push(element + element) 7 | } 8 | 9 | console.log(letters); 10 | console.log(new_letters); 11 | 12 | const new_letters_one = letters.map(item => item + item) 13 | console.log(new_letters_one); 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/05-reduce.js: -------------------------------------------------------------------------------- 1 | const totals = [1,2,3,4]; 2 | 3 | const rpta = totals.reduce((a,b) => (a + b),0); 4 | console.log(rpta); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/09-every.js: -------------------------------------------------------------------------------- 1 | const numbers = [1, 30, 49, 29, 10, 13]; 2 | 3 | const rpta = numbers.every(item => item <= 40); 4 | console.log(rpta); 5 | 6 | // Reto: todos deben ser menores de 15 7 | 8 | const team = [ 9 | { 10 | name: "Nicolas", 11 | age: 12, 12 | }, 13 | { 14 | name: "Andrea", 15 | age: 8, 16 | }, 17 | { 18 | name: "Zulema", 19 | age: 2, 20 | }, 21 | { 22 | name: "Santiago", 23 | age: 18, 24 | }, 25 | ]; 26 | 27 | const result = team.every(item => item.age < 15) 28 | console.log(result); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/11-includes.js: -------------------------------------------------------------------------------- 1 | const pets = ['cat', 'dog', 'bat']; 2 | 3 | const result = pets.includes('dog') 4 | console.log(result); -------------------------------------------------------------------------------- /DW/2-intermedio/010.arrays-en-js/resource/code/curso-manipulacion-de-arrays/server/12-join-split.js: -------------------------------------------------------------------------------- 1 | // join() 2 | const elements = ["Fire", "Air", "Water"]; 3 | 4 | const result = elements.join(' ') //('--') 5 | console.log(result); 6 | 7 | // split() 8 | const title = 'Lorem input xd infinito'; 9 | const split_array = title.split(' ') 10 | console.log(split_array); 11 | 12 | // join() + toLowerCase(); volver minusculas 13 | const transformation = split_array.join(' ').toLowerCase(); 14 | console.log(transformation); 15 | -------------------------------------------------------------------------------- /DW/2-intermedio/011.js-engine-v8/debugger-vsc.md: -------------------------------------------------------------------------------- 1 | Run and debugger: Ctrl + Shift + D 2 | 3 | - Create a launch.json 4 | - Node 5 | - Play 6 | 7 | 8 | - node --inspect name-file.js 9 | - chrome://inspect 10 | 11 | [🔥 Nodejs Visual Studio Code Debugger para Iniciantes](https://www.youtube.com/watch?v=4Z8CM-E-HRE) -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "asincronismo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "callback": "node src/callback/8.xmlhttprequest.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "node-fetch": "^3.3.2", 15 | "xmlhttprequest": "^1.8.0" 16 | }, 17 | "type": "module" 18 | } 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/async/15.async-await.js: -------------------------------------------------------------------------------- 1 | const fnAsync = () => { 2 | return new Promise((resolve, reject) => { 3 | true 4 | ? setTimeout(() => resolve("Async!!"), 2000) 5 | : reject(new Error("Error")); 6 | }); 7 | }; 8 | 9 | const anotherFn = async () => { 10 | const something = await fnAsync(); 11 | console.log(something); 12 | console.log("Hello!!!"); 13 | }; 14 | 15 | console.log("Before"); 16 | anotherFn(); 17 | console.log("After"); 18 | 19 | /* 20 | Before 21 | After 22 | Async!! 23 | Hello!!! 24 | */ 25 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/async/17.playground.js: -------------------------------------------------------------------------------- 1 | import fetch from "node-fetch"; 2 | 3 | const fnAsync = async () => { 4 | // const url = "https://domain-api-com"; 5 | 6 | try { 7 | const url = 8 | "https://api.escuelajs.co/api/v1/produts"; 9 | const response = await fetch(url); 10 | const data = await response.json(); 11 | 12 | console.log(data); 13 | } catch (e) { 14 | throw new Error(e); 15 | } 16 | }; 17 | 18 | fnAsync(); 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/callback/6.callback.js: -------------------------------------------------------------------------------- 1 | // Ejemplo 1 2 | function sum(num1, num2) { 3 | return num1 + num2; 4 | } 5 | 6 | function calc(num1, num2, callback) { 7 | return callback(num1, num2); 8 | } 9 | 10 | console.log(calc(2, 2, sum)); 11 | 12 | // Ejemplo 2 13 | setTimeout(() => { 14 | console.log("Hi JS :3"); 15 | }, 2000); 16 | 17 | // Ejemplo 3 18 | function greeting(name) { 19 | console.log(`Hi ${name}`); 20 | } 21 | 22 | setTimeout(greeting, 2000, "Ale"); 23 | 24 | // Ejemplo 4 25 | function x(name) { 26 | alert(`Name: ${name}`); 27 | } 28 | 29 | function y(callback) { 30 | let name = prompt("Enter your name: "); 31 | 32 | callback(name); 33 | } 34 | 35 | y(x); 36 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/callback/7.playground.js: -------------------------------------------------------------------------------- 1 | const exec = callback => { 2 | setTimeout(() => { 3 | callback("Something text..."); 4 | }, 2000); 5 | }; 6 | 7 | const message = text => { 8 | console.log(text); 9 | }; 10 | 11 | exec(message); 12 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/generator/23.playground.js: -------------------------------------------------------------------------------- 1 | async function fetchData(url) { 2 | if ( 3 | !url.startsWith("http://") && 4 | !url.startsWith("https://") 5 | ) { 6 | throw new Error("Invalid URL"); 7 | } 8 | 9 | const response = await fetch(url, { 10 | method: "GET", 11 | }); 12 | 13 | if (!response.ok) { 14 | throw new Error("Something was wrong"); 15 | } 16 | 17 | const data = await response.json(); 18 | return data; 19 | } 20 | 21 | try { 22 | const data = await fetchData( 23 | "https://api.escuelajs.co/api/v1/categories" 24 | ); 25 | console.log(data); 26 | } catch (error) { 27 | console.error(error); 28 | } 29 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/promise/11.promesas.js: -------------------------------------------------------------------------------- 1 | /* const promise = new Promise((resolve, reject) => { 2 | resolve("Hey!"); 3 | }); */ 4 | 5 | const cows = 1; 6 | const countCows = new Promise((resolve, reject) => { 7 | if (cows > 10) { 8 | resolve(`We have ${cows} cows on the farm.`); 9 | } else { 10 | reject("There isn't cows on the farm."); 11 | } 12 | }); 13 | 14 | countCows 15 | .then(result => { 16 | console.log(result); 17 | }) 18 | .catch(error => console.log(error)) 19 | .finally(() => console.log("Finally!!!")); 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/src/promise/12.playground.js: -------------------------------------------------------------------------------- 1 | const delay = (time, message) => { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | resolve(message); 5 | }, time); 6 | }); 7 | }; 8 | 9 | delay(3000, "Great!!!") 10 | .then(response => { 11 | console.log(response); 12 | }) 13 | .catch(error => { 14 | console.log(error); 15 | }); 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/asincronismo/x.md: -------------------------------------------------------------------------------- 1 | # Compilar vs Transpilar 2 | 3 | **Compilar:** Convertir código fuente a lenguaje máquina. 4 | 5 | **Transpilar:** Convertir código fuente a otro lenguaje de nivel similar: ts a js, sass a css. 6 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/README.md: -------------------------------------------------------------------------------- 1 | # async-landing -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "async-landing", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "deploy": "gh-pages -d public" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "gh-pages": "^5.0.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/public/css/desktop.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr; 4 | } 5 | .main figure { 6 | order: 1; 7 | } 8 | 9 | .main__article { 10 | align-self: center; 11 | } 12 | 13 | .mode { 14 | width: 40px; 15 | height: 40px; 16 | } 17 | 18 | .mode figure { 19 | width: 100%; 20 | height: 100%; 21 | } -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/public/css/tablet.css: -------------------------------------------------------------------------------- 1 | /* .header { 2 | width: 92vw; 3 | height: 10vh; 4 | } */ 5 | 6 | .header__nav { 7 | display: flex; 8 | } 9 | 10 | .show { 11 | display: none; 12 | } 13 | 14 | .burger { 15 | display: none; 16 | } 17 | 18 | .menu { 19 | width: 60vw; 20 | height: 100%; 21 | display: flex; 22 | position: static; 23 | flex-direction: row; 24 | gap: 20px; 25 | padding: 15px; 26 | justify-content: center; 27 | background-color: var(--second-color); 28 | } 29 | 30 | .mode { 31 | width: 40px; 32 | height: 40px; 33 | order: 1; 34 | } 35 | 36 | .mode figure { 37 | padding: 0px; 38 | } 39 | 40 | .dark-mode button { 41 | width: 100%; 42 | height: 100%; 43 | } 44 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/public/svg/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /DW/2-intermedio/012.asincronismo-js/resources/code/project/public/svg/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/013.expresiones-regulares/resources/code/19.busqueda-reemplazo/main.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const filePath = path.join(__dirname, "./movies.dat"); 4 | 5 | fs.readFile(filePath, "utf-8", (err, data) => { 6 | if (err) { 7 | console.error("Error al leer el archivo:", err); 8 | return; 9 | } 10 | 11 | const pattern = /^\d+::(.*)\s\((\d+)\)::.*$/gm; 12 | //console.log(data.match(pattern)); 13 | console.log(data.replace(pattern, `insert into movies (year, title) values($2, '$1')`)); 14 | //console.log(data.replace(pattern, `{title: "$1", year: $2}`)); 15 | }); 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/013.expresiones-regulares/resources/code/19.busqueda-reemplazo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "19.busqueda-reemplazo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/013.expresiones-regulares/resources/code/21.lenguajes/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/013.expresiones-regulares/resources/code/21.lenguajes/main.js -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/3.consumo-api-rest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random kittens 7 | 8 | 9 | 10 |
11 |

Random kittens

12 |
13 |
14 | Kitten pictures 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/7.proyecto/svg/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/7.proyecto/svg/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/code/code_clone/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/code/code_clone/style.css -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "node-fetch": "^3.3.2" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/methods/delete-favorites.mjs: -------------------------------------------------------------------------------- 1 | import { loadFavorites } from "../main.mjs"; 2 | import { 3 | URLDELETE, 4 | APIKEY, 5 | } from "./parameters.mjs"; 6 | 7 | const deleteFavorites = async id => { 8 | const response = await fetch( 9 | `https://api.thecatapi.com/v1/favourites/${id}`, 10 | { 11 | method: "DELETE", 12 | headers: { "x-api-key": APIKEY }, 13 | } 14 | ); 15 | 16 | if (response.status === 200) { 17 | const data = await response.json(); 18 | 19 | console.log("Delete: ", response); 20 | console.log("Data: ", data); 21 | loadFavorites(); 22 | } else { 23 | console.log(response.status); 24 | } 25 | }; 26 | 27 | export { deleteFavorites }; 28 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/methods/get-favorites.mjs: -------------------------------------------------------------------------------- 1 | // import fetch from "node-fetch"; 2 | 3 | import { 4 | URLFAVORITES, 5 | queryFavorites, 6 | APIKEY, 7 | } from "./parameters.mjs"; 8 | 9 | const getFavorites = async () => { 10 | const response = await fetch(queryFavorites, { 11 | headers: { 12 | "x-api-key": APIKEY, 13 | }, 14 | }); 15 | 16 | if (response.status === 200) { 17 | const data = await response.json(); 18 | 19 | /* console.log("Favorites"); 20 | console.log(data); */ 21 | return data; 22 | } else { 23 | console.log(response); 24 | console.log(data); 25 | console.log(data.status); 26 | } 27 | }; 28 | 29 | export { getFavorites }; 30 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/methods/get.mjs: -------------------------------------------------------------------------------- 1 | //import fetch from "node-fetch"; 2 | import { queryRandom } from "./parameters.mjs"; 3 | 4 | const fetchData = async () => { 5 | const response = await fetch(queryRandom); 6 | const data = await response.json(); 7 | 8 | //console.log(data); 9 | return data; 10 | }; 11 | 12 | export { fetchData }; 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/random.mjs: -------------------------------------------------------------------------------- 1 | import { showImages } from "./main.mjs"; 2 | 3 | const randomImg = () => { 4 | const randomButton = 5 | document.querySelector("button"); 6 | 7 | randomButton.addEventListener( 8 | "click", 9 | showImages 10 | ); 11 | }; 12 | 13 | export { randomImg }; 14 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/svg/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/practice/svg/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/1.api-rest-js-fundamentos/resources/code/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | Document 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/axios.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | 3 | const apiaxios = axios.create({ 4 | baseURL: "https://api.themoviedb.org/3/", 5 | /* 6 | headers: { 7 | "Content-Type": "application/json", 8 | }, 9 | params: { 10 | api_key: authorization, 11 | }, */ 12 | }); 13 | 14 | export { apiaxios }; 15 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/get-by-category.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | 3 | const movies = ["?", "with_genres="].join(""); 4 | 5 | const getByCategory = async id => { 6 | const response = await fetch( 7 | `https://api.themoviedb.org/3/discover/movie${movies}${id}`, 8 | { 9 | method: "GET", 10 | headers: { 11 | accept: "application/json", 12 | authorization, 13 | }, 14 | } 15 | ); 16 | const data = await response.json(); 17 | 18 | return data; 19 | }; 20 | 21 | export { getByCategory }; 22 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/get-categories.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | import { apiaxios } from "./axios.mjs"; 3 | 4 | const getCategories = async () => { 5 | const { data } = await apiaxios( 6 | "genre/movie/list?language=en", 7 | { 8 | method: "GET", 9 | headers: { 10 | accept: "application/json", 11 | authorization, 12 | }, 13 | } 14 | ); 15 | 16 | return data; 17 | }; 18 | 19 | export { getCategories }; 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/get-movie-by-id.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | 3 | const getMovieById = async id => { 4 | const response = await fetch( 5 | `https://api.themoviedb.org/3/movie/${id}?language=en-US`, 6 | { 7 | method: "GET", 8 | headers: { 9 | accept: "application/json", 10 | Authorization: authorization, 11 | }, 12 | } 13 | ); 14 | const data = response.json(); 15 | 16 | return data; 17 | }; 18 | 19 | export { getMovieById }; 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/get-similar.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | 3 | const getSimilar = async id => { 4 | const response = await fetch( 5 | `https://api.themoviedb.org/3/movie/${id}/similar`, 6 | { 7 | method: "GET", 8 | headers: { 9 | accept: "application/json", 10 | Authorization: authorization, 11 | }, 12 | } 13 | ); 14 | const data = response.json(); 15 | 16 | return data; 17 | }; 18 | 19 | // https://api.themoviedb.org/3/movie/{movie_id}/similar 20 | 21 | export { getSimilar }; 22 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/API/get-trending-movies.mjs: -------------------------------------------------------------------------------- 1 | import { authorization } from "../parameters.mjs"; 2 | 3 | const getTrendingMovies = async () => { 4 | const response = await fetch( 5 | "https://api.themoviedb.org/3/trending/all/day?language=en-US", 6 | { 7 | method: "GET", 8 | headers: { 9 | accept: "application/json", 10 | authorization, 11 | }, 12 | } 13 | ); 14 | 15 | const data = await response.json(); 16 | 17 | return data; 18 | }; 19 | 20 | export { getTrendingMovies }; 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/parameters.mjs: -------------------------------------------------------------------------------- 1 | const authorization = 2 | "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5MTRjZWZhYzNhM2QyMzRjNThlZjQ2OTAzY2U3ZWJkMyIsInN1YiI6IjY1NjIxMjMyYTZjMTA0MDBmZWIwYjc2MiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.w49IQG4OZJuFx_It37mXvTWZtbyWPFHotHB0yEA2dP0"; 3 | 4 | export { authorization }; 5 | -------------------------------------------------------------------------------- /DW/2-intermedio/014.api-rest-js/2.api-rest-js-ejemplos/resources/code/src/secrets.mjs: -------------------------------------------------------------------------------- 1 | const APIKEY = ""; 2 | 3 | export { APIKEY }; 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "typescript": "^5.3.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/01.hello.ts: -------------------------------------------------------------------------------- 1 | const my_name = 'Ale Roses'; 2 | console.log(my_name); 3 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/02.demo.ts: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3]; 2 | console.log(numbers); 3 | console.log(numbers); 4 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/03.demo.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let my_product: string = 'Product 1'; 3 | let price: number = 123; 4 | })(); 5 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/03.typing.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let my_product: string = 'Product 1'; 3 | let price: number = 123; 4 | let myName = 'Ale Roses'; 5 | 6 | my_product.toLowerCase(); 7 | price.toFixed(); 8 | 9 | const stock: number = 1000; 10 | })(); 11 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/04.number.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let price = 100; 3 | price = 12; 4 | 5 | console.log(price); 6 | 7 | let age: number = 28; 8 | console.log(age + 2); 9 | 10 | // Si no se inicializa debes colocarle el tipo de dato 11 | let stock: number; 12 | stock = 2; 13 | console.log(stock); 14 | 15 | let discount: number = parseInt('123'); 16 | console.log(discount + 2); 17 | 18 | let customer_age: number = 28; 19 | let product_stock: number; 20 | })(); 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/05.boolean.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let isEnable: boolean = true; 3 | isEnable = false; 4 | console.log(isEnable); 5 | 6 | let isNew: boolean = false; 7 | console.log(isNew); 8 | 9 | const random: number = Math.random(); 10 | console.log(random); 11 | 12 | isNew = random >= 0.5 ? true : false; 13 | // isNew = random > 0.5; 14 | console.log(isNew); 15 | })(); 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/06.string.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let product: string = 'Soft drink'; 3 | const summary: string = `${product}`; 4 | 5 | console.log('🚀 ~ summary:', summary); 6 | })(); 7 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/07.arrays.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | // let mixed_one: (string | number | boolean | (string | number | boolean)[])[] 3 | let mixed_one = [1, 2, 3, 'x', true, [1, true, 'x']]; 4 | mixed_one.push('y', 2, ['x', false, 5]); 5 | 6 | let mixed_two: (number | string | boolean)[] = ['hola', true]; 7 | mixed_two.push(12); 8 | 9 | let mixed_three: (number | string | boolean | object)[] = ['hola', true]; 10 | mixed_three.push(12); 11 | 12 | let numbers = [1, 2, 3]; 13 | numbers.map((item) => item * 2); 14 | console.log(); 15 | 16 | })(); 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/08.any.ts: -------------------------------------------------------------------------------- 1 | /* (() => { 2 | let dinamic_var: any; 3 | 4 | })() */ 5 | 6 | (() => { 7 | let my_dynamic_var: any; 8 | my_dynamic_var = 100; 9 | my_dynamic_var = null; 10 | my_dynamic_var = {}; 11 | my_dynamic_var = ''; 12 | 13 | my_dynamic_var = 'Hola'; 14 | const rta = (my_dynamic_var as string).toLowerCase(); 15 | console.log('Respuesta:', rta); 16 | 17 | my_dynamic_var = 1212; 18 | const rta2 = (my_dynamic_var).toFixed(); 19 | console.log('Respuesta:', rta2); 20 | })(); 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/09.union-type.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | let user_id: number | string; 3 | user_id = 12; 4 | user_id = 'my id'; 5 | 6 | function greeting(my_text: string | number) { 7 | 8 | if (typeof my_text === 'string') { 9 | console.log(my_text); 10 | } else { 11 | console.log(my_text); 12 | } 13 | } 14 | 15 | greeting('lolcat'); 16 | greeting(123); 17 | })(); 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/10.alias.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | type Id = string | number | boolean; 3 | type Size = 'S' | 'M' | 'L' | 'XL'; 4 | 5 | // Literal types 6 | let userId: Id; 7 | let shirtSize: Size; 8 | shirtSize = 'M'; 9 | 10 | function greeting(id: Id, size: Size) { 11 | if (typeof userId === 'string') { 12 | console.log(`string ${userId}`); 13 | } 14 | } 15 | 16 | greeting(11, 'L'); 17 | })(); 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/13.return-function.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | const calculate = (prices: number[]): string => { 3 | /* return prices.reduce((a, b) => { 4 | console.log(a + b); 5 | return a + b; 6 | }, 0); */ 7 | 8 | let total = 0; 9 | 10 | prices.forEach((item) => { 11 | total += item; 12 | }); 13 | 14 | return total.toString(); 15 | }; 16 | 17 | const total = (prices: number[]): void => { 18 | const rta = calculate(prices); 19 | console.log(`The total is: ${rta}`); 20 | }; 21 | 22 | total([1, 2, 3]); 23 | })(); 24 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/15.obj.ts: -------------------------------------------------------------------------------- 1 | (() => { 2 | type Size = 'S' | 'M' | 'L' | 'XL'; 3 | type Data = { 4 | title: string; 5 | stock: number; 6 | size?: Size; 7 | }; 8 | 9 | const products: Data[] = []; 10 | 11 | const addProduct = (data: Data) => { 12 | products.push(data); 13 | }; 14 | 15 | addProduct({ size: 'L', title: 'One', stock: 12 }); 16 | addProduct({ size: 'S', title: 'Two', stock: 10 }); 17 | console.log(products); 18 | })(); 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/products/main.ts: -------------------------------------------------------------------------------- 1 | import { products, addProduct, calculateStock } from './product-service'; 2 | 3 | addProduct({ size: 'L', title: 'One', stock: 12 }); 4 | addProduct({ size: 'S', title: 'Two', stock: 10 }); 5 | 6 | console.log(products); 7 | const total = calculateStock(); 8 | console.log(total); 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/products/product-model.ts: -------------------------------------------------------------------------------- 1 | type Size = 'S' | 'M' | 'L' | 'XL'; 2 | type Data = { 3 | title: string; 4 | stock: number; 5 | size?: Size; 6 | }; 7 | 8 | export { Size, Data }; 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/016.fundamentos-typescript/resources/code/ts-project/src/products/product-service.ts: -------------------------------------------------------------------------------- 1 | import { Size, Data } from './product-model'; 2 | 3 | const products: Data[] = []; 4 | 5 | const addProduct = (data: Data) => { 6 | products.push(data); 7 | }; 8 | 9 | const calculateStock = (): number => { 10 | let total = 0; 11 | 12 | products.forEach((item) => { 13 | total += item.stock; 14 | }); 15 | 16 | return total; 17 | }; 18 | 19 | export { products, addProduct, calculateStock }; 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see [https://editorconfig.org](https://editorconfig.org/) 2 | 3 | root = true 4 | 5 | [*] charset = utf-8 indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true 6 | 7 | [*.ts] quote_type = single 8 | 9 | [*.md] max_line_length = off trim_trailing_whitespace = false> -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@faker-js/faker": "^8.3.1", 14 | "ts-node": "^10.9.2", 15 | "typescript": "^5.3.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/01.enum.ts: -------------------------------------------------------------------------------- 1 | enum ROLES { 2 | ADMIN = "admin", 3 | SELLER = "seller", 4 | CUSTOMER = "customer", 5 | } 6 | 7 | type User = { 8 | username: string; 9 | role: ROLES; 10 | }; 11 | 12 | const userOne: User = { 13 | username: "Ale Roses", 14 | role: ROLES.ADMIN, 15 | }; 16 | 17 | export { ROLES, User, userOne }; 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/02.tuplas.ts: -------------------------------------------------------------------------------- 1 | /* const price: (number | string)[] = [1, 2, "letter"]; 2 | const user: [string, number] = ["ale", 16]; 3 | console.log(user); 4 | 5 | const [username, age] = user; 6 | console.log(username); 7 | console.log(age); */ 8 | 9 | const data: (string | number)[] = ["ale", 18, 15]; 10 | const info: [string, number] = ["Ale", 18]; 11 | 12 | const user: [string, number] = ["ale", 16]; 13 | 14 | const [username, age] = user; 15 | console.log(username); 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/03.unknow.ts: -------------------------------------------------------------------------------- 1 | /* let anyVar: any; 2 | 3 | anyVar = true; 4 | anyVar = undefined; 5 | 6 | let isNew: boolean = anyVar; 7 | 8 | let unknowVar: unknown; 9 | unknowVar = true; 10 | unknowVar = undefined; 11 | 12 | //unknowVar.doSomething(); 13 | if (typeof unknowVar === "string") { 14 | unknowVar.toUpperCase(); 15 | } 16 | 17 | if (typeof unknowVar === "boolean") { 18 | const isNewV2: boolean = unknowVar; 19 | } 20 | 21 | const parse = (str: string): unknown => { 22 | return JSON.parse(str); 23 | }; */ 24 | 25 | let x: unknown; 26 | x = "text"; 27 | /* x = true; 28 | x = 2; */ 29 | 30 | if (typeof x === "string") { 31 | console.log( 32 | x.charAt(0).toUpperCase() + x.slice(1) 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/04.never.ts: -------------------------------------------------------------------------------- 1 | const withoutEnd = () => { 2 | while (true) { 3 | console.log("Nunca parar de aprender"); 4 | } 5 | }; 6 | 7 | const fail = (message: string) => { 8 | throw new Error(message); 9 | }; 10 | 11 | const example = (input: unknown) => { 12 | if (typeof input === "string") { 13 | return "Es un string"; 14 | } else if (Array.isArray(input)) { 15 | return "Es un array"; 16 | } 17 | 18 | return fail("Not match"); 19 | }; 20 | 21 | console.log(example("Hola")); 22 | console.log(example([1, 1, 1])); 23 | console.log(example(1)); 24 | console.log(example("Despues del fail")); 25 | // No se ejecuta 26 | 27 | 28 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/06.default.ts: -------------------------------------------------------------------------------- 1 | const createProduct = ( 2 | id: string | number, 3 | isNew: boolean = true, 4 | stock: number = 10 5 | ) => { 6 | return { 7 | id, 8 | isNew, 9 | stock, 10 | }; 11 | }; 12 | 13 | // 0 - '' - false === false 14 | 15 | const p1 = createProduct(1); 16 | const p2 = createProduct(1, true); 17 | const p3 = createProduct(1, false, 0); 18 | console.log({ p1, p2, p3 }); 19 | 20 | export { createProduct }; 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/08.overload.ts: -------------------------------------------------------------------------------- 1 | // Nico => [N, i, c, o] 2 | // [N, i, c, o] => Nico 3 | 4 | function parseStr( 5 | input: string | string[] 6 | ): string | string[] { 7 | if (Array.isArray(input)) { 8 | return input.join(""); 9 | } else { 10 | return input.split(""); 11 | } 12 | } 13 | 14 | const rtaArray = parseStr("Ale"); 15 | 16 | if (Array.isArray(rtaArray)) { 17 | rtaArray.reverse(); 18 | console.log(rtaArray); 19 | } 20 | 21 | const rtaStr = parseStr(["A", "l", "e"]); 22 | 23 | if (typeof rtaStr === "string") { 24 | rtaStr.toUpperCase(); 25 | console.log(rtaStr); 26 | } 27 | 28 | console.log({ rtaArray, rtaStr }); 29 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/base.model.ts: -------------------------------------------------------------------------------- 1 | interface BaseModel { 2 | readonly id: string; 3 | readonly createdAt: Date; 4 | readonly updatedAt: Date; 5 | } 6 | 7 | export { BaseModel }; 8 | 9 | 10 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/categories/category.model.ts: -------------------------------------------------------------------------------- 1 | import { BaseModel } from "../base.model"; 2 | 3 | interface Category extends BaseModel { 4 | // id: string | number; 5 | name: string; 6 | } 7 | 8 | export { Category }; 9 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/orders/order.model.ts: -------------------------------------------------------------------------------- 1 | import { BaseModel } from "../base.model"; 2 | import { Product } from "../products/product.model"; 3 | import { User } from "../users/user.model"; 4 | 5 | interface Order extends BaseModel { 6 | //id: string | number; 7 | //createdAt: Date; 8 | products: Product[]; 9 | user: User; 10 | } 11 | 12 | export { Order }; 13 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/products/product.dto.ts: -------------------------------------------------------------------------------- 1 | import { Product } from "./product.model"; 2 | 3 | interface CreateProductDto 4 | extends Omit< 5 | Product, 6 | "id" | "createdAt" | "updatedAt" | "category" 7 | > { 8 | categoryId: string; 9 | } 10 | 11 | type example = Pick< 12 | Product, 13 | "color" | "description" 14 | >; 15 | 16 | interface UpdateProductDto 17 | extends Partial {} 18 | 19 | type example2 = Required; 20 | 21 | interface FindProductDto extends Partial { 22 | 23 | } 24 | 25 | export { 26 | CreateProductDto, 27 | UpdateProductDto, 28 | FindProductDto, 29 | }; 30 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/products/product.model.ts: -------------------------------------------------------------------------------- 1 | import { Category } from "../categories/category.model"; 2 | import { BaseModel } from "../base.model"; 3 | 4 | type Sizes = "S" | "M" | "L" | "XL"; 5 | 6 | interface Product extends BaseModel { 7 | // id: string | number; 8 | title: string; 9 | image: string; 10 | description: string; 11 | createdAt: Date; 12 | stock: number; 13 | size?: Sizes; 14 | color: string; 15 | price: number; 16 | category: Category; 17 | isNew: boolean; 18 | tags: string[]; 19 | } 20 | 21 | /* type CreateProductDto = Omit< 22 | Product, 23 | "id" | "createdAt" | "updatedAt" | "category" 24 | >; */ 25 | 26 | 27 | 28 | export { Sizes, Product }; 29 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/app/users/user.model.ts: -------------------------------------------------------------------------------- 1 | /* import { BaseModel } from "../base.model"; 2 | 3 | enum ROLES { 4 | ADMIN = "admin", 5 | SELLER = "seller", 6 | CUSTOMER = "customer", 7 | } 8 | 9 | interface User extends BaseModel { 10 | // id: string | number; 11 | username: string; 12 | role: ROLES; 13 | } 14 | 15 | export { ROLES, User }; */ 16 | 17 | 18 | -------------------------------------------------------------------------------- /DW/2-intermedio/017.tipos-funciones-avanzadas/resources/code/src/demo.ts: -------------------------------------------------------------------------------- 1 | type UserId = string | number; 2 | let userId: UserId; 3 | 4 | userId = "string"; 5 | userId = 1; 6 | 7 | console.log('Print!!! ', userId); 8 | -------------------------------------------------------------------------------- /DW/2-intermedio/019.empaquetadores/resources/code/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^5.91.0", 14 | "webpack-cli": "^5.1.4" 15 | }, 16 | "dependencies": { 17 | "-": "^0.0.1", 18 | "@babel/core": "^7.24.4", 19 | "babel": "^6.23.0", 20 | "copy-webpack-plugin": "^12.0.2", 21 | "D": "^1.0.0", 22 | "html-webpack-plugin": "^5.6.0", 23 | "loader": "^2.1.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DW/2-intermedio/026.manipulacion-dom/img/22.intersection-observer.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/026.manipulacion-dom/img/22.intersection-observer.webp -------------------------------------------------------------------------------- /DW/2-intermedio/028.accesibilidad/sources/23.icons.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/2-intermedio/028.accesibilidad/sources/23.icons.webp -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/1.custom-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/12.third-party-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/2.template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/3.shadow-dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/4.slot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 13 | I'm a title 14 | Testing... 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/5.attributes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/6.attributeChangedCallback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/7.disconnectedCallback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/7.disconnectedCallback/my-element.js: -------------------------------------------------------------------------------- 1 | class MyCustomElement extends HTMLElement { 2 | constructor() { 3 | super(); 4 | 5 | console.log("Hi..."); 6 | } 7 | 8 | connectedCallback() { 9 | console.log("Connected"); 10 | } 11 | 12 | disconnectedCallback() { 13 | console.log("Bye..."); 14 | } 15 | } 16 | 17 | customElements.define("my-custom-element", MyCustomElement); 18 | 19 | document.querySelector("my-custom-element").remove(); 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/9.slotted/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Custom Elements 10 | 11 | 12 | 13 | Hi span one 14 | Span paragraph 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/project/app.js: -------------------------------------------------------------------------------- 1 | import "./components/Product-card.js"; 2 | -------------------------------------------------------------------------------- /DW/2-intermedio/029.web-components/code/project/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | width: 100%; 11 | min-height: 100vh; 12 | font-family: Arial, Helvetica, sans-serif; 13 | background-color: #070c24; 14 | } 15 | 16 | /* product-card { 17 | --primary-background: green; 18 | } */ 19 | -------------------------------------------------------------------------------- /DW/2-intermedio/vim/configs/.vim/UltiSnips/htmldjango.snippets: -------------------------------------------------------------------------------- 1 | snippet %% "" bi 2 | {% ${1:tag_name} %} 3 | ${2:content...} 4 | {% end$1 %} 5 | endsnippet 6 | 7 | snippet block "" bi 8 | {% block $1 %} 9 | ${2:content...} 10 | {% endblock $1 %} 11 | endsnippet 12 | 13 | snippet extends "" bi 14 | {% extends '${1:base.html}' %} 15 | endsnippet 16 | 17 | snippet include "" bi 18 | {% include '${1:something}.html' %} 19 | endsnippet 20 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | Vite + React 15 | 16 | 17 |
18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/UsersApp.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { UserList } from "./components/UserList"; 3 | 4 | const UsersApp = () => { 5 | const [endPoint, setEndPoint] = useState("users"); 6 | 7 | const handleFetch = () => { 8 | setEndPoint("comments"); 9 | }; 10 | 11 | 12 | return ( 13 | <> 14 |

Users List:

15 | 16 | 19 | 20 | ); 21 | }; 22 | 23 | export { UsersApp }; 24 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/components/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const Counter = ({ value }) => { 4 | const [counter, setCounter] = useState(value); 5 | 6 | const handleClick = () => { 7 | const n = counter + 1; 8 | 9 | setCounter(n); 10 | console.log(n); 11 | }; 12 | 13 | return ( 14 | <> 15 |

Counter

16 |

{counter}

17 | 20 | 21 | ); 22 | }; 23 | 24 | export { Counter }; 25 | /* rafc */ 26 | 27 | 28 | /* 1:33:04 */ -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/components/FirstComponent.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const FirstComponent = ({ 4 | title, 5 | subtitle = "Props section", 6 | }) => { 7 | return ( 8 | <> 9 |

{title}

10 |

{subtitle}

11 | 12 | ); 13 | }; 14 | 15 | FirstComponent.propTypes = { 16 | title: PropTypes.string.isRequired, 17 | subtitle: PropTypes.string.isRequired, 18 | }; 19 | 20 | /* FirstComponent.defaultProps = { 21 | title: "React course", 22 | subtitle: "Props section", 23 | }; */ 24 | 25 | export { FirstComponent }; 26 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/components/UserList.jsx: -------------------------------------------------------------------------------- 1 | import { useFetchData } from "../hooks/useFetchData"; 2 | 3 | const UserList = ({ endPoint }) => { 4 | const { data, isLoading } = useFetchData(endPoint); 5 | 6 | return ( 7 | <> 8 |
    9 | {isLoading ? ( 10 |

    Loading

    11 | ) : endPoint === "users" ? ( 12 | data.map((item) =>
  • Name: {item.name}
    • ) 13 | ) : ( 14 | data.map((item) =>
  • Name: {item.body}
    • ) 15 | )} 16 |
17 | 18 | ); 19 | }; 20 | 21 | export { UserList }; 22 | /* rafc */ 23 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/helpers/fetchData.js: -------------------------------------------------------------------------------- 1 | const fetchdata = async (endPoint) => { 2 | try { 3 | const response = await fetch( 4 | `https://jsonplaceholder.typicode.com/${endPoint}` 5 | ); 6 | const data = await response.json(); 7 | return { 8 | data, 9 | isLoading: false, 10 | }; 11 | } catch (error) { 12 | console.error(error); 13 | } 14 | }; 15 | 16 | export { fetchdata }; 17 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { FirstComponent } from "./components/FirstComponent"; 4 | import { Counter } from "./components/Counter"; 5 | import "./stylesheets/styles.css"; 6 | import { List } from "./ListApp"; 7 | import { UsersApp } from "./UsersApp"; 8 | 9 | ReactDOM.createRoot( 10 | document.getElementById("root") 11 | ).render( 12 | 13 | {/* 14 | 18 | 19 | 20 | */} 21 | 22 | 23 | ); 24 | 25 | /* 01:00 https://www.youtube.com/watch?v=ladwC6Lrs-M*/ 26 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/stylesheets/FirstComponent.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: aqua; 3 | } -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/src/stylesheets/styles.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | background-color: black; 4 | color: white; 5 | } 6 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/YouTube/code/vite-project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/devTalles/img/6-naming-components.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/3-avanzado/1.react.js/devTalles/img/6-naming-components.jpeg -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/DW/3-avanzado/1.react.js/resource/code/public/favicon.ico -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/src/UseEffect.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import "./stylesheets/App.css"; 3 | 4 | function Timer() { 5 | const [count, setCount] = useState(0); 6 | 7 | useEffect(() => { 8 | console.log("Efecto ejecutado"); 9 | document.title = `Contador: ${count}`; 10 | 11 | return () => { 12 | console.log("Efecto limpiado"); 13 | }; 14 | }, [count]); 15 | 16 | return ( 17 |
18 |

Contador: {count}

19 | 22 |
23 | ); 24 | } 25 | 26 | export default Timer; 27 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./stylesheets/index.css"; 4 | import Timer from "./UseEffect"; 5 | 6 | const root = ReactDOM.createRoot( 7 | document.getElementById("root") 8 | ); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/src/stylesheets/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/code/src/stylesheets/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /DW/3-avanzado/1.react.js/resource/roadmap.md: -------------------------------------------------------------------------------- 1 | Quieres un roadmap ? 2 | https://roadmap.sh/react, estaría este de acá. 3 | 4 | Recursos: 5 | mdz, tiene una sección para aprende react : 6 | https://developer.mozilla.org/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started, 7 | 8 | Documentación oficial: 9 | https://es.react.dev/, 10 | 11 | Curso de midudev de react: 12 | https://www.youtube.com/watch?v=7iobxzd_2wY&list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29 13 | 14 | Curso fazt de react: 15 | https://www.youtube.com/watch?v=rLoWMU4L_qE -------------------------------------------------------------------------------- /DW/super-hero/challenges.md: -------------------------------------------------------------------------------- 1 | # Challenges 2 | ## 1. Explica este código JavaScript 😎 3 | 4 | ```js 5 | // primera función 6 | function sumar(a, b) { 7 | return a + b; 8 | } 9 | 10 | // segunda función 11 | const sumar = (a, b) => { 12 | return a + b; 13 | }; 14 | ``` 15 | 16 | ```js 17 | // Con una función como la primera es posible hacer esto: 18 | 19 | console.log(suma(3,5)); //8 20 | function sumar(a, b){ 21 | return a + b; 22 | } 23 | 24 | // Podemos llamar a la función antes de su declaración, característica que se denomina hoisting. 25 | 26 | // Con una función de flecha esto no es posible: 27 | 28 | console.log(sumar(3,5)); // ReferenceError: cant access lexical declaration sumar before initialization 29 | 30 | const sumar = (a, b) => { 31 | return a + b; 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Platzi 2 | 3 | ## Apuntes / Notas / Resumen 😊 4 | 5 | Apuntes de la Escuela de DW, hechos en Obsidian con Markdown y alojado en GitHub. 6 | 7 | ✨ Recuerda que puedes clonar este repositorio, modificar y mejorar los apuntes según tu criterio. Estas notas solo son una base para crear tus propios apuntes. 👈👀 8 | -------------------------------------------------------------------------------- /others/1.english-Academy/1.aprender-Ingles-online/resources/plantilla-plan-semanal.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/1.english-Academy/1.aprender-Ingles-online/resources/plantilla-plan-semanal.xlsx -------------------------------------------------------------------------------- /others/CheatSheets-HTML-CSS-JavaScript/README.md: -------------------------------------------------------------------------------- 1 | # CheatSheets-HTML-CSS-JavaScript 2 | I have shared all my cheatsheets on this repository which were previously posted on my Twitter account. You can download and share these cheatsheets with others if you find them helpful. 3 | 4 | 5 | -------------------------------------------------------------------------------- /others/estrategias-para-Aprender-en-linea/resources/flux-setup.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/estrategias-para-Aprender-en-linea/resources/flux-setup.exe -------------------------------------------------------------------------------- /others/excel/sources/Libro1.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/excel/sources/Libro1.xlsx -------------------------------------------------------------------------------- /others/gestion-efectiva-del-tiempo/resources/clase-3_-mapa-de-areas.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/gestion-efectiva-del-tiempo/resources/clase-3_-mapa-de-areas.docx -------------------------------------------------------------------------------- /others/gestion-efectiva-del-tiempo/resources/clase-4_-convirtiendo-a-actividades.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/gestion-efectiva-del-tiempo/resources/clase-4_-convirtiendo-a-actividades.docx -------------------------------------------------------------------------------- /others/gestion-efectiva-del-tiempo/resources/matriz-de-administracion-del-tiempo.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleroses/software-notes/7b6be16a0b295dcd1b7381037ea3787c854dcdc9/others/gestion-efectiva-del-tiempo/resources/matriz-de-administracion-del-tiempo.docx -------------------------------------------------------------------------------- /others/set-grub.md: -------------------------------------------------------------------------------- 1 | Buscar un GRUB theme 2 | - Descargar 3 | - Descomprimir 4 | - theme.txt 5 | 6 | Buscar: 7 | - /boot/grub 8 | 9 | Mover del lugar de descarga a la carpeta grub 10 | mv /home/ghost/Download/name-theme . 11 | 12 | Copiar la ruta actual 13 | pwd 14 | /boot/grub/name-theme 15 | /boot/grub/CyberRe 1.0.0/CyberRe 16 | 17 | ahora: 18 | sudo vim /etc/default/grub 19 | 20 | Escribimos: 21 | GRUB_THEME=/boot/grub/themes/name-theme/theme.txt 22 | 23 | /boot/grub/CyberRe 1.0.0/CyberRe/theme.txt 24 | 25 | CyberRe\ 1.0.0/ 26 | 27 | 28 | Por ultimo actualizar grub 29 | sudo update-grub --------------------------------------------------------------------------------