Skip to content

Assignment 07 - Task Board Part 1b

Modified content from CS193x - Michael Chang

Info

  • Due Tue Mon May 13 11:59pm
  • Extended Deadline
  • Max. Points 5
  • Late Submission: -1 point
  • Continue with your code from Assignment 06
  • You are required to code a solution using the strategies we have discussed in the lecture(s)
  • Submissions not accepted after Thu May 16 11:59pm

Task 2: Editing and deleting cards

Your next task (which will have you work exclusively in Card) is to implement the edit and delete buttons, as follows:

Deliverable

DeleModified content from CS193x - Michael Chang card descriptions:
- When the user clicks the edit button on a card, hide the current description and show the <textarea> to let them enter a new description.
- The text box should be filled in with the current description (which may be empty). It should be focused, with all text selected at the start.
- When the user clicks or tabs away from the text box, set the card's description to what the user entered, and return the card to its normal state (text box hidden, description shown).

Notes for this task

  • We have defined the hidden CSS class to not show elements (see styles.css). The textarea starts out hidden, and you can add/remove it to the description and textarea to hide/show them.
  • You'll find the following methods/events on inputs (and textareas) useful for this part: focus(), select(), blur event.
  • The browser's default size for a textarea is quite small. You will add a couple styles to it in Task 4, but you don't have to solve this for now. (You can drag the corner to resize the box temporarily if you want.)
  • Due to the way the browser handles spaces and newlines in HTML, multiple spaces and/or line breaks will not be displayed in the description. We'll also solve this problem in Task 4.
  • You don't need to change setDescription to handle the case where it is called while the user is currently editing the card. (But you should consider using it to update the card description.)

Submitting

  • Zip your project folder and submit it on Blackboard - Assignment 07.
  • Upload your final assignment into a new folder in your public_html on your meise. Finally, provide a link named Assignment 07 - Task Board Part 1b on your personal page which refers to the index.html file in the folder. I will visit your site and check the final submission.
  • Do not change the files on the server after the submission deadline.