diff --git a/Languages/Javascript/Publicaciones /Readme.md b/Languages/Javascript/Publicaciones /Readme.md new file mode 100644 index 00000000..36b9a495 --- /dev/null +++ b/Languages/Javascript/Publicaciones /Readme.md @@ -0,0 +1 @@ +Para que funcione este pdo instala el json server y si es necesario cambia las variables de la url diff --git a/Languages/Javascript/Publicaciones /index.html b/Languages/Javascript/Publicaciones /index.html new file mode 100644 index 00000000..f9850a15 --- /dev/null +++ b/Languages/Javascript/Publicaciones /index.html @@ -0,0 +1,23 @@ + + + + + + Chats + + + +
+
+ login + register +
+ + +
Inicia sesion para poder publicar
+
+
+
+ + + diff --git a/Languages/Javascript/Publicaciones /js/functions.js b/Languages/Javascript/Publicaciones /js/functions.js new file mode 100644 index 00000000..bfc5a333 --- /dev/null +++ b/Languages/Javascript/Publicaciones /js/functions.js @@ -0,0 +1,11 @@ +export function eliminarMensaje(e) { + let publicacion = e.target.closest(".info"); + let idPublicacion = publicacion.getAttribute("id"); + + fetch("http://localhost:3000/publicaciones/" + idPublicacion, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + }); +} diff --git a/Languages/Javascript/Publicaciones /js/login.js b/Languages/Javascript/Publicaciones /js/login.js new file mode 100644 index 00000000..3060013a --- /dev/null +++ b/Languages/Javascript/Publicaciones /js/login.js @@ -0,0 +1,34 @@ +let btnLogin = document.getElementById("btn-login"); +btnLogin.addEventListener("click", async (e) => { + e.preventDefault(); + + const email = document.getElementById("email").value, + password = document.getElementById("password").value, + urlUsuarios = "http://127.0.0.1:3000/users/"; + + fetch(urlUsuarios, { + method: "GET", + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }) + .then((users) => { + users.forEach((user) => { + if (user.correo === email && user.password === password) { + console.log(user); + let dataUser = { + usuario: user.usuario, + foto: user.foto, + correo: user.correo, + }; + let usuarioJSON = JSON.stringify(dataUser); + console.log(usuarioJSON); + localStorage.setItem("token", usuarioJSON); + window.location.href = "./index.html"; + } + }); + }); +}); diff --git a/Languages/Javascript/Publicaciones /js/main.js b/Languages/Javascript/Publicaciones /js/main.js new file mode 100644 index 00000000..e980999f --- /dev/null +++ b/Languages/Javascript/Publicaciones /js/main.js @@ -0,0 +1,148 @@ +import { eliminarMensaje } from "./functions.js"; +let comentar = document.getElementById("comentar"); +let userInfo = JSON.parse(localStorage.getItem("token")); +const urlPost = "http://localhost:3000/publicaciones"; +let idPublicacion; +let urlPublicaciones = "http://localhost:3000/publicaciones/"; + +const section = document.createElement("section"); +section.style.display = "flex"; +section.id = "mensajes"; +section.className = "container"; + +const img = document.createElement("img"); +img.className = "foto"; +img.src = userInfo.foto; + +const textarea = document.createElement("textarea"); +textarea.id = "inputTexto"; +textarea.placeholder = "Add a comment.."; + +const button = document.createElement("button"); +button.id = "btnSend"; +button.className = "btn-send"; +button.type = "button"; +button.textContent = "SEND"; + +section.appendChild(img); +section.appendChild(textarea); +section.appendChild(button); + +comentar.appendChild(section); + +document.addEventListener("DOMContentLoaded", (e) => { + let comentar = document.getElementById("comentar"), + alertLog = document.querySelector(".no-loged"), + logReg = document.querySelector(".log-reg"), + cerrar = document.getElementById("cerrar"), + publicacionesContainer = document.getElementById("publicaciones"); + + if (localStorage.getItem("token")) { + cerrar.style.display = "flex"; + logReg.style.display = "none"; + alertLog.style.display = "none"; + comentar.style.display = "flex"; + } + fetch(urlPost) + .then((response) => { + if (!response.ok) { + throw new Error("Hubo un problema al realizar la solicitud."); + } + return response.json(); + }) + .then((data) => { + data.forEach((info) => { + const publicacionDiv = document.createElement("div"); + publicacionDiv.id = info.id; + publicacionDiv.classList.add("info"); + + const usuario = document.createElement("h4"); + usuario.textContent = info.usuario; + + const fotoPerfilImg = document.createElement("img"); + fotoPerfilImg.src = info.fotoPerfil; + fotoPerfilImg.alt = `Foto de perfil de ${info.usuario}`; + + const mensaje = document.createElement("p"); + mensaje.textContent = info.mensaje; + mensaje.classList.add("msg"); + + const btnDelete = document.createElement("button"); + btnDelete.textContent = "Delete"; + btnDelete.classList.add("deleteBtn"); + btnDelete.onclick = eliminarMensaje; + + const btnEdit = document.createElement("button"); + btnEdit.textContent = "Edit"; + btnEdit.classList.add("editBtn"); + + publicacionDiv.appendChild(usuario); + publicacionDiv.appendChild(fotoPerfilImg); + publicacionDiv.appendChild(mensaje); + publicacionDiv.appendChild(btnDelete); + publicacionDiv.appendChild(btnEdit); + + publicacionesContainer.appendChild(publicacionDiv); + }); + }) + .catch((error) => { + console.error("Error:", error); + }); +}); + +document.addEventListener("click", (e) => { + e.preventDefault(); + if (e.target.textContent === "Cerrar sesion") { + localStorage.removeItem("token"); + location.reload(); + } +}); +btnSend.addEventListener("click", (e) => { + e.preventDefault(); + if (btnSend.textContent === "Guardar") { + let mensajeEditado = document.getElementById("inputTexto").value; + let mensajeActualizado = { + mensaje: mensajeEditado, + usuario: userInfo.usuario, + fotoPerfil: userInfo.foto, + }; + + let requestOptions = { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(mensajeActualizado), + }; + + fetch(urlPublicaciones + idPublicacion, requestOptions) + .then((response) => response.text()) + .catch((error) => console.log("error", error)); + btnSend.textContent = "SEND"; + } else { + const timestamp = new Date().getTime(); + const mensajeValue = document.getElementById("inputTexto").value; + const dataPost = { + mensaje: mensajeValue, + usuario: userInfo.usuario, + fotoPerfil: userInfo.foto, + fecha: timestamp, + }; + + fetch(urlPost, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(dataPost), + }); + } +}); +document.addEventListener("click", (e) => { + if (e.target.textContent === "Edit") { + let publicacion = e.target.closest(".info"); + idPublicacion = publicacion.getAttribute("id"); + let mensajeActual = publicacion.querySelector("p").textContent; + let inputEditar = document.getElementById("inputTexto"); + btnSend.textContent = "Guardar"; + inputEditar.textContent = mensajeActual; + } +}); diff --git a/Languages/Javascript/Publicaciones /js/register.js b/Languages/Javascript/Publicaciones /js/register.js new file mode 100644 index 00000000..f84fc0de --- /dev/null +++ b/Languages/Javascript/Publicaciones /js/register.js @@ -0,0 +1,27 @@ +const btnEnviar = document.getElementById("btn-enviar"); +const url = "http://127.0.0.1:3000/users/"; +btnEnviar.addEventListener("click", (e) => { + const correo = document.getElementById("correo").value, + nombre = document.getElementById("nombre").value, + foto = document.getElementById("foto").value, + password = document.getElementById("password").value; + + e.preventDefault(); + + let usuario = { + usuario: nombre, + foto: foto, + correo: correo, + password: password, + active: false, + }; + console.log(usuario); + fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(usuario), + }); + window.location.href = "./index.html"; +}); diff --git a/Languages/Javascript/Publicaciones /login.html b/Languages/Javascript/Publicaciones /login.html new file mode 100644 index 00000000..8511be8a --- /dev/null +++ b/Languages/Javascript/Publicaciones /login.html @@ -0,0 +1,25 @@ + + + + + + Document + + + +
+
Log in
+
+ + + + + + + +
Register
+
+
+ + + diff --git a/Languages/Javascript/Publicaciones /register.css b/Languages/Javascript/Publicaciones /register.css new file mode 100644 index 00000000..49d4b3a9 --- /dev/null +++ b/Languages/Javascript/Publicaciones /register.css @@ -0,0 +1,58 @@ +/* Estilos generales para el formulario */ +body { + display: flex; + justify-content: center; +} +main { + text-align: center; + padding: 20px; + background-color: wheat; + width: 80%; + border-radius: 10px; +} + +h3 { + font-size: 24px; +} + +form { + max-width: 400px; + margin: 0 auto; +} + +/* Estilos para los contenedores de input */ +.correo-container, +.nombre-container, +.foto-container { + margin-bottom: 20px; +} + +/* Estilos para las etiquetas */ +label { + display: block; + margin-bottom: 6px; + font-weight: bold; +} + +/* Estilos para los campos de entrada */ +input[type="text"], +input[type="password"] { + width: 100%; + padding: 10px; + margin-top: 4px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; +} + +/* Estilos para el botón (si lo agregas) */ +.submit-button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 18px; + cursor: pointer; +} diff --git a/Languages/Javascript/Publicaciones /register.html b/Languages/Javascript/Publicaciones /register.html new file mode 100644 index 00000000..a3c3816d --- /dev/null +++ b/Languages/Javascript/Publicaciones /register.html @@ -0,0 +1,34 @@ + + + + + + + Registro + + +
+

