Once a user records some journal entries, they'll want to see them.
📐 Plan
Display the user's journal entries in reverse chronological order so they can see the newest ones first.
🖼️ Wireframes
✅ Task List
[x] Add an empty unordered list to the div[data-view="entries"] element in the HTML.
[x] Create some dummy journal entries to the unordered list in the HTML and style them to match the example entries in the figma. Each entry’s content should be in a single li element within the ul element.
[x] Check that the example entries you just created in the unordered list are responsive for both mobile and desktop screens.
[x] Define a function named renderEntry with a single parameter named entry. This parameter represents a single object for a single entry from the data.entries array. The function should generate and return a DOM tree for a single entry that matches the entries you created in the unordered list.
[x] Create an event listener on the document which listens for the DOMContentLoaded event. In the callback function for that event, loop through the data.entries array and generate a DOM tree for each entry in the array, and append that DOM tree to the unordered list.
[x] Remove the example HTML entries from index.html once the user's entries are successfully being appended to the DOM on page load and replace them with a message indicating that no entries have been recorded which matches the figma.
[x] Create a function named toggleNoEntries which toggles the no entries text to show or hide when the function is called.
[x] Create a new function named viewSwap with a single parameter representing the name of the view to show (the value will be either ”entries” or ”entry-form”). This function should show the view whose name was provided as an argument, as well as assign the string argument to the data.view property so that the currently shown view is tracked in the data model for the application.
[x] Add an anchor to the navbar to show the ”entries” view. You will need to create an event handler function that utilizes the viewSwap function to show the proper view.
[x] Add an anchor to the entries view to show the entry-form. It should be styled like a button with the text NEW, and must match the figma.
[x] Update the submit callback for the form to do the following:
[x] Render a DOM tree for the newly submitted entry object using the renderEntry function.
[x] Prepends the new DOM tree to the unordered list.
[x] Use the viewSwap to show the ”entries” view.
[x] conditionally uses the toggleNoEntries function as needed to remove the no entries text.
[x] Update the DOMContentLoaded callback function to do the following:
[x] uses the viewSwap function to show the view which was displayed prior to page refresh.
[x] conditionally uses the toggleEntries function as needed to show or remove the no entries text.
[x] Clean up all unnecessary styling.
[x] Test the app some more in a private browsing tab.
TreMitchell
commented
1 month ago
💰 Motivation
Once a user records some journal entries, they'll want to see them.
📐 Plan
Display the user's journal entries in reverse chronological order so they can see the newest ones first.
🖼️ Wireframes
✅ Task List
div[data-view="entries"]element in the HTML.lielement within theulelement.renderEntrywith a single parameter namedentry. This parameter represents a single object for a single entry from thedata.entriesarray. The function should generate and return a DOM tree for a single entry that matches the entries you created in the unordered list.documentwhich listens for theDOMContentLoadedevent. In the callback function for that event, loop through thedata.entriesarray and generate a DOM tree for each entry in the array, and append that DOM tree to the unordered list.index.htmlonce the user's entries are successfully being appended to the DOM on page load and replace them with a message indicating that no entries have been recorded which matches the figma.toggleNoEntrieswhich toggles the no entries text to show or hide when the function is called.viewSwapwith a single parameter representing the name of the view to show (the value will be either”entries”or”entry-form”). This function should show the view whose name was provided as an argument, as well as assign the string argument to thedata.viewproperty so that the currently shown view is tracked in the data model for the application.”entries”view. You will need to create an event handler function that utilizes theviewSwapfunction to show the proper view.entry-form. It should be styled like a button with the textNEW, and must match the figma.submitcallback for the form to do the following:renderEntryfunction.viewSwapto show the”entries”view.toggleNoEntriesfunction as needed to remove the no entries text.DOMContentLoadedcallback function to do the following:viewSwapfunction to show the view which was displayed prior to page refresh.toggleEntriesfunction as needed to show or remove the no entries text.