This project displays Twitch chat messages in an alternative format where each chatter has their own box or card on the screen that shows their details and messages. The boxes are ordered by who chatted most recently.
twitch-chat-display/
├── index.html
├── styles/
│ └── styles.css
├── scripts/
│ └── script.js
└── README.md
- Open
index.html
in a web browser. - The chat messages will be displayed in individual boxes.
- When a user sends a message, their box will move to the top left of the screen.
To add a chat message, use the addChatMessage
function in script.js
:
addChatMessage('user1', 'Hello, world!');
addChatMessage('user2', 'Hi there!');
addChatMessage('user1', 'How are you?');