From b67155a3a24ba17a9dbba4f36c9e7f2ce5616c44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:51:43 -0300 Subject: [PATCH 01/13] Create index.html --- capitulo 7/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 capitulo 7/index.html diff --git a/capitulo 7/index.html b/capitulo 7/index.html new file mode 100644 index 0000000..d86e8dd --- /dev/null +++ b/capitulo 7/index.html @@ -0,0 +1,11 @@ + + + + + + Capítulo 7 + + + + + From deacb6b637046fc90d3f62c521cb44c86826a89d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:52:21 -0300 Subject: [PATCH 02/13] Create codigo.js trabajar con window --- capitulo 7/codigo.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 capitulo 7/codigo.js diff --git a/capitulo 7/codigo.js b/capitulo 7/codigo.js new file mode 100644 index 0000000..2ceccf6 --- /dev/null +++ b/capitulo 7/codigo.js @@ -0,0 +1,27 @@ +{ // Problema a y b de Cofla + +let alto = window.screen.height; +let ancho = window.screen.width; + +comprar = confirm(`El alto es: ${alto}, el ancho es ${ancho}`); + +if (comprar){ + alert("Compra realizada exitosamente"); +} +else{ + alert("Compra canecelada"); +} + +let href = window.location.href; +let pathname = window.location.pathname; +let hostname = window.location.hostname; +let protocol = window.location.protocol; + +let html = `Protocolo: ${protocol}

`; +html += `Hostname: ${hostname}

`; +html += `Pathname: ${pathname}

`; +html += `URL completa: ${href}

`; + +document.write(html); + +} From 94047e06eaac70dcec8fd37a8e8741e846846858 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:54:01 -0300 Subject: [PATCH 03/13] Create index.html --- capitulo 8/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 capitulo 8/index.html diff --git a/capitulo 8/index.html b/capitulo 8/index.html new file mode 100644 index 0000000..707f67c --- /dev/null +++ b/capitulo 8/index.html @@ -0,0 +1,11 @@ + + + + + + Capítulo 8 + + + + + From 409c8884c30735105daee1266eb62a1d93ac0060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:56:13 -0300 Subject: [PATCH 04/13] Create index.html Problemas a y b de Cofla comentados para interactuar con uno a la vez --- capitulo 9/index.html | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 capitulo 9/index.html diff --git a/capitulo 9/index.html b/capitulo 9/index.html new file mode 100644 index 0000000..409c2ff --- /dev/null +++ b/capitulo 9/index.html @@ -0,0 +1,30 @@ + + + + + + Problema de Cofla + + + + + + + + + + + + + + + From d3f56f7577f8d368bf4ae5394d37242e8bf74404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:57:56 -0300 Subject: [PATCH 05/13] Create codigo.js Problemas a y b de Cofla comentados para interactuar con uno a la vez (seleccionar y descomentar con ctr + alt + }) --- capitulo 9/codigo.js | 109 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 capitulo 9/codigo.js diff --git a/capitulo 9/codigo.js b/capitulo 9/codigo.js new file mode 100644 index 0000000..75633dd --- /dev/null +++ b/capitulo 9/codigo.js @@ -0,0 +1,109 @@ +// addEventListener("resize",()=>{ +// console.log("Se ha actualizado la resolución"); +// }) + +{// Problema a de Cofla +// const nombre = document.getElementById("nombre"); +// const email = document.getElementById("email"); +// const materia = document.getElementById("materia"); +// const boton = document.getElementById("btn-enviar"); +// const resultado = document.querySelector(".resultado"); + +// const validarCampos()=>{ +// let error = []; +// if (nombre.value.length < 5 || nombre.value.length > 40){ +// error[0] = true; +// error[1] = "El nombre es inválido."; +// return error; +// } else if (email.value.length < 5 || +// email.value.length > 40 || +// email.value.indexOf("@") == -1 || +// email.value.indexOf(".") == -1){ +// error[0] = true; +// error[1] = "El mail es inválido."; +// return error; +// } else if (matera.value.length < 4 || materia.value.length > 40){ +// error[0] = true; +// error[1] = "La materia no existe." +// } +// error[0] = false; +// return error; +// } + +// boton.addEventListener("click",(e)=>{ +// e.preventDefault(); +// let error = validarCampos(); +// if (error[0]){ +// resultado.innerHTML = error[1]; +// resultado.classList.add("red"); +// } else{ +// resultado.innerHTML = "Solicitud enviada correctamente"; +// resultado.classList.add("green"); +// resultado.classList.remove("red"); +// } +// }) +} + +{//Problema b de Cofla +// let alumnos = [{ +// nombre: "Lucas Dalto", +// email: "soydalto@gmail.com", +// materia: "Física 3" +// },{ +// nombre: "Juan José", +// email: "juanjosedenk05@gmail.com", +// materia: "Física 2" +// },{ +// nombre: "Jorge Ramírez", +// email: "ramirez@gmail.com", +// materia: "Cálculo 2" +// },{ +// nombre: "Facundo Roberto", +// email: "robert@gmail.com", +// materia: "Literatura" +// },{ +// nombre: "Cofla XD", +// email: "coffla@gmail.com", +// materia: "Recreo" +// }]; + +// const boton = document.querySelector(".boton-confirmar"); +// const contenedor = document.querySelector(".grid-container"); + +// let htmlCode = ""; + +// for (alumno in alumnos){ +// let datos = alumnos[alumno]; +// let nombre = datos["nombre"]; +// let email = datos["email"]; +// let materia = datos["materia"]; +// htmlCode += ` +//
${nombre}
+// +//
${materia}
+//
+// +//
+// ` +// } + +// contenedor.innerHTML = htmlCode; + +// boton.addEventListener("click",()=>{ +// let confirmar = confirm("¿Realmente quieres confirmar las mesas?"); +// if (confirmar){ +// document.body.removeChild(boton); +// let elementos = document.querySelectorAll(".semana"); +// let semanasElegidas = document.querySelectorAll(".semana-elegida"); +// for (elemento in elementos){ +// let semana = elementos[elemento]; +// semana.innerHTML = semanasElegidas[elemento].value; + +// } +// } +// }) + +} From 6280562fe6da242118612cceafc252fdc4752ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Thu, 17 Oct 2024 15:58:47 -0300 Subject: [PATCH 06/13] Create estilo.css Problema a y b comentados para interactuar con uno a la vez --- capitulo 9/estilo.css | 83 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 capitulo 9/estilo.css diff --git a/capitulo 9/estilo.css b/capitulo 9/estilo.css new file mode 100644 index 0000000..c626780 --- /dev/null +++ b/capitulo 9/estilo.css @@ -0,0 +1,83 @@ +{/* Problema a de Cofla +body{ + color: #333; + font-family: sans-serif; + background: #000; +} +input{ + display: block; + padding: 9px; + margin: 12px 5%; + box-sizing: border-box; + border: none; + border-top: 2px solid #48e; + background: transparent; + outline: none !important; + transition: background 0.3s; + width: 100%; + color: #fff; +} +input::placeholder{ + color: #48e; + transition: color 0.3s; +} +input:hover{ + background: #26a; +} +input:hover::placeholder{ + color: #fff; +} +input[type="submit"]{ + width: 60%; + padding: 12px; + background: #26a; + color: #fff; + margin: 24px 0; + margin-bottom: 12px; +} +input[type="submit"]:hover{ + background: #048; +} +form{ + width: 86%; + margin: auto; + background: #013; + padding: 30px; +} +h2{ + color: #fff; + margin-bottom: 36px; +} + +.green{ + color: #9c9; +} +.red{ + color: #c99; +} +*/ +} + +{ /* Problema b de Cofla */ +/*.grid-container{ + display: grid; + grid-template-rows: 50px; + grid-template-columns: repeat(4, minmax(min-content,max-content)); + grid-auto-rows: 50px; + +} +.grid-container .grid-item{ + padding: 10px; + border: 2px solid #26a; + margin: 3px; + background: #fff; +} +.boton-confirmar{ + padding: 9px 40px; + background: #48e; + color: #fff; + border: none; + margin: 30px; +} +*/ +} From c55a2354609aec733232f7552cae54827460b6cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 16:57:45 -0300 Subject: [PATCH 07/13] Create index.html --- Capitulo 10/index.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 Capitulo 10/index.html diff --git a/Capitulo 10/index.html b/Capitulo 10/index.html new file mode 100644 index 0000000..c327a37 --- /dev/null +++ b/Capitulo 10/index.html @@ -0,0 +1,23 @@ + + + + + + + Capítulo 10 + + +
+
+

+

+
+
+
+

Introduce la nota del alumno

+ + +
+ + + From d804fab6fb4f35341988a8b89268d9a713894f66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 16:58:52 -0300 Subject: [PATCH 08/13] Create estilo.css --- Capitulo 10/estilo.css | 77 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 Capitulo 10/estilo.css diff --git a/Capitulo 10/estilo.css b/Capitulo 10/estilo.css new file mode 100644 index 0000000..02d82a3 --- /dev/null +++ b/Capitulo 10/estilo.css @@ -0,0 +1,77 @@ +body { + color: #333; + font-family: sans-serif; +} + +.formulario-de-notas { + margin-top: 60px; + text-align: center; + background: #26a; + padding: 20px; + box-sizing: border-box; + display: flex; + width: fit-content; + margin-left: auto; + margin-right: auto; +} + +h2 { + margin: 0; + flex-grow: 1; + color: #fff; + margin-right: 20px; +} + +input { + width: 30px; + border: none; +} + +input[type="button"] { + width: auto; + margin-left: 5px; + color: #48e; + background: #fff; +} +.modal-background { + box-sizing: border-box; + width: 100%; + height: 100%; + background: rgba(0,0,0,.7); + position: absolute; + top: 0; + left: 0; + display: none; + opacity: 0; +} + +.modal { + background: #fff; + width: 500px; + margin: auto; + text-align: center; +} + +.resultado { + font-size: 23px; + margin-bottom: 5px; +} + +.red{ + color: #f00; +} + +.green{ + color: #0f0; +} + +@keyframes aparecer { + 0% { + opacity: 0; + display: flex; + } + 100% { + opacity: 1; + display: flex; + } +} From 62760f1bd522d5c5c719eae98f226a311434af5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 17:02:35 -0300 Subject: [PATCH 09/13] Create codigo.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A mí el código no me anda, en cualquier caso del switch case me tira el valor default (null). Si alguien lo soluciona sería un golazo. --- Capitulo 10/codigo.js | 77 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 Capitulo 10/codigo.js diff --git a/Capitulo 10/codigo.js b/Capitulo 10/codigo.js new file mode 100644 index 0000000..1ab0dc1 --- /dev/null +++ b/Capitulo 10/codigo.js @@ -0,0 +1,77 @@ +// A mí en particular este código no me anda, creo que es el switch case ya que sea el caso que sea me tira null (default). +// Probé de mil maneras, si alguien lo consigue solucionar sería buenísimo. + +const sendButton = document.getElementById('snd-nota'); + +sendButton.addEventListener("click",()=>{ + let resultado, mensaje; + try { + prevRes = parseInt(document.getElementById('nota').value); + if (isNaN(prevRes)) { + throw "Gracioso"; + } + resultado = verificarAprobacion(8,4,mensaje); + mensaje = definirMensaje(resultado[1]); + } catch (e) { + resultado = "¿SOS GRACIOSO?"; + mensaje = "He descubierto que intentaste hackear el sitio"; + } + abrirModal(resultado[0], mensaje); +}); + + +const definirMensaje = (pr)=>{ + let resultado; + switch (true) { + case 1: + resultado = "No podés ser tan HDP"; + break; + case 2: + resultado = "Sos malísimo para mi materia"; + break; + case 3: + resultado = "No sabés casi nada"; + break; + case 4: + resultado = "Muy mal"; + break; + case 5: + resultado = "Mal"; + break; + case 6: + resultado = "Regular"; + break; + case 7: + resultado = "Bien, pero puede mejorar"; + break; + case 8: + resultado = "!Muy bien¡"; + break; + case 9: + resultado = "!Excelente¡"; + break; + case 10: + resultado = "!Inusperable hijo de su pinshi madre¡"; + break; + default: + resultado = null; + } + return resultado; +} + +const verificarAprobacion = (nota1,nota2,prevRes)=>{ + promedio = (nota1 + nota2 + prevRes) / 3; + if (promedio >= 7) { + return ["APROBADO", Math.round(promedio)]; + }else{ + return ["DESAPROBADO", Math.round(promedio)]; + } +} + +const abrirModal = (res,msg)=>{ + document.querySelector(".resultado").innerHTML = res; + document.querySelector(".mensaje").innerHTML = "Tu prueba: " + msg; + let modal = document.querySelector(".modal-background"); + modal.style.display = "flex"; + modal.style.animation = "aparecer 1s forwards"; +} From 497dfb7e354885048e2bf631fdff0620e837c1a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 17:08:30 -0300 Subject: [PATCH 10/13] Create codigo,js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Métodos obsoletos (sólamente info, no hay interactividad). --- capitulo 11/codigo,js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 capitulo 11/codigo,js diff --git a/capitulo 11/codigo,js b/capitulo 11/codigo,js new file mode 100644 index 0000000..0e15f35 --- /dev/null +++ b/capitulo 11/codigo,js @@ -0,0 +1,29 @@ +/* +Métodos Transformadores de cadenas OBSOLETOS o No Recomendados +big() +blink() +bold() +fixed() +fontcolor() +fontsize() +italics() +anchor() +link() +small() +strike() +sub() +sup() + + +Métodos específicos obsoletos +observe() +unobserve() +getNotifier() +watch() +unwatch() +toSource() +escape() (la función) +unescape() (la función) +uneval como método +eval como método +*/ From bf81cf96f809df9d66f660d23fce5780478d6db9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 17:10:07 -0300 Subject: [PATCH 11/13] Create index.html --- capitulo 12/index.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 capitulo 12/index.html diff --git a/capitulo 12/index.html b/capitulo 12/index.html new file mode 100644 index 0000000..ea0d571 --- /dev/null +++ b/capitulo 12/index.html @@ -0,0 +1,13 @@ + + + + + + Capítulo 12 + + + +
+ + + From 3addf23a2ae9eaffc18de542383773d3e7ce1715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 17:10:46 -0300 Subject: [PATCH 12/13] Create estilo.css --- capitulo 12/estilo.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 capitulo 12/estilo.css diff --git a/capitulo 12/estilo.css b/capitulo 12/estilo.css new file mode 100644 index 0000000..760ba38 --- /dev/null +++ b/capitulo 12/estilo.css @@ -0,0 +1,30 @@ +body { + color: #222; + font-family: sans-serif; +} + +.materias { + width: 90%; + background: #ccc; + padding: 2px; + font-size: 20px; +} + +.materia { + background: #efefef; + display: flex; +} + +.materia div { + padding: 20px; +} + +.materia .nota { + flex-basis: 20px; + background: #ddd; + font-weight: 700; +} + +.materia .nombre { + flex-grow: 1; +} From 9eab828fd6f6ee2f3e36e25a0bdb4661876dda11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Denk=20Guido?= Date: Tue, 22 Oct 2024 17:12:13 -0300 Subject: [PATCH 13/13] Create codigo.js Ejercicio para entender el async-await y las promesas. --- capitulo 12/codigo.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 capitulo 12/codigo.js diff --git a/capitulo 12/codigo.js b/capitulo 12/codigo.js new file mode 100644 index 0000000..9c2fb91 --- /dev/null +++ b/capitulo 12/codigo.js @@ -0,0 +1,43 @@ +const materiasHTML = document.querySelector(".materias"); + +const materias = [ + { + nombre: "Física 4", + nota: 7 + },{ + nombre: "Cálculo 3", + nota: 8 + },{ + nombre: "Bases de datos 3", + nota: 9 + },{ + nombre: "Matemáticas discretas 2", + nota: 7 + },{ + nombre: "Programación 4", + nota: 8 + } +]; + +const obtenerMateria = (id)=>{ + return new Promise((res,rej)=>{ + materia = materias[id] + if (materia == undefined) rej("La materia no existe"); + else setTimeout(()=>{res(materia)}, Math.random()*400); + }) +} + +const devolverMaterias = async ()=>{ + let materia = []; + for (let i = 0; i < materias.length; i++) { + materia[i] = await obtenerMateria(i); + let newHTMLCode = ` +
+
${materia[i].nombre}
+
${materia[i].nota}
+
`; + materiasHTML.innerHTML += newHTMLCode; + } +} + +devolverMaterias();