***This can only be done when #4 and #2 has been completed
The post form in post.html should let you include a link (URL) to an image file
Act 1
[ ] on post.html, add a new text input field inside the form. This is where the user can paste in the url of an image.
Don't add a whole new form - just add a new field (that's the empty space you write into) inside the form that's already there. This is one line of HTML code.
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:
[ ] 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.)
If no-one has done Clicking 'Post it!' should not go to a new page, you can skip the step above.
[ ] use the Chrome Developer Tools to check that it's posting the new value when you post.
How to check what is being sent to the server:
with post.html open in Google Chrome, open the Developer Tools
Click on the Network tab
Now on the form, click the button
You should see a new item 'posts', appear in the Developer Tools. This line is the POST request. Click on it to see what happened
Choose the Headers section, scroll to the bottom to see the form data, and make sure all the form fields are visible - that means they were sent to the server.
Act 2
[ ] on the server (index.js), look for the code that runs when a new post is POSTed (it starts with app.post and calls a function) You need to add a line to that function so that the image url is saved into the new post object.
[ ] check that the image url is being saved by looking at the raw posts at http://localhost:3000/posts - do you see the image urls appearing?
(Remember that because you're changing index.js you'll need to restart your server to make it read your changes.)
Act 3
[ ] Now we have these images, we need to display them in the feed. In feed.html, you will need to modify the code that creates each post so that it includes the image URL.
In feed.html, find the code that creates a variable postElement. Add this code after it:
let imageElement = $('<img src="http://example.com/image.jpg">');
postElement.append(imageElement);
This should create an image, but it will be a broken image link because the URL is wrong. You need to include post.image as the URL. You'll need some careful use of quotation marks and pluses to make javascript include the actual post.image instead of just literally saying post.image.
[ ] TEST: you can now post glorious images to the message feed
If you are having trouble in this step, the Developer Tools may help. Right click on a post in the feed (in Google Chrome) and choose Inspect to see the HTML code. Compare it to an image in another website, like your Neocities website, and try to spot the difference.
phailwhale
commented
6 years ago
***This can only be done when #4 and #2 has been completed
The post form in post.html should let you include a link (URL) to an image file
Act 1
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:
How to check what is being sent to the server:
(Remember that because you're changing index.js you'll need to restart your server to make it read your changes.)
Act 3
In feed.html, find the code that creates a variable
postElement. Add this code after it:This should create an image, but it will be a broken image link because the URL is wrong. You need to include
post.imageas the URL. You'll need some careful use of quotation marks and pluses to make javascript include the actualpost.imageinstead of just literally saying post.image.If you are having trouble in this step, the Developer Tools may help. Right click on a post in the feed (in Google Chrome) and choose Inspect to see the HTML code. Compare it to an image in another website, like your Neocities website, and try to spot the difference.