Modal eliminar - css

.eslintrc

@@ -26,6 +26,7 @@
     "jest/no-focused-tests": "error",
     "jest/no-identical-title": "error",
     "jest/prefer-to-have-length": "warn",
-    "jest/valid-expect": "error"
+    "jest/valid-expect": "error",
+    "import/no-unresolved": 0,
   }
 }

.gitignore

@@ -3,4 +3,7 @@
 coverage/
 node_modules/
 .yarn.lock
-package-lock.json
+package-lock.json
+config.js
+
+Register.js

package.json

@@ -15,7 +15,7 @@
     "stylelint": "stylelint --aei src/**/*.css",
     "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
     "test": "jest --coverage",
-    "start": "serve -s src/"
+    "start": "serve -s src/ -s" 
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
@@ -28,7 +28,7 @@
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "regenerator-runtime": "^0.13.1",
-    "serve": "^13.0.2",
+    "serve": "^14.1.2",
     "stylelint": "^14.1.0",
     "stylelint-config-recommended": "^6.0.0"
   },
@@ -39,5 +39,8 @@
     "createdAt": "2022-11-30T16:52:37.204Z",
     "version": "5.5.0",
     "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1"
+  },
+  "dependencies": {
+    "firebase": "^9.15.0"
   }
-}
+}

src/comentarios.text

