chatty-beta-1's Introduction

SnoopyChat

A fun chat application based on the Peanuts comic strip.

Features

On page load, users may choose a character to post a message as
Users may input a message, click send or push return, and the message will appear on the page with a time & date stamp on it
Once a message is posted, users have the ability to edit or remove a message
Certain word pairings will trigger a bot response... or three bot responses, yo!
A limit of 20 messages appear on the page
Users may choose to change the page theme to "dark mode"
Users have the option to enlarge text on the page
Users can clear all messages from the page

Tech Used

JQuery
Bootstrap
Webpack
JavaScript ES6
SASS
HTML

Code Example

The code example below iterates through an array of key words for the chat bots to reply to. Then prints their responses after a random time.

for (let i = 0; i < Bot.bots.length; i += 1) {
      const lowerCaseMessageValue = messageValue.toLowerCase();
      if (
        lowerCaseMessageValue.includes(
          Bot.bots[i].respondTo.find((word) => lowerCaseMessageValue.includes(word))
        )
      ) {
        const botMessage = {
          id: (idNumber + 1).toString(),
          user: `${Bot.bots[i].user}`,
          image: `${Bot.bots[i].image}`,
          message: `${
            Bot.bots[i].message[
              Math.floor(Math.random() * Bot.bots[i].message.length)
            ]
          }`,
          timestamp: moment().format('MMMM Do YYYY, h:mm a'),
        };
        idNumber += 1;
        setTimeout(() => {
          Message.getMessages().push(botMessage);
          Print.printMessages();
        }, Math.floor(Math.random() * 10000) + 1000);
      }
    }