Skip to content

Commit

Permalink
Merge pull request #38 from andrenavas/sandra
Browse files Browse the repository at this point in the history 
Confirmación de eliminación de post lista, se organizan contenedor de post y textarea en el media query versión desktop
  • Loading branch information
@andrenavas
andrenavas authored May 3, 2023
2 parents 75c7858 + 2a9ca50 commit 9ce199a
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 72 deletions.
Binary file added src/img/github.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 28 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,34 @@
</head>
<body>
<div id="root"></div>
<footer>©️ C o p y r i g h t , 2023 - Proyecto Social Network (Mayra Garcia - Andreyna Navas - Sandra Tabares) DEV005 - Laboratoria</footer>
<footer class="footer">

<div class="content-footer container">

<div class="mayra">
<img src="./img/github.png" class="logoGitHub" alt="logoGitHub">
<span class="spanFooter">
<a href="https://github.com/MayraGarciaM" target="_blank" class="link-github"> Mayra García </a>
</span>
</div>

<div class="andre">
<img src="./img/github.png" class="logoGitHub" alt="logoGitHub">
<span class="spanFooter">
<a href="https://github.com/andrenavas/" target="_blank" class="link-github"> Andre Navas </a>
</span>
</div>

<div class="sandra">
<img src="./img/github.png" class="logoGitHub" alt="logoGitHub">
<span class="spanFooter">
<a href="https://github.com/SandraMTJ/" target="_blank" class="link-github"> Sandra Tabares </a>
</span>
</div>

</div>

