Skip to content

Browser Environment Eval #219

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
acl13 wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Browser Environment Eval #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4ed7a7c
initial commit
acl13 Jul 29, 2024
ca8ac94
create html boilerplate, link css and js files
acl13 Jul 29, 2024
1c6fd66
create basic forum page with inputs for posts and name
acl13 Jul 30, 2024
99214d3
display user posts when submit button is clicked
acl13 Jul 30, 2024
7111e20
add bottom border to posts
acl13 Jul 30, 2024
cd9b1af
add required validation to inputs
acl13 Jul 31, 2024
193b665
display comments on post
acl13 Jul 31, 2024
4e3689a
toggle comment form visibilty when 'comments' is clicked
acl13 Jul 31, 2024
5e2a986
remove post when 'remove' is clicked
acl13 Jul 31, 2024
a5ec191
toggle comments visibilty when 'comments' is clicked
acl13 Jul 31, 2024
d427382
make 'remove' link inline with posts and comments
acl13 Jul 31, 2024
bcf9b9e
create link break and clear input after comment is posted
acl13 Jul 31, 2024
b097978
remove comment when 'remove' is clicked
acl13 Jul 31, 2024
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
44 changes: 44 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!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.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>ReReddit</title>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">

<div class="page-header">
<h1>ReReddit</h1>
</div>
<div class="posts">
</div>

<form style="margin-top:30px;" onsubmit="event.preventDefault();">
<div class="form-group">
<input id="post" type="text"
class="form-control"
placeholder="Post Text" required></input>
</div>
<div class="form-group">
<input id="name" type="text"
class="form-control"
placeholder="Your Name" required></input>
</div>

<button id="submit" class="btn btn-primary">Submit Post</button>
</form>

</div>
</div>
<script src="main.js"></script>
</body>
</html>
94 changes: 94 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
const userName = document.getElementById("name");
const userPost = document.getElementById("post");
const submit = document.getElementById("submit");
const posts = document.getElementsByClassName("posts")[0];

submit.addEventListener("click", onSubmit);

function onSubmit() {
if (userName.value === "" || userPost.value === "") {
Copy link

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

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

this is a nice try for validation, but actually you can write spaces in the input and this wont trigger the alert and then you have an empty post
image

alert("Please fill out both fields before submitting");
} else {
const post = document.createElement("div");
const postText = document.createElement("span");
const comments = document.createElement("div");
const displayComments = document.createElement("a");
const removePost = document.createElement("a");

displayComments.textContent = "comments";
removePost.textContent = "remove";
postText.textContent = `${userPost.value} - Posted By: ${userName.value}`;
post.classList.add("border-bottom");
posts.appendChild(post);
post.appendChild(postText);
post.appendChild(displayComments);
post.append(" ");
post.appendChild(removePost);
post.append(" ");
post.appendChild(postText);
post.appendChild(comments);
userName.value = "";
userPost.value = "";

displayComments.addEventListener("click", function () {
if (comments.classList.contains("hide")) {
comments.classList.remove("hide");
commentsForm.classList.remove("hide");
} else {
comments.classList.add("hide");
commentsForm.classList.add("hide");
}
});

removePost.addEventListener("click", function () {
post.remove();
});

const commentsForm = document.createElement("form");
const commentTextContainer = document.createElement("div");
const commentNameContainer = document.createElement("div");
const commentText = document.createElement("input");
const commentName = document.createElement("input");
const commentSubmit = document.createElement("button");

commentText.type = "text";
commentName.type = "text";
commentText.setAttribute("placeholder", "Comment Text");
commentName.setAttribute("placeholder", "Your Name");
commentTextContainer.classList.add("form-group");
commentNameContainer.classList.add("form-group");
commentSubmit.textContent = "Submit Comment";
commentText.classList.add("form-control");
commentName.classList.add("form-control");
commentSubmit.classList.add("btn");
commentSubmit.classList.add("btn-primary");

commentSubmit.addEventListener("click", function (event) {
event.preventDefault();
const comment = document.createElement("span");
const removeComment = document.createElement("a");
const lineBreak = document.createElement("br");
comment.textContent = `${commentText.value} - Posted By: ${commentName.value}`;
removeComment.textContent = "remove";
comments.appendChild(removeComment);
removeComment.append(" ");
comments.appendChild(comment);
comment.appendChild(lineBreak);

commentName.value = "";
commentText.value = "";

removeComment.addEventListener("click", function () {
comment.remove();
removeComment.remove();
});
});

post.appendChild(commentsForm);
commentsForm.appendChild(commentTextContainer);
commentsForm.appendChild(commentNameContainer);
commentTextContainer.appendChild(commentText);
commentNameContainer.appendChild(commentName);
commentsForm.appendChild(commentSubmit);
}
}
12 changes: 12 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.border-bottom {
border-bottom: 1px solid #eeecec;
padding-bottom: 1em;
}

.hide {
display: none;
}

.inline {
display: inline;
}