Register

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + + diff --git a/Languages/Javascript/Publicaciones /styles.css b/Languages/Javascript/Publicaciones /styles.css new file mode 100644 index 00000000..f9026640 --- /dev/null +++ b/Languages/Javascript/Publicaciones /styles.css @@ -0,0 +1,175 @@ +#comentar { + display: none; + justify-content: center; + margin-top: 10px; +} +.container { + width: 730px; + height: 144px; + display: flex; + justify-content: space-evenly; + align-items: flex-start; +} + +.foto { + width: 40px; + height: 40px; + border-radius: 50%; +} +.btn-send { + width: 104px; + height: 48px; + background-color: #5357b6; + border-radius: 5px; + color: white; +} + +#inputTexto { + width: 506px; + height: 96px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 3px; + margin-bottom: 10px; + font-size: 16px; +} + +#publicaciones { + max-width: 600px; + margin: 0 auto; + padding: 20px; + display: flex; + flex-direction: column; +} + +.info { + background-color: #dad9d9; + border: 1px solid #ccc; + padding: 10px; + margin: 10px 0; + display: flex; + flex-direction: column; +} + +h4 { + color: #333; + margin: 0; +} + +.msg { + margin: 10px 0; +} + +img { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.deleteBtn, +.editBtn { + margin-left: 35%; + max-width: 30%; + background-color: #da0b0ba1; + color: #fff; + border: none; + padding: 5px 10px; + cursor: pointer; + margin-top: 5px; +} +.editBtn { + background-color: rgba(18, 18, 170, 0.815); +} +.navbar-list { + display: flex; + justify-content: center; + list-style: none; +} + +.register a { + text-decoration: none; + margin: 10px; +} +/* Estilos para el formulario y el contenedor */ +.login-container { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f9f9f9; + justify-content: center; + align-items: center; +} +.form-login { + display: flex; + flex-direction: column; +} +/* Estilos para el encabezado del formulario */ +.login-header { + text-align: center; + font-size: 24px; + margin-bottom: 20px; +} + +/* Estilos para las etiquetas */ +label { + display: block; + margin-bottom: 5px; +} + +/* Estilos para los campos de entrada */ +input[type="email"], +input[type="password"] { + width: 200px; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +/* Estilos para el botón de inicio de sesión */ +.login-button { + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.login-button:hover { + background-color: #0056b3; +} + +.register { + text-align: center; +} +#log, +#register { + text-decoration: none; + color: #007bff; + margin: 10px; +} + +.no-loged { + background-color: #ffcccc; + padding: 10px; + border: 1px solid #ff0000; + font-weight: bold; + text-align: center; +} +.log-reg { + display: flex; + justify-content: center; +} +#cerrar { + display: none; + border: 0px; + background-color: rgba(255, 15, 15, 0.865); + color: white; + border-radius: 5px; +}