A fun chat application based on the Peanuts comic strip.
- 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
- JQuery
- Bootstrap
- Webpack
- JavaScript ES6
- SASS
- HTML
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);
}
}
