Skip to main content

Instructions

Overview​

This assignment covers concepts and techniques taught in the class so far:

  • Using Git and GitHub
  • using JavaScript, and manipulating the DOM using JavaScript,
  • AND using localStorage and sessionStorage.

The culmination of that is an interactive messaging application.

Learning outcomes​

  1. Create a web application using HTML, CSS, and JavaScript.
  2. Style the application using Bootstrap and CSS.
  3. Demonstrate ability to create and control HTML forms using form and input elements.
  4. Demonstrate understanding of event-oriented programming.
  5. Demonstrate the ability to send and receive HTTP requests from a server.
  6. Demonstrate the ability to send

Background​

Web Storage​

For a client side application, you can store data as key-value pairs in a browser's local and/or session storage depending on the use case.

Guidelines​

  • Make a habit of committing and pushing your code frequently to github.
  • Make sure to meaningful commit messages that describe what you did.
  • Make sure the automated tests and checks continue to pass after you make changes.
  • To be able to run the automated grading checks, make sure you have installed Node.js, per the instructions posted on Canvas.
  • Don't forget to fill out the self assessment on the README file, and the feedback form at the end of the instructions.

Instructions​

  1. Clone down your existing repository from last week's lab.

  2. For this lab, you need to create a functionality that:

    1. Disable the message input until a name is provided and saved to the localStorage.
    2. Have a button where users can choose to save their username.
    3. Allow users to modify their saved name.

  3. For 5 Extra Credit point, create a dark mode for the application.