snowwhitedad / code-journal

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

• 👋 Hi, I’m @SnowWhiteDad
• 👀 I’m interested in coding and machine learning (just starting out) ...
• 🌱 I’m currently learning introductory web development ...
• 💞️ I’m looking to collaborate on algorithms for learning and how to make learning simple and accessible ...
• 📫 How to reach me - slack @olash2 ...

code-journal's Issues

User can sort entries by date

• create a date properties for the entry object: entryDate
• assign date value to entryDate property when save for New Entry is clicked
• add a sort button to the nav bar
• listen for click on the sort button, loop through the list array and sort in order of date created with oldest on top and toggle back to order of entry when sort button is clicked again.
• add created date to the view-form
• remove all unused css
• test functionality

User can search entries

• create a search input box, on the nav bar
• add listener to the input, and loop through the entry list for matches to the innerText
• hide list items that does not match the input text.
• test the code
• submit PR for review

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 entry rendering function to include an edit icon for each rendered entry.
• Ensure that each rendered entry is given a data-entry-id attribute indicating which entry it is.
• Listen for clicks on the parent element of all rendered entries.
• Show the entry form if an edit icon was clicked.
• Find the matching entry object in the data model and assign it to the data model's editing property if an edit icon was clicked.
• Pre-populate the entry form with the clicked entry's values from the object found in the data model.
• Update the entry form's submit handler function to conditionally add a new entry object or update the existing one.
• Update the entry form's submit handler function to conditionally add a new entry DOM tree or replace the existing one.
• 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

• Add a div[data-view="entry-form"] to the HTML.
• Add a form for creating a journal entry to the div[data-view="entry-form"].
• Ensure that the form looks nice on both mobile-sized and desktop-sized screens.
• Make all inputs of the journal entry form required.
• Listen for 'input' events on the photoUrl input to update the src attribute of the photo preview when the input value changes.
• Listen for 'submit' events on the journal entry form and:
  • Put the form's input values into a new object.
  • Add the nextEntryId to the object.
  • Increment the nextEntryId on the data model.
  • Prepend the new object to the entries in the data model.
  • Reset the image preview's `src' attribute.
  • Reset the form inputs.
• Verify that new entries are saved to local storage along with the rest of the data model on page reload.
• Verify that each new entry receives an incrementing entryId.
• 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 click target for deleting an entry to the entry form that only appears if the user is editing an entry.
• Show a confirmation modal when the user clicks the Delete Entry click target.
• Hide the modal if the user clicks Cancel.
• Remove the entry from the data model and the entry's DOM tree from the page if the user clicks Delete.
• Show the Entries list if the user clicks Delete.
• 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 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 a sibling div[data-view="entries"] to the HTML.
• Add an empty unordered list to the div[data-view="entries"] element in the HTML.
• Add some dummy journal entries to the unordered list in the HTML and style them to match the wireframe.
• Check that the entries list looks good on both mobile and desktop screens.
• Define a function that takes a single journal entry object and returns a DOM tree that matches one of the example entries in the HTML.
• Use a loop to create a DOM tree for each journal entry in the data model and append it to the page when the 'DOMContentLoaded' event is fired.
• Remove the example HTML entries once the user's entries are successfully being appended to the DOM on page load.
• Add a navigation item to the navbar for Entries.
• Add an anchor to the entries view that shows the entry form.
• Ensure that submitting a new journal entry also creates a new DOM tree for it and adds it to the page.
• Ensure that submitting a new journal entry automatically shows the 'entries' view without reloading the page.
• Ensure that refreshing the pages shows the same view as before refreshing.
• Clean up all unnecessary styling.
• Test the app some more in a private browsing tab.
• Fix all errors.