Chatty Group Project

Setup

Every teammate copy and run the following commands in the host machine terminal.

mkdir -p ~/workspace/group-projects && cd $_
git clone [Github Classroom repo URL]
cd [repo name]

Requirements

The users for this chat application are NSS students. You must interview at least two students and come up with a persona and challenge statement that your application will be built for.

Your group will use the following style guide for this application. Make sure you sketch the screens as part of your planning process. The design of the final interface is up to your group.

Make sure you spend time defining MVP and creating a plan to reach that goal. Use Github projects to create issues/tasks to track the progress of your project.

Technical Requirements

Sass
Bootstrap
Grunt
Browserify
JSHint
JSON
XHR
Javascript
HTML

Navigation bar

Create an element to serve as the navigation bar for your application.
Create an element to hold the logo for your application. It can be as simple as text, but if you want to find an image, that's fine.
Create a input field for a user to enter in a message.
Add an event listener for "keypress" and detect when then return key has been pressed in the message field.
When return key is detected, you'll create a new message (see details below).
Create a button to clear all messages.
When the user clicks the clear messages button, all current chat messages should be removed from the application.
If there are no messages, then the clear messages button should be disabled (see example above).
The navigation bar should remain at the top of the screen, even if the contents of the page start to scroll.

Options

Create two checkboxes below the message input field. One labeled "Dark theme" and the other labeled "Large text".
When the user clicks on the dark theme checkbox, change the background color of your application to a darker shade, and the font color for messages should be light.
If the user unchecks the box, the background color should change back to a lighter color with darker color text for messages.
Make sure for both themes, you stick to the provided style guide.

Messages

When the page is first loaded, you must load 5 messages from a local JSON file and pre-fill a message area <div> below the input field that will also hold all new messages as they get created.
When the user presses the return key in the message field, the new message should be inserted into the message area.
The message should have a button displayed after it with the text "Delete" inside of it.
When the delete button next to a message is clicked, only that message should be removed from the DOM.

Modular Code

Create multiple private modules, using Browserify, that perform the following functions.

One module should load the JSON file and returns the array of objects.
One module should contain a function that accepts an element id, and the user message, and then add the user's message - along with the delete button - to the specified parent element. Each message should be stored in a private array in this module. This module should also expose a function to read all messages, and delete a single message.
One module should accept a message element id and then remove the correct element from the DOM. This module should also remove the corresponding message from the private array that was created in the previous module.

Helpful hints

Adding listeners to dynamically created elements

When you add a DOM element to your page with JavaScript, you cannot add a listener to them directly in your code with addEventListener. This is because the element didn't exist when your JavaScript file got parsed and executed by the browser when it loaded. What you need to do is listen for the event on the <body> element, and then inspect what the target of the event is (i.e. which element the user actually performed the action on).

document.querySelector("body").addEventListener("click", function(event) {
  console.log(event);

  // Handle the click event on any li
  if (event.target.tagName.toLowerCase() === "li") {
    console.log("You clicked on an <li> element");
  }

  // Handle the click event on any DOM element with a certain class
  if (event.target.className === "article-section") {
    console.log("You clicked on an `article-section` element");
  }

  // Inspect the `id` property of the event target
  if (event.target.id === "page-title") {
    console.log("You clicked on the page-title element");
  }
});

Setting element attributes

You can use JavaScript to set any attribute on a DOM element. You've seen how to add/remove classes with classList.add(), classList.remove(), and classList.toggle(), but you can also add id, href, src, or any other attribute.

Here's an example of how to add a disabled attribute to a button in the DOM.

<button class="clear-messages">Clear messages</button>

// This will disable the first button with a class of "button-message"
document.getElementsByClassName("clear-messages")[0].setAttribute("disabled", true);

Bonus criteria

For you overachievers, once you've completed the basic criteria, take a stab at these.

Multiple JSON files

Instead of having one JSON file with five messages in it, break each message into its own JSON file. How do you handle loading them in succession?

Editing

Let users edit an existing message. Add an edit button next to the delete button that, when clicked, will take the message and put it back in the message input at the top.
Once user edits the message and presses the return key again, the message text in the list should be updated.

Custom themes

Add a button/link to the UI labeled "Change Theme".
Remove the existing elements for changing the theme.
When user click on Change Theme element, show a Bootstrap modal dialog box.
Inside the modal, show two color picker fields - one for background color and one for font color.
Add a Save and Cancel button to modal.
When user clicks Save apply the chosen colors.

Multiple users

Create an object in your JavaScript that holds an array of names (see example below).
Next to the message input box, there should be a radio button group for each name in the list.
When a user enters a message, it should be prepended with the chosen user's name, in bold text.
Keep in mind that this will likely change the structure of your JSON file since the pre-loaded messages have to have this information on them.

// User object
var users = {
  names: ["Xavier", "Joanna", "Mackenzie", "Gunter", "Iveta", "Sven"];
};

Message limit

Only show the last 20 messages.

Timestamp

Put a timestamp on each message.
Again, this will change the structure of your JSON file.

Presentations

Each group's presentation should be no more than seven minutes (plan and practice so you are ready to go).
Your presentation must include: challenge statement, persona, demo of your application, lessons learned about development & design.
Present like you are presenting to potential new clients (think: Shark Tank).

PhonethipLiu/chatty-purely-blue-pineapple