When a user posts a new post, let them put in their name so we know who posted it.
We'll add a new text input (the white box you type words into) to post.html
Part 1
[x] in post.html, add a new text <input> field where the user can write their name. You can copy and paste the input where they write their message. Now there will be two places you can write in when you look at the page.
(Don't copy the whole form - we're just adding a new input, which is the empty space you write into, to the existing form. There should still only be one 'Post it!' button for the whole form.
[x] Give your new <input> field has a unique class name, e.g. class="nameInput"
[x] Check: open localhost:3000/post.html and check your new input field appears on the form.
Part 2
If someone has already finished the issue Clicking 'Post it!' should not go to a new page then you need to do an extra step:
[x] in post.html, update the javascript so it sends the new form field to the server. (Look at the existing code for reference. You need to add one line of JavaScript code.)
You will need to add one line to the javascript in post.html. This will be very similar to the line that starts with data.message =… but will need to set data.author instead.
If no-one has done Clicking 'Post it!' should not go to a new page, you can skip this step.
Part 3
Now it's (hopefully) being sent to the server, we need to teach the server to look out for this new information.
[x] We're now working in index.js
[x] find for the code that is run when a user POSTS a new post to the server.
[x] there is a line that writes the post's message to the console using console.log(request.body.message);. Add another line that logs request.body.author as well. ('author' needs to match whatever you saved it as in the data object back in post.html)
[x] Restart the server, post a new post and check that your author name now shows up in terminal/command prompt.
[x] If the author name is coming through, we can now save it. You do this by setting a new new name-value pair on the post. Your code might look like this:
post.author = request.body.author;
Part 4
[x] Save some new posts then check how they look in raw form at http://localhost:3000/posts – each post should have a message and an author.
[x] modify feed.html so that each post displays the author (post.author). Try this code to start with (add it after the code that creates postElement:
let authorElement = $('<div>author goes here</div>');
postElement.append(authorElement);
You'll need to change it to include the actual author value post.author - you may need to use quotation marks to make it clear that you want the actual post.author and don't want it to literally say "post.author"
notes
This task does not include updating the CSS look + feel of the post.html page. Just make it work, don't focus on making it pretty in this ticket.
When a user posts a new post, let them put in their name so we know who posted it.
We'll add a new text input (the white box you type words into) to post.html
Part 1
<input>
field where the user can write their name. You can copy and paste the input where they write their message. Now there will be two places you can write in when you look at the page.<input>
field has a unique class name, e.g.class="nameInput"
Part 2
If someone has already finished the issue Clicking 'Post it!' should not go to a new page then you need to do an extra step:
data.message =
… but will need to setdata.author
instead.Part 3
Now it's (hopefully) being sent to the server, we need to teach the server to look out for this new information.
console.log(request.body.message);
. Add another line that logs request.body.author as well. ('author' needs to match whatever you saved it as in the data object back in post.html)post
. Your code might look like this:Part 4
post.author
). Try this code to start with (add it after the code that creates postElement:You'll need to change it to include the actual author value
post.author
- you may need to use quotation marks to make it clear that you want the actualpost.author
and don't want it to literally say "post.author"notes
This task does not include updating the CSS look + feel of the post.html page. Just make it work, don't focus on making it pretty in this ticket.