Scribd
Upload
13 views3 pages

Chat Form Template and JavaScript Guide

The document outlines the structure of a chat application using HTML and JavaScript, highlighting key components such as template inheritance, content blocks, form declarations, input fields, and response containers. It details the JavaScript function 'sendMessage' that handles form submission, sends user messages to the backend, and updates the chat history dynamically. Each section includes explanations of the purpose and functionality of the respective code elements.

Uploaded by

kelvintk
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

Chat Form Template and JavaScript Guide

The document outlines the structure of a chat application using HTML and JavaScript, highlighting key components such as template inheritance, content blocks, form declarations, input fields, and response containers. It details the JavaScript function 'sendMessage' that handles form submission, sends user messages to the backend, and updates the chat history dynamically. Each section includes explanations of the purpose and functionality of the respective code elements.

Uploaded by

kelvintk
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1.

Template Inheritance
html
{% extends "[Link]" %}

• Inherits all content from [Link]


• Only needs to define unique content

2. Content Block
html
{% block content %}

• Marks where child content inserts into parent template

3. Form Declaration
html
<form id="chatForm" onsubmit="sendMessage(event)">

• id="chatForm" : Unique DOM identifier

• onsubmit: Calls JavaScript function on submission

• event: Passes browser event object

4. Input Field
html
<input type="text" id="userMessage" required>

• type="text" : Text input field

• id="userMessage" : JavaScript access point

• required: Enforces non-empty submission


5. Response Container
html
<div id="responseArea"></div>

• Empty div for dynamic content insertion


• JavaScript will populate chat history here

6. JavaScript Core
javascript
async function sendMessage(event) {
[Link]();
const message = [Link]("userMessage").value;

const response = await fetch("/chat", {


method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ message })
});

const data = await [Link]();

[Link]("responseArea").innerHTML +=
`<div>User: ${message}</div>
<div>AI: ${[Link][0].[Link]}</div>`;
}

Function Breakdown:

1. [Link]()

o Stops page reload on form submit


2. const message = ...

o Captures user input value


3. fetch("/chat", ...)
o Sends POST request to backend
o Includes user message as JSON
4. [Link]()

o Parses DeepSeek API response


5. innerHTML +=

o Appends new messages to chat history


o Uses template literals for dynamic content

You might also like