├── .editorconfig
├── .gitignore
├── 00_basicos.html
├── 01_modulos.html
├── 02_basicos-ejercicios.html
├── 03_asincronia.html
├── 04_nuevos-tipos.html
├── 05_this.html
├── 06_json.html
├── 07_dom.html
├── 08_dom-ejercicios.html
├── 09_ajax.html
├── 10_crud_ajax.html
├── 11_crud_fetch.html
├── 12_crud_axios.html
├── README.md
├── ajax-ejercicios
    ├── 00_sitio-ajax.html
    ├── 01_incluir-html.html
    ├── 02_uploader.html
    ├── 03_uploader-drag-and-drop.html
    ├── 04_contact-form.html
    ├── 05_contact-form-php.html
    ├── 06_stripe_checkout.html
    ├── 07_blog-markdown.html
    ├── 08_api-pokemon.html
    ├── 09_api-tv-show.html
    ├── 10_api-canciones.html
    ├── 11_selects-anidados.html
    ├── 12_wp-api-rest.html
    └── assets
    │   ├── acerca.html
    │   ├── contacto.html
    │   ├── footer.html
    │   ├── header.html
    │   ├── home.html
    │   ├── include-html.js
    │   ├── javascript.md
    │   ├── send_mail.php
    │   ├── servicios.html
    │   ├── stripe-checkout.js
    │   ├── stripe-keys.js
    │   ├── stripe-success.html
    │   ├── tacos-al-pastor.jpg
    │   ├── tacos-campechanos.jpg
    │   ├── tacos-de-barbacoa.jpg
    │   ├── tacos-de-carnitas.jpg
    │   ├── tacos-de-sesos-y-lengua.jpg
    │   └── uploader.php
├── assets
    ├── ajax.png
    ├── alarma.mp3
    ├── db.json
    ├── loader.svg
    ├── users.json
    └── video.mp4
├── css
    └── dom-ejercicios.css
├── js
    ├── ajax.js
    ├── aritmetica.js
    ├── constantes.js
    ├── datos.json
    ├── dom.js
    ├── dom
    │   ├── boton_scroll.js
    │   ├── carrusel.js
    │   ├── cuenta_regresiva.js
    │   ├── deteccion_dispositivos.js
    │   ├── deteccion_red.js
    │   ├── deteccion_webcam.js
    │   ├── filtros_busqueda.js
    │   ├── geolocalizacion.js
    │   ├── menu_hamburguesa.js
    │   ├── narrador.js
    │   ├── objeto_responsive.js
    │   ├── prueba_responsive.js
    │   ├── reconocimiento_voz.js
    │   ├── reloj.js
    │   ├── scroll_espia.js
    │   ├── sorteo.js
    │   ├── teclado.js
    │   ├── tema_oscuro.js
    │   ├── validaciones_formulario.js
    │   └── video_inteligente.js
    ├── index_dom.js
    ├── modulos.js
    └── no-modulos.js
└── reactividad
    ├── 00_dom-manipulacion.html
    ├── 01_ui-basada-estado.html
    ├── 02_reactividad-estado.html
    ├── 03_estado-inmutable.html
    ├── 04_componentes-con-estado.html
    ├── 05_libreria-componentes-con-estado.html
    └── Component.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | indent_style = space
13 | indent_size = 2
14 | trim_trailing_whitespace = true
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Created by https://www.gitignore.io/api/osx,node,macos,linux,windows,visualstudiocode
  2 | 
  3 | ### Linux ###
  4 | *~
  5 | 
  6 | # temporary files which can be created if a process still has a handle open of a deleted file
  7 | .fuse_hidden*
  8 | 
  9 | # KDE directory preferences
 10 | .directory
 11 | 
 12 | # Linux trash folder which might appear on any partition or disk
 13 | .Trash-*
 14 | 
 15 | # .nfs files are created when an open file is removed but is still being accessed
 16 | .nfs*
 17 | 
 18 | ### macOS ###
 19 | *.DS_Store
 20 | .AppleDouble
 21 | .LSOverride
 22 | 
 23 | # Icon must end with two \r
 24 | Icon
 25 | 
 26 | # Thumbnails
 27 | ._*
 28 | 
 29 | # Files that might appear in the root of a volume
 30 | .DocumentRevisions-V100
 31 | .fseventsd
 32 | .Spotlight-V100
 33 | .TemporaryItems
 34 | .Trashes
 35 | .VolumeIcon.icns
 36 | .com.apple.timemachine.donotpresent
 37 | 
 38 | # Directories potentially created on remote AFP share
 39 | .AppleDB
 40 | .AppleDesktop
 41 | Network Trash Folder
 42 | Temporary Items
 43 | .apdisk
 44 | 
 45 | ### Node ###
 46 | # Logs
 47 | logs
 48 | *.log
 49 | npm-debug.log*
 50 | yarn-debug.log*
 51 | yarn-error.log*
 52 | 
 53 | # Runtime data
 54 | pids
 55 | *.pid
 56 | *.seed
 57 | *.pid.lock
 58 | 
 59 | # Directory for instrumented libs generated by jscoverage/JSCover
 60 | lib-cov
 61 | 
 62 | # Coverage directory used by tools like istanbul
 63 | coverage
 64 | 
 65 | # nyc test coverage
 66 | .nyc_output
 67 | 
 68 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 69 | .grunt
 70 | 
 71 | # Bower dependency directory (https://bower.io/)
 72 | bower_components
 73 | 
 74 | # node-waf configuration
 75 | .lock-wscript
 76 | 
 77 | # Compiled binary addons (http://nodejs.org/api/addons.html)
 78 | build/Release
 79 | 
 80 | # Dependency directories
 81 | node_modules/
 82 | jspm_packages/
 83 | 
 84 | # Typescript v1 declaration files
 85 | typings/
 86 | 
 87 | # Optional npm cache directory
 88 | .npm
 89 | 
 90 | # Optional eslint cache
 91 | .eslintcache
 92 | 
 93 | # Optional REPL history
 94 | .node_repl_history
 95 | 
 96 | # Output of 'npm pack'
 97 | *.tgz
 98 | 
 99 | # Yarn Integrity file
100 | .yarn-integrity
101 | 
102 | # dotenv environment variables file
103 | .env
104 | 
105 | 
106 | ### OSX ###
107 | 
108 | # Icon must end with two \r
109 | 
110 | # Thumbnails
111 | 
112 | # Files that might appear in the root of a volume
113 | 
114 | # Directories potentially created on remote AFP share
115 | 
116 | ### VisualStudioCode ###
117 | .vscode/*
118 | !.vscode/settings.json
119 | !.vscode/tasks.json
120 | !.vscode/launch.json
121 | !.vscode/extensions.json
122 | 
123 | ### Windows ###
124 | # Windows thumbnail cache files
125 | Thumbs.db
126 | ehthumbs.db
127 | ehthumbs_vista.db
128 | 
129 | # Folder config file
130 | Desktop.ini
131 | 
132 | # Recycle Bin used on file shares
133 | $RECYCLE.BIN/
134 | 
135 | # Windows Installer files
136 | *.cab
137 | *.msi
138 | *.msm
139 | *.msp
140 | 
141 | # Windows shortcuts
142 | *.lnk
143 | 
144 | # End of https://www.gitignore.io/api/osx,node,macos,linux,windows,visualstudiocode
145 | 


--------------------------------------------------------------------------------
/00_basicos.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="es">
   3 | 
   4 | <head>
   5 |   <meta charset="UTF-8">
   6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7 |   <title>Fundamentos JavaScript</title>
   8 | </head>
   9 | 
  10 | <body>
  11 |   <h1>Fundamentos JavaScript</h1>
  12 |   <script>
  13 |     /* **********     Curso JavaScript: 3. Variables: var 🥊VS🥊 let - #jonmircha     ********** */
  14 | 
  15 |     /* var hola = "Hola Mundo";
  16 |     let hello = "Hello World";
  17 |     console.log(hola);
  18 |     console.log(hello);
  19 |     console.log(window);
  20 |     console.log(window.hola);
  21 |     console.log(window.hello); */
  22 |     //Ambito de bloque
  23 |     //Esto es un bloque - comentario de una lines
  24 |     /*
  25 |     Esto
  26 |     es
  27 |     un
  28 |     comentario
  29 |     de
  30 |     varias
  31 |     líneas */
  32 |     /* console.log ("****************var*****************");
  33 |     var musica = "Rock";
  34 |     console.log("Variable Música antes del Bloque", musica);
  35 |     {
  36 |       var musica = "Pop";
  37 |       console.log("Variable Música dentro del Bloque", musica);
  38 |     }
  39 |     console.log("Variable Música después del Bloque", musica);
  40 |     console.log("****************let*****************");
  41 |     let musica2 = "Rock";
  42 |     console.log("Variable Música antes del Bloque", musica2);
  43 |     {
  44 |       let musica2 = "Pop";
  45 |       console.log("Variable Música dentro del Bloque", musica2);
  46 |     }
  47 |     console.log("Variable Música después del Bloque", musica2); */
  48 | 
  49 | 
  50 | 
  51 | 
  52 | 
  53 |     /* **********     Curso JavaScript: 4. Constantes (const) - #jonmircha     ********** */
  54 | 
  55 |     /*  let a;
  56 |      const PI = 3.1416;
  57 |      //const NUEVE;
  58 |      console.log(PI);
  59 |      //PI = 3.15;
  60 | 
  61 |      a = "kenai";
  62 |      console.log(a);
  63 | 
  64 |      const objeto = {
  65 |        nombre: "Jon",
  66 |        edad: 35
  67 |      }
  68 | 
  69 |      const colores = ["blanco", "negro", "azul"];
  70 | 
  71 |      console.log(objeto);
  72 |      console.log(colores);
  73 | 
  74 |      objeto.correo = "jonmircha@gmail.com";
  75 |      colores.push("anaranjado");
  76 | 
  77 |      console.log(objeto);
  78 |      console.log(colores); */
  79 | 
  80 | 
  81 | 
  82 | 
  83 | 
  84 |     /* **********     Curso JavaScript: 5. Cadenas de Texto (Strings) - #jonmircha     ********** */
  85 | 
  86 |     /*
  87 |         //Cadenas de Texto aka Strings
  88 |         let nombre = "Jon";
  89 |         let apellido = 'MirCha';
  90 |         let saludo = new String("Hola Mundo");
  91 |         let lorem = "       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est, et dolorum. Adipisci sequi, voluptates accusamus earum magnam non pariatur odit consequuntur dicta modi. Quam soluta aliquid nam ea quod dolore.      ";
  92 | 
  93 |         console.log(nombre, apellido, saludo);
  94 |         console.log(
  95 |           nombre.length,
  96 |           apellido.length,
  97 |           saludo.length,
  98 |           nombre.toUpperCase(),
  99 |           apellido.toLowerCase(),
 100 |           lorem.includes("amet"),
 101 |           lorem.includes("jon"),
 102 |           lorem,
 103 |           lorem.trim(),
 104 |           lorem.split(" "),
 105 |           lorem.split(",")
 106 |         );
 107 | 
 108 |      */
 109 | 
 110 | 
 111 | 
 112 | 
 113 | 
 114 |     /* **********     Curso JavaScript: 6. Template Strings - #jonmircha     ********** */
 115 | 
 116 |     /* let nombre = "Jon";
 117 |     let apellido = "MirCha";
 118 |  */
 119 |     //Concatenación
 120 |     //let saludo = "Hola mi nombre es " + nombre + " " + apellido + ".";
 121 |     //console.log(saludo);
 122 | 
 123 |     //Interpolción de variables
 124 |     //Template String
 125 |     /* let saludo2 = `Hola mi nombre es ${nombre} ${apellido}.`;
 126 |     console.log(saludo2);
 127 | 
 128 |     let ul = "<ul>< li > Primavera</li><li>Verano</li><li>Otoño</li><li>Invierno</li></ul > ";
 129 | 
 130 |     console.log(ul);
 131 | 
 132 |     let ul2 = `
 133 |       <ul>
 134 |         <li>Primavera</li>
 135 |         <li>Verano</li>
 136 |         <li>Otoño</li>
 137 |         <li>Invierno</li>
 138 |     </ul>
 139 |     `;
 140 | 
 141 |     console.log(ul2);
 142 | 
 143 |     let ul3 = "<ul>";
 144 |     ul3 += "<li> Primavera</li>";
 145 |     ul3 += "<li>Verano</li>";
 146 |     ul3 += "<li>Otoño</li>";
 147 |     ul3 += "<li>Invierno</li>";
 148 |     ul3 += "</ul>";
 149 | 
 150 |     console.log(ul3);
 151 |  */
 152 | 
 153 | 
 154 | 
 155 | 
 156 | 
 157 |     /* **********     Curso JavaScript: 7. Números (Numbers) - #jonmircha     ********** */
 158 | 
 159 |     /* let a = 2;
 160 |     let b = new Number(1);
 161 |     let c = 7.19;
 162 |     let d = "5.6";
 163 | 
 164 |     console.log(a, b);
 165 |     console.log(c.toFixed(1));
 166 |     console.log(c.toFixed(5));
 167 |     console.log(parseInt(c));
 168 |     console.log(parseFloat(c));
 169 |     console.log(typeof c, typeof d);
 170 |     console.log(a + b);
 171 |     console.log(c + parseInt(d));
 172 |     console.log(c + parseFloat(d));
 173 |     console.log(c + Number.parseInt(d));
 174 |     console.log(c + Number.parseFloat(d)); */
 175 | 
 176 | 
 177 | 
 178 | 
 179 | 
 180 |     /* **********     Curso JavaScript: 8. Booleans - #jonmircha     ********** */
 181 | 
 182 |     /* let verdadero = true;
 183 |     let falso = false;
 184 |     let v = Boolean(true);
 185 |     let f = Boolean(false);
 186 | 
 187 |     console.log(verdadero, falso, v, f);
 188 |     console.log(typeof verdadero, typeof falso);
 189 |     console.log(Boolean(0));
 190 |     console.log(Boolean(-7));
 191 |     console.log(Boolean(""));
 192 |     console.log(Boolean(" ")); */
 193 | 
 194 | 
 195 | 
 196 | 
 197 | 
 198 |     /* **********     Curso JavaScript: 9. undefined, null & NaN - #jonmircha     ********** */
 199 | 
 200 |     //undefined indica que no se ha inicializado una variable y que el valor está ausente
 201 |     /* let indefinida;
 202 |     console.log(indefinida); */
 203 | 
 204 |     //null es un valor especial que indica la ausencia de un valor
 205 |     /* let nulo = null;
 206 |     console.log(null); */
 207 | 
 208 |     //NaN - Not a Number
 209 |     /* let noEsUnNumero = "hola" * 3.7;
 210 |     console.log(noEsUnNumero); */
 211 | 
 212 | 
 213 | 
 214 | 
 215 |     /* **********     Curso JavaScript: 10. Funciones - #jonmircha     ********** */
 216 | 
 217 |     /*
 218 |     Una función es un bloque de código, autocontenido, que se puede definir una vez y ejecutar en cualquier momento. Opcionalmente, una función puede aceptar parámetros y devolver un valor.
 219 | 
 220 |     Las funciones en JavaScript son objetos, un tipo especial de objetos:
 221 | 
 222 |     Se dice que las funciones son ciudadanos de primera clase porque pueden asignarse a un valor, y pueden pasarse como argumentos y usarse como un valor de retorno.
 223 |     */
 224 | 
 225 |     //Declaración de función
 226 |     /*  function estoEsUnaFuncion() {
 227 |        console.log("Uno");
 228 |        console.log("Dos");
 229 |        console.log("Tres");
 230 |      } */
 231 | 
 232 |     //Invocación de función
 233 |     /* estoEsUnaFuncion();
 234 |     estoEsUnaFuncion();
 235 |     estoEsUnaFuncion();
 236 |     estoEsUnaFuncion(); */
 237 | 
 238 |     /* function unaFuncionQueDevuelveValor() {
 239 |       console.log("Uno");
 240 |       return 19;
 241 |       console.log("Dos");
 242 |       console.log("Tres");
 243 |       return "La función ha retornado una Cadena de texto";
 244 |     } */
 245 | 
 246 |     //let valorDeFuncion = unaFuncionQueDevuelveValor();
 247 | 
 248 |     //console.log(valorDeFuncion);
 249 | 
 250 |     /*  function saludar(nombre = "Desconocido", edad = 0) {
 251 |        console.log(`Hola mi nombre es ${nombre} y tengo ${edad} años.`);
 252 |      } */
 253 | 
 254 |     //saludar("kEnAi", 7);
 255 |     //saludar();
 256 | 
 257 |     //Funciones declaradas VS funciones expresadas
 258 | 
 259 |     //funcionDeclarada();
 260 | 
 261 |     /* function funcionDeclarada() {
 262 |       console.log("Esto es un función declarada, puede invocarse en cualquier parte de nuestro código, incluso antes de que la función sea declarada");
 263 |     } */
 264 | 
 265 |     //funcionDeclarada();
 266 | 
 267 |     //funcionExpresada();
 268 | 
 269 |     //función anónima
 270 |     /* const funcionExpresada = function () {
 271 |       console.log("Esto es una función expresada, es decir, una función que se le ha asignado como valor a una variable, si invocamos esta función antes de su definición JS nos dirá 'Cannot access 'funcionExpresada' before initialization'")
 272 |     } */
 273 | 
 274 |     //funcionExpresada();
 275 | 
 276 | 
 277 | 
 278 | 
 279 | 
 280 |     /* **********     Curso JavaScript: 11. Arreglos (Arrays) - #jonmircha     ********** */
 281 | 
 282 |     /*     const a = [];
 283 |         const b = [1, true, "Hola", ["A", "B", "C", [1, 2, 3]]];
 284 |         console.log(a);
 285 |         console.log(b);
 286 |         console.log(b.length);
 287 |         console.log(b[2]);
 288 |         console.log(b[0]);
 289 |         console.log(b[3]);
 290 |         console.log(b[3][2]);
 291 |         console.log(b[3][3][0]);
 292 | 
 293 |         const c = Array.of("X", "Y", "Z", 9, 8, 7);
 294 |         console.log(c);
 295 | 
 296 |         const d = Array(100).fill(false);
 297 |         console.log(d);
 298 | 
 299 |         const e = new Array();
 300 |         console.log(e);
 301 | 
 302 |         const f = new Array(1, 2, 3, true, false);
 303 |         console.log(f);
 304 | 
 305 |         const colores = ["Rojo", "Verde", "Azul"];
 306 |         console.log(colores);
 307 | 
 308 |         colores.push("Negro");
 309 |         console.log(colores);
 310 | 
 311 |         colores.pop();
 312 |         console.log(colores);
 313 | 
 314 |         colores.forEach(function (el, index) {
 315 |           console.log(`<li id="${index}">${el}</li>`);
 316 |         }); */
 317 | 
 318 | 
 319 | 
 320 | 
 321 | 
 322 |     /* **********     Curso JavaScript: 12. Objetos - #jonmircha     ********** */
 323 | 
 324 |     /* let a = new String("Hola");
 325 |     //console.log(a)
 326 | 
 327 |     const b = {}
 328 |     console.log(b);
 329 | 
 330 |     const c = new Object();
 331 |     console.log(c);
 332 |  */
 333 |     /* dentro de un objeto a las variables se le van a llamar atributos/propiedades y a las funciones se les llama métodos */
 334 |     /*     const jon = {
 335 |           nombre: "Jon",
 336 |           apellido: "MirCha",
 337 |           edad: 35,
 338 |           pasatiempos: ["Correr", "Hacer ejercicio", "Dar clases"],
 339 |           soltero: false,
 340 |           contacto: {
 341 |             email: "jonmircha@gmail.com",
 342 |             twitter: "@jonmircha",
 343 |             movil: "5215512345678"
 344 |           },
 345 |           saludar: function () {
 346 |             console.log(`Hola :)`)
 347 |           },
 348 |           decirMiNombre: function () {
 349 |             console.log(`Hola me llamo ${this.nombre} ${this.apellido} y tengo ${this.edad} años y me puedes seguir como ${this.contacto.twitter} en twitter.`)
 350 |           }
 351 |         }
 352 | 
 353 |         console.log(jon);
 354 |         console.log(jon["nombre"]);
 355 |         console.log(jon["apellido"]);
 356 |         console.log(jon.nombre);
 357 |         console.log(jon.apellido);
 358 |         console.log(jon.edad);
 359 |         console.log(jon.soltero);
 360 |         console.log(jon.pasatiempos);
 361 |         console.log(jon.pasatiempos[1]);
 362 |         console.log(jon.contacto);
 363 |         console.log(jon.contacto.twitter);
 364 |         jon.saludar();
 365 |         jon.decirMiNombre();
 366 | 
 367 |         console.log(Object.keys(jon));
 368 |         console.log(Object.values(jon));
 369 |         console.log(jon.hasOwnProperty("nombre"));
 370 |         console.log(jon.hasOwnProperty("nacimiento"));
 371 |      */
 372 | 
 373 | 
 374 | 
 375 | 
 376 | 
 377 |     /* **********     Curso JavaScript: 13. Tipos de Operadores - #jonmircha     ********** */
 378 | 
 379 |     /* Operadores */
 380 |     /* Aritméticos:  + - * / % ()  */
 381 | 
 382 |     /* let a = 5 + (5 - 10) * 3;
 383 |     let modulo = 5 % 2;
 384 | 
 385 |     console.log(a);
 386 |     console.log(modulo);
 387 |  */
 388 | 
 389 |     /*  Relacionales: >, <,   >=, <=, ==, ===, !=, !== */
 390 | 
 391 |     /* console.log(8 > 9);
 392 |     console.log(9 > 8);
 393 |     console.log(8 >= 9);
 394 |     console.log(9 >= 8);
 395 |     console.log(7 < 7);
 396 |     console.log(7 <= 7); */
 397 | 
 398 |     /*
 399 |     = 1 igual es asignación  de variable
 400 |     == 2 iguales es comparacion de valores
 401 |     === 3 igulaes es comparación de tipo de dato y de valor
 402 |     */
 403 | 
 404 |     /* console.log(7 == 7);
 405 |     console.log("7" == 7);
 406 |     console.log(0 == false);
 407 | 
 408 |     console.log(7 === 7);
 409 |     console.log("7" === 7);
 410 |     console.log(0 === false); */
 411 | 
 412 |     /* Incremento Decremento */
 413 |     /* let i = 2;
 414 | 
 415 |     console.log(i++);
 416 |     console.log(++i); */
 417 | 
 418 |     //i = i + 2;
 419 |     //i *= 3;
 420 | 
 421 |     //operador unario
 422 |     /* i++;
 423 |     i--;
 424 |     ++i;
 425 |     --i;
 426 |     console.log(i); */
 427 | 
 428 |     /*
 429 |     Lógicos
 430 |       ! - Not : Niega, es decir lo que es verdadero lo vuelve falso y viceversa
 431 |       || - Or: Cuando tengo 2 o más condiciones, con que una se cumpla, es decir sea verdadera, el OR será verdadero.
 432 |       && - And: Cuando tengo 2 o más condiciones, todas tienen que cumplirse, es decir ser verdaderas, para que AND se valide */
 433 |     /*
 434 |     console.log(!true);
 435 |     console.log(!false);
 436 |     console.log((9 === 9) || ("9" === 9));
 437 |     console.log((9 === 9) && ("9" === 9));
 438 |     console.log((9 === 9) && ("9" === "9")); */
 439 | 
 440 | 
 441 | 
 442 | 
 443 | 
 444 |     /* **********     Curso JavaScript: 14. Condicionales - #jonmircha     ********** */
 445 | 
 446 |     /* if - else */
 447 | 
 448 |     /* let edad = 9;
 449 | 
 450 |     if (edad > 17) {
 451 |       console.log("Eres mayor de Edad");
 452 |     } else {
 453 |       console.log("Eres menor de Edad");
 454 |     }
 455 | 
 456 |     if (edad >= 18) {
 457 |       console.log("Eres mayor de Edad");
 458 |     } else {
 459 |       console.log("Eres menor de Edad");
 460 |     }
 461 | 
 462 |     if (edad < 18) {
 463 |       console.log("Eres menor de Edad");
 464 |     } else {
 465 |       console.log("Eres mayor de Edad");
 466 |     }
 467 | 
 468 |     if (edad <= 17) {
 469 |       console.log("Eres menor de Edad");
 470 |     } else {
 471 |       console.log("Eres mayor de Edad");
 472 |     } */
 473 | 
 474 |     /* if - else if - else */
 475 |     /*
 476 |       Déjame Dormir - 0hrs - 5hrs
 477 |       Buenos dias 6hrs - 11hrs
 478 |       Buenas tardes 12hrs - 18hrs
 479 |       Buenas noches 19hrs - 23hrs
 480 |     */
 481 |     /* let hora = 23;
 482 |     if (hora >= 0 && hora <= 5) {
 483 |       console.log("Déjame dormir");
 484 |     } else if (hora >= 6 && hora <= 11) {
 485 |       console.log("Buenos días");
 486 |     } else if (hora >= 12 && hora <= 18) {
 487 |       console.log("Buenas tardes");
 488 |     } else {
 489 |       console.log("Buenas noches");
 490 |     }
 491 | 
 492 |     if (hora < 6) {
 493 |       console.log("Déjame dormir");
 494 |     } else if (hora > 5 && hora < 12) {
 495 |       console.log("Buenos días");
 496 |     } else if (hora > 11 && hora < 19) {
 497 |       console.log("Buenas tardes");
 498 |     } else {
 499 |       console.log("Buenas noches");
 500 |     } */
 501 | 
 502 |     /* Operador Ternario (condición) ? verdadero : falsa */
 503 |     /*  console.log("Operador Ternario");
 504 |      let eresMayor = (edad >= 18)
 505 |        ? "Eres mayor de Edad"
 506 |        : "Eres menor de Edad";
 507 |      console.log(eresMayor); */
 508 | 
 509 |     /* switch - case */
 510 |     /*
 511 |     domingo -0
 512 |     lunes - 1
 513 |     martes - 2
 514 |     miércoles - 3
 515 |     jueves - 4
 516 |     viernes - 5
 517 |     sábado - 6
 518 |     */
 519 |     /* let dia = 2;
 520 | 
 521 |     switch (dia) {
 522 |       case 0:
 523 |         console.log("Domingo");
 524 |         break;
 525 |       case 1:
 526 |         console.log("Lunes");
 527 |         break;
 528 |       case 2:
 529 |         console.log("Martes");
 530 |         break;
 531 |       case 3:
 532 |         console.log("Miércoles");
 533 |         break;
 534 |       case 4:
 535 |         console.log("Jueves");
 536 |         break;
 537 |       case 5:
 538 |         console.log("Viernes");
 539 |         break;
 540 |       case 6:
 541 |         console.log("Sábado");
 542 |         break;
 543 |       default:
 544 |         console.log("El día no existe");
 545 |         break;
 546 |     }
 547 |  */
 548 | 
 549 | 
 550 | 
 551 | 
 552 | 
 553 |     /* **********     Curso JavaScript: 15. Ciclos (Loops) - #jonmircha     ********** */
 554 | 
 555 |     /*  let contador = 0;
 556 | 
 557 |      while (contador < 10) {
 558 |        console.log("while " + contador);
 559 |        contador++;
 560 |      }
 561 | 
 562 | 
 563 |      do {
 564 |        console.log("do while " + contador);
 565 |        contador++;
 566 |      } while (contador < 10); */
 567 | 
 568 |     /* for (inicialización de variable; condición; decremento o incremento) {
 569 |       sentencias que ejecuta el for
 570 |       sentencias que ejecuta el for
 571 |       sentencias que ejecuta el for
 572 |     } */
 573 | 
 574 |     /* for (let i = 0; i < 10; i++) {
 575 |       console.log("for " + i);
 576 |     }
 577 | 
 578 |     let numeros = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
 579 | 
 580 |     for (let i = 0; i < numeros.length; i++) {
 581 |       console.log(numeros[i]);
 582 |     }
 583 | 
 584 |     const jon = {
 585 |       nombre: "Jon",
 586 |       apellido: "MirCha",
 587 |       edad: 35
 588 |     }
 589 | 
 590 |     for (const propiedad in jon) {
 591 |       console.log(`Key: ${propiedad}, Value: ${jon[propiedad]}`);
 592 |     }
 593 | 
 594 |     for (const elemento of numeros) {
 595 |       console.log(elemento);
 596 |     }
 597 | 
 598 |     let cadena = "Hola Mundo";
 599 | 
 600 |     for (const caracter of cadena) {
 601 |       console.log(caracter);
 602 |     } */
 603 | 
 604 | 
 605 | 
 606 | 
 607 | 
 608 |     /* **********     Curso JavaScript: 16. Manejo de Errores - #jonmircha     ********** */
 609 |     /*  try {
 610 |        console.log("En el Try se agrega el código a evaluar");
 611 |        noExiste;
 612 |        console.log("Segundo mensaje en el try");
 613 |      } catch (error) {
 614 |        console.log("Catch, captura cualquier error surgido o lanzado en el try");
 615 |        console.log(error);
 616 |      } finally {
 617 |        console.log("El bloque finally se ejecutará siempre al final de unbloque try-catch");
 618 |      }
 619 | 
 620 | 
 621 |      try {
 622 |        let numero = "y";
 623 | 
 624 |        if (isNaN(numero)) {
 625 |          throw new Error("El caractér introducido no es un Número");
 626 |        }
 627 | 
 628 |        console.log(numero * numero);
 629 |      } catch (error) {
 630 |        console.log(`Se produjo el siguiente error: ${error}`);
 631 |      } */
 632 | 
 633 | 
 634 | 
 635 | 
 636 | 
 637 |     /* **********     Curso JavaScript: 17. break & continue - #jonmircha     ********** */
 638 | 
 639 |     /* const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
 640 | 
 641 |     for (let i = 0; i < numeros.length; i++) {
 642 |       if (i === 5) {
 643 |         break;
 644 |       }
 645 |       console.log(numeros[i]);
 646 |     }
 647 | 
 648 |     for (let i = 0; i < numeros.length; i++) {
 649 |       if (i === 5) {
 650 |         continue;
 651 |       }
 652 |       console.log(numeros[i]);
 653 |     } */
 654 | 
 655 | 
 656 | 
 657 | 
 658 | 
 659 |     /* **********     Curso JavaScript: 18. Destructuración - #jonmircha     ********** */
 660 |     /* const numeros = [1, 2, 3];
 661 | 
 662 |     //Sin destructuración
 663 |     let uno = numeros[0],
 664 |       dos = numeros[1],
 665 |       tres = numeros[2];
 666 | 
 667 |     console.log(uno, dos, tres);
 668 | 
 669 |     //Con destructuración
 670 |     const [one, two, three] = numeros;
 671 |     console.log(one, two, three);
 672 | 
 673 |     const persona = {
 674 |       nombre: "Jon",
 675 |       apellido: "MirCha",
 676 |       edad: 35
 677 |     };
 678 | 
 679 |     let { nombre, edad, apellido } = persona;
 680 |     console.log(nombre, apellido, edad); */
 681 | 
 682 | 
 683 | 
 684 | 
 685 | 
 686 |     /* **********     Curso JavaScript: 19. Objetos literales - #jonmircha     ********** */
 687 |     /* let nombre = "kEnAi",
 688 |       edad = 7;
 689 | 
 690 |     const perro = {
 691 |       nombre: nombre,
 692 |       edad: edad,
 693 |       ladrar: function () {
 694 |         console.log("guauu guauu!!!")
 695 |       }
 696 |     }
 697 | 
 698 |     console.log(perro);
 699 |     perro.ladrar()
 700 | 
 701 |     const dog = {
 702 |       nombre,
 703 |       edad,
 704 |       raza: "Callejero",
 705 |       ladrar() {
 706 |         console.log("guauu guauu guauu!!!")
 707 |       }
 708 |     }
 709 | 
 710 |     console.log(dog);
 711 |     dog.ladrar(); */
 712 | 
 713 | 
 714 | 
 715 | 
 716 | 
 717 |     /* **********     Curso JavaScript: 20. Parámetros REST & Operador Spread - #jonmircha     ********** */
 718 |     /* function sumar(a, b, ...c) {
 719 |       let resultado = a + b;
 720 | 
 721 |       c.forEach(function (n) {
 722 |         resultado += n
 723 |       });
 724 | 
 725 |       return resultado;
 726 |     }
 727 | 
 728 |     console.log(sumar(1, 2));
 729 |     console.log(sumar(1, 2, 3));
 730 |     console.log(sumar(1, 2, 3, 4));
 731 |     console.log(sumar(1, 2, 3, 4, 5));
 732 |     console.log(sumar(1, 2, 3, 4, 5, 6));
 733 |     console.log(sumar(1, 2, 3, 4, 5, 6, 7));
 734 | 
 735 | 
 736 | 
 737 |     const arr1 = [1, 2, 3, 4, 5],
 738 |       arr2 = [6, 7, 8, 9, 0];
 739 | 
 740 |     console.log(arr1, arr2);
 741 | 
 742 |     const arr3 = [...arr1, ...arr2];
 743 |     console.log(arr3); */
 744 | 
 745 | 
 746 | 
 747 | 
 748 | 
 749 |     /* **********     Curso JavaScript: 21. Arrow Functions - #jonmircha     ********** */
 750 |     /* const saludar = () => console.log(`Hola`);
 751 |     saludar(); */
 752 | 
 753 |     /* const saludar = nombre => console.log(`Hola ${nombre}`);
 754 |     saludar("Irma");
 755 |  */
 756 |     /* const sumar = function (a, b) {
 757 |       return a + b;
 758 |     } */
 759 | 
 760 |     /*  const sumar = (a, b) => a + b;
 761 | 
 762 |      console.log(sumar(9, 9));
 763 | 
 764 |      const funcionDeVariasLineas = () => {
 765 |        console.log("Uno");
 766 |        console.log("Dos");
 767 |        console.log("Tres");
 768 |      }
 769 | 
 770 |      funcionDeVariasLineas();
 771 | 
 772 |      const numeros = [1, 2, 3, 4, 5];
 773 | 
 774 |      numeros.forEach((el, index) => console.log(`${el} esta en la posición ${index}`));
 775 | 
 776 |   */
 777 |     /*   function Perro() {
 778 |         console.log(this);
 779 |       }
 780 | 
 781 |       Perro(); */
 782 | 
 783 |     /*     const perro = {
 784 |           nombre: "kenai",
 785 |           ladrar() {
 786 |             console.log(this)
 787 |           }
 788 |         }
 789 | 
 790 |         perro.ladrar(); */
 791 | 
 792 | 
 793 | 
 794 | 
 795 | 
 796 |     /* **********     Curso JavaScript: 22. Prototipos - #jonmircha y Curso JavaScript: 23. Herencia - #jonmircha     ********** */
 797 |     // POO
 798 |     /*
 799 |     Clases - Modelo a seguir.
 800 |     Objetos - Es una instancia de una clase
 801 |       Atributos - es una característica o propiedad del objeto (son variables dentro de un objeto)
 802 |       Métodos - son las acciones que un objeto puede realizar (son funciones dentro de un objeto)
 803 |      */
 804 | 
 805 | 
 806 |     /* const animal = {
 807 |       nombre: "Snoopy",
 808 |       sonar() {
 809 |         console.log("Hago sonidos por que estoy vivo");
 810 |       }
 811 |     }
 812 | 
 813 |     const animal2 = {
 814 |       nombre: "Lola Bunny",
 815 |       sonar() {
 816 |         console.log("Hago sonidos por que estoy vivo");
 817 |       }
 818 |     }
 819 | 
 820 |     console.log(animal);
 821 |     console.log(animal2); */
 822 | 
 823 | 
 824 |     //Función constructora
 825 |     /*     function Animal(nombre, genero) {
 826 |           //Atributos
 827 |           this.nombre = nombre;
 828 |           this.genero = genero;
 829 | 
 830 |           //Métodos
 831 |           this.sonar = function () {
 832 |             console.log("Hago sonidos por que estoy vivo");
 833 |           }
 834 | 
 835 |           this.saludar = function () {
 836 |             console.log(`Hola me llamo ${this.nombre}`);
 837 |           }
 838 |         } */
 839 | 
 840 |     //Función constructora donde asignamos los métodos al Prototipo, no a la función como tal
 841 |     /*  function Animal(nombre, genero) {
 842 |        //Atributos
 843 |        this.nombre = nombre;
 844 |        this.genero = genero;
 845 |      } */
 846 | 
 847 |     //Métodos agregados al prototipo de la función constructora
 848 |     /* Animal.prototype.sonar = function () {
 849 |       console.log("Hago sonidos por que estoy vivo");
 850 |     }
 851 | 
 852 |     Animal.prototype.saludar = function () {
 853 |       console.log(`Hola me llamo ${this.nombre}`);
 854 |     } */
 855 | 
 856 |     //Herencia Prototípica
 857 |     /* function Perro(nombre, genero, tamanio) {
 858 |       this.super = Animal;
 859 |       this.super(nombre, genero);
 860 |       this.tamanio = tamanio;
 861 |     } */
 862 | 
 863 |     //Perro está heredando de Animal
 864 |     /*  Perro.prototype = new Animal();
 865 |      Perro.prototype.constructor = Perro; */
 866 | 
 867 |     //Sobreescritura de métodos del Prototipo padre en el hijo
 868 |     /* Perro.prototype.sonar = function () {
 869 |       console.log("Soy un perro y mi sonido es un ladrido");
 870 |     }
 871 | 
 872 |     Perro.prototype.ladrar = function () {
 873 |       console.log("Guauuu Guauuu !!!!");
 874 |     } */
 875 | 
 876 |     /* const snoopy = new Perro("Snoopy", "Macho", "Mediano"),
 877 |       lolaBunny = new Animal("Lola Bunny", "Hembra");
 878 | 
 879 |     console.log(snoopy);
 880 |     console.log(lolaBunny);
 881 | 
 882 |     snoopy.sonar();
 883 |     snoopy.saludar();
 884 |     snoopy.ladrar();
 885 | 
 886 |     lolaBunny.sonar();
 887 |     lolaBunny.saludar(); */
 888 | 
 889 | 
 890 | 
 891 | 
 892 | 
 893 |     /* **********     Curso JavaScript: 24. Clases - #jonmircha y Curso JavaScript: 25. Métodos estáticos, getters y setters - #jonmircha     ********** */
 894 |     /* class Animal {
 895 |       //el constructor es un método especial que se ejecuta en el momento de instanciar la clase
 896 |       constructor(nombre, genero) {
 897 |         this.nombre = nombre;
 898 |         this.genero = genero;
 899 |       }
 900 | 
 901 |       //Métodos
 902 |       sonar() {
 903 |         console.log("Hago sonidos por que estoy vivo");
 904 |       }
 905 | 
 906 |       saludar() {
 907 |         console.log(`Hola me llamo ${this.nombre}`);
 908 |       }
 909 |     }
 910 | 
 911 |     class Perro extends Animal {
 912 |       constructor(nombre, genero, tamanio) {
 913 |         //con el método super() se manda a llamar el constructor de la clase padre
 914 |         super(nombre, genero);
 915 |         this.tamanio = tamanio;
 916 |         this.raza = null;
 917 |       }
 918 | 
 919 |       sonar() {
 920 |         console.log("Soy un perro y mi sonido es un ladrido");
 921 |       }
 922 | 
 923 |       ladrar() {
 924 |         console.log("Guauuu Guauuu!!!");
 925 |       }
 926 | 
 927 |       //un método estático se pueden ejecutar sin necesidad de instanciar la clase
 928 |       static queEres() {
 929 |         console.log("Los perros somos animales mamíferos que pertenecemos a la familia de los caninos. Somos considerados los mejores amigos del hombre.");
 930 |       }
 931 | 
 932 |       //Los setters y getters son métodos especiales que nos permiten establecer y obtener los valores de atributos de nuestra clase
 933 |       get getRaza() {
 934 |         return this.raza;
 935 |       }
 936 | 
 937 |       set setRaza(raza) {
 938 |         this.raza = raza;
 939 |       }
 940 |     }
 941 | 
 942 |     Perro.queEres();
 943 | 
 944 |     const mimi = new Animal("Mimi", "Hembra"),
 945 |       scooby = new Perro("Scooby", "Macho", "Gigante");
 946 | 
 947 |     console.log(mimi);
 948 |     mimi.saludar();
 949 |     mimi.sonar();
 950 |     console.log(scooby);
 951 |     scooby.saludar();
 952 |     scooby.sonar();
 953 |     scooby.ladrar();
 954 |     console.log(scooby.getRaza);
 955 |     scooby.setRaza = "Grán Danés";
 956 |     console.log(scooby.getRaza); */
 957 | 
 958 | 
 959 | 
 960 | 
 961 | 
 962 |     /* **********     Curso JavaScript: 26. Objeto console - #jonmircha     ********** */
 963 |     /* console.log(console);
 964 |     console.error("Esto es un error");
 965 |     console.warn("Esto es un aviso");
 966 |     console.info("Esto es un mensje informativo");
 967 |     console.log("Un registro de lo que ha pasado en nuestra aplicación");
 968 | 
 969 |     let nombre = "Jon",
 970 |       apellido = "MirCha",
 971 |       edad = 35;
 972 | 
 973 |     console.log(nombre);
 974 |     console.log(apellido);
 975 |     console.log(edad);
 976 |     console.log(nombre, apellido, edad);
 977 |     console.log(`Hola mi nombre es ${nombre} ${apellido} y tengo ${edad} años.`);
 978 |     console.log(`Hola mi nombre es %s %s y tengo %d años.`, nombre, apellido, edad);
 979 |     console.clear();
 980 |     console.log(window);
 981 |     console.log(document);
 982 |     console.dir(window);
 983 |     console.dir(document);
 984 |     console.clear();
 985 | 
 986 |     console.group("Cursos de @jonmircha en YouTube");
 987 |     console.log("Curso de JavaScript");
 988 |     console.log("Curso de Node.js");
 989 |     console.log("Curso de PWAs");
 990 |     console.log("Curso de Flexbox");
 991 |     console.log("Curso de Diseño y Programación Web");
 992 |     console.groupEnd();
 993 | 
 994 |     console.groupCollapsed("Cursos de @jonmircha en YouTube");
 995 |     console.log("Curso de JavaScript");
 996 |     console.log("Curso de Node.js");
 997 |     console.log("Curso de PWAs");
 998 |     console.log("Curso de Flexbox");
 999 |     console.log("Curso de Diseño y Programación Web");
1000 |     console.groupEnd();
1001 |     console.clear();
1002 |     console.log(console);
1003 |     console.table(Object.entries(console).sort());
1004 | 
1005 |     const numeros = [1, 2, 3, 4, 5],
1006 |       vocales = ["a", "e", "i", "o", "u"];
1007 | 
1008 |     console.table(numeros);
1009 |     console.table(vocales);
1010 | 
1011 |     const perro = {
1012 |       nombre: "Boni",
1013 |       raza: "Boxer",
1014 |       color: "cafe"
1015 |     }
1016 |     console.table(perro);
1017 |     console.clear();
1018 | 
1019 |     console.time('Cuanto tiempo tarda mi código');
1020 |     const arreglo = Array(1000000);
1021 | 
1022 |     for (let i = 0; i < arreglo.length; i++) {
1023 |       arreglo[i] = i;
1024 |     }
1025 | 
1026 |     console.timeEnd('Cuanto tiempo tarda mi código');
1027 |     //console.log(arreglo);
1028 | 
1029 |     console.clear();
1030 | 
1031 | 
1032 |     for (let i = 0; i <= 100; i++) {
1033 |       console.count("código for");
1034 |       console.log(i);
1035 |     }
1036 | 
1037 |     console.clear();
1038 | 
1039 |     let x = 3,
1040 |       y = 2,
1041 |       pruebaXY = "Se espera que X siempre sea menor que Y";
1042 | 
1043 |     console.assert(x < y, { x, y, pruebaXY }); */
1044 | 
1045 | 
1046 | 
1047 | 
1048 | 
1049 |     /* **********     Curso JavaScript: 27. Objeto Date - #jonmircha     ********** */
1050 |     /* console.log(Date());
1051 | 
1052 |     let fecha = new Date();
1053 |     console.log(fecha);
1054 |     //día del mes
1055 |     console.log(fecha.getDate());
1056 |     //día de la semana D L M Mi J V S -> 0 1 2 3 4 5 6
1057 |     console.log(fecha.getDay());
1058 |     //mes Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic -> 0 1 2 3 4 5 6 7 8 9 10 11
1059 |     console.log(fecha.getMonth());
1060 |     console.log(fecha.getFullYear());
1061 |     console.log(fecha.getHours());
1062 |     console.log(fecha.getMinutes());
1063 |     console.log(fecha.getSeconds());
1064 |     console.log(fecha.getMilliseconds());
1065 |     console.log(fecha.toString());
1066 |     console.log(fecha.toDateString());
1067 |     console.log(fecha.toLocaleString());
1068 |     console.log(fecha.toLocaleDateString());
1069 |     console.log(fecha.toLocaleTimeString());
1070 |     console.log(fecha.getTimezoneOffset());
1071 |     console.log(fecha.getUTCDate());
1072 |     console.log(fecha.getUTCHours());
1073 |     console.log(Date.now());
1074 |     let cumpleJon = new Date(1984, 4, 23);
1075 |     console.log(cumpleJon); */
1076 | 
1077 | 
1078 | 
1079 | 
1080 | 
1081 |     /* **********     Curso JavaScript: 28. Objeto Math - #jonmircha     ********** */
1082 |     /* console.log(Math);
1083 |     console.log(Math.PI);
1084 |     console.log(Math.abs(-7.8));
1085 |     console.log(Math.ceil(7.2));
1086 |     console.log(Math.floor(7.8));
1087 |     console.log(Math.round(7.49));
1088 |     console.log(Math.sqrt(81));
1089 |     console.log(Math.pow(2, 5));
1090 |     console.log(Math.sign(-0.3)); // -1 0 1
1091 |     console.log(Math.random());
1092 |     console.log(Math.round(Math.random() * 1000)); */
1093 | 
1094 | 
1095 | 
1096 | 
1097 | 
1098 |     /* **********     Curso JavaScript: 29. Operador de Cortocircuito - #jonmircha     ********** */
1099 |     /*
1100 |     Cortocircuito OR - cuando el valor de la izquierda en la expresión siempre pueda validar a true, es el valor que se cargará por defecto
1101 | 
1102 |     Cortocircuito AND - cuando el valor de la izquierda en la expresión siempre pueda validar a false, es el valor que se cargará por defecto
1103 |      */
1104 |     /*  function saludar(nombre) {
1105 |        nombre = nombre || "Desconocido";
1106 |        console.log(`Hola ${nombre}`);
1107 |      }
1108 | 
1109 |      saludar("Jon");
1110 |      saludar();
1111 | 
1112 |      console.log("cadena" || "Valor de la derecha");
1113 |      console.log(19 || "Valor de la derecha");
1114 |      console.log(true || "Valor de la derecha");
1115 |      console.log([] || "Valor de la derecha");
1116 |      console.log({} || "Valor de la derecha");
1117 |      console.log(false || "Valor de la derecha");
1118 |      console.log(null || "Valor de la derecha");
1119 |      console.log(undefined || "Valor de la derecha");
1120 |      console.log("" || "Valor de la derecha");
1121 |      console.log(-2 || "Valor de la derecha");
1122 |      console.log(0 || "Valor de la derecha");
1123 | 
1124 |      console.log(false && "Valor de la derecha");
1125 |      console.log(null && "Valor de la derecha");
1126 |      console.log(undefined && "Valor de la derecha");
1127 |      console.log("" && "Valor de la derecha");
1128 |      console.log(-2 && "Valor de la derecha");
1129 |      console.log(0 && "Valor de la derecha");
1130 | 
1131 |      console.log("cadena" && "Valor de la derecha");
1132 |      console.log(19 && "Valor de la derecha");
1133 |      console.log(true && "Valor de la derecha");
1134 |      console.log([] && "Valor de la derecha");
1135 |      console.log({} && "Valor de la derecha"); */
1136 | 
1137 | 
1138 | 
1139 | 
1140 | 
1141 |     /* **********     Curso JavaScript: 30. alert, confirm y prompt - #jonmircha     ********** */
1142 |     //console.log(window);
1143 |     //alert("Hola esto es una alerta");
1144 |     //confirm("Hola esto es una confirmación");
1145 |     //prompt("Hola esto es un aviso y le permite al usuario ingresar un valor");
1146 | 
1147 |     /* let alerta = alert("Hola esto es una alerta"),
1148 |       confirmacion = confirm("Hola esto es una confirmación"),
1149 |       aviso = prompt("Hola esto es un aviso y le permite al usuario ingresar un valor");
1150 | 
1151 |     console.log(alerta);
1152 |     console.log(confirmacion);
1153 |     console.log(aviso);
1154 |  */
1155 | 
1156 | 
1157 | 
1158 | 
1159 | 
1160 |     /* **********     Curso JavaScript: 31. Expresiones Regulares - #jonmircha     ********** */
1161 |     /*
1162 |      Expresiones Regulares
1163 |         Son una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres.
1164 | 
1165 |         https://es.wikipedia.org/wiki/Expresi%C3%B3n_regular
1166 |         https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions
1167 |     */
1168 | 
1169 |     /*  let cadena = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem fuga cupiditate dolores saepe, praesentium sit eaque recusandae id sapiente similique, laudantium voluptatum perferendis ea iure ad odio doloremque earum voluptate.";
1170 | 
1171 |      let expReg = new RegExp("lorem", "ig");
1172 |      console.log(expReg.test(cadena));
1173 |      console.log(expReg.exec(cadena));
1174 | 
1175 |      let expReg2 = /lorem{1,}/ig;
1176 |      console.log(expReg2.test(cadena));
1177 |      console.log(expReg2.exec(cadena)); */
1178 | 
1179 | 
1180 | 
1181 | 
1182 | 
1183 |     /* **********     Curso JavaScript: 32. Funciones Anónimas Autoejecutables - #jonmircha     ********** */
1184 |     /*    //Función Anónima Autoejecutables
1185 |        (function () {
1186 |          console.log("Mi primer IIFE");
1187 |        })();
1188 | 
1189 |        (function (d, w, c) {
1190 |          console.log("Mi segunda IIFE");
1191 |          console.log(d);
1192 |          console.log(w);
1193 |          c.log("Este es un console.log")
1194 |        })(document, window, console);
1195 | 
1196 | 
1197 |        //Formas de escribir las funciones Anónimas Autoejecutables
1198 |        //Clásica
1199 |        (function () {
1200 |          console.log('versión Clásica')
1201 |        })();
1202 | 
1203 |        //La Crockford (JavaScript The Good Parts)
1204 |        ((function () {
1205 |          console.log('versión Crockford')
1206 |        })());
1207 | 
1208 |        //Unaria
1209 |        +function () {
1210 |          console.log('versión Unaria')
1211 |        }();
1212 | 
1213 |        //Facebook
1214 |        !function () {
1215 |          console.log('versión Facebook')
1216 |        }(); */
1217 |   </script>
1218 | </body>
1219 | 
1220 | </html>
1221 | 


