Finishing Touches
We have our templates, our models, and our views. All that’s left is a tiny bit of initialization logic!
First, we need some initial data to put in localStorage if none exists. Because we didn’t provide a way to create new boards, it’s essential that we start with one:
| | localStorage.boards ?= JSON.stringify([ |
| | { |
| | id: 1 |
| | name: 'New Board' |
| | } |
| | ]) |
| | localStorage.columns ?= JSON.stringify([]) |
| | localStorage.cards ?= JSON.stringify([]) |
If, after mucking around, you want to restore this blank slate, open up the browser console and run localStorage.clear().
And finally, we need to initialize a BoardView:
| | # Wait for the DOM to be ready |
| | $ -> |
| | # Fetch all boards and display the last (only) one |
| | board = window.allBoards.last() |
| | $board = $("<div class='board' data-board-id='#{board.get('id')}'></div>") |
| | $('body').append $board |
| | boardView = new window.BoardView( |
| | model: board |
| | el: $board |
| | ).render() |
| | return |
BoardView will take care of the rest, creating and rendering all of the subviews we may need.
And with that, we’re finally ready to run CoffeeTasks. Just open index.html in your browser of choice, and you’ll be greeted with a fully functional task list app with localStorage persistence! Of course, it looks a lot better with a few basic styles:
| | /* Use border-box sizing for all elements */ |
| | * { |
| | box-sizing: border-box; |
| | } |
| | |
| | /* Make <body> occupy the full height of the window */ |
| | html, body { |
| | height: 100%; |
| | } |
| | |
| | /* The current board should cover the whole page */ |
| | .board { |
| | height: 100%; |
| | padding: 16px; |
| | background: #ccc; |
| | } |
| | |
| | /* The name of the board should go across the top of the page */ |
| | input[name=board-name] { |
| | font-size: 24px; |
| | width: 100%; |
| | height: 34px; |
| | } |
| | |
| | /* The column container should use all remaining board space */ |
| | .column-container { |
| | position: absolute; |
| | top: 62px; /* board padding-top + board-name + margin */ |
| | bottom: 16px; |
| | } |
| | |
| | /* Each column should be fixed-width and use all available height */ |
| | .column { |
| | position: relative; |
| | display: inline-block; |
| | width: 300px; |
| | height: 100%; |
| | margin-right: 8px; |
| | padding: 8px; |
| | background: #999; |
| | } |
| | |
| | /* The "Add column" button should appear where the new column would go */ |
| | button[name=add-column] { |
| | display: inline-block; |
| | height: 23px; |
| | vertical-align: top; |
| | } |
| | |
| | /* The name of the column should go across the top of the column */ |
| | input[name=column-name] { |
| | font-size: 18px; |
| | width: 100%; |
| | } |
| | |
| | /* The card container should use all remaining column space */ |
| | .card-container { |
| | position: absolute; |
| | top: 40px; /* column padding-top + column-name + margin */ |
| | width: 100%; |
| | } |
| | |
| | /* Each card should use the card-container's width and stack vertically */ |
| | .card { |
| | margin-right: 16px; /* padding-left + padding-right */ |
| | margin-bottom: 8px; |
| | padding: 8px; |
| | |
| | background: #ccc; |
| | } |
| | |
| | /* Clearfix to ensure that we provide enough height for floated content */ |
| | .card::after { |
| | display: table; |
| | clear: both; |
| | content: ''; |
| | } |
| | |
| | /* Card descriptions should be full-width (height is determined by rows) */ |
| | textarea[name=card-description] { |
| | width: 100%; |
| | } |
| | |
| | /* Each card's due date should be flush right */ |
| | .due-date-label { |
| | float: right; |
| | } |
| | |
| | /* There should be some space between the due date and its description */ |
| | input[name=due-date] { |
| | margin-left: 8px; |
| | } |
| | |
| | /* The "Add card" button should have fixed height */ |
| | button[name=add-card] { |
| | height: 23px; |
| | } |
With those in place, you’ll have something minimalist but functional. True, it won’t win any design awards, but it’s a working web application.
Figure 1. My own personal to-do list, organized in CoffeeTasks