Skip to content

Assignment 08 - Task Board Part 2

Modified content from CS193x - Michael Chang

Info

  • Due Tue Mon May 27 11:59pm
  • Extended Deadline
  • Max. Points 10
  • Late Submission: -2 points
  • Continue with your code from Task Board Part 1
  • You are required to code a solution using the strategies we have discussed in the lecture(s)
  • Submissions not accepted after Sun Jun 2 11:59pm

Task 1: Moving cards

The final piece of functionality in this app is moving cards around on the board. Moving a card is a two-step process:

  1. When the user clicks on the move button of a card, the card is "selected for moving," and a number of "Move Here" buttons appear.
  2. When the user clicks on a "Move Here" button, the selected card is moved to the spot where the button is.

You'll implement a class (in mover.js) to abstract away this logic. (You'll also need to modify App and Card in this part to integrate this.) Mover's public interface is as follows:

  • constructor(): Set up instance variables, handlers, etc.
  • startMoving(card): Marks a card as selected and shows the "Move Here" buttons. card is the card's element (i.e. the <article> element, not the Card instance).
  • stopMoving(): Called when another class wants to ensure no card is being moved, e.g. because a card is being added or deleted.

Your task is as follows:

Deliverable

  1. Initialization:
    • Initialize a Mover instance in App. Pass this instance to Card when adding it (via the previously-unused mover parameter in addToCol). Card should store this for later use.
    • There should only be one Mover instance for the entire run time of the app--do not create a new one for each card.
  2. Starting a move:
    • When the user clicks a card's move button, give the card the (CSS) class "moving".
    • Add a button after the columnTitle and after each card in the board. (This means a column with N cards will have N + 1 move here buttons.
    • Each button should have the moveHere class, and its text is defined in the constant at the top of mover.js.
  3. Completing a move:
    • When the user clicks on a move here button, move the selected card from its current position to where the clicked button is.
    • The card stops being selected, and all move here buttons are removed.
    • The card may end up in the same place it started if the move here button directly above or below it is clicked. That is expected (and should work without a special case).
  4. Canceling a move:
    • In some cases, you will want to "cancel" any move that has been started but not completed. This means unselecting any card that has been selected for moving, and removing all of the move here buttons.
    • Cancel any incomplete move in the following cases: (1) a card is added, (2) a card is deleted, (3) before another move is started.

Notes for this task

  • There is no template element for the move here buttons, so you will have to create them directly in JavaScript. While any element can respond to a "click" event, you should make these actual buttons (for accessibility, keyboard navigation, etc.).
  • When adding the move here buttons, be careful not to cause an infinite loop. For example, if you loop through the children of an element while adding children inside the loop, the loop will run forever and may even crash your browser. Use a selector (with querySelectorAll) to ensure you only add one button per column title/card.
  • Since the move here buttons don't start out in the HTML itself, and the number of buttons varies, you will need to add event listeners to these buttons as you create them, not in the constructor. But you should still bind your handler in the constructor.
  • When completing a move, you will need to know which card was selected for moving. This can be accomplished either via an instance variable or by searching the DOM. Either approach is fine.
  • You will also need to know which move here button was clicked, which is a perfect use case for currentTarget.
  • The moving CSS class won't have any visual effect right now. We will fix that in the next part.
  • An element can only exist in the tree once. If you use a DOM function to add it to the tree and it is already added somewhere else, it will be moved.
  • The after function will be useful for this part.
  • It shouldn't be possible for your move here button handler to be called without a selected card, so you don't have to handle that case. But note that stopMoving may be called when no card is selected and no move here buttons exist (in which case it should do nothing).

Task 2: Styling cards (a bit)

Your final task is to add a bit of CSS to the page. For the time being, we'll focus on a few very specific changes. In assignment 2.2, we will revisit this app, adding more CSS to tidy things up, adjust the spacing between elements, and handle the overall page layout.

styles.css (already linked in the HTML) starts with a few rules. Review them, then add rules to do the following:

Deliverable

  • Fonts for interactors: Change the font size of all <input>, <button>, and <textarea> elements so it is the same as normal text. Also change <textarea>s to use the same font family as the rest of the page (at least on some browsers/OSes, it defaults to a monospace font).
  • Card selected for moving: A card selected for moving should have a 2px solid black border.
  • Edit description text box: Make the text box for editing descriptions expand to the full width of the page, have a height of 5 times the font size, and have the same background color as the rest of the card.
  • Whitespace in descriptions: Change the whitespace handling for the description so that newlines and multiple/leading spaces will show up. The text should still wrap if it is too long to fit on one line.
  • Card buttons: The card buttons (edit, move, delete) should use the card's background color and have no border. When the user moves their mouse over the buttons, their cursor should change to a "pointer" hand, and the button's background should become translucent (use rgba(0, 0, 0, 0.25) as the color).
  • Move here buttons: Similar to the card buttons, these should also have no background/border and use the pointer hand cursor. They should also use a small font size. When not hovered, their text color should be gray. When hovered, they get a #e0e0e0 background and their text becomes its normal color (black).
  • Note that the background, border, and cursor don't apply to the "Add" button.

Here is an image of these styles:


Screenshot of styles (including move here buttons)
App with styles (and move here buttons)

Notes for this task

  • CSS properties that will be useful here: cursor, white-space.
  • You can set any CSS property's value to inherit. This has two purposes: (1) make the element inherit this value from its parent, even if that property wouldn't normally be inherited; (2) "undo" the value you set in a previous (i.e. less specific) selector.
  • While background color isn't inherited, elements without a set background color default to transparent, which is why an ancestor's background color will show through.
  • Try to write selectors that capture the underlying goal of the rule. For example, if you changed the number/type of buttons on each card, you shouldn't have to change your CSS rules to apply to the new/changed buttons.
  • Use the grouping combinator (,) to avoid duplicating rules.

Submitting

  • Zip your project folder and submit it on Blackboard - Assignment 08.
  • Upload your final assignment into a new folder in your public_html on your meise. Finally, provide a link named Assignment 08 - Task Board Part 2 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.