--------------------------------------------------------------------------------
/01_modulos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Módulos en JavaScript</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Módulos en JavaScript</h1>
12 |   <script src="js/modulos.js" type="module"></script>
13 |   <script src="js/no-modulos.js" nomodule></script>
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/02_basicos-ejercicios.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Ejercicios de Programación en JavaScript</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>Ejercicios de Programación en JavaScript</h1>
 12 |   <script>
 13 |     /* 1) Programa una función que cuente el número de caracteres de una cadena de texto, pe. miFunción("Hola Mundo") devolverá 10 */
 14 | 
 15 | 
 16 |     /* 2) Programa una función que te devuelva el texto recortado según el número de caracteres indicados, pe. miFunción("Hola Mundo", 4) devolverá "Hola" */
 17 | 
 18 | 
 19 | 
 20 |     /* 3) Programa una función que dada una String te devuelva un Array de textos separados por cierto caracter, pe.
 21 |      miFuncion('hola que tal', ' ') devolverá ['hola', 'que', 'tal'] */
 22 | 
 23 | 
 24 | 
 25 |     /* 4) Programa una función que repita un texto X veces, pe. miFuncion('Hola Mundo', 3) devolverá Hola Mundo Hola Mundo Hola Mundo */
 26 | 
 27 | 
 28 | 
 29 |     /* 5) Programa una función que invierta las palabras de una cadena de texto, pe. miFuncion("Hola Mundo") devolverá "odnuM aloH" */
 30 | 
 31 | 
 32 | 
 33 |     /* 6) Programa una función para contar el número de veces que se repite una palabra en un texto largo, pe. miFuncion("hola mundo adios mundo", "mundo") devolverá 2 */
 34 | 
 35 | 
 36 | 
 37 |     /* 7) Programa una función que valide si una palabra o frase dada, es un palíndromo (que se lee igual en un sentido que en otro), pe. mifuncion("Salas") devolverá true */
 38 | 
 39 | 
 40 | 
 41 |     /* 8) Programa una función que elimine cierto patrón de caracteres de un texto dado, pe. miFuncion("xyz1, xyz2, xyz3, xyz4 y xyz5", "xyz") devolverá  "1, 2, 3, 4 y 5 */
 42 | 
 43 | 
 44 | 
 45 |     /* 9) Programa una función que obtenga un numero aleatorio entre 501 y 600 */
 46 | 
 47 | 
 48 | 
 49 |     /* 10) Programa una función que reciba un número y evalúe si es capicúa o no (que se lee igual en un sentido que en otro), pe. miFuncion(2002) devolverá true  */
 50 | 
 51 | 
 52 | 
 53 |     /* 11) Programa una función que calcule el factorial de un número (El factorial de un entero positivo n, se define como el producto de todos los números enteros positivos desde 1 hasta n), pe. miFuncion(5) devolverá 120 */
 54 | 
 55 | 
 56 | 
 57 |     /* 12) Programa una función que determine si un número es primo (aquel que solo es divisible por sí mismo y 1) o no, pe. miFuncion(7) devolverá true */
 58 | 
 59 | 
 60 | 
 61 |     /* 13) Programa una función que determine si un número es par o impar, pe. miFuncion(29) devolverá Impar */
 62 | 
 63 | 
 64 | 
 65 |     /* 14) Programa una función para convertir grados Celsius a Fahrenheit y viceversa, pe. miFuncion(0,"C") devolverá 32°F */
 66 | 
 67 | 
 68 | 
 69 |     /* 15) Programa una función para convertir números de base binaria a decimal y viceversa, pe. miFuncion(100,2) devolverá 4 base 10 */
 70 | 
 71 | 
 72 | 
 73 |     /* 16) Programa una función que devuelva el monto final después de aplicar un descuento a una cantidad dada, pe. miFuncion(1000, 20) devolverá 800 */
 74 | 
 75 | 
 76 | 
 77 |     /* 17) Programa una función que dada una fecha válida determine cuantos años han pasado hasta el día de hoy, pe. miFuncion(new Date(1984,4,23)) devolverá 35 años (en 2020) */
 78 | 
 79 | 
 80 | 
 81 |     /* 18) Programa una función que dada una cadena de texto cuente el número de vocales y consonantes, pe. miFuncion("Hola Mundo") devuelva Vocales: 4, Consonantes: 5 */
 82 | 
 83 | 
 84 | 
 85 |     /* 19) Programa una función que valide que un texto sea un nombre válido, pe. miFuncion("Jonathan MirCha") devolverá verdadero */
 86 | 
 87 | 
 88 | 
 89 |     /* 20) Programa una función que valide que un texto sea un email válido, pe. miFuncion("jonmircha@gmail.com") devolverá verdadero */
 90 | 
 91 | 
 92 | 
 93 |     /* 21) Programa una función que dado un array numérico devuelve otro array con los números elevados al cuadrado, pe. mi_funcion([1, 4, 5]) devolverá [1, 16, 25] */
 94 | 
 95 | 
 96 | 
 97 |     /* 22) Programa una función que dado un array devuelva el número mas alto y el más bajo de dicho array, pe. miFuncion([1, 4, 5, 99, -60]) devolverá [99, -60] */
 98 | 
 99 | 
100 | 
101 |     /* 23) Programa una función que dado un array de números devuelva un objeto con 2 arreglos en el primero almacena los números pares y en el segundo los impares, pe. miFuncion([1,2,3,4,5,6,7,8,9,0]) devolverá {pares: [2,4,6,8,0], impares: [1,3,5,7,9]} */
102 | 
103 | 
104 | 
105 |     /* 24) Programa una función que dado un arreglo de números devuelva un objeto con dos arreglos, el primero tendrá los numeros ordenados en forma ascendente y el segundo de forma descendiente, pe. miFuncion([7, 5,7,8,6]) devolverá { asc: [5,6,7,7,8], desc: [8,7,7,6,5] }*/
106 | 
107 | 
108 | 
109 |     /* 25) Programa una función que dado un arreglo de elementos, elimine los duplicados, pe. miFuncion(["x", 10, "x", 2, "10", 10, true, true]) devolverá ["x", 10, 2, "10", true]  */
110 | 
111 | 
112 | 
113 |     /* 26) Programa una función que dado un arreglo de números obtenga el promedio, pe. promedio([9,8,7,6,5,4,3,2,1,0]) devolverá 4.5 */
114 | 
115 | 
116 | 
117 |     /* 27) Programa una clase llamada Pelicula.
118 |         La clase recibirá un objeto al momento de instanciarse con los siguentes datos: id de la película en IMDB, titulo, director, año de estreno, país o países de origen, géneros y calificación en IMBD.
119 |           - Todos los datos del objeto son obligatorios.
120 |           - Valida que el id IMDB tenga 9 caracteres, los primeros 2 sean letras y los 7 restantes números.
121 |           - Valida que el título no rebase los 100 caracteres.
122 |           - Valida que el director no rebase los 50 caracteres.
123 |           - Valida que el año de estreno sea un número entero de 4 dígitos.
124 |           - Valida que el país o paises sea introducidos en forma de arreglo.
125 |           - Valida que los géneros sean introducidos en forma de arreglo.
126 |           - Valida que los géneros introducidos esten dentro de los géneros aceptados*.
127 |           - Crea un método estático que devuelva los géneros aceptados*.
128 |           - Valida que la calificación sea un número entre 0 y 10 pudiendo ser decimal de una posición.
129 |           - Crea un método que devuelva toda la ficha técnica de la película.
130 |           - Apartir de un arreglo con la información de 3 películas genera 3 instancias de la clase de forma automatizada e imprime la ficha técnica de cada película.
131 | 
132 |         * Géneros Aceptados: Action, Adult, Adventure, Animation, Biography, Comedy, Crime, Documentary ,Drama, Family, Fantasy, Film Noir, Game-Show, History, Horror, Musical, Music, Mystery, News, Reality-TV, Romance, Sci-Fi, Short, Sport, Talk-Show, Thriller, War, Western.
133 |         */
134 |   </script>
135 | </body>
136 | 
137 | </html>
138 | 


