“As a user, one should see 5 messages on page load, a delete button added to each, and an input field that holds information to add to the message field."
Acceptance Criteria
When the page is first loaded, you must load 5 messages from a local JSON file and pre-fill a message area <div> below the input field that will also hold all new messages as they get created.
Then when the user presses the return key in the message field, the new message should be inserted into the message area.
And the message should have a button displayed after it with the text "Delete" inside of it.
And When the delete button next to a message is clicked, only that message should be removed from the DOM.
Technical Notes
messages.json file must be created in the db folder
const messages(Array of Objects): id, imageUrl, comment
<div id = "message-output">
create buildMessageString function that loops through class "message-container" and prints id, imageUrl, comment, and delete button.
add id to the input field. id="input-field"
create const inputField function in events.js with keypress event. (console.logs when enter is clicked)
create const deleteButton in events.js that adds hide class to the message associated with that button.
Story
“As a user, one should see 5 messages on page load, a delete button added to each, and an input field that holds information to add to the message field."
Acceptance Criteria
<div>below the input field that will also hold all new messages as they get created.Technical Notes
<div id = "message-output">id="input-field"const inputField functionin events.js with keypress event. (console.logs when enter is clicked)const deleteButtonin events.js that adds hide class to the message associated with that button.