kepsteen/code-journal

A dynamic HTML, CSS, and TypeScript journal application for coders who want to capture their notes.

code-journal

An HTML, CSS, and TypeScript journal app.

Core Features

1. Create New Entries
2. View Entries
3. Edit Entries
4. Delete Entries
5. Search Entries

Stretch Features to Add

• give entries contenteditable attribute to allow for editing on the entries page
• Authenticate user and allow users to save their own entries

code-journal's Issues

User can view their entries

💰 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

• Add an empty unordered list to the div[data-view="entries"] element in the HTML.
• 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.
• Check that the example entries you just created in the unordered list are responsive for both mobile and desktop screens.
• 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.
• 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.
• 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.
• Create a function named toggleNoEntries which toggles the no entries text to show or hide when the function is called.
• 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.
• 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.
• 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.
• Update the submit callback for the form to do the following:
  • Render a DOM tree for the newly submitted entry object using the renderEntry function.
  • Prepends the new DOM tree to the unordered list.
  • Use the viewSwap to show the ”entries” view.
  • conditionally uses the toggleNoEntries function as needed to remove the no entries text.
• Update the DOMContentLoaded callback function to do the following:
  • uses the viewSwap function to show the view which was displayed prior to page refresh.
  • conditionally uses the toggleEntries function as needed to show or remove the no entries text.
• Clean up all unnecessary styling.
• Test the app some more in a private browsing tab.
• Fix all errors.

issue-6-user-authentication

💰 Motivation
Coders will want to make an account and save their own entries

📐 Plan
Enable basic user authentication

🖼️ Wireframes

✅ Task List

• Style login page according to figma
  • Add warning above password if user's login information is incorrect
  • Add page for new users to sign up
• Create a new object to store user data
  • stringify data
• Modify viewSwap function to add login view
• Add and event listener to capture the DOMContentloaded event
• Add a callback function that does the following
  • Parse the login data
  • Hides the entry-form and entries view
  • Shows the login page if user is not logged in
  • displays the user's entries if already logged in
• Add event listener to login button
• write callback function to access login values and check to see if they match an users in the credentials object
  • if password does not match display message to warn the user that the credentials don't match
  • if password and email match user in the credentials object:
    • viewswap to entries page
    • render only the user's entries
• Add event listener to sign up button
• write callback function that does the following:
  • displays the sign up page
  • hides the login page
• Add event listener to sign up button
• write call back function that does the following:
  • checks if the users's email or username matches an account in the credentials object
    • If it does, display modal that will direct user to login page
    • if not, allow user to reenter new sign up credentials
  • Adds user to the credentials object
  • viewswap user to new-entry form

issue-5-search-entries

💰 Motivation

Coders will want to search through their entries and display entries that match a keyword

📐 Plan

Create a responsive search field that will display entires that match the provided keyword

🖼️ Wireframes

✅ Task List

• Add an input element to the header in your HTML
  • Add magnifying glass placeholder in input field
• Add event listener to input on the search bar element
• write a callback function that does the following
  • searches through the data.entries title and notes to find any entries that match the keyword
  • render only the entries that match the keyword
  • When the input field is blank render all the entries
• Remove all CSS styling that had no affect or was otherwise unnecessary.
• Test all functionality again in a private browsing session.
• Fix all errors.

User Can Create an Entry

💰 Motivation

Coders will want to capture tidbits they pick up during their research.

📐 Plan

Create a responsive form that allows users to store an image URL with some notes about a specific topic.

🖼️ Wireframes

✅ Task List

• Create the remaining HTML for the header in the header-container so that it matches the figma example. Make sure to take advantage of the included layout classes.
• Below the header, create the HTML for the form that creates a journal entry in the data-view="entry-form" element. This form needs to match the format shown in the example figma.
• Complete the HTML form using the appropriate responsive layout classes.
  • Write CSS for mobile devices first.
  • Adjust styling to fluidly adapt to desktop.
• Make all inputs of the journal entry form required.
• Add an 'input' event listener to the Photo URL input that sets the src attribute of the photo preview to the input's value when the user types or pastes in a new URL.
• Add a 'submit' event listener to the form element that:
  • prevents the page from refreshing when the form is submitted.
  • stores the form's input values in a new object.
  • assigns an entryId property to the new object, taken from the nextEntryId property of the data model.
  • increments the nextEntryId property of the data model so that if another entry is submitted later, it will receive a different entryId.
  • adds the new object to the beginning of the data model's array of entries.
  • resets the preview image's src attribute back to the placeholder image.
  • resets the form.
• In data.js, add a 'beforeunload' event listener to the window object that serializes the data model as JSON and stores the JSON in localStorage.
• At the bottom of data.js, include a conditional statement that:
  • checks to see if there is a JSON data model stored in localStorage.
  • if there is, parse it and assign it to the initial data variable so that the user can continue adding entries to the pre-existing data model.
• Test the app by submitting some new entries and then reloading the page to confirm that:
  • the data model is being saved to localStorage before each page reload.
  • each new journal entry object is receiving an incrementing entryId property.
• Remove all CSS styling that had no affect or was otherwise unnecessary.
• Test all functionality again in a private browsing session.
• Fix all errors.

User can edit an entry

💰 Motivation

If a user makes a mistake when creating an entry or wants to add more notes to an entry, they should be able to edit it.

📐 Plan

Allow users to select an existing entry to edit and pre-populate its information into the form.

🖼️ Wireframes

✅ Task List

• Update the renderEntry function to do the following:
  • Add a FontAwesome pencil icon next to the title of each entry which matches the figma example.
  • Add a data-entry-id attribute to the li that stores the entryId of the entry being rendered.
• Add an event listener to the ul in the entries view which does the following when an entry's pencil icon is clicked:
  • Use the viewSwap function to show the form.
  • Find the entry object in the data.entries array whose id matches the data-entry-id attribute value of the clicked entry and assigns that entry’s object to the data.editing property.
  • Pre-populate the entry form with the clicked entry's values from the object stored in the data.editing property.
  • Updates the title of the entry-form view to Edit Entry
• Update the entry form's submit handler to do the following:
  • if data.editing is null:
    • perform the standard functionality for a new entry
  • if data.editing is not null:
    • Assign the entry id value from data.editing to the new object with the updated form values.
    • Replace the original object in the data.entries array for the edited entry with the new object with the edited data.
    • Render a new DOM tree for the new object with the updated data, and replace the original li with the matching data-entry-id value with the new generated DOM tree.
    • Update the title on the form to New Entry.
    • Reset data.editing to null.
• Remove all CSS styling that had no affect or was otherwise unnecessary.
• Test all functionality again in a private browsing session.
• Fix all errors.

User can delete an entry

💰 Motivation

If a user decides that they no longer wish to keep an entry, they should be able to delete it.

📐 Plan

Allow users to delete an entry from its edit screen.

🖼️ Wireframes

✅ Task List

• Add a button to the entry form with the text Delete Entry which is only visible when an entry is currently being edited.
• Show a confirmation modal when the user clicks Delete Entry
• When the user clicks Cancel, hide the modal.
• When the user clicks Confirm:
  • remove the corresponding entry object from the data model's entry array.
  • remove the entry's li element from the DOM.
  • conditionally uses the toggleNoEntries function to show the no entries text if needed.
  • hide the modal.
  • swap to the Entries view.
• Remove all CSS styling that had no affect or was otherwise unnecessary.
• Test all functionality again in a private browsing session.
• Fix all errors.