We will try to pseudocode these elements while taking an object oriented programming approach.

Collapsible List

Pseudocode:

• Start with creating our collapsible list object

• Our collapsible list will have list items (objects) that they can click

• Upon initializing the list item objects, we would have to configure that they are clickable.

• One way to do this could be iterating over all the list items in the collapsible list object’s constructor method

The above steps suggest that we have a list item object in the collapsible list.

• The list item object will probably have to keep track of the clickable area where the user can expand the list, the text content that is displayed in this area, and whether the item is expanded or not.

• We can set the first two attributes upon constructing the list item object, and also start the list item as “not expanded,” a boolean.

• The list item object can have a method that opens and closes it by changing this boolean, and adjusting the height.

Data (vars, arrays, their scopes)

• Var isExpanded - boolean, records whether the list item is expanded or not. Belongs to the List Item class.

• Var itemText - the text in the list item. Belongs to the List Item class.

• Var area - the area that allows the user to click for the list to expand. Belongs to the List Item class.

Functions and Classes

• CollapsibleList - class, the list itself

• CollapsibleItem - class, the items that are clickable so that the user can expand the list

• init() - function, configures the CollapsibleList object. Iterates over each CollapsibleItem, makes them clickable, and sets their initial state of closed.

• toggle(item) - function, changes the isExpanded variable of a CollapsibleItem and based on the initial value, changes the style of the CollapsibleItem.

Calendar w/ Events

Pseudocode:

• Start with a Date object to get the current date to be displayed on the calendar.

• Create an array that contains all of the months of the year.

• When we begin building the calendar to be viewed, we need to determine the following things: first day of the month, last day of the month, last day of the previous month.

• With this information, we can fill in the days that are currently “active” for the month.

• We would also need to then store the information on what days of the month are “active” in an array.

• We can show events by listening for when the user clicks on the date cell, and we should fetch and show if there are any events associated with a date. 

• We can store the events data and their associated dates in a map.

• When previous and next buttons are clicked (ie. the user wants to change months) we can increment / decrement the current month, then rebuild the calendar based on that month’s information.

Data (vars, arrays, scopes)

• currentDate - stores the current date that the calendar is displaying. Global scope.

• monthNames - stores the names of all the months as an array. Global scope.

• days - stores the days that are for the month associated with currentDate. Global scope.

• eventDetails - contains the event information and their dates. Global scope.

Functions / Classes

• render() - function, this will render the days of the current month. Whenever the month is changed, this will be called.

• showEvents() - function, shows the events for a given day

• changeMonth(step) - function, this will increment / decrement the month based on the integer input that is given.

Interactive Experience Timeline:

Pseudocode:

• Start with creating our timeline object

• This timeline object contains its own timeline items (objects)

• This suggests that the constructor for the timeline object most likely would have to iterate over all timeline items and associate it to the timeline object itself.

• A timeline object should contain the time it takes for its animation to happen (ex. Enlarging, etc.)

• Each item on the timeline should be less visible initially.

• As the user scrolls over a timeline item, the item should enlarge via animation.

Data (vars, arrays, scopes)

• items - stores an array of TimelineItem objects to be animated. Global variable.

Functions / Classes

• Timeline - class, the timeline itself.

• TimelineItem - class, an item on the timeline

• initialize() - function, used to set the initial appearance of the TimelineItem object.

• animate() - function, used to animate the TimelineItem object when the user scrolls over.