--------------------------------------------------------------------------------
/03_asincronia.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Asíncronía en JavaScript</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>Asíncronía en JavaScript</h1>
 12 |   <script>
 13 |     /* **********     Curso JavaScript: 44. Temporizadores (setTimeout & setInterval) - #jonmircha     ********** */
 14 | 
 15 |     /* console.log("inicio");
 16 | 
 17 |     setTimeout(() => {
 18 |       console.log("Ejecutando un setTimeout, esto se ejecuta una sóla vez");
 19 |     }, 3000);
 20 | 
 21 |     setInterval(() => {
 22 |       console.log("Ejecutando un setInterval, esto se ejecuta indefinidaente cada cierto intervalo de tiempo");
 23 |     }, 1000); */
 24 | 
 25 |     /* let temporizador = setTimeout(() => {
 26 |       console.log(new Date().toLocaleTimeString());
 27 |     }, 1000);
 28 | 
 29 |     clearTimeout(temporizador);
 30 |     console.log("después del clearTimeout"); */
 31 | 
 32 |     /* let temporizador = setInterval(() => {
 33 |       console.log(new Date().toLocaleTimeString());
 34 |     }, 1000);
 35 | 
 36 |     clearInterval(temporizador);
 37 |     console.log("después del clearInterval"); */
 38 | 
 39 | 
 40 | 
 41 | 
 42 | 
 43 |     /* **********     Curso JavaScript: 45. Asincronía y el Event Loop - #jonmircha     ********** */
 44 | 
 45 |     /*  Antes de explicar como funciona el modelo de JavaScript es importante entender algunos conceptos:
 46 | 
 47 |      Procesamiento Single thread y Multi thread.
 48 |      Operaciones de CPU y Operaciones de I / O.
 49 |      Operaciones Concurrentes y Paralelas.
 50 |      Operaciones Bloqueantes y No Bloqueantes.
 51 |      Operaciones Síncronas y Asíncronas.
 52 | 
 53 |      Javascript usa un modelo asíncrono y no bloqueante, con un loop de eventos implementado en un sólo hilo, (single thread) para operaciones de entrada y salida (input/output).
 54 |      */
 55 | 
 56 | 
 57 |     /* //Código Síncrono Bloquenate
 58 |     (() => {
 59 |       console.log("Código Síncrono");
 60 |       console.log("Inicio");
 61 | 
 62 |       function dos() {
 63 |         console.log("Dos");
 64 |       }
 65 | 
 66 |       function uno() {
 67 |         console.log("Uno");
 68 |         dos();
 69 |         console.log("Tres");
 70 |       }
 71 | 
 72 |       uno();
 73 |       console.log("Fin");
 74 |     })();
 75 | 
 76 |     console.log("********************");
 77 | 
 78 |     //Código Asíncrono No Bloquenate
 79 |     (() => {
 80 |       console.log("Código Asíncrono");
 81 |       console.log("Inicio");
 82 | 
 83 |       function dos() {
 84 |         setTimeout(function () {
 85 |           console.log("Dos");
 86 |         }, 1000);
 87 |       }
 88 | 
 89 |       function uno() {
 90 |         setTimeout(function () {
 91 |           console.log("Uno");
 92 |         }, 0);
 93 |         dos();
 94 |         console.log("Tres");
 95 |       }
 96 | 
 97 |       uno();
 98 |       console.log("Fin");
 99 |     })(); */
100 | 
101 | 
102 | 
103 | 
104 | 
105 |     /* **********     Curso JavaScript: 46. Callbacks - #jonmircha     ********** */
106 | 
107 |     /* function cuadradoCallback(value, callback) {
108 |       setTimeout(() => {
109 |         callback(value, value * value);
110 |       }, 0 | Math.random() * 1000);
111 |     }
112 | 
113 |     cuadradoCallback(0, (value, result) => {
114 |       console.log("Inicia Callback");
115 |       console.log(`Callback: ${value}, ${result}`);
116 |       cuadradoCallback(1, (value, result) => {
117 |         console.log(`Callback: ${value}, ${result}`);
118 |         cuadradoCallback(2, (value, result) => {
119 |           console.log(`Callback: ${value}, ${result}`);
120 |           cuadradoCallback(3, (value, result) => {
121 |             console.log(`Callback: ${value}, ${result}`);
122 |             cuadradoCallback(4, (value, result) => {
123 |               console.log(`Callback: ${value}, ${result}`);
124 |               cuadradoCallback(5, (value, result) => {
125 |                 console.log(`Callback: ${value}, ${result}`);
126 |                 console.log("Fin Callback");
127 |                 console.log("Callback Hell !!!!!😈🤘");
128 |                 console.log("http://callbackhell.com/");
129 |               });
130 |             });
131 |           });
132 |         });
133 |       });
134 |     }); */
135 | 
136 | 
137 | 
138 | 
139 | 
140 |     /* **********     Curso JavaScript: 47. Promesas - #jonmircha     ********** */
141 | 
142 |     /*     function cuadradoPromise(value) {
143 |           if (typeof value !== "number") {
144 |             return Promise.reject(`Error, el valor " ${value} " ingresado no es un número`);
145 |           }
146 | 
147 |           return new Promise((resolve, reject) => {
148 |             setTimeout(() => {
149 |               resolve({
150 |                 value,
151 |                 result: value * value
152 |               });
153 |             }, 0 | Math.random() * 1000);
154 |           });
155 |         }
156 | 
157 |         cuadradoPromise(0)
158 |           .then(obj => {
159 |             //console.log(obj);
160 |             console.log('Inicio Promise');
161 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
162 |             return cuadradoPromise(1);
163 |           })
164 |           .then(obj => {
165 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
166 |             return cuadradoPromise(2);
167 |           })
168 |           .then(obj => {
169 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
170 |             return cuadradoPromise(3);
171 |           })
172 |           .then(obj => {
173 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
174 |             return cuadradoPromise("4");
175 |           })
176 |           .then(obj => {
177 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
178 |             return cuadradoPromise(5);
179 |           })
180 |           .then(obj => {
181 |             console.log(`Promise: ${obj.value}, ${obj.result}`);
182 |             console.log('Fin Promise');
183 |           })
184 |           .catch(err => console.error(err)); */
185 | 
186 | 
187 | 
188 | 
189 | 
190 |     /* **********     Curso JavaScript: 48. Async - Await - #jonmircha     ********** */
191 | 
192 |     /* function cuadradoPromise(value) {
193 |       if (typeof value !== "number") {
194 |         return Promise.reject(`Error, el valor " ${value} " ingresado no es un número`);
195 |       }
196 | 
197 |       return new Promise((resolve, reject) => {
198 |         setTimeout(() => {
199 |           resolve({
200 |             value,
201 |             result: value * value
202 |           });
203 |         }, 0 | Math.random() * 1000);
204 |       });
205 |     }
206 | 
207 |     async function funcionAsincronaDeclarada() {
208 |       try {
209 |         console.log('Inicio Async Function');
210 | 
211 |         let obj = await cuadradoPromise(0);
212 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
213 | 
214 |         obj = await cuadradoPromise(1);
215 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
216 | 
217 |         obj = await cuadradoPromise(2);
218 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
219 | 
220 |         obj = await cuadradoPromise("3");
221 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
222 | 
223 |         obj = await cuadradoPromise(4);
224 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
225 | 
226 |         obj = await cuadradoPromise(5);
227 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
228 | 
229 |         console.log('Fin Async Function');
230 |       } catch (err) {
231 |         console.error(err)
232 |       }
233 |     }
234 | 
235 |     funcionAsincronaDeclarada();
236 | 
237 |     const funcionAsincronaExpresada = async () => {
238 |       try {
239 |         console.log('Inicio Async Function');
240 | 
241 |         let obj = await cuadradoPromise(6);
242 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
243 | 
244 |         obj = await cuadradoPromise(7);
245 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
246 | 
247 |         obj = await cuadradoPromise(8);
248 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
249 | 
250 |         obj = await cuadradoPromise("9");
251 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
252 | 
253 |         obj = await cuadradoPromise(10);
254 |         console.log(`Async Function: ${obj.value}, ${obj.result}`);
255 | 
256 |         console.log('Fin Async Function');
257 |       } catch (err) {
258 |         console.error(err)
259 |       }
260 |     }
261 | 
262 |     funcionAsincronaExpresada(); */
263 |   </script>
264 | </body>
265 | 
266 | </html>
267 | 


--------------------------------------------------------------------------------
/04_nuevos-tipos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Nuevos Tipos de Datos en JavaScript</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>Nuevos Tipos de Datos en JavaScript</h1>
 12 |   <script>
 13 |     /* **********     Curso JavaScript: 49. Symbols - #jonmircha     ********** */
 14 |     /* let id = Symbol("id");
 15 |     let id2 = Symbol("id2");
 16 | 
 17 |     console.log(id === id2)
 18 |     console.log(id, id2);
 19 |     console.log(typeof id, typeof id2);
 20 | 
 21 |     const NOMBRE = Symbol("nombre");
 22 |     const SALUDAR = Symbol("saludar");
 23 | 
 24 |     const persona = {
 25 |       [NOMBRE]: "Jon",
 26 |       edad: 35
 27 |     };
 28 |     console.log(persona);
 29 | 
 30 |     persona.NOMBRE = "Jonathan MirCha"
 31 |     console.log(persona);
 32 |     console.log(persona.NOMBRE);
 33 |     console.log(persona[NOMBRE]);
 34 | 
 35 |     persona[SALUDAR] = function () {
 36 |       console.log(`Hola`);
 37 |     }
 38 |     console.log(persona);
 39 |     persona[SALUDAR]();
 40 | 
 41 | 
 42 |     for (let propiedad in persona) {
 43 |       console.log(propiedad);
 44 |       console.log(persona[propiedad]);
 45 |     }
 46 | 
 47 |     console.log(Object.getOwnPropertySymbols(persona)); */
 48 | 
 49 | 
 50 | 
 51 | 
 52 | 
 53 |     /* **********     Curso JavaScript: 50. Sets - #jonmircha     ********** */
 54 |     /* const set = new Set([1, 2, 3, 3, 4, 5, true, false, false, {}, {}, "hola", "HOla"]);
 55 |     console.log(set);
 56 |     console.log(set.size);
 57 | 
 58 |     const set2 = new Set();
 59 |     set2.add(1);
 60 |     set2.add(2);
 61 |     set2.add(2);
 62 |     set2.add(3);
 63 |     set2.add(true);
 64 |     set2.add(false);
 65 |     set2.add(true);
 66 |     set2.add({});
 67 | 
 68 |     console.log(set2);
 69 |     console.log(set2.size);
 70 | 
 71 |     console.log("Recorriendo set");
 72 |     for (item of set) {
 73 |       console.log(item);
 74 |     }
 75 |     console.log("Recorriendo set2");
 76 |     set2.forEach(item => console.log((item)));
 77 | 
 78 |     let arr = Array.from(set);
 79 |     console.log(arr);
 80 |     console.log(arr[0]);
 81 |     console.log(arr[9]);
 82 | 
 83 |     set.delete("HOla");
 84 |     console.log(set);
 85 | 
 86 |     console.log(set.has("hola"));
 87 |     console.log(set.has(19));
 88 | 
 89 |     set2.clear();
 90 |     console.log(set2); */
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 |     /* **********     Curso JavaScript: 51. Maps - #jonmircha     ********** */
 97 |     /* const mapa = new Map();
 98 |     mapa.set("nombre", "Jon");
 99 |     mapa.set("apellido", "MirCha");
100 |     mapa.set("edad", 35);
101 | 
102 |     console.log(mapa);
103 |     console.log(mapa.size);
104 |     console.log(mapa.has("correo"));
105 |     console.log(mapa.has("nombre"));
106 |     console.log(mapa.get("nombre"));
107 |     mapa.set("nombre", "Jonathan MirCha");
108 |     console.log(mapa.get("nombre"));
109 |     mapa.delete("apellido");
110 | 
111 |     mapa.set(19, "diecinueve");
112 |     mapa.set(false, "falso");
113 |     mapa.set({}, {});
114 |     console.log(mapa);
115 | 
116 |     for (let [key, value] of mapa) {
117 |       console.log(`Llave: ${key}, Valor:${value}`);
118 |     }
119 | 
120 |     const mapa2 = new Map([
121 |       ["nombre", "kEnAi"],
122 |       ["edad", 7],
123 |       ["animal", "perro"],
124 |       [null, "nulo"]
125 |     ]);
126 | 
127 |     console.log(mapa2);
128 | 
129 |     const llavesMapa2 = [...mapa2.keys()];
130 |     const valoresMapa2 = [...mapa2.values()];
131 | 
132 |     console.log(llavesMapa2);
133 |     console.log(valoresMapa2); */
134 | 
135 | 
136 | 
137 | 
138 | 
139 |     /* **********     Curso JavaScript: 52. WeakSets & WeakMaps - #jonmircha     ********** */
140 |     /* //const ws = new WeakSet([1, 2, 3, 3, 4, 5, true, false, false, {}, {}, "hola", "HOla"]);
141 |     const ws = new WeakSet();
142 | 
143 |     let valor1 = { "valor1": 1 };
144 |     let valor2 = { "valor2": 2 };
145 |     let valor3 = { "valor3": 3 };
146 | 
147 |     ws.add(valor1);
148 |     ws.add(valor2);
149 | 
150 |     console.log(ws);
151 | 
152 |     console.log(ws.has(valor1));
153 |     console.log(ws.has(valor3));
154 | 
155 |     ws.delete(valor2);
156 |     console.log(ws);
157 | 
158 |     ws.add(valor2);
159 |     ws.add(valor3);
160 |     console.log(ws);
161 | 
162 |     setInterval(() => console.log(ws), 1000);
163 | 
164 |     setTimeout(() => {
165 |       valor1 = null;
166 |       valor2 = null;
167 |       valor3 = null;
168 |     }, 5000); */
169 | 
170 |     /* const wm = new WeakMap([
171 |       ["nombre", "kEnAi"],
172 |       ["edad", 7],
173 |       ["animal", "perro"],
174 |       [null, "nulo"]
175 |     ]); */
176 | 
177 |     /* const wm = new WeakMap();
178 |     let llave1 = {};
179 |     let llave2 = {};
180 |     let llave3 = {};
181 | 
182 |     wm.set(llave1, 1);
183 |     wm.set(llave2, 2);
184 |     console.log(wm);
185 | 
186 |     console.log(wm.has(llave1));
187 |     console.log(wm.has(llave3));
188 | 
189 |     console.log(wm.get(llave1));
190 |     console.log(wm.get(llave2));
191 |     console.log(wm.get(llave3));
192 | 
193 |     wm.delete(llave2);
194 |     console.log(wm);
195 | 
196 |     wm.set(llave2, 2)
197 |     wm.set(llave3, 3)
198 |     console.log(wm);
199 | 
200 |     setInterval(() => console.log(wm), 1000);
201 | 
202 |     setTimeout(() => {
203 |       llave1 = null;
204 |       llave2 = null;
205 |       llave3 = null;
206 |     }, 5000); */
207 | 
208 | 
209 | 
210 | 
211 | 
212 |     /* **********     Curso JavaScript: 53. Iterables & Iterators - #jonmircha     ********** */
213 |     /* const iterable = [1, 2, 3, 4, 5];
214 |     //const iterable = "Hola Mundo";
215 |     //const iterable = new Set([1, 2, 3, 3, 4, 5]);
216 |     //const iterable = new Map([["nombre", "jon"], ["edad", 35]]);
217 | 
218 |     //Accedemos al iterador del iterable
219 |     const iterador = iterable[Symbol.iterator]();
220 | 
221 |     console.log(iterable);
222 |     console.log(iterador);
223 |     //console.log(iterador.next());
224 |     //console.log(iterador.next());
225 |     //console.log(iterador.next());
226 |     //console.log(iterador.next());
227 |     //console.log(iterador.next());
228 |     //console.log(iterador.next());
229 | 
230 |     let next = iterador.next();
231 | 
232 |     while (!next.done) {
233 |       console.log(next.value);
234 |       next = iterador.next();
235 |     } */
236 | 
237 | 
238 | 
239 | 
240 | 
241 |     /* **********     Curso JavaScript: 54. Generators - #jonmircha     ********** */
242 |     /* function* iterable() {
243 |       yield "hola";
244 |       console.log("Hola consola");
245 |       yield "hola 2";
246 |       console.log("Seguimos con más instrucciones de nuestro código");
247 |       yield "hola 3";
248 |       yield "hola 4";
249 |     }
250 | 
251 |     let iterador = iterable();
252 |     //console.log(iterador.next());
253 |     //console.log(iterador.next());
254 |     //console.log(iterador.next());
255 |     //console.log(iterador.next());
256 |     //console.log(iterador.next());
257 | 
258 |     for (let y of iterador) {
259 |       console.log(y);
260 |     }
261 | 
262 |     const arr = [...iterable()];
263 |     console.log(arr);
264 | 
265 |     function cuadrado(valor) {
266 |       setTimeout(() => {
267 |         return console.log({ valor, resultado: valor * valor })
268 |       }, Math.random() * 1000);
269 |     }
270 | 
271 |     function* generador() {
272 |       console.log("Inicia Generator");
273 |       yield cuadrado(0);
274 |       yield cuadrado(1);
275 |       yield cuadrado(2);
276 |       yield cuadrado(3);
277 |       yield cuadrado(4);
278 |       yield cuadrado(5);
279 |       console.log("Termina Generator");
280 |     }
281 | 
282 |     let gen = generador();
283 | 
284 |     for (let y of gen) {
285 |       console.log(y);
286 |     } */
287 | 
288 | 
289 | 
290 | 
291 | 
292 |     /* **********     Curso JavaScript: 55. Proxies - #jonmircha     ********** */
293 |     /* const persona = {
294 |       nombre: "",
295 |       apellido: "",
296 |       edad: 0
297 |     }
298 | 
299 |     const manejador = {
300 |       set(obj, prop, valor) {
301 |         if (Object.keys(obj).indexOf(prop) === -1) {
302 |           return console.error(`La propiedad "${prop}" no existe en el objeto persona.`);
303 |         }
304 | 
305 |         if (
306 |           (prop === "nombre" || prop === "apellido") &&
307 |           !(/^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$/g.test(valor))
308 |         ) {
309 |           return console.error(`La propiedad "${prop}"" sólo acepta letras y espacios en blanco`);
310 |         }
311 |         obj[prop] = valor;
312 |       }
313 |     }
314 | 
315 |     const jon = new Proxy(persona, manejador);
316 |     jon.nombre = "Jon";
317 |     jon.apellido = "MirCha";
318 |     jon.edad = 35;
319 |     jon.twitter = "@jonmircha";
320 |     console.log(jon);
321 | 
322 |     console.log(persona); */
323 | 
324 | 
325 | 
326 | 
327 | 
328 |     /* **********     Curso JavaScript: 56. Propiedades Dinámicas - #jonmircha     ********** */
329 |     /*     let aleatorio = Math.round(Math.random() * 100 + 5);
330 |         const objUsuarios = {
331 |           propiedad: "Valor",
332 |           [`id_${aleatorio}`]: "Valor Aleatorio"
333 |         };
334 |         console.log(objUsuarios);
335 | 
336 |         const usuarios = ["Jon", "Irma", "Miguel", "Kala", "kEnAi"];
337 |         usuarios.forEach((usuario, index) => objUsuarios[`id_${index}`] = usuario);
338 | 
339 |         console.log(objUsuarios); */
340 |   </script>
341 | </body>
342 | 
343 | </html>
344 | 


--------------------------------------------------------------------------------
/05_this.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>this en JavaScript</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>this en JavaScript</h1>
 12 |   <script>
 13 |     /* **********     Curso JavaScript: 57. this - #jonmircha     ********** */
 14 |     /* console.log(this);
 15 |         console.log(window);
 16 |         console.log(this === window);
 17 | 
 18 |         this.nombre = "Contexto Global";
 19 |         console.log(this.nombre);
 20 | 
 21 |         function imprimir() {
 22 |           console.log(this.nombre);
 23 |         }
 24 | 
 25 |         imprimir();
 26 | 
 27 |         const obj = {
 28 |           nombre: "Contexto Objeto",
 29 |           imprimir: function () {
 30 |             console.log(this.nombre);
 31 |           }
 32 |         }
 33 | 
 34 |         obj.imprimir();
 35 | 
 36 |         const obj2 = {
 37 |           nombre: "Contexto Objeto 2",
 38 |           imprimir
 39 |         }
 40 | 
 41 |         obj2.imprimir();
 42 | 
 43 |         const obj3 = {
 44 |           nombre: "Contexto Objeto 3",
 45 |           imprimir: () => {
 46 |             console.log(this.nombre);
 47 |           }
 48 |         }
 49 | 
 50 |         obj3.imprimir();
 51 | 
 52 |         function Persona(nombre) {
 53 |           const that = this;
 54 |           //this.nombre = nombre;
 55 |           that.nombre = nombre;
 56 | 
 57 |           //return console.log(this.nombre);
 58 | 
 59 |           //return function () {
 60 |           //console.log(this.nombre);
 61 |           //}
 62 | 
 63 |           //return () => console.log(this.nombre);
 64 | 
 65 |           return function () {
 66 |             console.log(that.nombre);
 67 |           }
 68 |         }
 69 | 
 70 |         let jon = new Persona("Jon");
 71 |         jon();*/
 72 | 
 73 | 
 74 | 
 75 | 
 76 | 
 77 |     /* **********     Curso JavaScript: 58. call, apply, bind - #jonmircha     ********** */
 78 |     /* console.log(this);
 79 |     this.lugar = "Contexto Global";
 80 | 
 81 |     function saludar(saludo, aQuien) {
 82 |       console.log(`${saludo} ${aQuien} desde el ${this.lugar}`);
 83 |     }
 84 | 
 85 |     saludar("Hola", "kEnAi");
 86 | 
 87 |     const obj = {
 88 |       lugar: "Contexto Objeto"
 89 |     }
 90 | 
 91 |     saludar.call(obj, "Hola", "Jon");
 92 |     saludar.call(null, "Hola", "Jon");
 93 |     saludar.call(this, "Hola", "Jon");
 94 |     saludar.apply(obj, ["Adios", "MirCha"]);
 95 |     saludar.apply(null, ["Adios", "MirCha"]);
 96 |     saludar.apply(this, ["Adios", "MirCha"]);
 97 | 
 98 |     this.nombre = "Window";
 99 | 
100 |     const persona = {
101 |       nombre: "Jon",
102 |       saludar: function () {
103 |         console.log(`Hola ${this.nombre}`)
104 |       }
105 |     }
106 | 
107 |     persona.saludar();
108 | 
109 |     const otraPersona = {
110 |       saludar: persona.saludar.bind(this)
111 |     }
112 | 
113 |     otraPersona.saludar(); */
114 |   </script>
115 | </body>
116 | 
117 | </html>
118 | 


--------------------------------------------------------------------------------
/06_json.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>JSON JavaScript Object Notation</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>JSON JavaScript Object Notation</h1>
12 |   <script>
13 |     /* **********     Curso JavaScript: 59. JSON - #jonmircha     ********** */
14 |     /* https://www.json.org/json-es.html */
15 |     /* https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON */
16 |     const json = {
17 |       cadena: "Jon",
18 |       numero: 35,
19 |       booleano: true,
20 |       arreglo: ["correr", "programar", "cocinar"],
21 |       objeto: {
22 |         twitter: "@jonmircha",
23 |         email: "jonmircha@gmail.com"
24 |       },
25 |       nulo: null
26 |     }
27 | 
28 |     console.log(json);
29 | 
30 |     console.log(JSON);
31 | 
32 |     console.log("*** JSON.parse ***");
33 |     console.log(JSON.parse("{}"));
34 |     console.log(JSON.parse("[1,2,3]"));
35 |     console.log(JSON.parse("true"));
36 |     console.log(JSON.parse("false"));
37 |     console.log(JSON.parse("19"));
38 |     console.log(JSON.parse('"Hola Mundo"'));
39 |     console.log(JSON.parse("null"));
40 |     //console.log(JSON.parse("undefined"));
41 |     console.log(JSON.parse('{ "x": 2, "y": 3 }'));
42 | 
43 |     console.log("*** JSON.stringify ***");
44 |     console.log(JSON.stringify({}));
45 |     console.log(JSON.stringify([1, 2, 3]));
46 |     console.log(JSON.stringify(true));
47 |     console.log(JSON.stringify(false));
48 |     console.log(JSON.stringify(19));
49 |     console.log(JSON.stringify("Hola Mundo"));
50 |     console.log(JSON.stringify(null));
51 |     console.log(JSON.stringify(undefined));
52 |     console.log(JSON.stringify({ x: 2, y: 3 }));
53 | 
54 |     console.log("*** Ejemplo JSON ***");
55 |     console.log(JSON.stringify(json));
56 |     console.log(JSON.parse('{"cadena": "Jon","numero": 35, "booleano": true,"arreglo": ["correr","programar","cocinar"],"objeto": {"twitter": "@jonmircha","email": "jonmircha@gmail.com"},"nulo": null}'));
57 |   </script>
58 | </body>
59 | 
60 | </html>
61 | 


--------------------------------------------------------------------------------
/07_dom.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>WEB APIs</title>
  8 |   <style>
  9 |     :root {
 10 |       --yellow-color: #F7DF1E;
 11 |       --dark-color: #222;
 12 |     }
 13 | 
 14 |     .cards {
 15 |       border: thin solid var(--dark-color);
 16 |       padding: 1rem;
 17 |     }
 18 | 
 19 |     .card {
 20 |       display: inline-block;
 21 |       background-color: var(--dark-color);
 22 |       color: var(--yellow-color);
 23 |     }
 24 | 
 25 |     .card figcaption {
 26 |       padding: 1rem;
 27 |     }
 28 | 
 29 |     .rotate-45 {
 30 |       transform: rotate(45deg);
 31 |     }
 32 | 
 33 |     .rotate-135 {
 34 |       transform: rotate(135deg);
 35 |     }
 36 | 
 37 |     .opacity-80 {
 38 |       opacity: .8;
 39 |     }
 40 | 
 41 |     .sepia {
 42 |       filter: sepia(1);
 43 |     }
 44 | 
 45 |     .eventos-flujo div {
 46 |       padding: 4rem;
 47 |       font-size: 2rem;
 48 |       text-align: center;
 49 |     }
 50 | 
 51 |     .uno {
 52 |       background-color: yellow;
 53 |     }
 54 | 
 55 |     .dos {
 56 |       background-color: gold;
 57 |     }
 58 | 
 59 |     .tres {
 60 |       background-color: lightyellow;
 61 |     }
 62 |   </style>
 63 | </head>
 64 | 
 65 | <body>
 66 |   <h1>WEB APIs</h1>
 67 |   <h2>DOM: Document Object Model</h2>
 68 |   <h2>BOM: Browser Object Model</h2>
 69 |   <h2>CSSOM: CSS Object Model</h2>
 70 |   <h2>WEB APIs</h2>
 71 |   <ul>
 72 |     <li>Eventos</li>
 73 |     <li>Forms</li>
 74 |     <li>AJAX - Fetch</li>
 75 |     <li>History</li>
 76 |     <li>Web Storage</li>
 77 |     <li>Geolocation</li>
 78 |     <li>Drag & Drop</li>
 79 |     <li>Indexed DB</li>
 80 |     <li>Canvas</li>
 81 |     <li>MatchMedia</li>
 82 |     <li>etc..</li>
 83 |   </ul>
 84 |   <br>
 85 |   <hr>
 86 |   <br>
 87 |   <h3>Manejo del DOM</h3>
 88 |   <p id="que-es">
 89 |     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, laboriosam cum quod, perferendis eveniet pariatur
 90 |     facere doloribus adipisci consequatur totam est dolorum vero nisi voluptate porro explicabo quo necessitatibus
 91 |     blanditiis.
 92 |   </p>
 93 |   <nav id="menu">
 94 |     <ul>
 95 |       <li><a href="#">Sección 1</a></li>
 96 |       <li><a href="#">Sección 2</a></li>
 97 |       <li><a href="#">Sección 3</a></li>
 98 |       <li><a href="#">Sección 4</a></li>
 99 |       <li><a href="#">Sección 5</a></li>
100 |     </ul>
101 |   </nav>
102 |   <input type="text" name="nombre" placeholder="Nombre">
103 |   <a class="link-dom" data-id="1" data-description="Document Object Model" href="dom.html"
104 |     style="background-color: #F7DF1E; color: #222;">DOM</a>
105 |   <section class="cards">
106 |     <figure class="card">
107 |       <img src="https://placeimg.com/200/200/tech" alt="Tech">
108 |       <figcaption>Tech</figcaption>
109 |     </figure>
110 |     <figure class="card">
111 |       <img src="https://placeimg.com/200/200/animals" alt="Animals">
112 |       <figcaption>Animals</figcaption>
113 |     </figure>
114 |     <figure class="card">
115 |       <img src="https://placeimg.com/200/200/arch" alt="Architecture">
116 |       <figcaption>Architecture</figcaption>
117 |     </figure>
118 |     <figure class="card">
119 |       <img src="https://placeimg.com/200/200/people" alt="People">
120 |       <figcaption>People</figcaption>
121 |     </figure>
122 |     <figure class="card">
123 |       <img src="https://placeimg.com/200/200/nature" alt="Nature">
124 |       <figcaption>Nature</figcaption>
125 |     </figure>
126 |   </section>
127 |   <template id="template-card">
128 |     <figure class="card">
129 |       <img>
130 |       <figcaption></figcaption>
131 |     </figure>
132 |   </template>
133 |   <h3>Eventos en JavaScript</h3>
134 |   <h4>Manejadores de Eventos</h4>
135 |   <button onclick="holaMundo()">Evento con atributo HTML</button>
136 |   <br><br>
137 |   <button id="evento-semantico">Evento con manejador semántico</button>
138 |   <br><br>
139 |   <button id="evento-multiple">Evento con manejador múltiple</button>
140 |   <br><br>
141 |   <button id="evento-remover">Removiendo eventos con manejadores múltiples</button>
142 |   <h4>Flujo de Eventos</h4>
143 |   <section class="eventos-flujo">
144 |     <div class="uno">
145 |       1
146 |       <div class="dos">
147 |         2
148 |         <div class="tres">
149 |           3
150 |           <br>
151 |           <a href="https://jonmircha.com/" target="_blank" rel="noopener">jonmircha.com</a>
152 |         </div>
153 |       </div>
154 |     </div>
155 |   </section>
156 |   <h3 style="width: 2000px;">Manejo del BOM</h3>
157 |   <button id="abrir-ventana">Abrir Ventana</button>
158 |   <br><br>
159 |   <button id="cerrar-ventana">Cerrar Ventana</button>
160 |   <br><br>
161 |   <button id="imprimir-ventana">Imprimir Ventana</button>
162 |   <br><br>
163 |   <script src="js/dom.js"></script>
164 | </body>
165 | 
166 | </html>
167 | 


