diff --git a/Tareas/Cronometro/app.js b/Tareas/Cronometro/app.js new file mode 100644 index 0000000..b88b239 --- /dev/null +++ b/Tareas/Cronometro/app.js @@ -0,0 +1,94 @@ +/*Realizar una web con un cronómetro, +que tenga las opciones de iniciar, +reset(volver el cronómetro a 0) y pausar. +*/ + +let buttonStart = document.querySelector('#start'); +let buttonClear = document.querySelector('#clear'); +let buttonPause = document.querySelector('#pause'); +let tiempo = document.querySelector('#tiempo') +let segundero = null +let inicioStart = false + +let hr = 0 +let min = 0 +let seg = 0 + + +const dibujar = function () { + + let tiempo = document.querySelector('#tiempo') + let horario = `` + + if (hr < 10) { + horario = `0${hr}:` + + //tiempo.innerText=`0${hr}:0${min}:0${seg}` + } else { + horario=`${hr}:` + } + if (min < 10) { + horario=horario+`0${min}:` + //tiempo.innerText=`0${hr}:0${min}:0${seg}` + } else { + horario=horario+`${min}:` + } + if (seg < 10) { + horario=horario+`0${seg}` + //tiempo.innerText=`0${hr}:0${min}:0${seg}` + } else { + horario=horario+`${seg}` + } + + tiempo.innerText=horario + +} + + +const start = function () { + + if (inicioStart === false) { + + + segundero = setInterval(function () { + + seg += 1 + + if (seg === 60) { + seg = 0 + min += 1 + if (min === 60) { + min = 0 + hr += 1 + } + } + + dibujar() + }), 1000; + inicioStart = true + } +} + +const pause = function () { + clearInterval(segundero); + inicioStart = false; +} + +const clear = function () { + + seg = 0 + min = 0 + hr = 0 + + clearInterval(segundero); + inicioStart = false; + dibujar() + +} + + + + +buttonClear.addEventListener('click', clear) +buttonStart.addEventListener('click',start) +buttonPause.addEventListener('click',pause) \ No newline at end of file diff --git a/Tareas/Cronometro/index.html b/Tareas/Cronometro/index.html new file mode 100644 index 0000000..7be2ca8 --- /dev/null +++ b/Tareas/Cronometro/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + Hello, world! + + + + +
+
+ +
+
00:00:00
+
+
+ + + + + + + + +
+
+
+
+
+ + + + diff --git a/Tareas/Cronometro/style.css b/Tareas/Cronometro/style.css new file mode 100644 index 0000000..9301559 --- /dev/null +++ b/Tareas/Cronometro/style.css @@ -0,0 +1,17 @@ +body { + background-color: bisque; +} +.container-fluid{ + margin-top: 150px; + +} + +#cronometro { + background-color: white; + margin: 0px; + +} +#tiempo{ + margin: 50px; + font-size:5rem; +} \ No newline at end of file diff --git a/Tareas/Numero_Magico/app.js b/Tareas/Numero_Magico/app.js new file mode 100644 index 0000000..1a4bc82 --- /dev/null +++ b/Tareas/Numero_Magico/app.js @@ -0,0 +1,107 @@ +//Crea una web con bootstrap y js, que contenga un botón comenzar el juego, +//en ese momento se crea un número aleatorio que el usuario deberá adivinar, la +//interfaz del usuario debe tener además un input para ingresar un número y un botón enviar, +//al presionar el botón enviar mostrar en un alert si el usuario adivino o no el número mágico, +//si no lo adivino indicarle con un alert si el numero que ingreso es mayor o menor al número mágico. +//Cuando el usuario adivine el numero mostrar un mensaje indicando al usuario que adivino el numero. + +let jugadorInput = document.querySelector("#jugadorInput") +let jugadorButton = document.querySelector("#jugadorButton") +let gameConcepto = document.querySelector("#game") +let historial = [] +let score = 0 + + + + +const numeroRandom = function () { + + return Math.round(Math.random() * 20) +} + +let cpu = numeroRandom(); +console.log(cpu) + +const game = function () { + if (jugadorInput.value == cpu) { + + if (confirm(`Ganaste Puntos: ${score+1} Quieres volver a jugar?`)) { + + location.reload() + } + }else{ + rango() + } +} + +const rango = function () { + if (jugadorInput.value < cpu) { + + alert("El valor ingresado es menor") + } else { + alert("El valor ingresado es mayor") + } +} + +const mostrarHistorial = function () { + const scoreMuestra = document.createElement("div"); + let htmlSocre = ` +
+
+
Puntos: ${++score}
+
+
+ + ` + scoreMuestra.innerHTML=htmlSocre + gameConcepto.appendChild(scoreMuestra) + + historial.map(function (historia, i) { + + const cardHistorial = document.createElement("div"); + + let historialMuestra = ` +
+ +
+
${i+1} - ${historia}
+
+
+ + ` + cardHistorial.innerHTML = historialMuestra; + gameConcepto.appendChild(cardHistorial) + + + }) + +} + +const agregarHistorial = function () { + if (historial.length === 5) { + historial.splice(0, 1) + historial.push(jugadorInput.value) + }else{ + historial.push(jugadorInput.value) + } + gameConcepto.innerHTML="" + mostrarHistorial() +} + + +const enviarInfo = function (e) { + if(e.keyCode === 13 && parseInt(jugadorInput.value) + || e.button===0 && parseInt(jugadorInput.value)){ + game(); + agregarHistorial() + + jugadorInput.value = "" + } +} + + +jugadorInput.addEventListener("keypress", enviarInfo) +jugadorButton.addEventListener("click", enviarInfo) + + + diff --git a/Tareas/Numero_Magico/img/numeroMagico.png b/Tareas/Numero_Magico/img/numeroMagico.png new file mode 100644 index 0000000..50971f2 Binary files /dev/null and b/Tareas/Numero_Magico/img/numeroMagico.png differ diff --git a/Tareas/Numero_Magico/index.html b/Tareas/Numero_Magico/index.html new file mode 100644 index 0000000..723080b --- /dev/null +++ b/Tareas/Numero_Magico/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + Hello, world! + + + +
+
+
+
+ numeroMagico +
+
Ingrese un numero del 1 al 20 a ver si adivina =D
+ +
+ + +
+
+ + +
+ + + + + + +
+
+
+
+ +
+ + + + + + diff --git a/Tareas/Numero_Magico/style.css b/Tareas/Numero_Magico/style.css new file mode 100644 index 0000000..8068e51 --- /dev/null +++ b/Tareas/Numero_Magico/style.css @@ -0,0 +1,14 @@ +body { + background-color: bisque; +} +.card-tareas { + margin-top: 50px; + align-items: center; +} +.container { + background-color:bisque; + margin-top: 150pt; +} +.numeroMagico { + width: 400px; +} \ No newline at end of file diff --git a/fotogram/.vscode/settings.json b/fotogram/.vscode/settings.json new file mode 100644 index 0000000..d65ef38 --- /dev/null +++ b/fotogram/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/fotogram/css/style.css b/fotogram/css/style.css new file mode 100644 index 0000000..72c750e --- /dev/null +++ b/fotogram/css/style.css @@ -0,0 +1,27 @@ +.contenedor_login { + height: 100vh; + + display: flex; + align-items: center; + justify-content: center; +} + +.login_img { + width: 100%; + height: 150px; + object-fit: cover; +} + +.login_link { + text-decoration: none; +} + +.card-fixed { + position: fixed; + margin-right: 20px; +} + +.avatar { + width: 80px; + border-radius: 100%; +} diff --git a/fotogram/img/portada.jpg b/fotogram/img/portada.jpg new file mode 100644 index 0000000..56f05aa Binary files /dev/null and b/fotogram/img/portada.jpg differ diff --git a/fotogram/index.html b/fotogram/index.html new file mode 100644 index 0000000..e605b7d --- /dev/null +++ b/fotogram/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + Fotogram + + +
+
+
+
+ +
+
Inicio de sesión
+
+ + + + +
+ +
+
+
+ +
+
+
+
+
+
+ + + + + + diff --git a/fotogram/js/app.js b/fotogram/js/app.js new file mode 100644 index 0000000..ed5a7ac --- /dev/null +++ b/fotogram/js/app.js @@ -0,0 +1,58 @@ +class Usuario { + constructor(nombre, username, email, password, imagen) { + this.nombre = nombre; + this.username = username; + this.email = email; + this.password = password; + this.imagen = imagen; + } +} + +let usuarios = []; + +let user1 = new Usuario( + "Pedro", + "pgonzalez", + "pedritobueno@gmail.com", + "pp123456", + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI3b7G544olENi0w5Nxr95EW3K3AB5a3t-mbaVh644XQIRNaRXJ2WqHAAHcJPQajU_jmo&usqp=CAU" +); + +const agregarUsuario = function (user) { + usuarios.push(user); +}; + +agregarUsuario(user1); + +const validarDatos = function () { + let inputEmail = document.querySelector("#input_email").value; + let inputPassword = document.querySelector("#input_password").value; + + let validar_email = usuarios.find(function (usuario) { + return usuario.email === inputEmail; + }); + + // console.log(validar_email); + if (validar_email) { + if (validar_email.password === inputPassword) { + console.log("Usuario encontrado"); + let datos = { + email: validar_email.email, + username: validar_email.username, + avatar: validar_email.imagen, + }; + localStorage.setItem("usuario", JSON.stringify(datos)); + + location.replace("./pages/home.html"); + } else { + alert("Email o contraseña incorrecto"); + } + } else { + alert("Email o contraseña incorrecto"); + } +}; + +document.querySelector("#formulario").addEventListener("submit", function (e) { + e.preventDefault(); + validarDatos(); +}); diff --git a/fotogram/js/posteos.js b/fotogram/js/posteos.js new file mode 100644 index 0000000..3755805 --- /dev/null +++ b/fotogram/js/posteos.js @@ -0,0 +1,72 @@ +// let datos = [ +// { +// id: 1, +// usuario: "suzukigame", +// detalle: "Imagen de paisaje bonito", +// img: "https://www.nationalgeographic.com.es/medio/2021/05/05/lago-wanakanueva-zelanda_3bca218b_800x800.jpg", +// }, +// { +// id: 2, +// usuario: "miraflores", +// detalle: "Paisaje exótico", +// img: "http://2.bp.blogspot.com/-8KuSaGEYEMs/UPSuL75AdoI/AAAAAAAAOLI/8Bb7HfkOQXU/s1600/nuevos+paisajes+floridos+con+carretera.jpg", +// }, +// { +// id: 3, +// usuario: "pmarino", +// detalle: "Paisaje vistoso", +// img: "https://www.jardineriaon.com/wp-content/uploads/2020/11/paisajes-naturales.jpg", +// }, +// ]; + +// const inicializarDatos = function (datos) { +// localStorage.setItem("posteos", JSON.stringify(datos)); +// }; + +let datos = JSON.parse(localStorage.getItem("posteos")) || []; + +let usuario = JSON.parse(localStorage.getItem("usuario")); +// console.log(usuario); + +let contenedor_avatar = document.querySelector("#card_avatar"); +let contenedor_cards = document.querySelector("#contenedor_cards"); + +// let div = document.createElement("div"); +let estructura_avatar = ` + +${usuario.username} +

${usuario.email}

+`; + +// div.innerHTML = estructura_avatar; +// contenedor_avatar.appendChild(div); +contenedor_avatar.innerHTML = estructura_avatar; + +const crearCards = function () { + datos.map(function (item) { + let card = document.createElement("div"); + card.classList = "card mb-3"; + + let contenido_card = ` +
${item.usuario}
+ ${item.detalle} +
+ ${item.detalle} + +
+ `; + + card.innerHTML = contenido_card; + contenedor_cards.appendChild(card); + }); +}; + +crearCards(); +// inicializarDatos(datos); diff --git a/fotogram/pages/about.html b/fotogram/pages/about.html new file mode 100644 index 0000000..e69de29 diff --git a/fotogram/pages/home.html b/fotogram/pages/home.html new file mode 100644 index 0000000..e62c0e9 --- /dev/null +++ b/fotogram/pages/home.html @@ -0,0 +1,147 @@ + + + + + + + + + + + + Fotogram + + +
+ +
+ +
+
+
+
+ +
+
+
+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Maiores natus a quia doloribus eligendi nisi soluta aut veniam + aperiam officiis! +

+ +
+
+
+
+
+
+ + + + +