Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds new comment: #29

Merged
merged 1 commit into from
Sep 1, 2022
Merged

Adds new comment: #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
55 changes: 48 additions & 7 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ a {
.modal {
display: none;
width: 100%;
height: 100%;
height: 100vh;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
Expand All @@ -169,24 +169,25 @@ a {
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 111;
background: linear-gradient(#2980b9, #6dd5fa, #eee);
width: 50%;
min-height: 50%;
max-height: 100%;
height: 96vh;
position: relative;
outline: solid 4px rgba(68, 137, 201, 1);
border-radius: 14px;
gap: 30px;
padding: 30px 1px;
gap: 10px;
overflow-y: auto;
padding-bottom: 60px;
}

.closeIcon {
position: absolute;
top: 30px;
right: 30px;
font-size: 20px;
color: var(--orange);
color: yellow;
}

.closeIcon:hover {
Expand All @@ -197,10 +198,12 @@ a {
width: 200px;
height: 200px;
background-size: contain;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
margin-top: 250px;
}

.commentsDetails {
Expand Down Expand Up @@ -230,7 +233,45 @@ a {
width: 80%;
padding: 20px;
border-radius: 10px;
gap: 30px;
gap: 10px;
}

.addNewCommentContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background-color: rgba(255, 255, 255, 0.5);
width: 80%;
padding: 20px;
border-radius: 10px;
}

.nameInput {
width: 95%;
height: 25px;
padding: 5px;
outline: none;
border: none;
border-radius: 5px;
}

.textarea {
width: 95%;
height: 80px;
padding: 5px;
outline: none;
border: none;
border-radius: 5px;
}

.commentBtn {
align-self: flex-end;
background-color: rgb(255 224 0);
padding: 5px 10px;
border-radius: 5px;
outline: solid 1px black;
}

#about {
Expand Down
93 changes: 70 additions & 23 deletions src/modules/comments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@ import { toUpper } from 'lodash';
const modal = document.getElementById('modal');
let showComments;

export const commentsShow = async (id) => {
const url = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/BnTnru6kmlT778QrlDMq/comments?item_id=${id}`;

const res = await fetch(url);
const data = await res.json();
await showComments(data);
};

const postComment = async (options) => {
const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/BnTnru6kmlT778QrlDMq/comments';
await fetch(url, {
body: JSON.stringify(options),
method: 'POST',
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
});
commentsShow(options.item_id);
};

const showModal = (item) => {
const commentsModal = document.createElement('div');
commentsModal.classList.add('commentsModal');
Expand Down Expand Up @@ -48,22 +68,25 @@ const showModal = (item) => {
giftType.classList.add('height');
giftType.innerText = `Height: ${item.height}`;

commentsDetailsRow2.append(flavor, giftType);
commentsDetails.append(commentsDetailsRow1, commentsDetailsRow2);
commentsModal.append(close, commentsImg, modalTitle, commentsDetails);
const commentsContainer = document.createElement('div');
commentsContainer.classList.add('commentsContainer');

showComments = (data) => {
const commentsContainer = document.createElement('div');
commentsContainer.classList.add('commentsContainer');
const commentsTitle = document.createElement('h2');
commentsTitle.classList.add('commentsTitle');
commentsTitle.innerText = 'Comments (0)';

const commentsTitle = document.createElement('h2');
commentsTitle.classList.add('commentsTitle');
commentsTitle.innerText = 'Comments (0)';
const comments = document.createElement('ul');
comments.classList.add('comments');

const comments = document.createElement('ul');
comments.classList.add('comments');
commentsContainer.append(commentsTitle);

commentsDetailsRow2.append(flavor, giftType);
commentsDetails.append(commentsDetailsRow1, commentsDetailsRow2);
commentsModal.append(close, commentsImg, modalTitle, commentsDetails, commentsContainer);

showComments = (data) => {
if (data && data.length > 0) {
comments.innerHTML = '';
data.forEach((item) => {
const comment = document.createElement('li');
comment.classList.add('comment');
Expand All @@ -76,28 +99,52 @@ const showModal = (item) => {
comments.append(noComments);
}

commentsContainer.append(commentsTitle, comments);
commentsModal.append(commentsContainer);
commentsContainer.append(comments);
};

const addNewCommentContainer = document.createElement('div');
addNewCommentContainer.classList.add('addNewCommentContainer');

const addNewCommentTitle = document.createElement('h2');
addNewCommentTitle.classList.add('addNewCommentTitle');
addNewCommentTitle.innerText = 'Add new comment';

const nameInput = document.createElement('input');
nameInput.classList.add('nameInput');
nameInput.setAttribute('placeholder', 'Your name');
nameInput.setAttribute('id', 'name');
nameInput.setAttribute('type', 'text');
nameInput.setAttribute('aria-label', 'name');

const textarea = document.createElement('textarea');
textarea.classList.add('textarea');
textarea.innerText = 'Write your comment';
textarea.setAttribute('id', 'comment');

const commentBtn = document.createElement('a');
commentBtn.classList.add('commentBtn');
commentBtn.innerText = 'Comment';
commentBtn.addEventListener('click', () => {
const comment = {
item_id: item.id,
username: nameInput.value,
comment: textarea.value,
};

postComment(comment);
});

addNewCommentContainer.append(addNewCommentTitle, nameInput, textarea, commentBtn);
commentsModal.append(addNewCommentContainer);

modal.innerHTML = '';
modal.append(commentsModal);
};

export default async (id) => {
// base for the api to get the pokemon
const url = `https://pokeapi.co/api/v2/pokemon/${id.id}`;

// fetch data
const res = await fetch(url);
const pokemon = await res.json();
showModal(pokemon);
};

export const commentsShow = async (id) => {
const url = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/BnTnru6kmlT778QrlDMq/comments?item_id=${id}`;

const res = await fetch(url);
const data = await res.json();
await showComments(data);
};
Empty file removed src/modules/commentsApi.js
View file
Open in desktop
Empty file.