--------------------------------------------------------------------------------
/08_dom-ejercicios.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es" data-dark>
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Ejercicios del DOM</title>
  8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.1.3/hamburgers.min.css">
  9 |   <link rel="stylesheet" href="css/dom-ejercicios.css">
 10 | </head>
 11 | 
 12 | <body>
 13 |   <header class="header">
 14 |     <h1>Ejercicios del DOM</h1>
 15 |   </header>
 16 |   <button class="panel-btn hamburger hamburger--vortex" type="button">
 17 |     <span class="hamburger-box">
 18 |       <span class="hamburger-inner"></span>
 19 |     </span>
 20 |   </button>
 21 |   <aside class="panel">
 22 |     <nav class="menu">
 23 |       <a href="#seccion1" data-scroll-spy>Reloj Digital y Alarma Sonora</a>
 24 |       <a href="#seccion2" data-scroll-spy>Eventos del Teclado</a>
 25 |       <a href="#seccion3" data-scroll-spy>Cuenta Regresiva</a>
 26 |       <a href="#seccion4" data-scroll-spy>Responsive con JavaScript</a>
 27 |       <a href="#seccion5" data-scroll-spy>Responsive Tester</a>
 28 |       <a href="#seccion6" data-scroll-spy>Detección de Dispositivos (User Agent)</a>
 29 |       <a href="#seccion7" data-scroll-spy>Detección de la conexión</a>
 30 |       <a href="#seccion8" data-scroll-spy>Detección de la cámara web</a>
 31 |       <a href="#seccion9" data-scroll-spy>Geolocalización</a>
 32 |       <a href="#seccion10" data-scroll-spy>Filtros de Búsquedas</a>
 33 |       <a href="#seccion11" data-scroll-spy>Sorteo Digital</a>
 34 |       <a href="#seccion12" data-scroll-spy>Responsive Slider</a>
 35 |       <a href="#seccion13" data-scroll-spy>Video Inteligente</a>
 36 |       <a href="#seccion14" data-scroll-spy>Validaciones de Formulario</a>
 37 |       <a href="#seccion15" data-scroll-spy>Narrador</a>
 38 |     </nav>
 39 |   </aside>
 40 |   <main>
 41 |     <section id="seccion1" class="section" data-scroll-spy>
 42 |       <h2>Reloj Digital y Alarma Sonora</h2>
 43 |       <div id="reloj"></div>
 44 |       <div class="flex-row-center">
 45 |         <button id="activar-reloj">Iniciar Reloj</button>
 46 |         <button id="desactivar-reloj">Detener Reloj</button>
 47 |         <button id="activar-alarma">Iniciar Alarma</button>
 48 |         <button id="desactivar-alarma">Detener Alarma</button>
 49 |       </div>
 50 |     </section>
 51 |     <section id="seccion2" class="section" data-scroll-spy>
 52 |       <h2>Eventos del Teclado</h2>
 53 |       <article class="stage">
 54 |         <div class="ball"></div>
 55 |       </article>
 56 |     </section>
 57 |     <section id="seccion3" class="section" data-scroll-spy>
 58 |       <h2>Cuenta Regresiva</h2>
 59 |       <div id="countdown"></div>
 60 |     </section>
 61 |     <section id="seccion4" class="section" data-scroll-spy>
 62 |       <h2>Responsive con JavaScript</h2>
 63 |       <div id="youtube"></div>
 64 |       <div id="gmaps"></div>
 65 |     </section>
 66 |     <section id="seccion5" class="section" data-scroll-spy>
 67 |       <h2>Responsive Tester</h2>
 68 |       <form id="responsive-tester">
 69 |         <input name="direccion" type="url" placeholder="URL" required>
 70 |         <br>
 71 |         <input name="ancho" type="text" placeholder="Ancho" required>
 72 |         <br>
 73 |         <input name="alto" type="text" placeholder="Alto" required>
 74 |         <br>
 75 |         <input name="probar" type="submit" value="Probar">
 76 |         <input name="cerrar" type="button" value="Cerrar">
 77 |       </form>
 78 |     </section>
 79 |     <section id="seccion6" class="section" data-scroll-spy>
 80 |       <h2>Detección de Dispositivos<br>(User Agent)</h2>
 81 |       <div id="user-device"></div>
 82 |     </section>
 83 |     <section id="seccion7" class="section" data-scroll-spy>
 84 |       <h2>Detección de la conexión</h2>
 85 |     </section>
 86 |     <section id="seccion8" class="section" data-scroll-spy>
 87 |       <h2>Detección de la cámara web</h2>
 88 |       <video id="webcam"></video>
 89 |     </section>
 90 |     <section id="seccion9" class="section" data-scroll-spy>
 91 |       <h2>Geolocalización</h2>
 92 |       <div id="geolocation"></div>
 93 |     </section>
 94 |     <section id="seccion10" class="section" data-scroll-spy>
 95 |       <h2>Filtros de Búsquedas</h2>
 96 |       <input type="search" placeholder="Buscar..." class="card-filter">
 97 |       <article class="cards">
 98 |         <figure class="card">
 99 |           <img src="https://placeimg.com/200/200/nature" alt="Nature">
100 |           <figcaption>Nature</figcaption>
101 |         </figure>
102 |         <figure class="card">
103 |           <img src="https://placeimg.com/200/200/any" alt="Any">
104 |           <figcaption>Any</figcaption>
105 |         </figure>
106 |         <figure class="card">
107 |           <img src="https://placeimg.com/200/200/tech" alt="Tech">
108 |           <figcaption>Tech</figcaption>
109 |         </figure>
110 |         <figure class="card">
111 |           <img src="https://placeimg.com/200/200/animals" alt="Animals">
112 |           <figcaption>Animals</figcaption>
113 |         </figure>
114 |         <figure class="card">
115 |           <img src="https://placeimg.com/200/200/people" alt="People">
116 |           <figcaption>People</figcaption>
117 |         </figure>
118 |         <figure class="card">
119 |           <img src="https://placeimg.com/200/200/arch" alt="Architecture">
120 |           <figcaption>Architecture</figcaption>
121 |         </figure>
122 |       </article>
123 |     </section>
124 |     <section id="seccion11" class="section" data-scroll-spy>
125 |       <h2>Sorteo Digital</h2>
126 |       <ul class="players">
127 |         <li class="player">JavaScript</li>
128 |         <li class="player">PHP</li>
129 |         <li class="player">JAVA</li>
130 |         <li class="player">C</li>
131 |         <li class="player">Python</li>
132 |         <li class="player">Ruby</li>
133 |         <li class="player">Go</li>
134 |         <li class="player">Visual Basic</li>
135 |         <li class="player">Rust</li>
136 |         <li class="player">Perl</li>
137 |       </ul>
138 |       <button id="winner-btn">Obtener Ganador</button>
139 |     </section>
140 |     <section id="seccion12" class="section" data-scroll-spy>
141 |       <h2>Responsive Slider</h2>
142 |       <div class="slider">
143 |         <div class="slider-slides">
144 |           <div class="slider-slide active">
145 |             <img src="https://placeimg.com/400/400/animals" alt="animals">
146 |           </div>
147 |           <div class="slider-slide">
148 |             <h4>2</h4>
149 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, quidem voluptate aperiam quasi animi,
150 |               ex earum iure tenetur ad corporis saepe exercitationem ab doloribus tempore consequuntur. Minus nostrum
151 |               blanditiis dolore.</p>
152 |           </div>
153 |           <div class="slider-slide">
154 |             <img src="https://placeimg.com/400/400/nature" alt="nature"></div>
155 |           <div class="slider-slide">
156 |             <h4>4</h4>
157 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus perferendis totam enim quam vel veniam
158 |               impedit rem quod laboriosam, maxime illo asperiores, illum eius. Nam libero quas ipsum et esse.</p>
159 |           </div>
160 |         </div>
161 |         <div class="slider-btns">
162 |           <a class="prev" href="#">&laquo;</a>
163 |           <a class="next" href="#">&raquo;</a></div>
164 |       </div>
165 |     </section>
166 |     <section id="seccion13" class="section" data-scroll-spy>
167 |       <h2>Video Inteligente</h2>
168 |       <video src="assets/video.mp4" muted controls loop data-smart-video></video>
169 |       <br>
170 |       <br>
171 |       <br>
172 |       <br>
173 |       <br>
174 |       <br>
175 |       <br>
176 |       <br>
177 |       <br>
178 |       <br>
179 |       <br>
180 |       <br>
181 |       <br>
182 |       <br>
183 |       <br>
184 |       <br>
185 |       <br>
186 |       <br>
187 |       <br>
188 |       <br>
189 |       <video src="assets/video.mp4" muted controls loop data-smart-video></video>
190 |     </section>
191 |     <section id="seccion14" class="section" data-scroll-spy>
192 |       <h2>Validaciones de Formulario</h2>
193 |       <form class="contact-form" action="https://formsubmit.co/your@email.com" method="POST" target="_blank">
194 |         <legend>Envíanos tus comentarios</legend>
195 |         <input type="text" name="name" placeholder="Escribe tu nombre"
196 |           title="Nombre sólo acepta letras y espacios en blanco" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$" required>
197 |         <input type="email" name="email" placeholder="Escribe tu email" title="Email incorrecto"
198 |           pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$" required>
199 |         <input type="text" name="subject" placeholder="Asunto a tratar" title="El Asunto es requerido" required>
200 |         <textarea name="comments" rows="5" placeholder="Escribe tus comentarios"
201 |           title="Tu comentario no debe exceder los 255 caracteres" data-pattern="^.{1,255}$" required></textarea>
202 |         <input type="submit" value="Enviar">
203 |         <div class="contact-form-loader none">
204 |           <img src="assets/loader.svg" alt="Cargando">
205 |         </div>
206 |         <div class="contact-form-response none">
207 |           <p>Los datos han sido enviados</p>
208 |         </div>
209 |       </form>
210 |     </section>
211 |     <section id="seccion15" class="section" data-scroll-spy>
212 |       <h2>Narrador</h2>
213 |       <select id="speech-select">
214 |         <option value="">--- Elige una Voz ---</option>
215 |       </select>
216 |       <br><br>
217 |       <textarea id="speech-text" placeholder="Ingresa texto para leerlo..." cols="50" rows="5"></textarea>
218 |       <br><br>
219 |       <button id="speech-btn">Leer Texto</button>
220 |     </section>
221 |   </main>
222 |   <button class="scroll-top-btn hidden">&#11014;</button>
223 |   <button class="dark-theme-btn">🌙</button>
224 |   <script src="js/index_dom.js" type="module"></script>
225 | </body>
226 | 
227 | </html>
228 | 


--------------------------------------------------------------------------------
/09_ajax.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>AJAX: Asynchronous JavaScript & XML</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>AJAX: Asynchronous JavaScript & XML</h1>
 12 |   <p>
 13 |     <b><i>AJAX</i></b> significa <b><i>Asynchronous JavaScript And XML</i></b>. En pocas palabras, es el uso del objeto
 14 |     <b><i>XMLHttpRequest</i></b> para comunicarse con los servidores.
 15 |   </p>
 16 |   <p>
 17 |     Puede enviar y recibir información en varios formatos, incluidos
 18 |     <b><i>JSON</i></b>, <b><i>XML</i></b>, <b><i>HTML</i></b> y archivos de texto.
 19 |   </p>
 20 |   <p>
 21 |     El atractivo de <b><i>AJAX</i></b> es
 22 |     su naturaleza "<i>asíncrona</i>", lo que significa que puede comunicarse con el servidor, intercambiar datos y
 23 |     actualizar la página sin tener que recargar el navegador.
 24 |   </p>
 25 |   <img src="assets/ajax.png" alt="AJAX">
 26 |   <h2>Métodos Nativos</h2>
 27 |   <ul>
 28 |     <li>
 29 |       <h3><a href="https://developer.mozilla.org/en-US/docs/Archive/Web/JavaScript/Microsoft_Extensions/ActiveXObject"
 30 |           target="_blank" rel="noopener">ActiveXObject</a> <small>(IE8 e inferiores)</small></h3>
 31 |     </li>
 32 |     <li>
 33 |       <h3><a href="https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest" target="_blank"
 34 |           rel="noopener">XMLHttpRequest</a></h3>
 35 |     </li>
 36 |     <li>
 37 |       <h3><a href="https://developer.mozilla.org/es/docs/Web/API/Fetch_API" target="_blank" rel="noopener">API Fetch</a>
 38 |       </h3>
 39 |     </li>
 40 |   </ul>
 41 |   <h2>Librerías Externas</h2>
 42 |   <ul>
 43 |     <li>
 44 |       <h3><a href="https://api.jquery.com/category/ajax/" target="_blank" rel="noopener">jQuery.ajax()</a></h3>
 45 |     </li>
 46 |     <li>
 47 |       <h3><a href="https://github.com/axios/axios" target="_blank" rel="noopener">Axios</a></h3>
 48 |     </li>
 49 |     <li>
 50 |       <h3>etc.</h3>
 51 |     </li>
 52 |   </ul>
 53 |   <p>
 54 |     Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen:
 55 |   </p>
 56 |   <ul>
 57 |     <li>
 58 |       <b>HTML y CSS</b>, para crear una presentación basada en estándares.</li>
 59 |     <li>
 60 |       <b>DOM</b>, para la interacción y manipulación dinámica de la presentación.</li>
 61 |     <li>
 62 |       <b>HTML, XML y JSON</b>, para el intercambio y la manipulación de información.</li>
 63 |     <li>
 64 |       <b>XMLHttpRequest</b> o <b>Fetch</b>, para el intercambio asíncrono de información.</li>
 65 |     <li>
 66 |       <b>JavaScript</b>, para unir todas las demás tecnologías.</li>
 67 |     <li>
 68 |       <b>Estado de la Petición</b>
 69 |       <br>
 70 |       <ul>
 71 |         <li>READY_STATE_UNINITIALIZED = 0</li>
 72 |         <li>READY_STATE_LOADING = 1</li>
 73 |         <li>READY_STATE_LOADED = 2</li>
 74 |         <li>READY_STATE_INTERACTIVE = 3</li>
 75 |         <li>READY_STATE_COMPLETE = 4</li>
 76 |       </ul>
 77 |     </li>
 78 |     <li>
 79 |       <b><a href="https://developer.mozilla.org/es/docs/Web/HTTP/Status" target="_blank" rel="noopener">Códigos de
 80 |           estado de respuesta HTTP</a></b>
 81 |     </li>
 82 |   </ul>
 83 |   <h2>Objeto XMLHttpRequest</h2>
 84 |   <ol id="xhr"></ol>
 85 |   <h2>API Fetch</h2>
 86 |   <ol id="fetch"></ol>
 87 |   <h2>API Fetch + Async-Await</h2>
 88 |   <ol id="fetch-async"></ol>
 89 |   <h2>Axios</h2>
 90 |   <ol id="axios"></ol>
 91 |   <h2>Axios + Async-Await</h2>
 92 |   <ol id="axios-async"></ol>
 93 |   <br>
 94 |   <br>
 95 |   <br>
 96 |   <br>
 97 |   <br>
 98 |   <br>
 99 |   <br>
100 |   <br>
101 |   <br>
102 |   <br>
103 |   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
104 |   <script src="js/ajax.js"></script>
105 | </body>
106 | 
107 | </html>
108 | 


--------------------------------------------------------------------------------
/10_crud_ajax.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>CRUD API REST AJAX</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>CRUD API REST AJAX</h1>
 12 |   <section class="crud">
 13 |     <article>
 14 |       <h2 class="crud-title">Agregar Santo</h2>
 15 |       <form class="crud-form">
 16 |         <input type="text" name="nombre" placeholder="nombre" required>
 17 |         <br>
 18 |         <input type="text" name="constelacion" placeholder="constelación" required>
 19 |         <br>
 20 |         <input type="submit" value="Enviar">
 21 |         <input type="hidden" name="id">
 22 |       </form>
 23 |     </article>
 24 |     <article>
 25 |       <h2>Ver Santos</h2>
 26 |       <table class="crud-table">
 27 |         <thead>
 28 |           <tr>
 29 |             <th>Nombre</th>
 30 |             <th>Constelación</th>
 31 |             <th>Acciones</th>
 32 |           </tr>
 33 |         </thead>
 34 |         <tbody></tbody>
 35 |       </table>
 36 |     </article>
 37 |   </section>
 38 |   <template id="crud-template">
 39 |     <tr>
 40 |       <td class="name"></td>
 41 |       <td class="constellation"></td>
 42 |       <td>
 43 |         <button class="edit">Editar</button>
 44 |         <button class="delete">Eliminar</button>
 45 |       </td>
 46 |     </tr>
 47 |   </template>
 48 |   <script>
 49 |     /* **********     Curso JavaScript: 115. APIs REST: CRUD con AJAX (1/2) - #jonmircha     ********** */
 50 |     /* **********     Curso JavaScript: 116. APIs REST: CRUD con AJAX (2/2) - #jonmircha     ********** */
 51 |     const d = document,
 52 |       $table = d.querySelector(".crud-table"),
 53 |       $form = d.querySelector(".crud-form"),
 54 |       $title = d.querySelector(".crud-title"),
 55 |       $template = d.getElementById("crud-template").content,
 56 |       $fragment = d.createDocumentFragment();
 57 | 
 58 |     const ajax = (options) => {
 59 |       let { url, method, success, error, data } = options;
 60 |       const xhr = new XMLHttpRequest();
 61 | 
 62 |       xhr.addEventListener("readystatechange", e => {
 63 |         if (xhr.readyState !== 4) return;
 64 | 
 65 |         if (xhr.status >= 200 && xhr.status < 300) {
 66 |           let json = JSON.parse(xhr.responseText);
 67 |           success(json);
 68 |         } else {
 69 |           let message = xhr.statusText || "Ocurrió un error";
 70 |           error(`Error ${xhr.status}: ${message}`);
 71 |         }
 72 |       });
 73 | 
 74 |       xhr.open(method || "GET", url);
 75 |       xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
 76 |       xhr.send(JSON.stringify(data));
 77 |     }
 78 | 
 79 |     const getAll = () => {
 80 |       ajax({
 81 |         url: "http://localhost:5555/santos",
 82 |         success: (res) => {
 83 |           console.log(res);
 84 | 
 85 |           res.forEach(el => {
 86 |             $template.querySelector(".name").textContent = el.nombre;
 87 |             $template.querySelector(".constellation").textContent = el.constelacion;
 88 |             $template.querySelector(".edit").dataset.id = el.id;
 89 |             $template.querySelector(".edit").dataset.name = el.nombre;
 90 |             $template.querySelector(".edit").dataset.constellation = el.constelacion;
 91 |             $template.querySelector(".delete").dataset.id = el.id;
 92 | 
 93 |             let $clone = d.importNode($template, true);
 94 |             $fragment.appendChild($clone);
 95 |           });
 96 | 
 97 |           $table.querySelector("tbody").appendChild($fragment);
 98 |         },
 99 |         error: (err) => {
100 |           console.log(err);
101 |           $table.insertAdjacentHTML("afterend", `<p><b>${err}</b></p>`);
102 |         }
103 |       })
104 |     }
105 | 
106 |     d.addEventListener("DOMContentLoaded", getAll);
107 | 
108 |     d.addEventListener("submit", e => {
109 |       if (e.target === $form) {
110 |         e.preventDefault();
111 | 
112 |         if (!e.target.id.value) {
113 |           //Create - POST
114 |           ajax({
115 |             url: "http://localhost:5555/santos",
116 |             method: "POST",
117 |             success: (res) => location.reload(),
118 |             error: (err) => $form.insertAdjacentHTML("afterend", `<p><b>${err}</b></p>`),
119 |             data: {
120 |               nombre: e.target.nombre.value,
121 |               constelacion: e.target.constelacion.value
122 |             }
123 |           });
124 |         } else {
125 |           //Update - PUT
126 |           ajax({
127 |             url: `http://localhost:5555/santos/${e.target.id.value}`,
128 |             method: "PUT",
129 |             success: (res) => location.reload(),
130 |             error: (err) => $form.insertAdjacentHTML("afterend", `<p><b>${err}</b></p>`),
131 |             data: {
132 |               nombre: e.target.nombre.value,
133 |               constelacion: e.target.constelacion.value
134 |             }
135 |           });
136 |         }
137 |       }
138 |     });
139 | 
140 |     d.addEventListener("click", e => {
141 |       if (e.target.matches(".edit")) {
142 |         $title.textContent = "Editar Santo";
143 |         $form.nombre.value = e.target.dataset.name;
144 |         $form.constelacion.value = e.target.dataset.constellation;
145 |         $form.id.value = e.target.dataset.id;
146 |       }
147 | 
148 |       if (e.target.matches(".delete")) {
149 |         let isDelete = confirm(`¿Estás seguro de eliminar el id ${e.target.dataset.id}?`);
150 | 
151 |         if (isDelete) {
152 |           //Delete - DELETE
153 |           ajax({
154 |             url: `http://localhost:5555/santos/${e.target.dataset.id}`,
155 |             method: "DELETE",
156 |             success: (res) => location.reload(),
157 |             error: (err) => alert(err)
158 |           });
159 |         }
160 |       }
161 |     })
162 |   </script>
163 | </body>
164 | 
165 | </html>
166 | 


--------------------------------------------------------------------------------
/11_crud_fetch.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>CRUD API REST FETCH</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>CRUD API REST FETCH</h1>
 12 |   <section class="crud">
 13 |     <article>
 14 |       <h2 class="crud-title">Agregar Santo</h2>
 15 |       <form class="crud-form">
 16 |         <input type="text" name="nombre" placeholder="nombre" required>
 17 |         <br>
 18 |         <input type="text" name="constelacion" placeholder="constelación" required>
 19 |         <br>
 20 |         <input type="submit" value="Enviar">
 21 |         <input type="hidden" name="id">
 22 |       </form>
 23 |     </article>
 24 |     <article>
 25 |       <h2>Ver Santos</h2>
 26 |       <table class="crud-table">
 27 |         <thead>
 28 |           <tr>
 29 |             <th>Nombre</th>
 30 |             <th>Constelación</th>
 31 |             <th>Acciones</th>
 32 |           </tr>
 33 |         </thead>
 34 |         <tbody></tbody>
 35 |       </table>
 36 |     </article>
 37 |   </section>
 38 |   <template id="crud-template">
 39 |     <tr>
 40 |       <td class="name"></td>
 41 |       <td class="constellation"></td>
 42 |       <td>
 43 |         <button class="edit">Editar</button>
 44 |         <button class="delete">Eliminar</button>
 45 |       </td>
 46 |     </tr>
 47 |   </template>
 48 |   <script>
 49 |     /* **********     Curso JavaScript: 117. APIs REST: CRUD con Fetch (1/2) - #jonmircha     ********** */
 50 |     /* **********     Curso JavaScript: 118. APIs REST: CRUD con Fetch (2/2) - #jonmircha     ********** */
 51 |     const d = document,
 52 |       $table = d.querySelector(".crud-table"),
 53 |       $form = d.querySelector(".crud-form"),
 54 |       $title = d.querySelector(".crud-title"),
 55 |       $template = d.getElementById("crud-template").content,
 56 |       $fragment = d.createDocumentFragment();
 57 | 
 58 |     const getAll = async () => {
 59 |       try {
 60 |         let res = await fetch("http://localhost:5555/santos"),
 61 |           json = await res.json();
 62 | 
 63 |         if (!res.ok) throw { status: res.status, statusText: res.statusText };
 64 | 
 65 |         console.log(json);
 66 |         json.forEach(el => {
 67 |           $template.querySelector(".name").textContent = el.nombre;
 68 |           $template.querySelector(".constellation").textContent = el.constelacion;
 69 |           $template.querySelector(".edit").dataset.id = el.id;
 70 |           $template.querySelector(".edit").dataset.name = el.nombre;
 71 |           $template.querySelector(".edit").dataset.constellation = el.constelacion;
 72 |           $template.querySelector(".delete").dataset.id = el.id;
 73 | 
 74 |           let $clone = d.importNode($template, true);
 75 |           $fragment.appendChild($clone);
 76 |         });
 77 | 
 78 |         $table.querySelector("tbody").appendChild($fragment);
 79 |       } catch (err) {
 80 |         let message = err.statusText || "Ocurrió un error";
 81 |         $table.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
 82 |       }
 83 |     }
 84 | 
 85 |     d.addEventListener("DOMContentLoaded", getAll);
 86 | 
 87 |     d.addEventListener("submit", async e => {
 88 |       if (e.target === $form) {
 89 |         e.preventDefault();
 90 | 
 91 |         if (!e.target.id.value) {
 92 |           //Create - POST
 93 |           try {
 94 |             let options = {
 95 |               method: "POST",
 96 |               headers: {
 97 |                 "Content-type": "application/json; charset=utf-8"
 98 |               },
 99 |               body: JSON.stringify({
100 |                 nombre: e.target.nombre.value,
101 |                 constelacion: e.target.constelacion.value
102 |               })
103 |             },
104 |               res = await fetch("http://localhost:5555/santos", options),
105 |               json = await res.json();
106 | 
107 |             if (!res.ok) throw { status: res.status, statusText: res.statusText };
108 | 
109 |             location.reload();
110 |           } catch (err) {
111 |             let message = err.statusText || "Ocurrió un error";
112 |             $form.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
113 |           }
114 |         } else {
115 |           //Update - PUT
116 |           try {
117 |             let options = {
118 |               method: "PUT",
119 |               headers: {
120 |                 "Content-type": "application/json; charset=utf-8"
121 |               },
122 |               body: JSON.stringify({
123 |                 nombre: e.target.nombre.value,
124 |                 constelacion: e.target.constelacion.value
125 |               })
126 |             },
127 |               res = await fetch(`http://localhost:5555/santos/${e.target.id.value}`, options),
128 |               json = await res.json();
129 | 
130 |             if (!res.ok) throw { status: res.status, statusText: res.statusText };
131 | 
132 |             location.reload();
133 |           } catch (err) {
134 |             let message = err.statusText || "Ocurrió un error";
135 |             $form.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
136 |           }
137 |         }
138 |       }
139 |     });
140 | 
141 |     d.addEventListener("click", async e => {
142 |       if (e.target.matches(".edit")) {
143 |         $title.textContent = "Editar Santo";
144 |         $form.nombre.value = e.target.dataset.name;
145 |         $form.constelacion.value = e.target.dataset.constellation;
146 |         $form.id.value = e.target.dataset.id;
147 |       }
148 | 
149 |       if (e.target.matches(".delete")) {
150 |         let isDelete = confirm(`¿Estás seguro de eliminar el id ${e.target.dataset.id}?`);
151 | 
152 |         if (isDelete) {
153 |           //Delete - DELETE
154 |           try {
155 |             let options = {
156 |               method: "DELETE",
157 |               headers: {
158 |                 "Content-type": "application/json; charset=utf-8"
159 |               }
160 |             },
161 |               res = await fetch(`http://localhost:5555/santos/${e.target.dataset.id}`, options),
162 |               json = await res.json();
163 | 
164 |             if (!res.ok) throw { status: res.status, statusText: res.statusText };
165 | 
166 |             location.reload();
167 |           } catch (err) {
168 |             let message = err.statusText || "Ocurrió un error";
169 |             alert(`Error ${err.status}: ${message}`);
170 |           }
171 |         }
172 |       }
173 |     })
174 |   </script>
175 | </body>
176 | 
177 | </html>
178 | 


