Build a Chat Widget | Dataford Interview Questions

Build a chat widget: create a JSON file, fetch/read messages from it and display them, append newly entered messages dynamically, make the chat window resizable and draggable (drag and drop).

Asked in the Personal technical interview stage. Interviewers asked HTML/CSS/JS questions involving flexbox, justify-content, the DOM, and event handling while the candidate implemented.

For grading, model the behavior with build_chat_state(config). json_messages contains initially loaded messages, entered_messages are appended in order, resize events contain dw and dh, and drag events contain dx and dy. Return the final messages and widget position and size. Width must not fall below 240 and height must not fall below 160.

Constraints

config contains all required keys
0 <= len(json_messages), len(entered_messages) <= 10^4
Each message is a non-empty string
Each resize event contains integer dw and dh
Each drag event contains integer dx and dy
Initial width is at least 240 and initial height is at least 160

Function Signature

def build_chat_state(config):

Your question is Build a Chat Widget. Start with the requirements in the Question tab.

Run and submit as often as you like. When you're ready, talk me through your approach or go straight to the code.

Problem

Build a chat widget: create a JSON file, fetch/read messages from it and display them, append newly entered messages dynamically, make the chat window resizable and draggable (drag and drop).

Asked in the Personal technical interview stage. Interviewers asked HTML/CSS/JS questions involving flexbox, justify-content, the DOM, and event handling while the candidate implemented.

Constraints

config contains all required keys
0 <= len(json_messages), len(entered_messages) <= 10^4
Each message is a non-empty string
Each resize event contains integer dw and dh
Each drag event contains integer dx and dy
Initial width is at least 240 and initial height is at least 160

Function Signature

def build_chat_state(config):

Your question is Build a Chat Widget. Start with the requirements in the Question tab.

Run and submit as often as you like. When you're ready, talk me through your approach or go straight to the code.