morecallan / chatty-e3-iwantanap

chatty-e3-iwantanap created by Classroom for GitHub

NSS Group Exercise: Chatty

Specs:

Create a Single Page Application that mirrors a "chat room" and features the following:

1. Sticky Navigation:

• Input field that accepts return key as submit
  • Can also be done through the User Input
• Button to clear message board (last 20 messages)
• Themes button that brings up modal

1. Options and Themes:

• Accessibility: Dark theme applies to whole body, large text applies to message field. These should be controlled by checkboxes.
• Themes: User has optional theme selection by toggling different selections. These should be controlled by radiobuttons.

1. Message Module:

• Default Messages: Load 5 base messages from JSON files.
• Option to delete individual button: when the delete button next to a message is clicked, only that message should be removed from the DOM.
• Only show the last 20 messages.
• Timestamp: Put a timestamp on each message.

1. Multiple Users:

• Users should be imported to DOM through private array.
• Next to the message input box, there should be an option to select user posting message.

Technologies Used:

1. CSS: Themes, Boostrap Overrides, Basic Styling
2. Bootstrap: Nav, Modals, Buttons
3. JQuery: Modals for Bootsrap
4. JavaScript: IIFE and augmentation, XHR, JSON, Event Listeners, DOM Manipulation

Final Result:

"Chat Room" where users are able to send messages from their specific username, edit their messages, receive replies from an AI and customize their themes.
PS. Try entering swear word just for fun.

Description: Base Messages Loaded on Pageload

##### Description: Select User Menu

##### Description: User Inputs New Message

##### Description: AI Response

##### Description: Theme Selection

##### Description: Theme Applied

##### Description: Emoji Usage

##### Description: Clear Entire Message Board

##### Description: Edit Mode

##### Description: Edited Text

How to run:

1. Go to: `https://www.npmjs.com/package/http-server` and install "http-server".  
2. Navigate to the project folder in command line interface and type: `http-server -p 8080`  
3. This will show at: `http://localhost:8080` in your internet browser.  

Specs By:

Nashville Software School
Steve Brownlee
Joe Shepherd
Zoe Ames

Contributors:

Bernard Anderson
Callan Morrison
Paul Williams