User can create an entry

[vorleakyek]

💰 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.