Assignment

Introduction

Let’s extend the ‘Life’ example from the previous lesson and turn it into a small Library app.

Assignment

1. If you haven’t already, set up your project with skeleton HTML/CSS and JS files.

2. All of your life objects are going to be stored in a simple array, so add a function to the script (not the constructor) that can take user’s input and store the new life objects into an array. Your code should look something like this:

let myLife = [];

function Life() {
  // the constructor...
}

function addLifeToLibrary() {
  // do stuff here
}

3. Write a function that loops through the array and displays each life events on the page. You can display them in some sort of table, or each on their own “card”. It might help for now to manually add a few life to your array so you can see the display.

4. Add a “NEW LIFE EVENT” button that brings up a form allowing users to input the details for the new life: author, title, number of pages, whether it’s been read and anything else you might want.

5. Add a button on each life’s display to remove the life from the library.

You will need to associate your DOM elements with the actual life objects in some way. One easy solution is giving them a data-attribute that corresponds to the index of the library array.

6. Add a button on each life’s display to change its read status.

To facilitate this you will want to create the function that toggles a life’s read status on your life prototype instance.

NOTE

You’re not required to add any type of storage right now. You will have the option to come back to this project later on in the course

  Previous      Next