Giter Club home page Giter Club logo

code-journal's Introduction

code-journal

An HTML, CSS, and JavaScript journal app.

code-journal's People

Contributors

wizzo1337 avatar

Watchers

avatar

code-journal's Issues

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.

🖼️ Wireframe

user can create an entry

✅ Task List

  • Add a div[data-view="entries"] to the HTML.
  • Add a link to the navbar to show the 'entries' view.
  • Verify that a user can only see the 'entries' view if they have a profile already.
  • Add a div[data-view="create-entry"] to the HTML.
  • Add a form for creating a journal entry to the div[data-view="create-entry"].
  • Ensure that the form looks nice on both mobile-sized and desktop-sized screens.
  • Make all inputs of the journal entry form required.
  • Add a link to the 'entries' view that navigates the user to the 'create-entry' view.
  • Listen for 'input' events on the photoUrl input to update 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.
    • Prepend the new object to the entries in the data model.
    • Reset the image preview's `src' attribute.
    • Reset the form inputs.
    • Show the 'entries' view again.
  • Verify that new entries are saved to local storage along with the rest of the data model on reload.
  • Verify that a brand new user cannot go to the 'entries' view if they haven't created their profile.
  • Remove all CSS styling that had no affect or was otherwise unnecessary.
  • Test all functionality again.
  • Fix all bugs.

User can create a profile

💰 Motivation

Users like to personalize things! 😄

📐 Plan

Create a responsive form for users to enter their profile details into and save their data to local storage.

🖼️ Wireframe

user can create a profile

✅ Task List

  • Pick a nice font pair from Google Fonts for headings and body text.
  • Pick a nice accent color.
  • Create a simple, polished header in HTML and CSS that shows the name of the application.
  • Create a simple, polished form in the HTML and CSS that shows a placeholder image for the avatar.
  • Apply fonts to the heading, labels, and form inputs.
  • Check to make sure that the form looks good on mobile and desktop.
  • Make all form inputs required.
  • Make the name attributes of the form input elements match the keys of the profile data model.
  • Listen for 'input' events on the avatar url input.
  • Update the avatar preview image's src when the avatar url input changes.
  • Listen for 'submit' events on the form.
  • Assign all of the form's values into the profile data model when the form is submitted.
  • Reset the form inputs when the form is submitted.
  • Reset the avatar preview image when the form is submitted.
  • Make sure that the user's data is persisted to local storage between reloads.
  • Remove all CSS styling that had no affect or was otherwise unnecessary.
  • Test all functionality again.

User can view their profile

💰 Motivation

Users will want to check what information they have told us about themselves.

📐 Plan

Create a separate view that dynamically renders the user's profile details.

🖼️ Wireframe

user can view their profile

✅ Task List

  • Hide the div[data-view="edit-profile"] view in the HTML.
  • Add a new div[data-view="profile"] to the HTML to display the user's profile information.
  • Build an example profile in the data-view="profile" with HTML and CSS.
  • Ensure that the profile view looks good on both mobile and desktop.
  • Define a JavaScript function that takes the profile data model and returns a DOM tree that matches the HTML.
  • Define a JavaScript view swapping function that takes the name of which data-view to show and hides all others.
  • Make the view swapping function also write the name of the view it showed to the application's data model.
  • Test the view swapping function by hand in the browser console, passing it 'edit-profile' or 'profile' as an argument.
    • Update the view swapping function to empty out the content of the div[data-view="profile"] when showing the 'profile'.
    • Update the view swapping function to append the return value of the profile rendering function to the div[data-view="profile"] when showing the 'profile'.
  • Update the 'submit' event listener on the form to show the 'profile' view after profile data model has been updated.
  • Listen to the document for 'DOMContentLoaded'.
    • If the user has not saved a username, show the profile form, otherwise show the view that was written to the data model.
    • Use a private browsing tab to test that a new user sees the form when the page loads.
    • Verify that a returning user sees their profile when the page loads.
  • Delete the reference profile from the HTML code so that the div[data-view="profile"] is initially empty.
  • Remove all CSS styling that had no affect or was otherwise unnecessary.
  • Test all functionality again.
  • Fix all bugs.

User can update their profile

💰 Motivation

Users will want to change their profile information to suit their mood.

📐 Plan

Allow users to navigate between their profile and the form to edit their profile details.

🖼️ Wireframe

user can update their profile

✅ Task List

  • Update the view swapping function to pre-populate the profile form and avatar preview when showing the 'edit-profile' view.
  • Test the view swapping function by hand in the browser console.
  • Update the profile rendering function to include a link styled as a button with an href="#" and a data-view="edit-profile".
  • Add a 'click' listener to the document that exits immediately if a link was not clicked.
    • If a link was clicked, show the matching view using the view swapping function.
  • Add link to the navbar with an href="#" and a data-view="profile".
  • Verify that clicking the profile link navigates away from the profile form.
  • Block the user from going to the 'profile' view if they have never saved a username.
  • Remove all CSS styling that had no affect or was otherwise unnecessary.
  • Test the user flow in a private browsing tab.
  • Fix all bugs.

User can view their entries

💰 Motivation

Once a user records a journal entry, they'll want to revisit it again.

📐 Plan

Display the user's journal entries in reverse chronological order so they can see the newest ones first.

🖼️ Wireframe

user can view their entries

✅ Task List

  • Add an empty ordered list element to the div[data-view="entries"].
  • Add some dummy journal entries to 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.
  • 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.
  • Ensure that submitting a new journal entry also creates a new DOM tree for it and adds it to the page.
  • Clean up all unnecessary styling.
  • Test the user flow in a private browsing tab.
  • Fix all bugs.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.