Skip to content

initial commit #220

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

Open
areebakwas wants to merge 1 commit into
base: master
Choose a base branch
from
Open

initial commit #220

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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Module 2-Project Reddit</title>
</head>
<body>
<div class="container">
<h1 class="module-2">ReReddit</h1>
<hr>
<div id="cont-posts"></div>
<form class="module-2" id="form-post" >
<div class="form-group">
<input type="text" class="form-control" id="text-from-post" placeholder="Post Text">
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

the id needs to reflect the element, not the result of the value:

Suggested change
<input type="text" class="form-control" id="text-from-post" placeholder="Post Text">
<input type="text" class="form-control" id="post-text-input" placeholder="Post Text">

</div>
<div class="form-group">
<input type="text" class="form-control" id="writer-posted" placeholder="Your Name">
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

not a great id text, I would have used:

Suggested change
<input type="text" class="form-control" id="writer-posted" placeholder="Your Name">
<input type="text" class="form-control" id="post-author-input" placeholder="Your Name">

</div>
<button type="submit" class="btn btn-primary">Submit Post</button>
</form>
</div>
</body>
</html>
107 changes: 107 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
// Add event listener
// prevent default and const for inputs
document.getElementById('form-post').addEventListener('submit', function(e) {
e.preventDefault();


const textFromPost = document.getElementById('text-from-post').value;
const writerPosted = document.getElementById('writer-posted').value;

postToAdd(textFromPost, writerPosted);


Comment on lines +5 to +12
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

watch for all these empty spaces

Suggested change
const textFromPost = document.getElementById('text-from-post').value;
const writerPosted = document.getElementById('writer-posted').value;
postToAdd(textFromPost, writerPosted);
const textFromPost = document.getElementById('text-from-post').value;
const writerPosted = document.getElementById('writer-posted').value;
postToAdd(textFromPost, writerPosted);

document.getElementById('text-from-post').value = '';
document.getElementById('writer-posted').value = '';
Comment on lines +13 to +14
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

what is the purpose of this?
Better practice is to extract to a function to help with readability and reusability

});

// Fxn to make post add to page html
function postToAdd(post, writer) {
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

not arrow function, stick to es6


const containerOfMessages = document.createElement('div');
containerOfMessages.classList.add('mb-4', 'border', 'p-3');


const messagesPost = document.createElement('p');
messagesPost.textContent = `${post} - Posted by ${writer}`;


const withdrawMessagesHere = document.createElement('a');
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

bad and not clear const name. Took me a while to understand what this is doing.
Whats wrong with removeMessagesElement/container?

withdrawMessagesHere.href = '#';
withdrawMessagesHere.textContent = 'remove';
withdrawMessagesHere.classList.add('text-danger', 'mr-2');
withdrawMessagesHere.addEventListener('click', function () {
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

you are using es6 with consts, but not with functions

containerOfMessages.remove();
});


const postSwitchFromPage = document.createElement('a');
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

same as above, this const name is confusing.
showHideCommentsAction or something is better.

postSwitchFromPage.href = '#';
postSwitchFromPage.textContent = 'comments';
postSwitchFromPage.classList.add('post-page');
postSwitchFromPage.addEventListener('click', function () {
messagesAreHere.style.display = messagesAreHere.style.display === 'none' ? 'block' : 'none';
});


const messagesAreHere = document.createElement('div');
Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

Suggested change
const messagesAreHere = document.createElement('div');
const messagesContainer = document.createElement('div');

Copy link

@ronyrosenberg ronyrosenberg Aug 26, 2024

Choose a reason for hiding this comment

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

You call them messages, but what are they messages or posts? Be consistent!

messagesAreHere.classList.add('messages-are-here');


const listOfComments = document.createElement('ul');
listOfComments.classList.add('webpage-of-lists');

//create form
const formView = document.createElement('form');
formView.classList.add('module-2');
formView.innerHTML = `
<div class="form-group">
<input type="text" class="form-control input-post" placeholder="Comment Text" required>
</div>
<div class="form-group">
<input type="text" class="form-control input-comment" placeholder="Your Name" required>
</div>
<button type="submit" class="btn btn-primary">Submit Comment</button>
`;

// use eventlistenr
formView.addEventListener('submit', function (e) {
e.preventDefault();

const inputPost = formView.querySelector('.input-post').value;
const inputComment = formView.querySelector('.input-comment').value;

commentJoin(listOfComments, inputPost, inputComment);
formView.reset();
});

// creat new fxn to join evertyhing/append
messagesAreHere.appendChild(listOfComments);
messagesAreHere.appendChild(formView);
containerOfMessages.appendChild(withdrawMessagesHere);
containerOfMessages.appendChild(postSwitchFromPage);
containerOfMessages.appendChild(messagesPost);
containerOfMessages.appendChild(messagesAreHere);
document.getElementById('cont-posts').appendChild(containerOfMessages);
}


function commentJoin(listOfComments, post, writer) {
const opinionUser = document.createElement('li');
opinionUser.classList.add('my-2');

const viewRegarding = document.createElement('p');
viewRegarding.textContent = `${post} - Posted by ${writer}`;

const deleteOpinionL = document.createElement('a');
deleteOpinionL.href = '#';
deleteOpinionL.textContent = 'remove';
deleteOpinionL.classList.add('text-danger', 'mr-2');

deleteOpinionL.addEventListener('click', function () {
opinionUser.remove();
});

opinionUser.appendChild(deleteOpinionL);
opinionUser.appendChild(viewRegarding);
listOfComments.appendChild(opinionUser);
}
4 changes: 4 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.messagesAreHere {
display: none;
margin-left: 18px;
}