Homework 5

You will be working with CSS and JavaScript to improve the front-end of MyBooksApp.

	Day	Date
Release	Fri	OCT 9
Due	Fri	OCT 16 @ 11pm (EST)

Grab a copy of homework 5 starter code, under hw5_starter folder, from the MyBookApp repo on jhu-oose github organization. In the starter code, we only have show all authors and add author, but make sure to add your show all books and add book from hw4 before proceeding. In class, we applied some basic styling to our html pages in the MyBooksApp. We also warmed up with JavaScript to disallow empty user names and also added delete buttons for each author in the authors view. Your task is to:

1. Write your own css file(s) to be applied to the html views of the MyBooksApp. You can be creative here! Show us your artsy genes! :). Though, it does not have to be anything sophisticated; at the very least, we ask you to write some basic styling for all the pages comparable to what we did in class. The css file we used in class is given as part of the starter code for your reference, but you should write your own css from scratch.

   caution

   You may not use any styling framework or library here. You need to write vanilla css.

2. Similar to what we did to add dedicated delete buttons to the authors view, add delete buttons for each book in the books view such that whenever a delete button is clicked, the corresponding book gets deleted from the Books table.

3. Currently, authors (and books) view only show a list of the authors where we can do deletion using the delete buttons. Let's improve these two views so we can do author/book insertion also. Update authors (and books) view so that empty text fileds are shown at the very bottom after all the displayed rows (i.e. html list items) where the user can type in authors (or books) info to be inserted into the table. Next to the text fields, there should be a little button similar to the delete buttons in shape, but in green color. The button text should be a checkmark. After a new author/book is added, the page should refresh showing the newly added author/book and the empty textfields and the add button at the bottom.

   tip

   You can use the html code ✔ to produce a checkmark.

   tip

   Use <input type="number" ...> for author's numofbooks and book's year text field.

   tip

   In the books view, you also need to collect author's info (name, naitonality and numOfBooks) in addition to the book's info to do the insertion.

4. Under the src/main/resources/public/js, add a new file named validate.js. This file should be added to both authors.vm and books.vm. In the previous step you wrote a builtin add functionality for both authors and books views, but you did not do any input validation. Write JS code in validate.js to make sure that provided inputs are valid when adding an author/book:

   • For the author, make sure author name is valid. An author name is considered valid if it has at least two parts (separated by space(s)) and it does not have any special characters/digits in it.
   • For book, make sure the book's isbn is valid. A valid isbn is either isbn 10 which is 10 digits such as 1861972717, or isbn 13 which is 3 digits, dash, 10 digits such as 978-0451524935. Also, make sure that book title is not empty.

     info

     If an input is not valid, you should show a relevant/meaningful alert.

Submission

Submit a single .zip file to Gradescope. Th zip file should contain a folder named hw5 that contains all your project files includeing a README.md file which includes all the assumptions made, work done, etc.

caution

Note that you need to work collaboratively to finish the homework, but you will make one submission as a group. All group members must contribute to the homework.