@@ -0,0 +1,273 @@
+
+-------------------------------FEED---------------------------------------------
+const openModalAddPost = (feedSection) => {
+    //console.log('post');
+    const containerAddPost = document.createElement('div');
+    containerAddPost.className = 'container-add-post';
+    feedSection.appendChild(containerAddPost);
+    const openModalAddPost = document.createElement('div');
+    openModalAddPost.className = 'modal-add-post';
+    containerAddPost.appendChild(openModalAddPost);
+}
+
+------------------------------STYLE-----------------------------------------
+.modal {
+  display: none;
+  background: url(img/fondo10.png);
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  padding: 15px;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-container {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
+  width: 320px;
+  height: 500px;
+  font-family: sans-serif;
+  padding: 25px;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-modal {
+  margin-bottom: 30px;
+  margin-left: 320px;
+  width: 20px;
+  height: 25px;
+  border: transparent;
+  color: rgb(48, 46, 46);
+  background-color: transparent;
+  position: absolute;
+  top: 10px;
+  padding-left: 18px;
+  cursor: pointer;
+}
+
+.container-add-post {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.modal-add-post {
+  width: 80%;
+  height: 50vh;
+  background: #334E6F;
+  border-radius: 12px;
+}
+
+------------------------------- estilos Vale------------
+.section-feed {
+  width: 360px;
+  height: 100vh;
+  overflow:scroll;
+  /*es el 100% para cualquier dispositivo*/
+  /* display: grid;
+  grid-template-columns: 80px 200px 80px;
+  grid-template-rows: repeat(3, 200px);
+  gap: 5px; */
+  position: relative;
+  /*para que el hijo posicionarse respecto al section-feed*/
+  /* justify-content: center; */
+  background: linear-gradient(180deg, #334E6F 0%, #8F9CA3 100%);
+
+
+}
+
+/* .section-feed > * {
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+} */
+.tituloh2-feed {
+  font-family: 'Fredoka One';
+  width: 300px;
+  height: 47px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 35px;
+  line-height: 42px;
+  color: rgba(255, 242, 242, 0.25);
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  margin: 0;
+  /* position: absolute;
+  top: 25px;
+  left: 19px */
+}
+
+.avatarImg {
+  width: 65px;
+  height: 65px;
+
+  /* position: absolute;
+  right: 12px;
+  top:12px */
+}
+
+
+ .container-buttons {
+  position: absolute;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  top: 745px;
+  width: 360px;
+  height: 59px;
+  background-color: #F7DAE5;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /*las tres columnas tendrán la misma dimensión en cualquier dispositivo*/
+}
+
+.container-buttons button {
+  padding: 1rem;
+  border: none;
+  background: transparent;
+}
+
+.feed-container-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100% !important;
+  padding: 1rem;
+}
+
+
+.contenedor-posts {
+  width: 100%;
+  height: 800px;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  margin : 0 0 0 20px;
+  gap:20px;
+
+}
+
+.post-div {
+  width: 90%;
+  height: 25vh;
+  border: 1px solid #52525C;
+  border-radius: 10px;
+  background-color: #ffffff;
+  font-family: 'Roboto', sans-serif;
+  font-size: 10px;
+
+
+
+}
+
+.parte-superior-post{
+  background-color: #C3E2E6;
+  height: 6vh;
+  border-top-left-radius: 10px ;
+  border-top-right-radius: 10px ;
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+}
+
+.boton-editar{
+  border: none;
+  background-color: transparent;
+  position: absolute;
+  right: 8vh;
+  color: #222222;
+
+}
+
+.boton-eliminar{
+  border: none;
+  background-color: transparent;
+  position: absolute;
+  right: 4vh;
+  color:#222222
+
+
+}
+
+.boton-like{
+  border: none;
+  color: #FA79AA;
+  background-color: transparent;
+  position: absolute;
+
+
+}
+
+.titulo-post{
+  font-family: 'Roboto', sans-serif;
+  font-size: 15px;
+  color:#52525C;
+}
+
+.textoUser{
+  border:none;
+  resize: none;
+  width: 90%;
+  height: 50px;
+  margin: 0 5px 0 20px;
+  border: 5px double  #d6d6db;
+  border-radius: 3px;
+  text-indent: 5px;
+  margin-bottom: 10px;
+  margin-top: -40px;
+
+}
+h2.titulo-post{
+  position: relative;
+  top: -35px;
+  margin: 0 0 0 20px;
+}
+h3.descripcion-post{
+  margin: 0 0 0 20px;
+  color:#222222;
+}
+h4.fecha-post {
+  position: relative;
+  top: 60px;
+  margin: 0 0 0 15px;
+
+  color: #888686;
+  font-size: 10px;
+}
+.post-btn {
+  position: relative;
+  background :#3b5998;
+  border-radius: 2px;
+  width: 50px;
+  height: 20px;
+  color:#d6d6db;
+  text-shadow: 1px 0 1px #ffffff;
+  border: none;
+  left: 275px;
+  top: 5px;
+
+}
+
+
+------BOTON EN EL FEEED DE VALE-----------
+const logoutButton = document.createElement('button');
+    logoutButton.id = 'idlogoutButton'
+    logoutButton.innerHTML = '<i class="fa-solid fa-arrow-right-from-bracket fa-2xl"></i>';

src/components/Home.js

@@ -0,0 +1,54 @@
+import { onNavigate } from '../js/routes.js'
+
+export const home = () => {
+   const homeDiv = document.createElement('div');
+
+   const barraNavegacion = document.createElement('nav');
+   barraNavegacion.className = 'navBarHome';
+   homeDiv.appendChild(barraNavegacion);
+
+   const listaBotones = document.createElement('ul');
+   listaBotones.className = 'ul-home';
+   barraNavegacion.appendChild(listaBotones);
+
+   const buttonRegister = document.createElement('li');
+   buttonRegister.className = 'navLink';
+   buttonRegister.textContent = 'Sign up';
+   buttonRegister.id = 'botonRegistrar';
+
+   buttonRegister.addEventListener('click', () => onNavigate('/registro'));
+
+   const buttonLogin = document.createElement('li');
+   buttonLogin.className = 'navLink';
+   buttonLogin.textContent = 'Sign in / login';
+   buttonLogin.id = 'botonLoguear';
+
+   buttonLogin.addEventListener('click', () => onNavigate('/login'));
+
+
+   listaBotones.appendChild(buttonRegister);
+   listaBotones.appendChild(buttonLogin);
+
+   const sectionDiv = document.createElement('section');
+   sectionDiv.className = 'bienvenida';
+   const bienvenidaH5 = document.createElement('h5');
+   bienvenidaH5.className = 'welcomeH5';
+   const nameApp = document.createElement('h1');
+   nameApp.className = 'nameAplication';
+
+   bienvenidaH5.textContent = 'Welcome t💗';
+   nameApp.textContent = "Dad's Power";
+   sectionDiv.appendChild(bienvenidaH5);
+   sectionDiv.appendChild(nameApp);
+
+   homeDiv.appendChild(sectionDiv);
+
+   const imagenInicio = document.createElement('img');
+   imagenInicio.src = '/components/imagen/inicioApp.png';
+   imagenInicio.className = 'imgInicio';
+
+   homeDiv.appendChild(imagenInicio);
+
+
+   return homeDiv;
+}