--------------------------------------------------------------------------------
/12_crud_axios.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>CRUD API REST AXIOS</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>CRUD API REST AXIOS</h1>
 12 |   <section class="crud">
 13 |     <article>
 14 |       <h2 class="crud-title">Agregar Santo</h2>
 15 |       <form class="crud-form">
 16 |         <input type="text" name="nombre" placeholder="nombre" required>
 17 |         <br>
 18 |         <input type="text" name="constelacion" placeholder="constelación" required>
 19 |         <br>
 20 |         <input type="submit" value="Enviar">
 21 |         <input type="hidden" name="id">
 22 |       </form>
 23 |     </article>
 24 |     <article>
 25 |       <h2>Ver Santos</h2>
 26 |       <table class="crud-table">
 27 |         <thead>
 28 |           <tr>
 29 |             <th>Nombre</th>
 30 |             <th>Constelación</th>
 31 |             <th>Acciones</th>
 32 |           </tr>
 33 |         </thead>
 34 |         <tbody></tbody>
 35 |       </table>
 36 |     </article>
 37 |   </section>
 38 |   <template id="crud-template">
 39 |     <tr>
 40 |       <td class="name"></td>
 41 |       <td class="constellation"></td>
 42 |       <td>
 43 |         <button class="edit">Editar</button>
 44 |         <button class="delete">Eliminar</button>
 45 |       </td>
 46 |     </tr>
 47 |   </template>
 48 |   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 49 |   <script>
 50 |     /* **********     Curso JavaScript: 119. APIs REST: CRUD con Axios (1/2) - #jonmircha     ********** */
 51 |     /* **********     Curso JavaScript: 120. APIs REST: CRUD con Axios (2/2) - #jonmircha     ********** */
 52 |     const d = document,
 53 |       $table = d.querySelector(".crud-table"),
 54 |       $form = d.querySelector(".crud-form"),
 55 |       $title = d.querySelector(".crud-title"),
 56 |       $template = d.getElementById("crud-template").content,
 57 |       $fragment = d.createDocumentFragment();
 58 | 
 59 |     const getAll = async () => {
 60 |       try {
 61 |         let res = await axios.get("http://localhost:5555/santos"),
 62 |           json = await res.data;
 63 | 
 64 |         console.log(json);
 65 | 
 66 |         json.forEach(el => {
 67 |           $template.querySelector(".name").textContent = el.nombre;
 68 |           $template.querySelector(".constellation").textContent = el.constelacion;
 69 |           $template.querySelector(".edit").dataset.id = el.id;
 70 |           $template.querySelector(".edit").dataset.name = el.nombre;
 71 |           $template.querySelector(".edit").dataset.constellation = el.constelacion;
 72 |           $template.querySelector(".delete").dataset.id = el.id;
 73 | 
 74 |           let $clone = d.importNode($template, true);
 75 |           $fragment.appendChild($clone);
 76 |         });
 77 | 
 78 |         $table.querySelector("tbody").appendChild($fragment);
 79 |       } catch (err) {
 80 |         let message = err.statusText || "Ocurrió un error";
 81 |         $table.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
 82 |       }
 83 |     }
 84 | 
 85 |     d.addEventListener("DOMContentLoaded", getAll);
 86 | 
 87 |     d.addEventListener("submit", async e => {
 88 |       if (e.target === $form) {
 89 |         e.preventDefault();
 90 | 
 91 |         if (!e.target.id.value) {
 92 |           //Create - POST
 93 |           try {
 94 |             let options = {
 95 |               method: "POST",
 96 |               headers: {
 97 |                 "Content-type": "application/json; charset=utf-8"
 98 |               },
 99 |               data: JSON.stringify({
100 |                 nombre: e.target.nombre.value,
101 |                 constelacion: e.target.constelacion.value
102 |               })
103 |             },
104 |               res = await axios("http://localhost:5555/santos", options),
105 |               json = await res.data;
106 | 
107 |             location.reload();
108 |           } catch (err) {
109 |             let message = err.statusText || "Ocurrió un error";
110 |             $form.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
111 |           }
112 |         } else {
113 |           //Update - PUT
114 |           try {
115 |             let options = {
116 |               method: "PUT",
117 |               headers: {
118 |                 "Content-type": "application/json; charset=utf-8"
119 |               },
120 |               data: JSON.stringify({
121 |                 nombre: e.target.nombre.value,
122 |                 constelacion: e.target.constelacion.value
123 |               })
124 |             },
125 |               res = await axios(`http://localhost:5555/santos/${e.target.id.value}`, options),
126 |               json = await res.data;
127 | 
128 |             location.reload();
129 |           } catch (err) {
130 |             let message = err.statusText || "Ocurrió un error";
131 |             $form.insertAdjacentHTML("afterend", `<p><b>Error ${err.status}: ${message}</b></p>`);
132 |           }
133 |         }
134 |       }
135 |     });
136 | 
137 |     d.addEventListener("click", async e => {
138 |       if (e.target.matches(".edit")) {
139 |         $title.textContent = "Editar Santo";
140 |         $form.nombre.value = e.target.dataset.name;
141 |         $form.constelacion.value = e.target.dataset.constellation;
142 |         $form.id.value = e.target.dataset.id;
143 |       }
144 | 
145 |       if (e.target.matches(".delete")) {
146 |         let isDelete = confirm(`¿Estás seguro de eliminar el id ${e.target.dataset.id}?`);
147 | 
148 |         if (isDelete) {
149 |           //Delete - DELETE
150 |           try {
151 |             let options = {
152 |               method: "DELETE",
153 |               headers: {
154 |                 "Content-type": "application/json; charset=utf-8"
155 |               }
156 |             },
157 |               res = await axios(`http://localhost:5555/santos/${e.target.dataset.id}`, options),
158 |               json = await res.data;
159 | 
160 |             location.reload();
161 |           } catch (err) {
162 |             let message = err.statusText || "Ocurrió un error";
163 |             alert(`Error ${err.status}: ${message}`);
164 |           }
165 |         }
166 |       }
167 |     });
168 |   </script>
169 | </body>
170 | 
171 | </html>
172 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Curso JavaScript
 2 | 
 3 | En este repositorio encontrarás los recursos para seguir el [Curso de _JavaScript_](https://www.youtube.com/playlist?list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA) de [Jonathan MirCha](https://jonmircha.com/).
 4 | 
 5 | Recuerda que si quieres mantenerte al tanto de todas las actualizaciones de este curso puedes ingresar al sitio [aprendejavascript.org](https://aprendejavascript.org/).
 6 | 
 7 | Este repositorio incluye:
 8 | 
 9 | - Toda la estructura de archivos y carpetas que usarás en el curso.
10 | - Todos los códigos y recursos ajenos a _JavaScript_ para hacer el curso como imágenes, archivos _HTML_, _CSS_, _PHP_, _JSON_, etc.
11 | - Todo el código _JavaScript_ de las clases teóricas.
12 | 
13 | Este repositorio **NO** incluye:
14 | 
15 | - El código _JavaScript_ de los ejercicios prácticos, ¿Porqué no? Por qué ese código lo generarás tú cuando te pongas a hacer los ejercicios propuestos en el curso.
16 | 
17 | ## Repositorio _PREMIUM_
18 | 
19 | Adicionalmente a este repositorio por una pequeña aportación puedes acceder a:
20 | 
21 | - Toda la teoría referente a este curso que encuentras en mi [blog](https://jonmircha.com/blog) en formato _MarkDown_.
22 | - El código _JavaScript_ que da solución a los ejercicios propuestos en el curso.
23 | - Puedes adquirir el repositorio _PREMIUM_ [aquí](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6B6FCUL4SKSJN).
24 | 
25 | ## Mis Redes Sociales
26 | 
27 | - 🔔 Suscríbete al canal https://youtube.com/jonmircha?sub_confirmation=1 🤓
28 | - 👉 Visita mi sitio web https://jonmircha.com/ 💻
29 | - 🌮 ¿Me invítas un taco? https://www.paypal.me/jonmircha
30 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/00_sitio-ajax.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Sitio con AJAX</title>
  8 |   <style>
  9 |     html {
 10 |       box-sizing: border-box;
 11 |       font-family: sans-serif;
 12 |       font-size: 16px;
 13 |     }
 14 | 
 15 |     *,
 16 |     *:before,
 17 |     *:after {
 18 |       box-sizing: inherit;
 19 |     }
 20 | 
 21 |     body {
 22 |       margin: 0;
 23 |       min-height: 100vh;
 24 |       display: flex;
 25 |       flex-direction: column;
 26 |     }
 27 | 
 28 |     img {
 29 |       max-width: 100%;
 30 |       height: auto;
 31 |     }
 32 | 
 33 |     main {
 34 |       flex-grow: 1;
 35 |     }
 36 | 
 37 |     .container {
 38 |       margin-left: auto;
 39 |       margin-right: auto;
 40 |       max-width: 992px;
 41 |     }
 42 | 
 43 |     .header {
 44 |       padding: .5rem;
 45 |       background-color: antiquewhite;
 46 |     }
 47 | 
 48 |     .header-content {
 49 |       display: flex;
 50 |       justify-content: space-between;
 51 |       align-items: center;
 52 |     }
 53 | 
 54 |     .logo img {
 55 |       width: 3rem;
 56 |       height: auto;
 57 |     }
 58 | 
 59 |     .menu {
 60 |       display: flex;
 61 |       justify-content: space-between;
 62 |       font-size: 115%;
 63 |     }
 64 | 
 65 |     .menu a {
 66 |       color: chocolate;
 67 |       padding: 0 1vw;
 68 |       transition: all .3s ease-in-out;
 69 |     }
 70 | 
 71 |     .menu a:hover {
 72 |       opacity: .75;
 73 |     }
 74 |   </style>
 75 | </head>
 76 | 
 77 | <body>
 78 |   <header class="header">
 79 |     <section class="header-content container">
 80 |       <article class="logo">
 81 |         <img src="https://jonmircha.com/img/kEnAi.svg" alt="kEnAi">
 82 |       </article>
 83 |       <nav class="menu">
 84 |         <a href="assets/home.html">Home</a>
 85 |         <a href="assets/acerca.html">Acerca</a>
 86 |         <a href="assets/servicios.html">Servicios</a>
 87 |         <a href="assets/contacto.html">Contacto</a>
 88 |       </nav>
 89 |     </section>
 90 |   </header>
 91 |   <main class="container"></main>
 92 |   <footer class="footer container">
 93 |     <p>
 94 |       <small>sitio diseñado por kEnAi</small>
 95 |     </p>
 96 |   </footer>
 97 |   <script>
 98 |     /* **********     Curso JavaScript: 122. Ejercicios AJAX - APIs: Sitio web con AJAX - #jonmircha     ********** */
 99 |   </script>
100 | </body>
101 | 
102 | </html>
103 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/01_incluir-html.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Incluir HTML con AJAX</title>
 8 |   <style>
 9 |     html {
10 |       box-sizing: border-box;
11 |       font-family: sans-serif;
12 |       font-size: 16px;
13 |     }
14 | 
15 |     *,
16 |     *:before,
17 |     *:after {
18 |       box-sizing: inherit;
19 |     }
20 | 
21 |     body {
22 |       margin: 0;
23 |       min-height: 100vh;
24 |       display: flex;
25 |       flex-direction: column;
26 |     }
27 | 
28 |     img {
29 |       max-width: 100%;
30 |       height: auto;
31 |     }
32 | 
33 |     main {
34 |       flex-grow: 1;
35 |     }
36 | 
37 |     .container {
38 |       margin-left: auto;
39 |       margin-right: auto;
40 |       max-width: 992px;
41 |     }
42 | 
43 |     .header {
44 |       padding: .5rem;
45 |       background-color: antiquewhite;
46 |     }
47 | 
48 |     .header-content {
49 |       display: flex;
50 |       justify-content: space-between;
51 |       align-items: center;
52 |     }
53 | 
54 |     .logo img {
55 |       width: 3rem;
56 |       height: auto;
57 |     }
58 | 
59 |     .menu {
60 |       display: flex;
61 |       justify-content: space-between;
62 |       font-size: 115%;
63 |     }
64 | 
65 |     .menu a {
66 |       color: chocolate;
67 |       padding: 0 1vw;
68 |       transition: all .3s ease-in-out;
69 |     }
70 | 
71 |     .menu a:hover {
72 |       opacity: .75;
73 |     }
74 |   </style>
75 |   <script src="assets/include-html.js"></script>
76 | </head>
77 | 
78 | <body>
79 |   <div data-include="assets/header.html"></div>
80 |   <main class="container"></main>
81 |   <div data-include="assets/footer.html"></div>
82 |   <script>
83 |     /* **********     Curso JavaScript: 123. Ejercicios AJAX - APIs: Incluir archivos HTML (include-html.js) - #jonmircha     ********** */
84 |   </script>
85 | </body>
86 | 
87 | </html>
88 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/02_uploader.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Uploader con AJAX</title>
 8 |   <style>
 9 |     html {
10 |       box-sizing: border-box;
11 |       font-family: sans-serif;
12 |       font-size: 16px;
13 |     }
14 | 
15 |     *,
16 |     *:before,
17 |     *:after {
18 |       box-sizing: inherit;
19 |     }
20 | 
21 |     body {
22 |       margin: 0;
23 |     }
24 | 
25 |     main {
26 |       display: flex;
27 |       flex-direction: column;
28 |       justify-content: center;
29 |       align-items: center;
30 |       text-align: center;
31 |       min-height: 100vh;
32 |     }
33 | 
34 |     progress {
35 |       margin-top: 1rem;
36 |     }
37 |   </style>
38 | </head>
39 | 
40 | <body>
41 |   <main>
42 |     <input type="file" id="files" name="files" multiple>
43 |   </main>
44 |   <script>
45 |     /* **********     Curso JavaScript: 124. Ejercicios AJAX - APIs: Uploader con AJAX - #jonmircha     ********** */
46 |     /* **********     Curso JavaScript: 125. Ejercicios AJAX - APIs: Uploader AJAX con Barra de Progreso - #jonmircha     ********** */
47 |   </script>
48 | </body>
49 | 
50 | </html>
51 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/03_uploader-drag-and-drop.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Uploader Drag & Drop con AJAX</title>
 8 |   <style>
 9 |     html {
10 |       box-sizing: border-box;
11 |       font-family: sans-serif;
12 |       font-size: 16px;
13 |     }
14 | 
15 |     *,
16 |     *:before,
17 |     *:after {
18 |       box-sizing: inherit;
19 |     }
20 | 
21 |     body {
22 |       margin: 0;
23 |     }
24 | 
25 |     main {
26 |       display: flex;
27 |       flex-direction: column;
28 |       justify-content: center;
29 |       align-items: center;
30 |       text-align: center;
31 |       min-height: 100vh;
32 |     }
33 | 
34 |     progress {
35 |       margin-top: 1rem;
36 |     }
37 | 
38 |     .drop-zone {
39 |       margin-left: auto;
40 |       margin-right: auto;
41 |       border: thin dotted #000;
42 |       width: 80%;
43 |       height: 40vh;
44 |       display: flex;
45 |       justify-content: center;
46 |       align-items: center;
47 |       text-align: center;
48 |     }
49 | 
50 |     .drop-zone.is-active {
51 |       border: thick dashed #000;
52 |       background-color: rgba(0, 128, 0, .5);
53 |       animation: pulse 1.5s infinite;
54 |       animation-timing-function: linear;
55 |     }
56 | 
57 |     @keyframes pulse {
58 | 
59 |       0%,
60 |       100% {
61 |         transform: scale(1);
62 |       }
63 | 
64 |       50% {
65 |         transform: scale(1.1);
66 |       }
67 |     }
68 |   </style>
69 | </head>
70 | 
71 | <body>
72 |   <main>
73 |     <article class="drop-zone">
74 |       <p>Arrastra y suelta tus archivos...</p>
75 |     </article>
76 |   </main>
77 |   <script>
78 |     /* **********     Curso JavaScript: 124. Ejercicios AJAX - APIs: Uploader con AJAX - #jonmircha     ********** */
79 |     /* **********     Curso JavaScript: 126. Ejercicios AJAX - APIs: Uploader AJAX con Drag & Drop - #jonmircha     ********** */
80 |   </script>
81 | </body>
82 | 
83 | </html>
84 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/04_contact-form.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Envío de Formulario con Fetch y FormSubmit</title>
  8 |   <style>
  9 |     html {
 10 |       box-sizing: border-box;
 11 |       font-family: sans-serif;
 12 |       font-size: 16px;
 13 |     }
 14 | 
 15 |     *,
 16 |     *:before,
 17 |     *:after {
 18 |       box-sizing: inherit;
 19 |     }
 20 | 
 21 |     /* **********     ContactForm Validations     ********** */
 22 |     .contact-form {
 23 |       --form-ok-color: #4caf50;
 24 |       --form-error-color: #f44336;
 25 |       margin-left: auto;
 26 |       margin-right: auto;
 27 |       width: 80%;
 28 |     }
 29 | 
 30 |     .contact-form>* {
 31 |       padding: 0.5rem;
 32 |       margin: 1rem auto;
 33 |       display: block;
 34 |       width: 100%;
 35 |     }
 36 | 
 37 |     .contact-form textarea {
 38 |       resize: none;
 39 |     }
 40 | 
 41 |     .contact-form legend,
 42 |     .contact-form-response {
 43 |       font-size: 1.5rem;
 44 |       font-weight: bold;
 45 |       text-align: center;
 46 |     }
 47 | 
 48 |     .contact-form input,
 49 |     .contact-form textarea {
 50 |       font-size: 1rem;
 51 |       font-family: sans-serif;
 52 |     }
 53 | 
 54 |     .contact-form input[type="submit"] {
 55 |       width: 50%;
 56 |       font-weight: bold;
 57 |       cursor: pointer;
 58 |     }
 59 | 
 60 |     .contact-form *::placeholder {
 61 |       color: #000;
 62 |     }
 63 | 
 64 |     .contact-form [required]:valid {
 65 |       border: thin solid var(--form-ok-color);
 66 |     }
 67 | 
 68 |     .contact-form [required]:invalid {
 69 |       border: thin solid var(--form-error-color);
 70 |     }
 71 | 
 72 |     .contact-form-error {
 73 |       margin-top: -1rem;
 74 |       font-size: 80%;
 75 |       background-color: var(--form-error-color);
 76 |       color: #fff;
 77 |       transition: all 800ms ease;
 78 |     }
 79 | 
 80 |     .contact-form-error.is-active {
 81 |       display: block;
 82 |       animation: show-message 1s 1 normal 0s ease-out both;
 83 |     }
 84 | 
 85 |     .contact-form-loader {
 86 |       text-align: center;
 87 |     }
 88 | 
 89 |     .none {
 90 |       display: none;
 91 |     }
 92 | 
 93 |     @keyframes show-message {
 94 |       0% {
 95 |         visibility: hidden;
 96 |         opacity: 0;
 97 |       }
 98 | 
 99 |       100% {
100 |         visibility: visible;
101 |         opacity: 1;
102 |       }
103 |     }
104 |   </style>
105 | </head>
106 | 
107 | <body>
108 |   <form class="contact-form">
109 |     <legend>Envíanos tus comentarios</legend>
110 |     <input type="text" name="name" placeholder="Escribe tu nombre"
111 |       title="Nombre sólo acepta letras y espacios en blanco" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$" required>
112 |     <input type="email" name="email" placeholder="Escribe tu email" title="Email incorrecto"
113 |       pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$" required>
114 |     <input type="text" name="subject" placeholder="Asunto a tratar" title="El Asunto es requerido" required>
115 |     <textarea name="comments" cols="50" rows="5" placeholder="Escribe tus comentarios"
116 |       title="Tu comentario no debe exceder los 255 caracteres" data-pattern="^.{1,255}$" required></textarea>
117 |     <input type="submit" value="Enviar">
118 |     <div class="contact-form-loader none">
119 |       <img src="../assets/loader.svg" alt="Cargando">
120 |     </div>
121 |     <div class="contact-form-response none">
122 |       <p>Los datos han sido enviados</p>
123 |     </div>
124 |   </form>
125 |   <script>
126 |     /* **********     Curso JavaScript: 127. Ejercicios AJAX - APIs: Envío Formulario con Fetch y FormSubmit - #jonmircha     ********** */
127 |   </script>
128 | </body>
129 | 
130 | </html>
131 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/05_contact-form-php.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Envío de Formulario con Fetch y PHP</title>
  8 |   <style>
  9 |     html {
 10 |       box-sizing: border-box;
 11 |       font-family: sans-serif;
 12 |       font-size: 16px;
 13 |     }
 14 | 
 15 |     *,
 16 |     *:before,
 17 |     *:after {
 18 |       box-sizing: inherit;
 19 |     }
 20 | 
 21 |     /* **********     ContactForm Validations     ********** */
 22 |     .contact-form {
 23 |       --form-ok-color: #4caf50;
 24 |       --form-error-color: #f44336;
 25 |       margin-left: auto;
 26 |       margin-right: auto;
 27 |       width: 80%;
 28 |     }
 29 | 
 30 |     .contact-form>* {
 31 |       padding: 0.5rem;
 32 |       margin: 1rem auto;
 33 |       display: block;
 34 |       width: 100%;
 35 |     }
 36 | 
 37 |     .contact-form textarea {
 38 |       resize: none;
 39 |     }
 40 | 
 41 |     .contact-form legend,
 42 |     .contact-form-response {
 43 |       font-size: 1.5rem;
 44 |       font-weight: bold;
 45 |       text-align: center;
 46 |     }
 47 | 
 48 |     .contact-form input,
 49 |     .contact-form textarea {
 50 |       font-size: 1rem;
 51 |       font-family: sans-serif;
 52 |     }
 53 | 
 54 |     .contact-form input[type="submit"] {
 55 |       width: 50%;
 56 |       font-weight: bold;
 57 |       cursor: pointer;
 58 |     }
 59 | 
 60 |     .contact-form *::placeholder {
 61 |       color: #000;
 62 |     }
 63 | 
 64 |     .contact-form [required]:valid {
 65 |       border: thin solid var(--form-ok-color);
 66 |     }
 67 | 
 68 |     .contact-form [required]:invalid {
 69 |       border: thin solid var(--form-error-color);
 70 |     }
 71 | 
 72 |     .contact-form-error {
 73 |       margin-top: -1rem;
 74 |       font-size: 80%;
 75 |       background-color: var(--form-error-color);
 76 |       color: #fff;
 77 |       transition: all 800ms ease;
 78 |     }
 79 | 
 80 |     .contact-form-error.is-active {
 81 |       display: block;
 82 |       animation: show-message 1s 1 normal 0s ease-out both;
 83 |     }
 84 | 
 85 |     .contact-form-loader {
 86 |       text-align: center;
 87 |     }
 88 | 
 89 |     .none {
 90 |       display: none;
 91 |     }
 92 | 
 93 |     @keyframes show-message {
 94 |       0% {
 95 |         visibility: hidden;
 96 |         opacity: 0;
 97 |       }
 98 | 
 99 |       100% {
100 |         visibility: visible;
101 |         opacity: 1;
102 |       }
103 |     }
104 |   </style>
105 | </head>
106 | 
107 | <body>
108 |   <form class="contact-form">
109 |     <legend>Envíanos tus comentarios</legend>
110 |     <input type="text" name="name" placeholder="Escribe tu nombre"
111 |       title="Nombre sólo acepta letras y espacios en blanco" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$" required>
112 |     <input type="email" name="email" placeholder="Escribe tu email" title="Email incorrecto"
113 |       pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$" required>
114 |     <input type="text" name="subject" placeholder="Asunto a tratar" title="El Asunto es requerido" required>
115 |     <textarea name="comments" cols="50" rows="5" placeholder="Escribe tus comentarios"
116 |       title="Tu comentario no debe exceder los 255 caracteres" data-pattern="^.{1,255}$" required></textarea>
117 |     <input type="submit" value="Enviar">
118 |     <div class="contact-form-loader none">
119 |       <img src="../assets/loader.svg" alt="Cargando">
120 |     </div>
121 |     <div class="contact-form-response none">
122 |       <p>Los datos han sido enviados</p>
123 |     </div>
124 |   </form>
125 |   <script>
126 |     /* **********     Curso JavaScript: 128. Ejercicios AJAX - APIs: Envío Formulario y CORS con Fetch y PHP - #jonmircha     ********** */
127 |   </script>
128 | </body>
129 | 
130 | </html>
131 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/06_stripe_checkout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Checkout con Stripe</title>
 8 |   <style>
 9 |     html {
10 |       box-sizing: border-box;
11 |       font-family: sans-serif;
12 |       font-size: 16px;
13 |     }
14 | 
15 |     *,
16 |     *:before,
17 |     *:after {
18 |       box-sizing: inherit;
19 |     }
20 | 
21 |     .tacos {
22 |       display: flex;
23 |       flex-wrap: wrap;
24 |     }
25 | 
26 |     .tacos>* {
27 |       flex: 1 1 200px;
28 |       margin: 1rem;
29 |     }
30 | 
31 |     .taco {
32 |       background-color: crimson;
33 |       color: chartreuse;
34 |       font-size: 125%;
35 |       text-align: center;
36 |       cursor: pointer;
37 |       transition: all 0.3s ease-out;
38 |     }
39 | 
40 |     .taco:hover {
41 |       opacity: .9;
42 |       transform: scale(.9);
43 |     }
44 | 
45 |     .taco img {
46 |       max-width: 100%;
47 |       height: auto;
48 |     }
49 | 
50 |     .taco figcaption {
51 |       padding: 1rem;
52 |     }
53 |   </style>
54 | </head>
55 | 
56 | <body>
57 |   <h1>Checkout con Stripe</h1>
58 |   <section id="tacos" class="tacos"></section>
59 |   <template id="taco-template">
60 |     <figure class="taco">
61 |       <img>
62 |       <figcaption></figcaption>
63 |     </figure>
64 |   </template>
65 |   <script src="https://js.stripe.com/v3/"></script>
66 |   <script src="assets/stripe-checkout.js" type="module"></script>
67 | </body>
68 | 
69 | </html>
70 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/07_blog-markdown.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Blog con Markdown y Showdown.js</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Blog con Markdown y Showdown.js</h1>
12 |   <main></main>
13 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
14 |   <script>
15 |     /* ********** Curso JavaScript: 133. Ejercicios AJAX - APIs: Blog con Markdown y Showdown.js - #jonmircha ********** */
16 |   </script>
17 | </body>
18 | 
19 | </html>
20 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/08_api-pokemon.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Pokémons</title>
 8 |   <style>
 9 |     html {
10 |       text-align: center;
11 |     }
12 | 
13 |     .grid-fluid {
14 |       display: grid;
15 |       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
16 |       text-align: center;
17 |     }
18 | 
19 |     .loader {
20 |       display: block;
21 |       margin: auto;
22 |     }
23 |   </style>
24 | </head>
25 | 
26 | <body>
27 |   <h1>Pokémons</h1>
28 |   <nav class="links"></nav>
29 |   <main class="grid-fluid"></main>
30 |   <script>
31 |     /* ********** Curso JavaScript: 134. Ejercicios AJAX - APIs: Paginación de Pokémons con Fetch (1/2) - #jonmircha ********** */
32 |     /* ********** Curso JavaScript: 135. Ejercicios AJAX - APIs: Paginación de Pokémons con Fetch (2/2) - #jonmircha ********** */
33 |   </script>
34 | </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/09_api-tv-show.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Buscador Shows de TV</title>
 8 |   <style>
 9 |     .grid-fluid {
10 |       display: grid;
11 |       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
12 |     }
13 | 
14 |     .loader {
15 |       display: block;
16 |       margin: auto;
17 |     }
18 |   </style>
19 | </head>
20 | 
21 | <body>
22 |   <h1>Buscador Shows de TV</h1>
23 |   <input type="search" id="search" placeholder="Buscar shows de tv..." autocomplete="off">
24 |   <section id="shows" class="grid-fluid"></section>
25 |   <template id="show-template">
26 |     <article class="show">
27 |       <h3></h3>
28 |       <div></div>
29 |       <img>
30 |       <a></a>
31 |     </article>
32 |   </template>
33 |   <script>
34 |     /* ********** Curso JavaScript: 136. Ejercicios AJAX - APIs: Buscador de Shows con Fetch y TVMAZE API - #jonmircha ********** */
35 |   </script>
36 | </body>
37 | 
38 | </html>
39 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/10_api-canciones.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Buscador de Canciones</title>
 8 |   <style>
 9 |     html {
10 |       font-family: sans-serif;
11 |     }
12 | 
13 |     img {
14 |       max-width: 100%;
15 |       height: auto;
16 |     }
17 | 
18 |     main {
19 |       display: flex;
20 |       flex-direction: column-reverse;
21 |     }
22 | 
23 |     .loader {
24 |       display: none;
25 |       margin: auto;
26 |     }
27 | 
28 |     .song blockquote {
29 |       white-space: pre-wrap;
30 |     }
31 | 
32 |     @media screen and (min-width: 800px) {
33 |       main {
34 |         flex-direction: row;
35 |       }
36 | 
37 |       main>* {
38 |         padding: 1rem;
39 |         flex-basis: 50%;
40 |       }
41 |     }
42 |   </style>
43 | </head>
44 | 
45 | <body>
46 |   <h1>Buscador de Canciones</h1>
47 |   <form id="song-search">
48 |     <input type="text" name="artist" placeholder="Nombre del Intérprete" required>
49 |     <br>
50 |     <input type="text" name="song" placeholder="Nombre de la Canción" required>
51 |     <br>
52 |     <input type="submit">
53 |   </form>
54 |   <img class="loader" src="../assets/loader.svg" alt="Cargando...">
55 |   <aside class="error"></aside>
56 |   <main>
57 |     <article class="artist"></article>
58 |     <article class="song"></article>
59 |   </main>
60 |   <script>
61 |     /* ********** Curso JavaScript: 137. Ejercicios AJAX - APIs: Buscador de Canciones con Fetch + Async - #jonmircha ********** */
62 |   </script>
63 | </body>
64 | 
65 | </html>
66 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/11_selects-anidados.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Selects Anidados</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Selects Anidados</h1>
12 |   <h2>México</h2>
13 |   <label for="select-primary">Estados</label>
14 |   <select name="primary" id="select-primary">
15 |     <option value="">Elige un Estado</option>
16 |   </select>
17 |   <p></p>
18 |   <label for="select-secondary">Municipios</label>
19 |   <select name="secondary" id="select-secondary">
20 |     <option value="">Elige un Muinicipio</option>
21 |   </select>
22 |   <p></p>
23 |   <label for="select-third">Colonias</label>
24 |   <select name="third" id="select-third">
25 |     <option value="">Elige una Colonia</option>
26 |   </select>
27 |   <p></p>
28 |   <script>
29 |     /* ********** Curso JavaScript: 138. Ejercicios AJAX - APIs: Selects Anidados con Fetch - #jonmircha ********** */
30 |     /*
31 |     https://api-sepomex.hckdrk.mx/
32 |     https://api-sepomex.hckdrk.mx/documentacion/docs
33 |   */
34 |   </script>
35 | </body>
36 | 
37 | </html>
38 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/12_wp-api-rest.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>WordPress REST API</title>
  8 |   <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
  9 |   <style>
 10 |     html {
 11 |       box-sizing: border-box;
 12 |       font-family: 'Raleway', sans-serif;
 13 |       font-size: 16px;
 14 |     }
 15 | 
 16 |     *,
 17 |     *:after,
 18 |     *:before {
 19 |       box-sizing: inherit;
 20 |     }
 21 | 
 22 |     a {
 23 |       color: #01579b;
 24 |       transition: all .3s ease-out;
 25 |     }
 26 | 
 27 |     a:hover {
 28 |       opacity: .75;
 29 |     }
 30 | 
 31 |     img {
 32 |       max-width: 100%;
 33 |       height: auto;
 34 |     }
 35 | 
 36 |     h1 {
 37 |       text-align: center;
 38 |     }
 39 | 
 40 |     hr {
 41 |       border: thin solid #01579b;
 42 |       margin: 3rem auto;
 43 |       width: 80%;
 44 |     }
 45 | 
 46 |     .site {
 47 |       margin: 1rem auto;
 48 |       padding: 1rem;
 49 |       max-width: 50%;
 50 |       text-align: center;
 51 |     }
 52 | 
 53 |     .post {
 54 |       margin: 1rem auto;
 55 |       padding: 1rem;
 56 |       border-radius: .5rem;
 57 |       max-width: 80%;
 58 |       text-align: center;
 59 |       background-color: #eceff1;
 60 |     }
 61 | 
 62 |     .post-author img {
 63 |       border-radius: 50%;
 64 |     }
 65 | 
 66 |     .post-date {
 67 |       margin: 1rem auto;
 68 |       display: block;
 69 |     }
 70 | 
 71 |     .post-excerpt,
 72 |     .post-categories,
 73 |     .post-tags,
 74 |     .post-content {
 75 |       text-align: left;
 76 |     }
 77 | 
 78 |     .post-content summary {
 79 |       font-size: 1.5rem;
 80 |       font-weight: bold;
 81 |     }
 82 | 
 83 |     .post-content>article {
 84 |       padding: 1rem;
 85 |       background-color: #e3f2fd;
 86 |     }
 87 | 
 88 |     .post-content img {
 89 |       display: block;
 90 |       margin: auto;
 91 |     }
 92 | 
 93 |     .loader {
 94 |       display: none;
 95 |       margin: 2rem auto;
 96 |     }
 97 |   </style>
 98 | </head>
 99 | 
100 | <body>
101 |   <h1>WordPress REST API</h1>
102 |   <article id="site" class="site"></article>
103 |   <section id="posts" class="posts"></section>
104 |   <img class="loader" src="../assets/loader.svg" alt="Cargando...">
105 |   <template id="post-template">
106 |     <article class="post">
107 |       <img class="post-image">
108 |       <aside>
109 |         <h2 class="post-title"></h2>
110 |         <figure class="post-author"></figure>
111 |         <small class="post-date"></small>
112 |         <a class="post-link" target="_blank">Ver publicación original</a>
113 |         <p class="post-excerpt"></p>
114 |         <div class="post-categories"></div>
115 |         <div class="post-tags"></div>
116 |         <details class="post-content">
117 |           <summary>Ver contenido de la publicación</summary>
118 |           <article></article>
119 |         </details>
120 |       </aside>
121 |     </article>
122 |     <hr>
123 |   </template>
124 |   <script>
125 |     /* ********** Curso JavaScript: 139. WordPress REST API y Fetch (1 / 5) - #jonmircha ********** */
126 |     /* ********** Curso JavaScript: 140. WordPress REST API y Fetch (2 / 5) - #jonmircha ********** */
127 |     /* ********** Curso JavaScript: 141. WordPress REST API y Fetch (3 / 5) - #jonmircha ********** */
128 |     /* ********** Curso JavaScript: 142. WordPress REST API y Fetch (4 / 5) - #jonmircha ********** */
129 |     /* ********** Curso JavaScript: 143. WordPress REST API & Infinite Scroll (5 / 5) - #jonmircha ********** */
130 |   </script>
131 | </body>
132 | 
133 | </html>
134 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/acerca.html:
--------------------------------------------------------------------------------
1 | <h1>Contenido de la sección Acerca</h1>
2 | <p>
3 |   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates nihil fugit eos iusto quos numquam
4 |   perspiciatis, ullam sed nisi vero illo, officia autem ratione ducimus praesentium fugiat, quaerat nulla.
5 | </p>
6 | <img src="https://placeimg.com/720/480/people" alt="People">
7 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/contacto.html:
--------------------------------------------------------------------------------
1 | <h1>Contenido de la sección Contacto</h1>
2 | <p>
3 |   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates nihil fugit eos iusto quos numquam
4 |   perspiciatis, ullam sed nisi vero illo, officia autem ratione ducimus praesentium fugiat, quaerat nulla.
5 | </p>
6 | <img src="https://placeimg.com/720/480/tech" alt="Tech">
7 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/footer.html:
--------------------------------------------------------------------------------
1 | <footer class="footer container">
2 |   <p>
3 |     <small>sitio diseñado por kEnAi</small>
4 |   </p>
5 | </footer>
6 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/header.html:
--------------------------------------------------------------------------------
 1 | <header class="header">
 2 |   <section class="header-content container">
 3 |     <article class="logo">
 4 |       <img src="https://jonmircha.com/img/kEnAi.svg" alt="kEnAi">
 5 |     </article>
 6 |     <nav class="menu">
 7 |       <a href="assets/home.html">Home</a>
 8 |       <a href="assets/acerca.html">Acerca</a>
 9 |       <a href="assets/servicios.html">Servicios</a>
10 |       <a href="assets/contacto.html">Contacto</a>
11 |     </nav>
12 |   </section>
13 | </header>
14 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/home.html:
--------------------------------------------------------------------------------
1 | <h1>Contenido del Home</h1>
2 | <p>
3 |   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates nihil fugit eos iusto quos numquam
4 |   perspiciatis, ullam sed nisi vero illo, officia autem ratione ducimus praesentium fugiat, quaerat nulla.
5 | </p>
6 | <img src="https://placeimg.com/720/480/animals" alt="Animals">
7 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/include-html.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 123. Ejercicios AJAX - APIs: Incluir archivos HTML (include-html.js) - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/javascript.md:
--------------------------------------------------------------------------------
  1 | # JavaScript
  2 | 
  3 | ## Isomorfismo
  4 | 
  5 | Hoy _JavaScript_, es el único lenguaje capaz de ejecutarse en las 3 capas de una aplicación:
  6 | 
  7 | 1. _Frontend_ (con _JavaScript_).
  8 | 1. _Backend_ (con _Node.js_).
  9 | 1. Persistencia de Datos (con _MongoDB_, _Couch DB_, _Firebase_, etc).
 10 | 
 11 | Con JavaScript puedes:
 12 | 
 13 | - Diseño y Desarrollo Web.
 14 | - Hacer Videojuegos.
 15 | - Experiencias _3D_, Realidad Aumentada, Realidad Virtual.
 16 | - Controlar _Hardware_ (drones, _robots_, electrodomésticos, _wearables_, etc).
 17 | - Aplicaciones Híbridas y Móviles.
 18 | - Aprendizaje Automático.
 19 | - etc.
 20 | 
 21 | ---
 22 | 
 23 | ## _JavaScript_ NO es _JAVA_
 24 | 
 25 | ![Esto es JavaScript](https://jonmircha.com/img/blog/this-is-javascript.jpg)
 26 | ![JavaScript vs JAVA](https://jonmircha.com/img/blog/jsvsjava.jpg)
 27 | ![JavaScript vs JAVA](https://jonmircha.com/img/blog/java-vs-javascript.jpg)
 28 | 
 29 | ---
 30 | 
 31 | ## Características
 32 | 
 33 | - Lenguaje de Alto Nivel.
 34 | - Interpretado.
 35 | - Dinámico.
 36 | - Débilmente Tipado.
 37 | - Multi paradigma.
 38 | - Sensible a MAYÚSCULAS y minúsculas.
 39 | - No necesitas los puntos y comas al final de cada línea.
 40 | 
 41 | ---
 42 | 
 43 | ## Escritura de código
 44 | 
 45 | Los **identificadores** deben comenzar con:
 46 | 
 47 | - Una letra o
 48 | - Un signo de dolar **\$** o
 49 | - Un guión bajo **\_**
 50 | - Nunca con números o caracteres especiales.
 51 | 
 52 | Usa **<i>snake_case</i>** en:
 53 | 
 54 | - Nombre de archivos:
 55 | 
 56 | ```js
 57 | mi_archivo_javascript.js;
 58 | ```
 59 | 
 60 | Usa **<i>UPPER_CASE</i>** en:
 61 | 
 62 | - Constantes:
 63 | 
 64 | ```js
 65 | const UNA_CONSTANTE = "Soy una constante",
 66 |   PI = 3.141592653589793;
 67 | ```
 68 | 
 69 | Usa **<i>UpperCamelCase</i>** en:
 70 | 
 71 | - Clases:
 72 | 
 73 | ```js
 74 | class SerHumano {
 75 |   constructor(nombre, genero) {
 76 |     this.nombre = nombre;
 77 |     this.genero = genero;
 78 |   }
 79 | 
 80 |   miNombreEs() {
 81 |     return `Mi nombre es ${this.nombre}`;
 82 |   }
 83 | }
 84 | ```
 85 | 
 86 | Usa **<i>lowerCamelCase</i>** en:
 87 | 
 88 | - Objetos:
 89 | 
 90 | ```js
 91 | const unObjeto = {
 92 |   nombre: "Jonathan",
 93 |   email: "jonmircha@gmail.com",
 94 | };
 95 | ```
 96 | 
 97 | - Primitivos:
 98 | 
 99 | ```js
100 | let unaCadena = "Hola Mundo",
101 |   unNumero = 19,
102 |   unBoolean = true;
103 | ```
104 | 
105 | - Funciones:
106 | 
107 | ```js
108 | function holaMundo(nombre) {
109 |   alert(`Hola mundo ${nombre}`);
110 | }
111 | holaMundo("Jonathan");
112 | ```
113 | 
114 | - Instancias:
115 | 
116 | ```js
117 | const ajax = new XMLHttpRequest(),
118 |   jon = new SerHumano("Jonathan", "Hombre");
119 | ```
120 | 
121 | ---
122 | 
123 | ## Palabras reservadas
124 | 
125 | ```js
126 | A: abstract
127 | B: boolean, break, byte
128 | C: case, catch, char, class, const, continue
129 | D: debugger, default, delete, do, double
130 | E: else, enum, export, extends
131 | F: false, final, finally, float, for, function
132 | G: goto
133 | I: if, implements, import, in, instanceof, int, interface
134 | L: long
135 | N: native, new, null
136 | P: package, private, protected, public
137 | R: return
138 | S: short, static, super, switch, synchronized
139 | T: this, throw, throws, transient, true, try, typeof
140 | V: var, volatile, void
141 | W: while, with
142 | ```
143 | 
144 | ---
145 | 
146 | ## Ordenamiento de código
147 | 
148 | 1. **IMPORTACIÓN DE MÓDULOS.**
149 | 1. **DECLARACIÓN DE VARIABLES.**
150 | 1. **DECLARACIÓN DE FUNCIONES.**
151 | 1. **EJECUCIÓN DE CÓDIGO.**
152 | 
153 | ---
154 | 
155 | ## Tipos de datos en _JavaScript_
156 | 
157 | **Primitivos**: Se accede directamente al valor.
158 | 
159 | - string
160 | - number
161 | - boolean
162 | - null
163 | - undefined
164 | - NaN
165 | 
166 | **Compuestos**: Se accede a la referencia del valor.
167 | 
168 | - object = {}
169 | - array = []
170 | - function () { }
171 | - Class {}
172 | - etc.
173 | 
174 | ---
175 | 
176 | ## Aprende _JavaScript_ ¡GRATIS!
177 | 
178 | Si estás interesado en aprender _JavaScript_ desde las bases hasta un nivel que te permita obtener tu primer trabajo o empleo como programador _web_ te invito a que veas mi **Curso de _JavaScript_** totalmente **gratuito** en mi [canal de _YouTube_](https://youtube.com/jonmircha?sub_confirmation=1).
179 | 
180 | En mi curso aprenderás: Sintaxis, Gramática, Lógica, _EcmaScript_, Programación Orientada a Objetos, Asincronía, _DOM_, _AJAX_, _JSON_, Consumo de _API's_, _Node_ y mucho más.
181 | 
182 | **¡¡¡Accede ya!!!**
183 | 
184 | [Ver Curso](https://www.youtube.com/playlist?list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA)
185 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/send_mail.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (isset($_POST)) {
 3 |   error_reporting(0);
 4 | 
 5 |   $name = $_POST["name"];
 6 |   $email = $_POST["email"];
 7 |   $subject = $_POST["subject"];
 8 |   $comments = $_POST["comments"];
 9 | 
10 |   $domain = $_SERVER["HTTP_HOST"];
11 |   $to = "jonmircha@gmail.com";
12 |   $subject_mail = "Contacto desde el formulario del sitio $domain.";
13 |   $message = "
14 |     <p>
15 |       Datos enviados desde el formulario del sitio <b>$domain</b>
16 |     </p>
17 |     <ul>
18 |       <li>Nombre: <b>$name</b></li>
19 |       <li>Email: <b>$email</b></li>
20 |       <li>Asunto: $subject</li>
21 |       <li>Comentarios: $comments</li>
22 |     </ul>
23 |   ";
24 |   $headers = "MIME-Version: 1.0\r\n" . "Content-Type: text/html; charset=utf-8\r\n" . "From: Envío Automático No Responder <no-reply@$domain>";
25 | 
26 |   $send_mail = mail($to, $subject_mail, $message, $headers);
27 | 
28 |   if($send_mail) {
29 |     $res = [
30 |       "err" => false,
31 |       "message" => "Tus datos han sido enviados"
32 |     ];
33 |   } else {
34 |     $res = [
35 |       "err" => true,
36 |       "message" => "Error al enviar tus datos. Intenta nuevamente."
37 |     ];
38 |   }
39 | 
40 |   //header("Access-Control-Allow-Origin: https://jonmircha.com");
41 |   header("Access-Control-Allow-Origin: *");
42 |   header( 'Content-type: application/json' );
43 |   echo json_encode($res);
44 |   exit;
45 | }
46 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/servicios.html:
--------------------------------------------------------------------------------
1 | <h1>Contenido de la sección Servicios</h1>
2 | <p>
3 |   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates nihil fugit eos iusto quos numquam
4 |   perspiciatis, ullam sed nisi vero illo, officia autem ratione ducimus praesentium fugiat, quaerat nulla.
5 | </p>
6 | <img src="https://placeimg.com/720/480/nature" alt="Nature">
7 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/stripe-checkout.js:
--------------------------------------------------------------------------------
1 | /* ********** Curso JavaScript: 129. Ejercicios AJAX - APIs: Pagos Online con Fetch y Stripe (1/4) - #jonmircha ********** */
2 | /* ********** Curso JavaScript: 130. Ejercicios AJAX - APIs: Pagos Online con Fetch y Stripe (2/4) - #jonmircha ********** */
3 | /* ********** Curso JavaScript: 131. Ejercicios AJAX - APIs: Pagos Online con Fetch y Stripe (3/4) - #jonmircha ********** */
4 | /* ********** Curso JavaScript: 132. Ejercicios AJAX - APIs: Pagos Online con Fetch y Stripe (4/4) - #jonmircha ********** */
5 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/stripe-keys.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   public: "Your Public Key",
3 |   secret: "Your Secret Key",
4 | };
5 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/stripe-success.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Pago exitoso con Stripe</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Pago exitoso con Stripe</h1>
12 |   <p>Gracias por la orden de Tacos 🌮😋</p>
13 | </body>
14 | 
15 | </html>
16 | 


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/tacos-al-pastor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/ajax-ejercicios/assets/tacos-al-pastor.jpg


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/tacos-campechanos.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/ajax-ejercicios/assets/tacos-campechanos.jpg


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/tacos-de-barbacoa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/ajax-ejercicios/assets/tacos-de-barbacoa.jpg


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/tacos-de-carnitas.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/ajax-ejercicios/assets/tacos-de-carnitas.jpg


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/tacos-de-sesos-y-lengua.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/ajax-ejercicios/assets/tacos-de-sesos-y-lengua.jpg


--------------------------------------------------------------------------------
/ajax-ejercicios/assets/uploader.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | //echo "Hola, respuesta desde el servidor";
 3 | //var_dump($_FILES);
 4 | 
 5 | if(isset($_FILES["file"])) {
 6 |   $name = $_FILES["file"]["name"];
 7 |   $file = $_FILES["file"]["tmp_name"];
 8 |   $error = $_FILES["file"]["error"];
 9 |   $destination = "../files/$name";
10 |   $upload = move_uploaded_file($file, $destination);
11 | 
12 |   if($upload) {
13 |     $res = array(
14 |       "err" => false,
15 |       "status" => http_response_code(200),
16 |       "statusText" => "Archivo $name subido con éxito",
17 |       "files" => $_FILES["file"]
18 |     );
19 |   } else {
20 |     $res = array(
21 |       "err" => true,
22 |       "status" => http_response_code(400),
23 |       "statusText" => "Error al subir el archivo $name",
24 |       "files" => $_FILES["file"]
25 |     );
26 |   }
27 | 
28 |   echo json_encode($res);
29 | }
30 | 


--------------------------------------------------------------------------------
/assets/ajax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/assets/ajax.png


--------------------------------------------------------------------------------
/assets/alarma.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/assets/alarma.mp3


--------------------------------------------------------------------------------
/assets/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "santos": [
 3 |     {
 4 |       "id": 1,
 5 |       "nombre": "Seiya",
 6 |       "constelacion": "Pegaso"
 7 |     },
 8 |     {
 9 |       "id": 2,
10 |       "nombre": "Shiryu",
11 |       "constelacion": "Dragón"
12 |     },
13 |     {
14 |       "id": 3,
15 |       "nombre": "Hyoga",
16 |       "constelacion": "Cisne"
17 |     },
18 |     {
19 |       "id": 4,
20 |       "nombre": "Shun",
21 |       "constelacion": "Andrómeda"
22 |     },
23 |     {
24 |       "id": 5,
25 |       "nombre": "Ikki",
26 |       "constelacion": "Fénix"
27 |     },
28 |     {
29 |       "nombre": "Mü",
30 |       "constelacion": "Aries",
31 |       "id": 6
32 |     },
33 |     {
34 |       "nombre": "Aldebaran",
35 |       "constelacion": "Tauro",
36 |       "id": 7
37 |     },
38 |     {
39 |       "nombre": "Saga",
40 |       "constelacion": "Geminis",
41 |       "id": 8
42 |     },
43 |     {
44 |       "nombre": "Máscara de Muerte",
45 |       "constelacion": "Cancer",
46 |       "id": 9
47 |     },
48 |     {
49 |       "nombre": "Aioria",
50 |       "constelacion": "Leo",
51 |       "id": 10
52 |     },
53 |     {
54 |       "nombre": "Shaka",
55 |       "constelacion": "Virgo",
56 |       "id": 11
57 |     },
58 |     {
59 |       "nombre": "Dohko",
60 |       "constelacion": "Libra",
61 |       "id": 12
62 |     }
63 |   ],
64 |   "dioses": [
65 |     {
66 |       "id": 1,
67 |       "nombre": "Athena",
68 |       "de": "Tierra"
69 |     },
70 |     {
71 |       "id": 2,
72 |       "nombre": "Poseidón",
73 |       "de": "Mar"
74 |     },
75 |     {
76 |       "id": 3,
77 |       "nombre": "Hades",
78 |       "de": "Inframundo"
79 |     },
80 |     {
81 |       "id": 4,
82 |       "nombre": "Zeus",
83 |       "de": "Cielo"
84 |     }
85 |   ]
86 | }
87 | 


--------------------------------------------------------------------------------
/assets/loader.svg:
--------------------------------------------------------------------------------
 1 | <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 2 | <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
 3 |     <g fill="none" fill-rule="evenodd">
 4 |         <g transform="translate(1 1)" stroke-width="2">
 5 |             <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
 6 |             <path d="M36 18c0-9.94-8.06-18-18-18">
 7 |                 <animateTransform
 8 |                     attributeName="transform"
 9 |                     type="rotate"
10 |                     from="0 18 18"
11 |                     to="360 18 18"
12 |                     dur="1s"
13 |                     repeatCount="indefinite"/>
14 |             </path>
15 |         </g>
16 |     </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/assets/users.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": 1,
  4 |     "name": "Leanne Graham",
  5 |     "username": "Bret",
  6 |     "email": "Sincere@april.biz",
  7 |     "address": {
  8 |       "street": "Kulas Light",
  9 |       "suite": "Apt. 556",
 10 |       "city": "Gwenborough",
 11 |       "zipcode": "92998-3874",
 12 |       "geo": {
 13 |         "lat": "-37.3159",
 14 |         "lng": "81.1496"
 15 |       }
 16 |     },
 17 |     "phone": "1-770-736-8031 x56442",
 18 |     "website": "hildegard.org",
 19 |     "company": {
 20 |       "name": "Romaguera-Crona",
 21 |       "catchPhrase": "Multi-layered client-server neural-net",
 22 |       "bs": "harness real-time e-markets"
 23 |     }
 24 |   },
 25 |   {
 26 |     "id": 2,
 27 |     "name": "Ervin Howell",
 28 |     "username": "Antonette",
 29 |     "email": "Shanna@melissa.tv",
 30 |     "address": {
 31 |       "street": "Victor Plains",
 32 |       "suite": "Suite 879",
 33 |       "city": "Wisokyburgh",
 34 |       "zipcode": "90566-7771",
 35 |       "geo": {
 36 |         "lat": "-43.9509",
 37 |         "lng": "-34.4618"
 38 |       }
 39 |     },
 40 |     "phone": "010-692-6593 x09125",
 41 |     "website": "anastasia.net",
 42 |     "company": {
 43 |       "name": "Deckow-Crist",
 44 |       "catchPhrase": "Proactive didactic contingency",
 45 |       "bs": "synergize scalable supply-chains"
 46 |     }
 47 |   },
 48 |   {
 49 |     "id": 3,
 50 |     "name": "Clementine Bauch",
 51 |     "username": "Samantha",
 52 |     "email": "Nathan@yesenia.net",
 53 |     "address": {
 54 |       "street": "Douglas Extension",
 55 |       "suite": "Suite 847",
 56 |       "city": "McKenziehaven",
 57 |       "zipcode": "59590-4157",
 58 |       "geo": {
 59 |         "lat": "-68.6102",
 60 |         "lng": "-47.0653"
 61 |       }
 62 |     },
 63 |     "phone": "1-463-123-4447",
 64 |     "website": "ramiro.info",
 65 |     "company": {
 66 |       "name": "Romaguera-Jacobson",
 67 |       "catchPhrase": "Face to face bifurcated interface",
 68 |       "bs": "e-enable strategic applications"
 69 |     }
 70 |   },
 71 |   {
 72 |     "id": 4,
 73 |     "name": "Patricia Lebsack",
 74 |     "username": "Karianne",
 75 |     "email": "Julianne.OConner@kory.org",
 76 |     "address": {
 77 |       "street": "Hoeger Mall",
 78 |       "suite": "Apt. 692",
 79 |       "city": "South Elvis",
 80 |       "zipcode": "53919-4257",
 81 |       "geo": {
 82 |         "lat": "29.4572",
 83 |         "lng": "-164.2990"
 84 |       }
 85 |     },
 86 |     "phone": "493-170-9623 x156",
 87 |     "website": "kale.biz",
 88 |     "company": {
 89 |       "name": "Robel-Corkery",
 90 |       "catchPhrase": "Multi-tiered zero tolerance productivity",
 91 |       "bs": "transition cutting-edge web services"
 92 |     }
 93 |   },
 94 |   {
 95 |     "id": 5,
 96 |     "name": "Chelsey Dietrich",
 97 |     "username": "Kamren",
 98 |     "email": "Lucio_Hettinger@annie.ca",
 99 |     "address": {
100 |       "street": "Skiles Walks",
101 |       "suite": "Suite 351",
102 |       "city": "Roscoeview",
103 |       "zipcode": "33263",
104 |       "geo": {
105 |         "lat": "-31.8129",
106 |         "lng": "62.5342"
107 |       }
108 |     },
109 |     "phone": "(254)954-1289",
110 |     "website": "demarco.info",
111 |     "company": {
112 |       "name": "Keebler LLC",
113 |       "catchPhrase": "User-centric fault-tolerant solution",
114 |       "bs": "revolutionize end-to-end systems"
115 |     }
116 |   },
117 |   {
118 |     "id": 6,
119 |     "name": "Mrs. Dennis Schulist",
120 |     "username": "Leopoldo_Corkery",
121 |     "email": "Karley_Dach@jasper.info",
122 |     "address": {
123 |       "street": "Norberto Crossing",
124 |       "suite": "Apt. 950",
125 |       "city": "South Christy",
126 |       "zipcode": "23505-1337",
127 |       "geo": {
128 |         "lat": "-71.4197",
129 |         "lng": "71.7478"
130 |       }
131 |     },
132 |     "phone": "1-477-935-8478 x6430",
133 |     "website": "ola.org",
134 |     "company": {
135 |       "name": "Considine-Lockman",
136 |       "catchPhrase": "Synchronised bottom-line interface",
137 |       "bs": "e-enable innovative applications"
138 |     }
139 |   },
140 |   {
141 |     "id": 7,
142 |     "name": "Kurtis Weissnat",
143 |     "username": "Elwyn.Skiles",
144 |     "email": "Telly.Hoeger@billy.biz",
145 |     "address": {
146 |       "street": "Rex Trail",
147 |       "suite": "Suite 280",
148 |       "city": "Howemouth",
149 |       "zipcode": "58804-1099",
150 |       "geo": {
151 |         "lat": "24.8918",
152 |         "lng": "21.8984"
153 |       }
154 |     },
155 |     "phone": "210.067.6132",
156 |     "website": "elvis.io",
157 |     "company": {
158 |       "name": "Johns Group",
159 |       "catchPhrase": "Configurable multimedia task-force",
160 |       "bs": "generate enterprise e-tailers"
161 |     }
162 |   },
163 |   {
164 |     "id": 8,
165 |     "name": "Nicholas Runolfsdottir V",
166 |     "username": "Maxime_Nienow",
167 |     "email": "Sherwood@rosamond.me",
168 |     "address": {
169 |       "street": "Ellsworth Summit",
170 |       "suite": "Suite 729",
171 |       "city": "Aliyaview",
172 |       "zipcode": "45169",
173 |       "geo": {
174 |         "lat": "-14.3990",
175 |         "lng": "-120.7677"
176 |       }
177 |     },
178 |     "phone": "586.493.6943 x140",
179 |     "website": "jacynthe.com",
180 |     "company": {
181 |       "name": "Abernathy Group",
182 |       "catchPhrase": "Implemented secondary concept",
183 |       "bs": "e-enable extensible e-tailers"
184 |     }
185 |   },
186 |   {
187 |     "id": 9,
188 |     "name": "Glenna Reichert",
189 |     "username": "Delphine",
190 |     "email": "Chaim_McDermott@dana.io",
191 |     "address": {
192 |       "street": "Dayna Park",
193 |       "suite": "Suite 449",
194 |       "city": "Bartholomebury",
195 |       "zipcode": "76495-3109",
196 |       "geo": {
197 |         "lat": "24.6463",
198 |         "lng": "-168.8889"
199 |       }
200 |     },
201 |     "phone": "(775)976-6794 x41206",
202 |     "website": "conrad.com",
203 |     "company": {
204 |       "name": "Yost and Sons",
205 |       "catchPhrase": "Switchable contextually-based project",
206 |       "bs": "aggregate real-time technologies"
207 |     }
208 |   },
209 |   {
210 |     "id": 10,
211 |     "name": "Clementina DuBuque",
212 |     "username": "Moriah.Stanton",
213 |     "email": "Rey.Padberg@karina.biz",
214 |     "address": {
215 |       "street": "Kattie Turnpike",
216 |       "suite": "Suite 198",
217 |       "city": "Lebsackbury",
218 |       "zipcode": "31428-2261",
219 |       "geo": {
220 |         "lat": "-38.2386",
221 |         "lng": "57.2232"
222 |       }
223 |     },
224 |     "phone": "024-648-3804",
225 |     "website": "ambrose.net",
226 |     "company": {
227 |       "name": "Hoeger LLC",
228 |       "catchPhrase": "Centralized empowering task-force",
229 |       "bs": "target end-to-end models"
230 |     }
231 |   }
232 | ]
233 | 


--------------------------------------------------------------------------------
/assets/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/assets/video.mp4


--------------------------------------------------------------------------------
/css/dom-ejercicios.css:
--------------------------------------------------------------------------------
  1 | /* **********     Reset CSS     ********** */
  2 | :root {
  3 |   --main-font: sans-serif;
  4 |   --font-size: 16px;
  5 |   --main-color: #f7df1e;
  6 |   --second-color: #222;
  7 |   --main-modal-color: rgba(247, 222, 30, 0.85);
  8 |   --second-modal-color: rgba(34, 34, 34, 0.85);
  9 |   --container-width: 1200px;
 10 | }
 11 | 
 12 | html {
 13 |   box-sizing: border-box;
 14 |   font-family: var(--main-font);
 15 |   font-size: var(--font-size);
 16 |   scroll-behavior: smooth;
 17 | }
 18 | 
 19 | *,
 20 | *:before,
 21 | *:after {
 22 |   box-sizing: inherit;
 23 | }
 24 | 
 25 | body {
 26 |   margin: 0;
 27 |   overflow-x: hidden;
 28 | }
 29 | 
 30 | img,
 31 | video {
 32 |   max-width: 100%;
 33 |   height: auto;
 34 | }
 35 | 
 36 | .flex-row-center {
 37 |   display: flex;
 38 |   justify-content: center;
 39 |   align-items: center;
 40 | }
 41 | 
 42 | /* **********     menu-hamburguesa     ********** */
 43 | 
 44 | .header {
 45 |   position: sticky;
 46 |   z-index: 997;
 47 |   top: 0;
 48 |   padding: 1rem;
 49 |   background-color: var(--main-color);
 50 |   color: var(--second-color);
 51 | }
 52 | 
 53 | .header h1 {
 54 |   margin: 0 auto;
 55 |   text-align: center;
 56 | }
 57 | 
 58 | .section {
 59 |   padding: 2rem;
 60 |   padding-top: 4rem;
 61 |   margin-left: auto;
 62 |   margin-right: auto;
 63 |   width: 100%;
 64 |   max-width: var(--container-width);
 65 |   min-height: 100vh;
 66 |   text-align: center;
 67 | }
 68 | 
 69 | .panel {
 70 |   position: fixed;
 71 |   z-index: 998;
 72 |   top: 0;
 73 |   bottom: 0;
 74 |   left: 0;
 75 |   right: 0;
 76 |   width: 100%;
 77 |   display: flex;
 78 |   flex-direction: column;
 79 |   justify-content: center;
 80 |   align-items: center;
 81 |   overflow-y: auto;
 82 |   background-color: var(--second-modal-color);
 83 |   opacity: 0;
 84 |   visibility: hidden;
 85 |   transition: transform 0.3s ease, opacity 0.5s ease;
 86 |   /* De arriba */
 87 |   transform: translate(0, -100%);
 88 |   /* De abajo */
 89 |   transform: translate(0, 100%);
 90 |   /* De la derecha */
 91 |   transform: translate(100%, 0);
 92 |   /* De la izquierda */
 93 |   transform: translate(-100%, 0);
 94 | }
 95 | 
 96 | .panel.is-active {
 97 |   transform: translate(0, 0);
 98 |   opacity: 1;
 99 |   visibility: visible;
100 | }
101 | 
102 | .panel-btn {
103 |   position: fixed;
104 |   z-index: 999;
105 |   bottom: 1vh;
106 |   right: 1vw;
107 |   width: 4rem;
108 |   height: 4rem;
109 |   border-radius: 50%;
110 |   padding: 0;
111 |   display: flex;
112 |   justify-content: center;
113 |   align-items: center;
114 |   background-color: var(--main-color);
115 | }
116 | 
117 | .menu {
118 |   width: inherit;
119 |   display: flex;
120 |   flex-direction: column;
121 |   justify-content: space-evenly;
122 |   align-items: center;
123 |   text-align: center;
124 | }
125 | 
126 | .menu a {
127 |   padding: 2rem;
128 |   width: inherit;
129 |   display: block;
130 |   font-size: 1.5rem;
131 |   text-decoration: none;
132 |   color: var(--main-color);
133 |   transition: all 0.3s ease;
134 | }
135 | 
136 | .menu a:hover {
137 |   font-weight: bold;
138 |   color: var(--second-color);
139 |   background-color: var(--main-modal-color);
140 | }
141 | 
142 | /* **********     Eventos del Teclado     ********** */
143 | 
144 | .stage {
145 |   display: flex;
146 |   min-height: 50vh;
147 |   background-color: var(--second-color);
148 | }
149 | 
150 | .ball {
151 |   margin: auto;
152 |   width: 4rem;
153 |   height: 4rem;
154 |   border-radius: 50%;
155 |   background-color: var(--main-color);
156 | }
157 | 
158 | /* **********     ScrollTopButton     ********** */
159 | .scroll-top-btn {
160 |   position: fixed;
161 |   z-index: 999;
162 |   bottom: 1vh;
163 |   right: calc(4.25rem + 1vw);
164 |   width: 4rem;
165 |   height: 4rem;
166 |   border-radius: 50%;
167 |   font-size: 2rem;
168 |   font-weight: bold;
169 |   background-color: var(--main-color);
170 |   color: var(--second-color);
171 |   cursor: pointer;
172 |   outline: 0;
173 |   border: 0;
174 |   transition: all 0.3s ease-out;
175 | }
176 | 
177 | .scroll-top-btn:hover {
178 |   background-color: var(--second-color);
179 |   color: var(--main-color);
180 | }
181 | 
182 | .hidden {
183 |   visibility: hidden;
184 |   opacity: 0;
185 | }
186 | 
187 | /* **********     DarkThemeButton     ********** */
188 | .dark-theme-btn {
189 |   position: fixed;
190 |   z-index: 999;
191 |   bottom: 1vh;
192 |   left: 1vw;
193 |   width: 4rem;
194 |   height: 4rem;
195 |   border-radius: 50%;
196 |   font-size: 2rem;
197 |   font-weight: bold;
198 |   background-color: var(--main-color);
199 |   color: var(--second-color);
200 |   cursor: pointer;
201 |   outline: 0;
202 |   border: 0;
203 |   transition: all 0.3s ease-out;
204 | }
205 | 
206 | .dark-theme-btn:hover {
207 |   background-color: var(--second-color);
208 |   color: var(--main-color);
209 | }
210 | 
211 | .dark-mode {
212 |   background-color: var(--second-color);
213 |   color: var(--main-color);
214 | }
215 | 
216 | /* **********     Network Status     ********** */
217 | .online,
218 | .offline {
219 |   position: sticky;
220 |   top: 0;
221 |   z-index: 1000;
222 |   padding: 1rem;
223 |   font-size: 1.5rem;
224 |   font-weight: bold;
225 |   text-align: center;
226 |   background-color: #1b5e20;
227 |   color: #fff;
228 | }
229 | 
230 | .offline {
231 |   background-color: #b71c1c;
232 | }
233 | 
234 | /* **********     SearchFilters     ********** */
235 | .cards {
236 |   display: grid;
237 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
238 | }
239 | 
240 | .card {
241 |   background-color: var(--second-color);
242 |   color: var(--main-color);
243 |   transition: all 0.3s ease-out;
244 | }
245 | 
246 | .card img {
247 |   width: 100%;
248 |   height: auto;
249 | }
250 | 
251 | .card figcaption {
252 |   padding: 1rem;
253 | }
254 | 
255 | .filter {
256 |   /* display: none; */
257 |   visibility: hidden;
258 |   opacity: 0;
259 |   order: 1;
260 | }
261 | 
262 | /* **********     Responsive Slider     ********** */
263 | .slider {
264 |   position: relative;
265 |   width: 80%;
266 |   margin: 1rem auto;
267 |   /* border: thin solid black; */
268 |   text-align: center;
269 | }
270 | 
271 | .slider-slides {
272 |   position: relative;
273 |   height: 400px;
274 | }
275 | 
276 | .slider-slide {
277 |   position: absolute;
278 |   top: 0;
279 |   left: 0;
280 |   width: 100%;
281 |   height: 100%;
282 |   opacity: 0;
283 |   visibility: hidden;
284 |   transition: opacity 1s ease;
285 | }
286 | 
287 | .slider-slide img {
288 |   height: inherit;
289 |   width: inherit;
290 |   object-fit: cover;
291 |   object-position: 50% 0%;
292 | }
293 | 
294 | .slider-slide.active {
295 |   opacity: 1;
296 |   visibility: visible;
297 | }
298 | 
299 | .slider-btns {
300 |   position: absolute;
301 |   width: 100%;
302 |   top: calc(50% - 2rem);
303 |   display: flex;
304 |   justify-content: space-between;
305 |   font-size: 3rem;
306 |   font-weight: bold;
307 | }
308 | 
309 | .slider a {
310 |   display: block;
311 |   width: 4rem;
312 |   height: 4rem;
313 |   border-radius: 50%;
314 |   border: thin solid #000;
315 |   text-decoration: none;
316 |   background-color: #fff;
317 |   color: #000;
318 |   transition: all 0.3s ease;
319 | }
320 | 
321 | .slider a:hover {
322 |   color: #4d4d4d;
323 | }
324 | 
325 | /* **********     ScrollSpy     ********** */
326 | @media screen and (min-width: 1024px) {
327 |   body {
328 |     display: grid;
329 |     grid-template-columns: 80% 20%;
330 |     grid-template-rows: 4rem auto;
331 |     grid-template-areas:
332 |       "header header"
333 |       "main panel";
334 |   }
335 | 
336 |   main {
337 |     grid-area: main;
338 |   }
339 | 
340 |   .header {
341 |     grid-area: header;
342 |   }
343 | 
344 |   .panel {
345 |     grid-area: panel;
346 |     align-self: start;
347 |     position: sticky;
348 |     top: 4rem;
349 |     justify-content: flex-start;
350 |     background-color: var(--second-color);
351 |     transform: translate(0, 0);
352 |     opacity: 1;
353 |     visibility: visible;
354 |     overflow-y: auto;
355 |   }
356 | 
357 |   .panel-btn {
358 |     display: none;
359 |   }
360 | 
361 |   .menu {
362 |     justify-content: start;
363 |     text-align: right;
364 |   }
365 | 
366 |   .menu a {
367 |     padding: 0.75rem;
368 |     font-size: 1rem;
369 |   }
370 | 
371 |   .menu a:hover,
372 |   .menu a.active {
373 |     color: var(--second-color);
374 |     background-color: var(--main-color);
375 |   }
376 | 
377 |   .scroll-top-btn {
378 |     right: initial;
379 |     left: calc(4.25rem + 1vw);
380 |   }
381 | }
382 | 
383 | /* **********     ContactForm Validations     ********** */
384 | .contact-form {
385 |   --form-ok-color: #4caf50;
386 |   --form-error-color: #f44336;
387 |   margin-left: auto;
388 |   margin-right: auto;
389 |   width: 80%;
390 | }
391 | 
392 | .contact-form > * {
393 |   padding: 0.5rem;
394 |   margin: 1rem auto;
395 |   display: block;
396 |   width: 100%;
397 | }
398 | 
399 | .contact-form textarea {
400 |   resize: none;
401 | }
402 | 
403 | .contact-form legend,
404 | .contact-form-response {
405 |   font-size: 1.5rem;
406 |   font-weight: bold;
407 |   text-align: center;
408 | }
409 | 
410 | .contact-form input,
411 | .contact-form textarea {
412 |   font-size: 1rem;
413 |   font-family: sans-serif;
414 | }
415 | 
416 | .contact-form input[type="submit"] {
417 |   width: 50%;
418 |   font-weight: bold;
419 |   cursor: pointer;
420 | }
421 | 
422 | .contact-form *::placeholder {
423 |   color: #000;
424 | }
425 | 
426 | .contact-form [required]:valid {
427 |   border: thin solid var(--form-ok-color);
428 | }
429 | 
430 | .contact-form [required]:invalid {
431 |   border: thin solid var(--form-error-color);
432 | }
433 | 
434 | .contact-form-error {
435 |   margin-top: -1rem;
436 |   font-size: 80%;
437 |   background-color: var(--form-error-color);
438 |   color: #fff;
439 |   transition: all 800ms ease;
440 | }
441 | 
442 | .contact-form-error.is-active {
443 |   display: block;
444 |   animation: show-message 1s 1 normal 0s ease-out both;
445 | }
446 | 
447 | .none {
448 |   display: none;
449 | }
450 | 
451 | @keyframes show-message {
452 |   0% {
453 |     visibility: hidden;
454 |     opacity: 0;
455 |   }
456 | 
457 |   100% {
458 |     visibility: visible;
459 |     opacity: 1;
460 |   }
461 | }
462 | 


--------------------------------------------------------------------------------
/js/ajax.js:
--------------------------------------------------------------------------------
  1 | /* **********     Curso JavaScript: 106. AJAX: Objeto XMLHttpRequest - #jonmircha     ********** */
  2 | (() => {
  3 |   const xhr = new XMLHttpRequest(),
  4 |     $xhr = document.getElementById("xhr"),
  5 |     $fragment = document.createDocumentFragment();
  6 | 
  7 |   xhr.addEventListener("readystatechange", (e) => {
  8 |     if (xhr.readyState !== 4) return;
  9 | 
 10 |     //console.log(xhr);
 11 | 
 12 |     if (xhr.status >= 200 && xhr.status < 300) {
 13 |       //console.log("éxito");
 14 |       //console.log(xhr.responseText);
 15 |       //$xhr.innerHTML = xhr.responseText;
 16 |       let json = JSON.parse(xhr.responseText);
 17 |       //console.log(json);
 18 | 
 19 |       json.forEach((el) => {
 20 |         const $li = document.createElement("li");
 21 |         $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
 22 |         $fragment.appendChild($li);
 23 |       });
 24 | 
 25 |       $xhr.appendChild($fragment);
 26 |     } else {
 27 |       //console.log("error");
 28 |       let message = xhr.statusText || "Ocurrió un error";
 29 |       $xhr.innerHTML = `Error ${xhr.status}: ${message}`;
 30 |     }
 31 | 
 32 |     //console.log("Este mensaje cargará de cualquier forma");
 33 |   });
 34 | 
 35 |   xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
 36 |   //xhr.open("GET", "assets/users.json");
 37 | 
 38 |   xhr.send();
 39 | })();
 40 | 
 41 | /* **********     Curso JavaScript: 107. AJAX: API Fetch - #jonmircha     ********** */
 42 | (() => {
 43 |   const $fetch = document.getElementById("fetch"),
 44 |     $fragment = document.createDocumentFragment();
 45 | 
 46 |   //fetch("assets/users.json")
 47 |   fetch("https://jsonplaceholder.typicode.com/users")
 48 |     /* .then((res) => {
 49 |       console.log(res);
 50 |       return res.ok ? res.json() : Promise.reject(res);
 51 |     }) */
 52 |     .then((res) => (res.ok ? res.json() : Promise.reject(res)))
 53 |     .then((json) => {
 54 |       //console.log(json);
 55 |       //$fetch.innerHTML = json;
 56 |       json.forEach((el) => {
 57 |         const $li = document.createElement("li");
 58 |         $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
 59 |         $fragment.appendChild($li);
 60 |       });
 61 | 
 62 |       $fetch.appendChild($fragment);
 63 |     })
 64 |     .catch((err) => {
 65 |       //console.log(err);
 66 |       let message = err.statusText || "Ocurrió un error";
 67 |       $fetch.innerHTML = `Error ${err.status}: ${message}`;
 68 |     })
 69 |     .finally(() => {
 70 |       //console.log("Esto se ejecutará independientemente del resultado de la Promesa Fetch")
 71 |     });
 72 | })();
 73 | 
 74 | /* **********     Curso JavaScript: 108. AJAX: API Fetch + Async-Await - #jonmircha     ********** */
 75 | (() => {
 76 |   const $fetchAsync = document.getElementById("fetch-async"),
 77 |     $fragment = document.createDocumentFragment();
 78 | 
 79 |   async function getData() {
 80 |     try {
 81 |       let res = await fetch("https://jsonplaceholder.typicode.com/users"),
 82 |         json = await res.json();
 83 | 
 84 |       //console.log(res, json);
 85 | 
 86 |       //if (!res.ok) throw new Error("Ocurrio un Error al solicitar los Datos");
 87 |       if (!res.ok) throw { status: res.status, statusText: res.statusText };
 88 | 
 89 |       json.forEach((el) => {
 90 |         const $li = document.createElement("li");
 91 |         $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
 92 |         $fragment.appendChild($li);
 93 |       });
 94 | 
 95 |       $fetchAsync.appendChild($fragment);
 96 |     } catch (err) {
 97 |       //console.log(err);
 98 |       let message = err.statusText || "Ocurrió un error";
 99 |       $fetchAsync.innerHTML = `Error ${err.status}: ${message}`;
100 |     } finally {
101 |       //console.log("Esto se ejecutará independientemente del try... catch");
102 |     }
103 |   }
104 | 
105 |   getData();
106 | })();
107 | 
108 | /* **********     Curso JavaScript: 109. AJAX: Librería Axios - #jonmircha     ********** */
109 | (() => {
110 |   const $axios = document.getElementById("axios"),
111 |     $fragment = document.createDocumentFragment();
112 | 
113 |   axios
114 |     //.get("assets/users.json")
115 |     .get("https://jsonplaceholder.typicode.com/users")
116 |     .then((res) => {
117 |       //console.log(res);
118 |       let json = res.data;
119 | 
120 |       json.forEach((el) => {
121 |         const $li = document.createElement("li");
122 |         $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
123 |         $fragment.appendChild($li);
124 |       });
125 | 
126 |       $axios.appendChild($fragment);
127 |     })
128 |     .catch((err) => {
129 |       //console.log(err.response);
130 |       let message = err.response.statusText || "Ocurrió un error";
131 |       $axios.innerHTML = `Error ${err.response.status}: ${message}`;
132 |     })
133 |     .finally(() => {
134 |       //console.log("Esto se ejecutará independientemente del resultado Axios");
135 |     });
136 | })();
137 | 
138 | /* **********     Curso JavaScript: 110. AJAX: Librería Axios + Async-Await - #jonmircha     ********** */
139 | (() => {
140 |   const $axiosAsync = document.getElementById("axios-async"),
141 |     $fragment = document.createDocumentFragment();
142 | 
143 |   async function getData() {
144 |     try {
145 |       let res = await axios.get("https://jsonplaceholder.typicode.com/users"),
146 |         json = await res.data;
147 | 
148 |       //console.log(res, json);
149 | 
150 |       json.forEach((el) => {
151 |         const $li = document.createElement("li");
152 |         $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
153 |         $fragment.appendChild($li);
154 |       });
155 | 
156 |       $axiosAsync.appendChild($fragment);
157 |     } catch (err) {
158 |       //console.log(err.response);
159 |       let message = err.response.statusText || "Ocurrió un error";
160 |       $axiosAsync.innerHTML = `Error ${err.response.status}: ${message}`;
161 |     } finally {
162 |       //console.log("Esto se ejecutará independientemente del try... catch");
163 |     }
164 |   }
165 | 
166 |   getData();
167 | })();
168 | 


--------------------------------------------------------------------------------
/js/aritmetica.js:
--------------------------------------------------------------------------------
 1 | /* **********     Curso JavaScript: 33. Módulos ( import / export ) - #jonmircha     ********** */
 2 | function sumar(a, b) {
 3 |   return a + b;
 4 | }
 5 | 
 6 | function restar(a, b) {
 7 |   return a - b;
 8 | }
 9 | 
10 | export const aritmetica = {
11 |   sumar,
12 |   restar
13 | };
14 | 


--------------------------------------------------------------------------------
/js/constantes.js:
--------------------------------------------------------------------------------
 1 | /* **********     Curso JavaScript: 33. Módulos ( import / export ) - #jonmircha     ********** */
 2 | export const PI = Math.PI;
 3 | 
 4 | export let usuario = "Jon";
 5 | 
 6 | const password = "qwerty";
 7 | //export default password;
 8 | 
 9 | const hello = () => console.log("Hola");
10 | 
11 | export default function saludar() {
12 |   console.log("Hola Módulos +ES6");
13 | }
14 | 
15 | export class Saludar {
16 |   constructor() {
17 |     console.log("Hola Clases +ES6");
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/js/datos.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "cadena": "Jon",
 3 |   "numero": 35,
 4 |   "booleano": true,
 5 |   "arreglo": ["correr", "programar", "cocinar"],
 6 |   "objeto": {
 7 |     "twitter": "@jonmircha",
 8 |     "email": "jonmircha@gmail.com"
 9 |   },
10 |   "nulo": null
11 | }
12 | 


--------------------------------------------------------------------------------
/js/dom.js:
--------------------------------------------------------------------------------
  1 | /* **********     Curso JavaScript: 60. WEB APIs - #jonmircha     ********** */
  2 | /* https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model */
  3 | /* https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API */
  4 | /* https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model */
  5 | 
  6 | /* console.log(window);
  7 | console.log(document);
  8 | 
  9 | let texto = "Hola, soy tu amigo y docente digital... Jonathan MirCha";
 10 | const hablar = (texto) => speechSynthesis.speak(new SpeechSynthesisUtterance(texto));
 11 | hablar(texto); */
 12 | /*
 13 | 
 14 | 
 15 | 
 16 | 
 17 | 
 18 | */
 19 | /* **********     Curso JavaScript: 61. DOM: Introducción - #jonmircha     ********** */
 20 | /* console.log("********** Elementos del Documento **********");
 21 | console.log(window.document);
 22 | console.log(document);
 23 | console.log(document.head);
 24 | console.log(document.body);
 25 | console.log(document.documentElement);
 26 | console.log(document.doctype);
 27 | console.log(document.charset);
 28 | console.log(document.title);
 29 | console.log(document.links);
 30 | console.log(document.images);
 31 | console.log(document.forms);
 32 | console.log(document.styleSheets);
 33 | console.log(document.scripts);
 34 | setTimeout(() => {
 35 |   console.log(document.getSelection().toString());
 36 | }, 2000);
 37 | document.write("<h2>Hola Mundo desde el DOM</h2>"); */
 38 | /*
 39 | 
 40 | 
 41 | 
 42 | 
 43 | 
 44 | */
 45 | /* **********     Curso JavaScript: 62. DOM: Nodos, Elementos y Selectores - #jonmircha     ********** */
 46 | //https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
 47 | /* console.log(document.getElementsByTagName("li"));
 48 | console.log(document.getElementsByClassName("card"));
 49 | console.log(document.getElementsByName("nombre"));
 50 | console.log(document.getElementById("menu"));
 51 | console.log(document.querySelector("#menu"));
 52 | console.log(document.querySelector("a"));
 53 | console.log(document.querySelectorAll("a"));
 54 | console.log(document.querySelectorAll("a").length);
 55 | document.querySelectorAll("a").forEach((el) => console.log(el));
 56 | console.log(document.querySelector(".card"));
 57 | console.log(document.querySelectorAll(".card"));
 58 | console.log(document.querySelectorAll(".card")[2]);
 59 | console.log(document.querySelector("#menu li"));
 60 | console.log(document.querySelectorAll("#menu li")); */
 61 | /*
 62 | 
 63 | 
 64 | 
 65 | 
 66 | 
 67 | */
 68 | /* **********     Curso JavaScript: 63. DOM: Atributos y Data-Attributes - #jonmircha     ********** */
 69 | /* console.log(document.documentElement.lang);
 70 | console.log(document.documentElement.getAttribute("lang"));
 71 | console.log(document.querySelector(".link-dom").href);
 72 | console.log(document.querySelector(".link-dom").getAttribute("href"));
 73 | 
 74 | document.documentElement.lang = "en";
 75 | console.log(document.documentElement.lang);
 76 | document.documentElement.setAttribute("lang", "es-MX");
 77 | console.log(document.documentElement.lang);
 78 | 
 79 | const $linkDOM = document.querySelector(".link-dom");
 80 | 
 81 | $linkDOM.setAttribute("target", "_blank");
 82 | $linkDOM.setAttribute("rel", "noopener");
 83 | $linkDOM.setAttribute("href", "https://youtube.com/jonmircha");
 84 | console.log($linkDOM.hasAttribute("rel"));
 85 | $linkDOM.removeAttribute("rel");
 86 | console.log($linkDOM.hasAttribute("rel"));
 87 | 
 88 | //Data-Attributes
 89 | console.log($linkDOM.getAttribute("data-description"));
 90 | console.log($linkDOM.dataset);
 91 | console.log($linkDOM.dataset.description);
 92 | $linkDOM.setAttribute("data-description", "Modelo de Objeto del Documento");
 93 | console.log($linkDOM.dataset.description);
 94 | $linkDOM.dataset.description = "Suscríbete a mi canal y comparte";
 95 | console.log($linkDOM.dataset.description);
 96 | console.log($linkDOM.hasAttribute("data-id"));
 97 | $linkDOM.removeAttribute("data-id");
 98 | console.log($linkDOM.hasAttribute("data-id")); */
 99 | /*
100 | 
101 | 
102 | 
103 | 
104 | 
105 | */
106 | /* **********     Curso JavaScript: 64. DOM: Estilos y Variables CSS - #jonmircha     ********** */
107 | /* const $linkDOM = document.querySelector(".link-dom");
108 | 
109 | console.log($linkDOM.style);
110 | console.log($linkDOM.getAttribute("style"));
111 | console.log($linkDOM.style.backgroundColor);
112 | console.log($linkDOM.style.color);
113 | console.log(window.getComputedStyle($linkDOM));
114 | console.log(getComputedStyle($linkDOM).getPropertyValue("color"));
115 | 
116 | $linkDOM.style.setProperty("text-decoration", "none");
117 | $linkDOM.style.setProperty("display", "block");
118 | $linkDOM.style.width = "50%";
119 | $linkDOM.style.textAlign = "center";
120 | $linkDOM.style.marginLeft = "auto";
121 | $linkDOM.style.marginRight = "auto";
122 | $linkDOM.style.padding = "1rem";
123 | $linkDOM.style.borderRadius = ".5rem";
124 | 
125 | console.log($linkDOM.style);
126 | console.log($linkDOM.getAttribute("style"));
127 | console.log(getComputedStyle($linkDOM));
128 | 
129 | //Variables CSS - Custom Properties CSS
130 | const $html = document.documentElement,
131 |   $body = document.body;
132 | 
133 | let varDarkColor = getComputedStyle($html).getPropertyValue("--dark-color"),
134 |   varYellowColor = getComputedStyle($html).getPropertyValue("--yellow-color");
135 | 
136 | console.log(varDarkColor, varYellowColor);
137 | 
138 | $body.style.backgroundColor = varDarkColor;
139 | $body.style.color = varYellowColor;
140 | 
141 | $html.style.setProperty("--dark-color", "#000");
142 | varDarkColor = getComputedStyle($html).getPropertyValue("--dark-color");
143 | 
144 | $body.style.setProperty("background-color", varDarkColor); */
145 | /*
146 | 
147 | 
148 | 
149 | 
150 | 
151 | */
152 | /* **********     Curso JavaScript: 65. DOM: Clases CSS - #jonmircha     ********** */
153 | /* const $card = document.querySelector(".card");
154 | 
155 | console.log($card);
156 | console.log($card.className);
157 | console.log($card.classList);
158 | console.log($card.classList.contains("rotate-45"));
159 | $card.classList.add("rotate-45");
160 | console.log($card.classList.contains("rotate-45"));
161 | console.log($card.className);
162 | console.log($card.classList);
163 | $card.classList.remove("rotate-45");
164 | console.log($card.classList.contains("rotate-45"));
165 | $card.classList.toggle("rotate-45");
166 | console.log($card.classList.contains("rotate-45"));
167 | $card.classList.toggle("rotate-45");
168 | console.log($card.classList.contains("rotate-45"));
169 | $card.classList.toggle("rotate-45");
170 | $card.classList.replace("rotate-45", "rotate-135");
171 | $card.classList.add("opacity-80", "sepia");
172 | $card.classList.remove("opacity-80", "sepia");
173 | $card.classList.toggle("opacity-80", "sepia"); */
174 | /*
175 | 
176 | 
177 | 
178 | 
179 | 
180 | */
181 | /* **********     Curso JavaScript: 66. DOM: Texto y HTML - #jonmircha     ********** */
182 | /* const $whatIsDOM = document.getElementById("que-es");
183 | let text = `
184 |     <p>
185 |       El Modelo de Objetos del Documento (<b><i>DOM - Document Object Model</i></b>) es un API para documentos HTML y XML.
186 |     </p>
187 |     <p>
188 |       Éste proveé una representación estructural del documento, permitiendo modificar su contenido y presentación visual mediante código JS.
189 |     </p>
190 |     <p>
191 |       <mark>El DOM no es parte de la especificación de JavaScript, es una API para los navegadores.</mark>
192 |     </p>
193 |   `;
194 | 
195 | //$whatIsDOM.innerText = text;
196 | $whatIsDOM.textContent = text;
197 | $whatIsDOM.innerHTML = text;
198 | $whatIsDOM.outerHTML = text; */
199 | /*
200 | 
201 | 
202 | 
203 | 
204 | 
205 | */
206 | /* **********     Curso JavaScript: 67. DOM Traversing: Recorriendo el DOM - #jonmircha     ********** */
207 | /* const $cards = document.querySelector(".cards");
208 | 
209 | console.log($cards);
210 | console.log($cards.children);
211 | console.log($cards.children[2]);
212 | console.log($cards.parentElement);
213 | console.log($cards.firstElementChild);
214 | console.log($cards.lastElementChild);
215 | console.log($cards.previousElementSibling);
216 | console.log($cards.nextElementSibling);
217 | console.log($cards.closest("div"));
218 | console.log($cards.closest("body"));
219 | console.log($cards.children[3].closest("section")); */
220 | /*
221 | 
222 | 
223 | 
224 | 
225 | 
226 |  */
227 | /* **********     Curso JavaScript: 68. DOM: Creando Elementos y Fragmentos - #jonmircha     ********** */
228 | /* const $figure = document.createElement("figure"),
229 |   $img = document.createElement("img"),
230 |   $figcaption = document.createElement("figcaption"),
231 |   $figcaptionText = document.createTextNode("Animals"),
232 |   $cards = document.querySelector(".cards"),
233 |   $figure2 = document.createElement("figure");
234 | 
235 | $img.setAttribute("src", "https://placeimg.com/200/200/animals");
236 | $img.setAttribute("alt", "Animals");
237 | $figure.classList.add("card");
238 | 
239 | $figcaption.appendChild($figcaptionText);
240 | $figure.appendChild($img);
241 | $figure.appendChild($figcaption);
242 | $cards.appendChild($figure);
243 | 
244 | $figure2.innerHTML = `
245 | <img src="https://placeimg.com/200/200/people" alt="People">
246 | <figcaption>People</figcaption>
247 | `;
248 | $figure2.classList.add("card");
249 | 
250 | $cards.appendChild($figure2);
251 | 
252 | const estaciones = ["Primavera", "Verano", "Otoño", "Invierno"],
253 |   $ul = document.createElement("ul");
254 | 
255 | document.write("<h3>Estaciones del Año</h3>");
256 | document.body.appendChild($ul);
257 | 
258 | estaciones.forEach((el) => {
259 |   const $li = document.createElement("li");
260 |   $li.textContent = el;
261 |   $ul.appendChild($li);
262 | });
263 | 
264 | const continentes = ["África", "América", "Asia", "Europa", "Oceanía"],
265 |   $ul2 = document.createElement("ul");
266 | 
267 | document.write("<h3>Continentes del Mundo</h3>");
268 | document.body.appendChild($ul2);
269 | $ul2.innerHTML = "";
270 | continentes.forEach((el) => ($ul2.innerHTML += `<li>${el}</li>`));
271 | 
272 | const meses = [
273 |     "Enero",
274 |     "Febrero",
275 |     "Marzo",
276 |     "Abril",
277 |     "Mayo",
278 |     "Junio",
279 |     "Julio",
280 |     "Agosto",
281 |     "Septiembre",
282 |     "Octubre",
283 |     "Noviembre",
284 |     "Diciembre",
285 |   ],
286 |   $ul3 = document.createElement("ul"),
287 |   $fragment = document.createDocumentFragment();
288 | 
289 | meses.forEach((el) => {
290 |   const $li = document.createElement("li");
291 |   $li.textContent = el;
292 |   $fragment.appendChild($li);
293 | });
294 | 
295 | document.write("<h3>Meses del Año</h3>");
296 | $ul3.appendChild($fragment);
297 | document.body.appendChild($ul3); */
298 | /*
299 | 
300 | 
301 | 
302 | 
303 | 
304 | */
305 | /* **********     Curso JavaScript: 69. DOM: Templates HTML - #jonmircha     ********** */
306 | /* const $cards = document.querySelector(".cards"),
307 |   $template = document.getElementById("template-card").content,
308 |   $fragment = document.createDocumentFragment(),
309 |   cardsContent = [
310 |     {
311 |       title: "Tecnología",
312 |       img: "https://placeimg.com/200/200/tech",
313 |     },
314 |     {
315 |       title: "Animales",
316 |       img: "https://placeimg.com/200/200/animals",
317 |     },
318 |     {
319 |       title: "Arquitectura",
320 |       img: "https://placeimg.com/200/200/arch",
321 |     },
322 |     {
323 |       title: "Gente",
324 |       img: "https://placeimg.com/200/200/people",
325 |     },
326 |     {
327 |       title: "Naturaleza",
328 |       img: "https://placeimg.com/200/200/nature",
329 |     },
330 |   ];
331 | 
332 | cardsContent.forEach((el) => {
333 |   $template.querySelector("img").setAttribute("src", el.img);
334 |   $template.querySelector("img").setAttribute("alt", el.title);
335 |   $template.querySelector("figcaption").textContent = el.title;
336 | 
337 |   let $clone = document.importNode($template, true);
338 |   $fragment.appendChild($clone);
339 | });
340 | 
341 | $cards.appendChild($fragment); */
342 | /*
343 | 
344 | 
345 | 
346 | 
347 | 
348 | */
349 | /* **********     Curso JavaScript: 70. DOM: Modificando Elementos (Old Style) - #jonmircha     ********** */
350 | /* const $cards = document.querySelector(".cards"),
351 |   $newCard = document.createElement("figure"),
352 |   $cloneCards = $cards.cloneNode(true);
353 | 
354 | $newCard.innerHTML = `
355 |   <img src="https://placeimg.com/200/200/any" alt="Any">
356 |   <figcaption>Any</figcaption>
357 | `;
358 | $newCard.classList.add("card");
359 | 
360 | //$cards.replaceChild($newCard, $cards.children[2]);
361 | //$cards.removeChild($cards.lastElementChild);
362 | $cards.insertBefore($newCard, $cards.firstElementChild);
363 | document.body.appendChild($cloneCards); */
364 | /*
365 | 
366 | 
367 | 
368 | 
369 | 
370 | */
371 | /* **********     Curso JavaScript: 71. DOM: Modificando Elementos (Cool Style) - #jonmircha     ********** */
372 | /*
373 | .insertAdjacent...
374 |   .insertAdjacentElement(position, el)
375 |   .insertAdjacentHTML(position, html)
376 |   .insertAdjacentText(position, text)
377 | 
378 | Posiciones:
379 |   beforebegin(hermano anterior)
380 |   afterbegin(primer hijo)
381 |   beforeend(ultimo hijo)
382 |   afterend(hermano siguiente)
383 | */
384 | /* const $cards = document.querySelector(".cards"),
385 |   $newCard = document.createElement("figure");
386 | 
387 | let $contenCard = `
388 |   <img src="https://placeimg.com/200/200/any" alt="Any">
389 |   <figcaption></figcaption>
390 | `;
391 | $newCard.classList.add("card");
392 | 
393 | $newCard.insertAdjacentHTML("afterbegin", $contenCard);
394 | $cards.insertAdjacentElement("beforeend", $newCard);
395 | $newCard.querySelector("figcaption").insertAdjacentText("afterbegin", "Any"); */
396 | //$cards.prepend($newCard);
397 | //$cards.append($newCard);
398 | //$cards.before($newCard);
399 | //$cards.after($newCard);
400 | /*
401 | 
402 | 
403 | 
404 | 
405 | 
406 | */
407 | /* **********     Curso JavaScript: 72. DOM: Manejadores de Eventos - #jonmircha y Curso JavaScript: 73. DOM: Eventos con Parámetros y Remover Eventos - #jonmircha     ********** */
408 | /*
409 | Los eventos son los mecanismos que tenemos en JavaScript para controlar las acciones del usuario y definir el comportamiento del documento en cierto momento o cuando se cumplan ciertas condiciones.
410 | 
411 | Las funciones que se ejecutan en un evento se llaman Event Handler (Manejador de Eventos).
412 | 
413 | https://developer.mozilla.org/en-US/docs/Web/Events
414 | */
415 | /* function holaMundo() {
416 |   alert("Hola Mundo");
417 |   console.log(event);
418 | }
419 | 
420 | function saludar(nombre = "Desconocid@") {
421 |   alert(`Hola ${nombre}`);
422 |   console.log(event);
423 | }
424 | 
425 | const $eventoSemantico = document.getElementById("evento-semantico"),
426 |   $eventoMultiple = document.getElementById("evento-multiple"),
427 |   $eventoRemover = document.getElementById("evento-remover");
428 | 
429 | $eventoSemantico.onclick = holaMundo;
430 | $eventoSemantico.onclick = function (e) {
431 |   alert("Hola Mundo Manejador de Eventos Semántico");
432 |   console.log(e);
433 |   console.log(event);
434 | };
435 | 
436 | $eventoMultiple.addEventListener("click", holaMundo);
437 | $eventoMultiple.addEventListener("click", (e) => {
438 |   alert("Hola Mundo Manejador de Eventos Múltiple");
439 |   console.log(e);
440 |   console.log(e.type);
441 |   console.log(e.target);
442 |   console.log(event);
443 | });
444 | $eventoMultiple.addEventListener("click", () => {
445 |   saludar();
446 |   saludar("Jon");
447 | });
448 | 
449 | const removerDobleClick = (e) => {
450 |   alert(`Removiendo el evento de tipo ${e.type}`);
451 |   console.log(e);
452 |   $eventoRemover.removeEventListener("dblclick", removerDobleClick);
453 |   $eventoRemover.disabled = true;
454 | };
455 | 
456 | $eventoRemover.addEventListener("dblclick", removerDobleClick); */
457 | /*
458 | 
459 | 
460 | 
461 | 
462 | 
463 | */
464 | /* **********     Curso JavaScript: 74. DOM: Flujo de Eventos (Burbuja y Captura) - #jonmircha     ********** */
465 | /*
466 | Si no se especifica el parámetro boolean, el valor por defecto es false.
467 |   Si el boolean es falso se ejecuta la fase de burbuja (ir del elemento más interno al más externo <body>)
468 |   Si el boolean es verdadero se ejecuta la fase de captura (ir del elemento más externo <body> al más interno)
469 | */
470 | /* const $divsEventos = document.querySelectorAll(".eventos-flujo div");
471 | 
472 | function flujoEventos(e) {
473 |   console.log(
474 |     `Hola te saluda ${this.className}, el click lo originó ${e.target.className}`
475 |   );
476 | }
477 | 
478 | console.log($divsEventos);
479 | 
480 | $divsEventos.forEach((div) => {
481 |   //Fase de burbuja
482 |   //div.addEventListener("click", flujoEventos);
483 |   //div.addEventListener("click", flujoEventos, false);
484 |   //Fase de captura
485 |   //div.addEventListener("click", flujoEventos, true);
486 |   div.addEventListener("click", flujoEventos, {
487 |     capture: false,
488 |     once: true,
489 |   });
490 | }); */
491 | /*
492 | 
493 | 
494 | 
495 | 
496 | 
497 | */
498 | /* **********     Curso JavaScript: 75. DOM: stopPropagation & preventDefault - #jonmircha     ********** */
499 | /* const $divsEventos = document.querySelectorAll(".eventos-flujo div"),
500 |   $linkEventos = document.querySelector(".eventos-flujo a");
501 | 
502 | function flujoEventos(e) {
503 |   console.log(
504 |     `Hola te saluda ${this.className}, el click lo originó ${e.target.className}`
505 |   );
506 |   e.stopPropagation();
507 | }
508 | 
509 | console.log($divsEventos);
510 | 
511 | $divsEventos.forEach((div) => {
512 |   //Fase de burbuja
513 |   div.addEventListener("click", flujoEventos);
514 |   //div.addEventListener("click", flujoEventos, false);
515 |   //Fase de captura
516 |   //div.addEventListener("click", flujoEventos, true);
517 |   //div.addEventListener("click", flujoEventos, {
518 |     //capture: false,
519 |     //once: true,
520 |   //});
521 | });
522 | 
523 | $linkEventos.addEventListener("click", (e) => {
524 |   alert("Hola soy tu amigo y docente digital... Jonathan MirCha");
525 |   e.preventDefault();
526 |   e.stopPropagation();
527 | }); */
528 | /*
529 | 
530 | 
531 | 
532 | 
533 | 
534 | */
535 | /* **********     Curso JavaScript: 76. DOM: Delegación de Eventos - #jonmircha     ********** */
536 | /* function flujoEventos(e) {
537 |   console.log(
538 |     `Hola te saluda ${this} el click lo originó ${e.target.className}`
539 |   );
540 |   //e.stopPropagation();
541 | }
542 | 
543 | document.addEventListener("click", (e) => {
544 |   if (e.target.matches(".eventos-flujo div")) {
545 |     flujoEventos(e);
546 |   }
547 | 
548 |   if (e.target.matches(".eventos-flujo a")) {
549 |     alert("Hola soy tu amigo y docente digital... Jonathan MirCha");
550 |     e.preventDefault();
551 |     //e.stopPropagation();
552 |   }
553 | }); */
554 | /*
555 | 
556 | 
557 | 
558 | 
559 | 
560 | */
561 | /* **********     Curso JavaScript: 77. BOM: Propiedades y Eventos - #jonmircha     ********** */
562 | /*
563 | El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, imágenes y subtramas para finalizar la carga.
564 | 
565 | El evento load se dispara cuando se ha detectado la carga completa de la página.
566 | 
567 | Es un error frecuente usar load cuando DOMContentLoaded es mucho más apropiado.
568 | 
569 | Peticiones asíncronas pausan el parseo del DOM.
570 | */
571 | /* window.addEventListener("resize", (e) => {
572 |   console.clear();
573 |   console.log("********** Evento Resize **********");
574 |   console.log(window.innerWidth);
575 |   console.log(window.innerHeight);
576 |   console.log(window.outerWidth);
577 |   console.log(window.outerHeight);
578 |   console.log(e);
579 | });
580 | 
581 | window.addEventListener("scroll", (e) => {
582 |   console.clear();
583 |   console.log("********** Evento Scroll **********");
584 |   console.log(window.scrollX);
585 |   console.log(window.scrollY);
586 |   console.log(e);
587 | });
588 | 
589 | window.addEventListener("load", (e) => {
590 |   console.log("********** Evento Load **********");
591 |   console.log(window.screenX);
592 |   console.log(window.screenY);
593 |   console.log(e);
594 | });
595 | 
596 | document.addEventListener("DOMContentLoaded", (e) => {
597 |   console.log("********** Evento DOMContentLoaded **********");
598 |   console.log(window.screenX);
599 |   console.log(window.screenY);
600 |   console.log(e);
601 | }); */
602 | /*
603 | 
604 | 
605 | 
606 | 
607 | 
608 | */
609 | /* **********     Curso JavaScript: 78. BOM: Métodos - #jonmircha     ********** */
610 | //window.alert("Alerta");
611 | //window.confirm("Confirmación");
612 | //window.prompt("Aviso");
613 | /* const $btnAbrir = document.getElementById("abrir-ventana"),
614 |   $btnCerrar = document.getElementById("cerrar-ventana"),
615 |   $btnImprimir = document.getElementById("imprimir-ventana");
616 | 
617 | let ventana;
618 | 
619 | $btnAbrir.addEventListener(
620 |   "click",
621 |   (e) => (ventana = window.open("https://jonmircha.com"))
622 | );
623 | 
624 | $btnCerrar.addEventListener("click", (e) => {
625 |   //window.close();
626 |   ventana.close();
627 | });
628 | 
629 | $btnImprimir.addEventListener("click", (e) => window.print()); */
630 | /*
631 | 
632 | 
633 | 
634 | 
635 | 
636 | */
637 | /* **********     Curso JavaScript: 79. BOM: Objetos: URL, Historial y Navegador - #jonmircha     ********** */
638 | /* console.log("********** Objeto URL (location) **********");
639 | console.log(location);
640 | console.log(location.origin);
641 | console.log(location.protocol);
642 | console.log(location.host);
643 | console.log(location.hostname);
644 | console.log(location.port);
645 | console.log(location.href);
646 | console.log(location.hash);
647 | console.log(location.search);
648 | console.log(location.pathname);
649 | //location.reload();
650 | 
651 | console.log("********** Objeto Historial (history) **********");
652 | console.log(history);
653 | console.log(history.length);
654 | //history.forward(1);
655 | //history.go(-3);
656 | //history.back(2);
657 | 
658 | console.log("********** Objeto Navegador (navigator) **********");
659 | console.log(navigator);
660 | console.log(navigator.connection);
661 | console.log(navigator.geolocation);
662 | console.log(navigator.mediaDevices);
663 | console.log(navigator.mimeTypes);
664 | console.log(navigator.onLine);
665 | console.log(navigator.serviceWorker);
666 | console.log(navigator.storage);
667 | console.log(navigator.usb);
668 | console.log(navigator.userAgent); */
669 | 


--------------------------------------------------------------------------------
/js/dom/boton_scroll.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 87. DOM: Ejercicios Prácticos | Botón de Scroll - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/carrusel.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 98. DOM: Ejercicios Prácticos | Responsive Slider - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/cuenta_regresiva.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 86. DOM: Ejercicios Prácticos | Cuenta Regresiva(countdown) - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/deteccion_dispositivos.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 92. DOM: Ejercicios Prácticos | Detección de Dispositivos User Agent - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/deteccion_red.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 93. DOM: Ejercicios Prácticos | Detección del estado de la red - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/deteccion_webcam.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 94. DOM: Ejercicios Prácticos | Detección de la WebCam - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/filtros_busqueda.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 96. DOM: Ejercicios Prácticos | Filtros de Búsqueda - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/geolocalizacion.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 95. DOM: Ejercicios Prácticos | Detección de la Geolocalización - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/menu_hamburguesa.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 81. DOM: Ejercicios Prácticos | Menú de Hamburguesa - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/narrador.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 104. DOM: Ejercicios Prácticos | Narrador (Lector de Voz) - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/objeto_responsive.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 90. DOM: Ejercicios Prácticos | Responsive con JavaScript - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/prueba_responsive.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 91. DOM: Ejercicios Prácticos | Responsive Tester - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/reconocimiento_voz.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonmircha/youtube-js/6faa0d14151a242f56045d320a87a81e412115d6/js/dom/reconocimiento_voz.js


--------------------------------------------------------------------------------
/js/dom/reloj.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 82. DOM: Ejercicios Prácticos | Reloj Digital - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/scroll_espia.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 99. DOM: Ejercicios Prácticos | ScrollSpy con Intersection Observer - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/sorteo.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 97. DOM: Ejercicios Prácticos | Sorteo Digital - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/teclado.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 85. DOM: Ejercicios | Eventos del Teclado (movimientos y colisiones) - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/dom/tema_oscuro.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 88. DOM: Ejercicios Prácticos | Tema Dark / Light - #jonmircha     ********** */
2 | /* **********     Curso JavaScript: 89. DOM: Ejercicios Prácticos | API localStorage - #jonmircha     ********** */
3 | 


--------------------------------------------------------------------------------
/js/dom/validaciones_formulario.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 101. DOM: Ejercicios Prácticos | Validación de Formularios con HTML5 - #jonmircha     ********** */
2 | /* **********     Curso JavaScript: 102. DOM: Ejercicios Prácticos | Validación de Formularios - #jonmircha     ********** */
3 | /* **********     Curso JavaScript: 103. DOM: Ejercicios Prácticos | Envío de Formularios - #jonmircha     ********** */
4 | 


--------------------------------------------------------------------------------
/js/dom/video_inteligente.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 100. DOM: Video Inteligente (IntersectionObserver & VisibilityChange) - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/index_dom.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 80. DOM: Ejercicios Prácticos | Presentación - #jonmircha     ********** */
2 | 


--------------------------------------------------------------------------------
/js/modulos.js:
--------------------------------------------------------------------------------
 1 | /* **********     Curso JavaScript: 33. Módulos ( import / export ) - #jonmircha     ********** */
 2 | import saludar, { Saludar, PI, usuario } from "./constantes.js";
 3 | import { aritmetica as calculos } from "./aritmetica.js";
 4 | 
 5 | console.log("Archivo modulos.js");
 6 | console.log(PI, usuario);
 7 | //console.log(aritmetica.sumar(3, 4));
 8 | console.log(calculos.sumar(3, 4));
 9 | console.log(calculos.restar(3, 4));
10 | saludar();
11 | let saludo = new Saludar();
12 | saludo;
13 | 


--------------------------------------------------------------------------------
/js/no-modulos.js:
--------------------------------------------------------------------------------
1 | /* **********     Curso JavaScript: 33. Módulos ( import / export ) - #jonmircha     ********** */
2 | console.log("Mi navegador no soporta Módulos +ES6");
3 | 


--------------------------------------------------------------------------------
/reactividad/00_dom-manipulacion.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Manipulación Manual del DOM</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Manipulación Manual del DOM</h1>
12 |   <form id="todo-form">
13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
14 |     <input type="submit" value="Agregar">
15 |   </form>
16 |   <h2>Lista de Tareas</h2>
17 |   <ul id="todo-list"></ul>
18 |   <script>
19 |     const d = document,
20 |       $item = d.getElementById("todo-item")
21 |     $list = d.getElementById("todo-list");
22 | 
23 |     d.addEventListener("submit", e => {
24 |       if (!e.target.matches("#todo-form")) return false;
25 | 
26 |       e.preventDefault();
27 | 
28 |       //Agregar item a la lista
29 |       let $li = d.createElement("li");
30 |       $li.textContent = $item.value;
31 |       $list.appendChild($li);
32 | 
33 |       //Limpiar el input
34 |       $item.value = "";
35 |       $item.focus();
36 |     });
37 |   </script>
38 | </body>
39 | 
40 | </html>
41 | 


--------------------------------------------------------------------------------
/reactividad/01_ui-basada-estado.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Interfaz basada en el Estado</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Interfaz basada en el Estado</h1>
12 |   <form id="todo-form">
13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
14 |     <input type="submit" value="Agregar">
15 |   </form>
16 |   <h2>Lista de Tareas</h2>
17 |   <ul id="todo-list"></ul>
18 |   <script>
19 |     const d = document;
20 | 
21 |     //El State
22 |     const state = {
23 |       todoList: []
24 |     }
25 | 
26 |     //Template UI
27 |     const template = () => {
28 |       if (state.todoList.length < 1) {
29 |         return `<p><em>Lista sin tareas por hacer.</em></p>`;
30 |       }
31 | 
32 |       let todos = state.todoList.map(item => `<li>${item}</li>`).join("");
33 | 
34 |       return todos;
35 |     }
36 | 
37 |     //Render UI
38 |     const render = () => {
39 |       console.log(state);
40 | 
41 |       const $list = d.getElementById("todo-list");
42 |       if (!$list) return;
43 |       $list.innerHTML = template();
44 |     }
45 | 
46 |     d.addEventListener("DOMContentLoaded", render);
47 | 
48 |     d.addEventListener("submit", e => {
49 |       if (!e.target.matches("#todo-form")) return false;
50 | 
51 |       e.preventDefault();
52 | 
53 |       const $item = d.getElementById("todo-item");
54 |       if (!$item) return;
55 | 
56 |       //Actualizar el State y la UI
57 |       state.todoList.push($item.value);
58 |       render();
59 | 
60 |       //Limpiar el input
61 |       $item.value = "";
62 |       $item.focus();
63 |     });
64 |   </script>
65 | </body>
66 | 
67 | </html>
68 | 


--------------------------------------------------------------------------------
/reactividad/02_reactividad-estado.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Reactividad del Estado</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Reactividad del Estado</h1>
12 |   <form id="todo-form">
13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
14 |     <input type="submit" value="Agregar">
15 |   </form>
16 |   <h2>Lista de Tareas</h2>
17 |   <ul id="todo-list"></ul>
18 |   <script>
19 |     const d = document;
20 | 
21 |     //El State
22 |     const state = {
23 |       todoList: [],
24 |       nombre: ""
25 |     }
26 | 
27 |     //Template UI
28 |     const template = () => {
29 |       if (state.todoList.length < 1) {
30 |         return `<p><em>Lista sin tareas por hacer.</em></p>`;
31 |       }
32 | 
33 |       let todos = state.todoList.map(item => `<li>${item}</li>`).join("");
34 | 
35 |       return todos;
36 |     }
37 | 
38 |     //Render UI
39 |     const render = () => {
40 |       console.log(state);
41 | 
42 |       const $list = d.getElementById("todo-list");
43 |       if (!$list) return;
44 |       $list.innerHTML = template();
45 |     }
46 | 
47 |     //Actualizar el State de forma reactiva
48 |     const setState = obj => {
49 |       for (let key in obj) {
50 |         if (state.hasOwnProperty(key)) {
51 |           state[key] = obj[key];
52 |         }
53 |       }
54 | 
55 |       render();
56 |     }
57 | 
58 |     d.addEventListener("DOMContentLoaded", render);
59 | 
60 |     //Estableciendo valores por defecto al State
61 |     setState({
62 |       todoList: ["Tarea 1", "Tarea 2", "Tarea 3"],
63 |       nombre: "Jon"
64 |     });
65 | 
66 |     //Estado Mutable, porque permite modificar el estado directamente creando una copia del objeto y agregando otro elemento
67 |     const items = state.todoList;
68 |     items.push("Tarea 4");
69 |     console.log("Estado Mutable", state);
70 | 
71 | 
72 |     d.addEventListener("submit", e => {
73 |       if (!e.target.matches("#todo-form")) return false;
74 | 
75 |       e.preventDefault();
76 | 
77 |       const $item = d.getElementById("todo-item");
78 |       if (!$item) return;
79 | 
80 |       //Actualizar el State y la UI
81 |       state.todoList.push($item.value);
82 |       render();
83 | 
84 |       //Limpiar el input
85 |       $item.value = "";
86 |       $item.focus();
87 |     });
88 |   </script>
89 | </body>
90 | 
91 | </html>
92 | 


--------------------------------------------------------------------------------
/reactividad/03_estado-inmutable.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Estado Inmutable</title>
  8 | </head>
  9 | 
 10 | <body>
 11 |   <h1>Estado Inmutable</h1>
 12 |   <form id="todo-form">
 13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
 14 |     <input type="submit" value="Agregar">
 15 |   </form>
 16 |   <h2>Lista de Tareas</h2>
 17 |   <ul id="todo-list"></ul>
 18 |   <script>
 19 |     const d = document;
 20 | 
 21 |     //El State
 22 |     const state = {
 23 |       todoList: [],
 24 |       nombre: ""
 25 |     }
 26 | 
 27 |     //Template UI
 28 |     const template = () => {
 29 |       if (state.todoList.length < 1) {
 30 |         return `<p><em>Lista sin tareas por hacer.</em></p>`;
 31 |       }
 32 | 
 33 |       let todos = state.todoList.map(item => `<li>${item}</li>`).join("");
 34 | 
 35 |       return todos;
 36 |     }
 37 | 
 38 |     //Render UI
 39 |     const render = () => {
 40 |       console.log(state);
 41 | 
 42 |       const $list = d.getElementById("todo-list");
 43 |       if (!$list) return;
 44 |       $list.innerHTML = template();
 45 |     }
 46 | 
 47 |     //Actualizar el State de forma reactiva
 48 |     const setState = obj => {
 49 |       for (let key in obj) {
 50 |         if (state.hasOwnProperty(key)) {
 51 |           state[key] = obj[key];
 52 |         }
 53 |       }
 54 | 
 55 |       render();
 56 |     }
 57 | 
 58 |     //Obtenemos una copia inmutable del State
 59 |     const getState = () => JSON.parse(JSON.stringify(state));
 60 | 
 61 |     d.addEventListener("DOMContentLoaded", render);
 62 | 
 63 |     //Estableciendo valores por defecto al State
 64 |     setState({
 65 |       todoList: ["Tarea 1", "Tarea 2", "Tarea 3"],
 66 |       nombre: "Jon"
 67 |     });
 68 | 
 69 |     //Estado Mutable, porque permite modificar el estado directamente creando una copia del objeto y agregando otro elemento
 70 |     //Estado Inmutable, porque al obtener una copia del State con getState, NO se modifica el estado original directamente, para modificarlo tenemos que hacer uso de setState
 71 | 
 72 |     //const items = state.todoList;
 73 |     const items = getState();
 74 |     //items.push("Tarea 4");
 75 |     items.todoList.push("Tarea 4")
 76 |     //console.log("Estado Mutable", state);
 77 |     console.log("Estado Inmutable", state);
 78 | 
 79 | 
 80 |     d.addEventListener("submit", e => {
 81 |       if (!e.target.matches("#todo-form")) return false;
 82 | 
 83 |       e.preventDefault();
 84 | 
 85 |       const $item = d.getElementById("todo-item");
 86 |       if (!$item) return;
 87 | 
 88 |       //Actualizar el State de forma reactiva
 89 |       const lastState = getState()
 90 |       lastState.todoList.push($item.value);
 91 |       setState({ todoList: lastState.todoList });
 92 | 
 93 |       //Limpiar el input
 94 |       $item.value = "";
 95 |       $item.focus();
 96 |     });
 97 |   </script>
 98 | </body>
 99 | 
100 | </html>
101 | 


--------------------------------------------------------------------------------
/reactividad/04_componentes-con-estado.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Componentes con Estado</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Componentes con Estado</h1>
12 |   <form id="todo-form">
13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
14 |     <input type="submit" value="Agregar">
15 |   </form>
16 |   <h2>Lista de Tareas</h2>
17 |   <ul id="todo-list"></ul>
18 |   <script>
19 |     const d = document;
20 | 
21 |     //El State Global
22 |     const state = {
23 |       todoList: [],
24 |       nombre: ""
25 |     }
26 | 
27 |     //Template UI
28 |     const template = () => {
29 |       if (template.data.todoList.length < 1) {
30 |         return `<p><em>Lista sin tareas por hacer.</em></p>`;
31 |       }
32 | 
33 |       let todos = template.data.todoList.map(item => `<li>${item}</li>`).join("");
34 | 
35 |       return todos;
36 |     }
37 | 
38 |     //Agregar State al Template que genera el Componente de UI (State Local)
39 |     template.data = {
40 |       todoList: []
41 |     }
42 | 
43 |     //Render UI
44 |     const render = () => {
45 |       console.log("Estado Global", state);
46 |       console.log("Estado Local", template.data);
47 | 
48 |       const $list = d.getElementById("todo-list");
49 |       if (!$list) return;
50 |       $list.innerHTML = template();
51 |     }
52 | 
53 |     //Actualizar el State de forma reactiva
54 |     const setState = obj => {
55 |       for (let key in obj) {
56 |         if (template.data.hasOwnProperty(key)) {
57 |           template.data[key] = obj[key];
58 |         }
59 |       }
60 | 
61 |       render();
62 |     }
63 | 
64 |     //Obtenemos una copia inmutable del State
65 |     const getState = () => JSON.parse(JSON.stringify(template.data));
66 | 
67 |     d.addEventListener("DOMContentLoaded", render);
68 | 
69 |     //Estableciendo valores por defecto al State
70 |     setState({
71 |       todoList: ["Tarea 1", "Tarea 2", "Tarea 3"]
72 |     });
73 | 
74 |     d.addEventListener("submit", e => {
75 |       if (!e.target.matches("#todo-form")) return false;
76 | 
77 |       e.preventDefault();
78 | 
79 |       const $item = d.getElementById("todo-item");
80 |       if (!$item) return;
81 | 
82 |       //Actualizar el State de forma reactiva
83 |       const lastState = getState()
84 |       lastState.todoList.push($item.value);
85 |       setState({ todoList: lastState.todoList });
86 | 
87 |       //Limpiar el input
88 |       $item.value = "";
89 |       $item.focus();
90 |     });
91 |   </script>
92 | </body>
93 | 
94 | </html>
95 | 


--------------------------------------------------------------------------------
/reactividad/05_libreria-componentes-con-estado.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Librería de Componentes con Estado</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <h1>Librería de Componentes con Estado</h1>
12 |   <form id="todo-form">
13 |     <input type="text" id="todo-item" placeholder="Tarea por hacer">
14 |     <input type="submit" value="Agregar">
15 |   </form>
16 |   <h2>Lista de Tareas</h2>
17 |   <ul id="todo-list"></ul>
18 |   <script src="Component.js"></script>
19 |   <script>
20 |     const d = document;
21 | 
22 |     const app = new Component({
23 |       el: "#todo-list",
24 |       data: {
25 |         todoList: []
26 |       },
27 |       template: function (props) {
28 |         if (props.todoList.length < 1) {
29 |           return `<p><em>Lista sin tareas por hacer.</em></p>`;
30 |         }
31 | 
32 |         let todos = props.todoList.map(item => `<li>${item}</li>`).join("");
33 | 
34 |         return todos;
35 |       }
36 |     });
37 | 
38 |     d.addEventListener("DOMContentLoaded", app.render);
39 | 
40 |     //Estableciendo valores por defecto al State
41 |     app.setState({
42 |       todoList: ["Tarea 1", "Tarea 2", "Tarea 3"]
43 |     });
44 | 
45 |     d.addEventListener("submit", e => {
46 |       if (!e.target.matches("#todo-form")) return false;
47 | 
48 |       e.preventDefault();
49 | 
50 |       const $item = d.getElementById("todo-item");
51 |       if (!$item) return;
52 | 
53 |       //Actualizar el State de forma reactiva
54 |       const lastState = app.getState()
55 |       lastState.todoList.push($item.value);
56 |       app.setState({ todoList: lastState.todoList });
57 | 
58 |       //Limpiar el input
59 |       $item.value = "";
60 |       $item.focus();
61 |     });
62 |   </script>
63 | </body>
64 | 
65 | </html>
66 | 


--------------------------------------------------------------------------------
/reactividad/Component.js:
--------------------------------------------------------------------------------
 1 | const Component = (function () {
 2 |   //Creamos el Constructor del Componente
 3 |   const Constructor = function (options) {
 4 |     this.el = options.el;
 5 |     this.data = options.data;
 6 |     this.template = options.template;
 7 |   };
 8 | 
 9 |   //Agregamos los métodos al prototipo del constructor del componente
10 | 
11 |   //Render UI
12 |   Constructor.prototype.render = function () {
13 |     const $el = d.querySelector(this.el);
14 |     if (!$el) return;
15 |     $el.innerHTML = this.template(this.data);
16 | 
17 |     console.log(this.data);
18 |   };
19 | 
20 |   //Actualizar el State de forma reactiva
21 |   Constructor.prototype.setState = function (obj) {
22 |     for (let key in obj) {
23 |       if (this.data.hasOwnProperty(key)) {
24 |         this.data[key] = obj[key];
25 |       }
26 |     }
27 | 
28 |     this.render();
29 |   };
30 | 
31 |   //Obtenemos una copia inmutable del State
32 |   Constructor.prototype.getState = function () {
33 |     return JSON.parse(JSON.stringify(this.data));
34 |   };
35 | 
36 |   return Constructor;
37 | })();
38 | 


--------------------------------------------------------------------------------