Skip to content

Assignment 06 - Task Board Part 1a (Task 1)

Modified content from CS193x - Michael Chang

Backstory

Word of your awesome web dev skills is starting to make the rounds! As you work on your grand plans for taking over the world fixing Axess, you realize it's going to take a lot of work...and planning. Sure, you could use an off-the-shelf tool for this, but where's the fun in that? After all, with the countless web dev tutorials out there that use a to-do list as their example, maybe you should give it a try too.

In this assignment, you will write the (JavaScript) logic for a web app that tracks tasks and organizes projects. The organization system is based on a widely used system called kanbanlaunch and implemented in tools like GitHub project [boardslaunch](https://docs.github.com/en/issues/organizing-your-work-with-project-boards/managing-project-boards/about-project-boards.

Learning goals Task Board

Through this assignment, you will:
- Build interactive components using JavaScript classes,
- Programmatically create, style, and remove HTML elements through the DOM,
- Write CSS to style individual and groups of elements.

Overview

When you are finished, your app will look something like this:

Screenshot

The board is divided into three columns (which are currently just headings), each containing a number of cards. On the top is a set of controls for adding a new card. Cards have a title, a description, and a (background) color. They can be moved within and between columns and deleted, and their descriptions can be edited.

For this assignment, you won't do too much to lay out the board, columns, and cards. We will return to this in Part 2 of the assignment, to make the app look more like a typical Kanban board. See Task 4 for the specific requirements for styling in this assignment.

Aside: The columns represent what state a task is in: not started, in progress, or completed. There are other strategies for organizing tasks, with a variety of number and type of columns, but the three-column (or "three-bin") strategy is one of if not the most common.

To get started, download the starter code, extract it.

The assignment has four tasks: the first three are to implement the logic for the app, and the last is to add a handful of style rules. Each part is meant to be independently testable before moving onto the next.

Task 1: Adding cards

Review the contents of index.html, which contains the page structure for the task board. Do not modify the HTML file; your JavaScript must work with the HTML structure as given. You will implement the logic for the app in the various .js files. We have added the imports we anticipate you'll need.

The logic for this task will be split between the App and Card classes, which have the following public interfaces:

App

  • constructor() Set up the app. An App instance is created by main in index.js.
  • addCard(col, title, color) Create a new card and add it to the board. This method delegates most of the work to the Card constructor. col is a string containing the id of the column the card should be added to (i.e. "todo", "doing", or "done"). title and color are strings for the card's title and color. Return the new Card instance.

Card

  • constructor(title, color) Create a new card with the given title and color. A card's description should start empty (meaning it will display as "(No description)", as below). This is a good place to create the HTML elements for the card and set up handlers.
  • addToCol(colElem, mover) Add the card to the board as the last (bottommost) card of the specified column. colElem is the DOM element for the column (i.e. the
    element). For now, you can ignore the mover argument (pass null when calling this function).
  • setDescription(text) Set the description for the card to the passed-in text, a string. If a card's description would ever be empty, the text "(No description)" is displayed instead. (We have defined the constant NO_DESCRIPTION_TEXT in card.js.)

Your task is to enable adding cards to the board, as follows:

Deliverable

Add cards via the addCard method:
- Cards should be created by duplicating the template card defined at the end of the HTML.
- Set the card's title and background color as passed in. You can assume title will not be empty. You do not need to validate the passed-in color; any CSS color name or specification will work when set from JavaScript (and invalid colors/empty string will be ignored by the browser).
- The card should show "(No description)" because the description starts out empty.
- The card is added to the end (bottom) of the specified column.
Set a card's description via setDescription:
- Calling setDescription on a card changes its description to the passed in value.
- As noted above, if a card's description is ever empty, the default text "(No description)" is shown in the card instead.
Add cards via the form:
- When the user clicks "Add" or presses Enter in either of the text boxes, create a new card with the specified title and color (and empty description).
- If the user did not enter a title, an error message should be shown to the user. This should happen automatically because the title input is marked required (see note if it doesn't).
- Add the newly-created card to the end of the "To Do" column.
- After the card is added, clear the inputs in the add form.

Some notes and tips

  • You should not change the parameters (signature) of the methods described above. The idea is that the Card class should take care of all of the logic for creating the new elements and setting their text/styles/etc.. addCard can be very simple: create a new Card and call addToCol.
  • Elements with the template CSS class are not visible. Thus, when creating new cards, you will need to make sure those cards don't have template or they will not show on the page.
  • You can call querySelector on an element (instead of on document) to select only descendent elements.
  • The App class doesn't need to hold onto any Card instances after they are created and added, as card functionality is fully self-contained within the Card class.
  • The default behavior when submitting a form is to send the form's data back to the server, causing the page to refresh. You need to stop this behavior from happening or your board will be cleared.
  • Since the title input is marked as required in the HTML, the browser will automatically validate it and display an error when the user tries to submit the form. However, this validation won't happen if you handle the button click instead of the form submit.
  • In addition to accessing elements in a form by id, you can also access them by their name attribute. This can be useful if you have multiple forms with the same inputs, since ids have to be unique across the entire page, but names don't.
  • Review the reference page for useful DOM functions. See in particular the cloneNode function.
  • We have added a few calls to addCard and a call to setDescription in index.js. You can edit main as you'd like, so you don't have to keep adding cards every time you make a change to your code and the page refreshes.
  • You may expose any classes/variables to the console (via window) or use console.log for debugging, but you shouldn't leave any logging statements or global variables in your submission.

Submitting

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