</footer>
<script type="module" src="./lib/index.js"></script>
<script type="module" src="main.js"></script>
<script src="https://kit.fontawesome.com/efc823198f.js" crossorigin="anonymous"></script>
Expand Down
126 changes: 105 additions & 21 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,13 @@ main {

.txtMascotiemos{
display: flex;
padding: 5px;
justify-content: center;
width: 280px;
width: 260px;
height: 30px;
border: 1px solid black;
border-radius: 5px 5px 5px 0;
border-radius: 5px;
resize: none;
}
.post-form{
display: flex;
Expand Down Expand Up @@ -129,6 +131,7 @@ main {
position: relative;
gap: 10px;
font-size: 13px;

}

.textPost{
Expand Down Expand Up @@ -156,6 +159,7 @@ main {
background-color:#000072;
color: white;
position: absolute;
bottom: 50%;
transform: translate(-50%, -50%);
left: 50%;
border-radius: 10px;
Expand All @@ -165,11 +169,22 @@ main {
text-align: center;
}
.modal{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
opacity: 0;
}
.modal--show {
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
transition: opacity .3s;
display: flex;
justify-content: center;
align-items: center;
background-color:#e5e1f9;
}
.containerBtnsModal{
display: flex;
Expand All @@ -182,14 +197,6 @@ main {
border-radius: 5px;
border: 1px solid #B6B6B6;
}
/*.btnDltImg{
width: 10px;
height: 10px;
position: absolute;
transform: translate(-50%, -150%);
border: 0.1px solid black;
border-radius: 1px;
}*/

/*Ingreso y registro*/
.contenedorIngreso, .contenedorIngresoRegistro {
Expand Down Expand Up @@ -342,8 +349,47 @@ label span.top {
color: red;
}

footer{
.footer{
display: none;
position: fixed;
bottom: 0;
width: 100%;
padding: 3px 0;
color: #000;
background-color:#e5e1f9;
border-top: 1px solid #8181815f;
}

.content-footer{
display: flex;
justify-content: center;
gap: 60px;
}

.mayra, .andre, .sandra{
display: flex;
justify-content: center;
align-items: center;
}

.logoGitHub{
width: 25px;
}

.link-github{
text-decoration: none;
color: black;
font-size: 1.2rem;
font-weight: bold;
}

.spanFooter{
padding: 5px;
border-bottom: 1px solid transparent;
}

.spanFooter:hover{
border-bottom: 1px solid #8181815f;
}

@media (max-height:780px) {
Expand Down Expand Up @@ -402,22 +448,60 @@ footer{
height: 400px;
}

.txtMascotiemos{
font-size: 18px;
width: 700px;
height: 60px;
}

.btnPostImg {
border: none;
width: 50px;
height: 50px;
margin-left: 10px;
}

.containerForm{
border-radius: 10px;
display: flex;
width: 70%;
justify-content: center;
flex-direction: column;
}

.containerPost {
width: 700px;
display: flex;
justify-content: center;
flex-direction: column;
font-size: 18px;
margin-right: 70px;
}

.textPost{

display: flex;
width: 600px;
background-color: white;
border: 0.1px solid black;
border-radius: 5px;
padding: 8px;
}

footer {
.containerButtons{
width: 500px;
gap: 10px;
}

.containerButtons button{
display: flex;
align-self:flex-end;
}

.footer{
display: block;
margin-top: 30px;
width: 100%;
max-height: 30px;
font-size: 1.2rem;
color: rgb(56, 54, 54);
background-color: #bcb4e7;
position: fixed;
text-align: center;
bottom: 0;
}

}

@media (min-width:1900px){
Expand Down
66 changes: 16 additions & 50 deletions src/templates/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,6 @@ import { exit } from '../lib/auth.js';
let editStatus = false;
let id = '';
let postForm;

// Función que permite eliminar un post
const deletingPost = (event) => {
const postId = event.target.dataset.id;
getPost(postId)
.then(()=>{
deletePost(postId);
});
};

// Función que permite editar un post
const editingPost = (event) => {
getPost(event.target.dataset.id)
Expand All @@ -33,7 +23,6 @@ const editingPost = (event) => {
id = event.target.dataset.id;
});
};

// Función que permite dar like a un post
const likePost = (event) => {
const postId = event.target.dataset.id;
Expand All @@ -50,7 +39,6 @@ const likePost = (event) => {
}
});
};

export default function home() {
const section = document.createElement('section');
const htmlBienvenida = `
Expand All @@ -60,28 +48,21 @@ export default function home() {
<h1>Bienvenida a Mascoteando</h1>
<button name="logOut" id="logOut" class="logOut">Cerrar sesión</button>
</header>
<section class="containerForm">
<form id="post-form" class="post-form">
<textarea type="text" name="txtMascotiemos" class="txtMascotiemos" id="txtMascotiemos" rows="3" placeholder="Mascotiemos..."></textarea>
<textarea type="text" name="txtMascotiemos" class="txtMascotiemos" id="txtMascotiemos" rows="3" placeholder="Mascotiemos..."></textarea>
<button id="btnPost" class="btnPost"><img class="btnPostImg" src="./img/btnPublicar.png" alt="post"></img></button>
</form>
<div id ="containerPost" class ="containerPost"></div>
</section>
</main>`;

section.innerHTML = htmlBienvenida;

const btnLogOut = section.querySelector('#logOut');
btnLogOut.addEventListener('click', () => {
exit();
});

postForm = section.querySelector('#post-form');
const postContainer = section.querySelector('#containerPost');

const readPost = (posts) => {
let html = '';
posts.forEach((docs) => {
Expand All @@ -93,10 +74,10 @@ export default function home() {
<div class="containerMain">
<p id="textPost" class="textPost">${publication.txtMascotiemos}</p>
<section class="containerButtons">
<button id="btnLike" class="btnLike" data-id="${docs.id}">🐾</button>
<p class="count">${publication.likes.length}</p>
<button id="btnDelete" class="btnDelete" data-id="${docs.id}">🗑️</button>
<button id="btnEdit" class="btnEdit" data-id="${docs.id}">✍️</button>
<button id="btnLike" class="btnLike" data-id="${docs.id}">🐾</button>
<p class="count">${publication.likes.length || ''}</p>
</section>
</div>
`;
Expand All @@ -106,14 +87,13 @@ export default function home() {
<p id="textPost" class="textPost">${publication.txtMascotiemos}</p>
<section class="containerButtons">
<button id="btnLike" class="btnLike" data-id="${docs.id}">🐾</button>
<p class="count">${publication.likes.length}</p>
<p class="count">${publication.likes.length || ''}</p>
</section>
</div>
`;
}
});

html += `
html += `
<section class="modal">
<div class="containerModal">
<p class="modalTitle">¿Desea eliminar el post?</p>
Expand All @@ -123,56 +103,42 @@ export default function home() {
</div>
</div>
</section>`;

postContainer.innerHTML = html;


postContainer.innerHTML = html;
const modal = postContainer.querySelector('.modal');
const modalDelete = (postId) => {
const modalDelete = () => {
const btnsDelete = postContainer.querySelectorAll('.btnDelete');
const btnConfirm = postContainer.querySelector('.btnConfirm');
const btnCancel = postContainer.querySelector('.btnCancel');

btnsDelete.forEach((btnDelete) => {
btnDelete.addEventListener('click', () => {
btnDelete.addEventListener('click', (event) => {
const postId = event.target.dataset.id;
modal.classList.add('modal--show');
btnConfirm.addEventListener('click', () => {
deletePost(postId);
modal.classList.remove('modal--show');
});
btnCancel.addEventListener('click', () => {
modal.classList.remove('modal--show');
});
});
});

btnConfirm.addEventListener('click', () => {
deletingPost();
modal.classList.remove('modal--show');
});

btnCancel.addEventListener('click', () => {
modal.classList.remove('modal--show');
});
};

modalDelete(section);

// Botón para eliminar un post y llamar la función que elimina el post

// Botón para editar post y llamar la función que edita el post

const btnsEdit = postContainer.querySelectorAll('.btnEdit');
btnsEdit.forEach((btn) => {
btn.addEventListener('click', editingPost);
});

// Boton para dar like a post y llamar la función que permite dar like

const btnsLike = postContainer.querySelectorAll('.btnLike');
btnsLike.forEach((btn) => {
btn.addEventListener('click', likePost);
});
};

createSnapshot(readPost);

postForm.addEventListener('submit', (e) => {
e.preventDefault();

const txtMascotiemos = postForm.txtMascotiemos.value.trim();
if (!editStatus) {
savePost(txtMascotiemos);
Expand Down

1 comment on commit 9ce199a

@vercel
Copy link

@vercel vercel bot commented on 9ce199a May 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mascoteando – ./

dev-005-social-network.vercel.app
mascoteando-andrenavas.vercel.app
mascoteando-git-main-andrenavas.vercel.app

Please sign in to comment.