1.
HTML Structure Overview
<!DOCTYPE html>
• Declares the document as an HTML5 document.
• Helps the browser know how to render the page.
• Not a tag, but a declaration.
<html lang="en">
• Opens the root element of your HTML page.
• lang="en" sets the language to English.
<head>...</head>
• Contains metadata, styles, title, scripts that don't display directly.
<meta charset="UTF-8" />
• Ensures that the document uses Unicode encoding (UTF-8 supports all
characters).
• Prevents weird symbols or characters from appearing.
<title>Chatbot</title>
• The text displayed on the browser tab.
2. CSS Styling (<style> section)
CSS Selectors:
• *: Selects all elements.
• body, header, .chat-container, .chat-bubble etc. are tags or class selectors.
Common CSS Properties Explained:
Property Meaning
Includes padding & border inside width/height.
box-sizing: border-box;
Helps with layout.
font-family Defines the font used for text.
margin, padding Spacing outside/inside an element.
Makes a container a Flexbox container. Used for
display: flex
layouts.
flex-direction Vertical (column) or horizontal (row) stacking.
background, color Background color or gradient and text color.
overflow, overflow-y Hides or allows scrolling for overflow content.
position: absolute / relative
Positions elements precisely.
/ sticky
border-radius Rounded corners.
box-shadow Shadow effects.
transition Smooth animation for changes.
Property Meaning
animation Used to animate elements (e.g., @keyframes).
Custom Elements and Effects
@keyframes
Used for animations. Two defined:
• pulse: For the green dot blinking.
• fadeIn: Smooth message appearance.
.online
• Green status dot on the bot avatar.
.chat-bubble
• Message box.
• Reused for user and bot with different colors (.user, .bot).
.input-container
• Holds the text input and button.
@media
Responsive CSS for small screen sizes (like mobile).
3. HTML <body> Section
<header>...</header>
• Top bar of the chatbot UI.
• Contains bot avatar, name, and online status.
<div class="chat-container" id="chat"></div>
• Main scrollable area where messages appear.
<div class="input-container">...</div>
• Contains:
o <input type="text"> for user to type message.
o <button> to send the message.
4. JavaScript (<script type="module">)
Why type="module"?
• Allows import from external packages (like @google/genai).
• Ensures code is treated as an ES6 module.
import { GoogleGenAI } from "[Link]
• Imports Gemini API support for web use.
API Setup:
const ai = new GoogleGenAI({ apiKey: "..." });
const chat = await [Link]({ model: "gemini-2.5-flash", history: [] });
• Sets up AI with your API key.
• Initializes chat session with Gemini model.
DOM Elements:
const chatBox = [Link]("chat");
const input = [Link]("user-input");
const sendBtn = [Link]("send-btn");
• Get references to HTML elements so JS can interact with them.
Event Listeners:
[Link]("click", sendMessage);
[Link]("keypress", e => {
if ([Link] === "Enter") sendMessage();
});
• Runs sendMessage() when user clicks or presses Enter.
sendMessage() Function
What it does:
1. Adds a prompt prefix to your message (only answer technical questions).
2. Gets user message.
3. Adds user message to the chat.
4. Shows "Typing..." bubble.
5. Sends request to Gemini AI.
6. Displays response or error.
const prompt = "Check if the question or the input is related to technology or
computer...";
const userMsg = [Link]();
const msg = prompt + [Link]();
• [Link]() gets the typed message without spaces.
• Prevents empty submission.
Handling Messages
function addMessage(text, sender)
• Adds a bubble (div) to the chat UI.
• Uses innerHTML to set text and timestamp dynamically.
formatText(text) Function
Purpose: Enhance readability.
[Link](...)
Replaces Markdown-like formatting:
• ### Heading → styled as a heading.
• **bold** → <strong>bold</strong>
• ###highlight### → larger bold text.
EXPLAIN THIS IN INTERVIEW
If asked:
What is the role of box-sizing: border-box;?
It ensures padding and border are included in the element’s width and
height, helping maintain a consistent layout.
How does your chatbot connect to the AI?
It uses the GoogleGenAI package imported via ES module from
[Link] and a model like gemini-2.5-flash is used for real-time message
generation.
How do you separate user and bot messages?
Each message bubble is styled using .[Link] for user (right side,
dark blue) and .[Link] for bot (left side, white), using align-self for
alignment and background colors.
What is Flexbox and why is it used?
Flexbox (display: flex) is used for responsive layouts. For example, the
header and message layout use it for row/column alignment and spacing.
What is the purpose of @keyframes?
It's used to define animations. In this chatbot, pulse animates the online
green dot, and fadeIn animates message appearance.
Summary Table of Key Features
Feature Role
<!DOCTYPE html> Declares HTML5
lang="en" Language of content
meta charset="UTF-8" Character encoding
flex Layout engine
.chat-bubble Message container
.user vs .bot User vs Bot messages
addMessage() Adds a message dynamically
formatText() Adds formatting (bold, headings)
GoogleGenAI Gemini API interface
await [Link]() Gets response from Gemini
[Link]() Clean user input
overflow-y: auto Enables scrolling
Here's what I've prepared for you:
1. Mind Map of the Chatbot Code
Click the image below to zoom and understand the full structure visually:
2. Flashcards for Each Tag/Concept
Tag/Concept Description
Declares HTML5 document. Must be the first
<!DOCTYPE html>
line.
Root element of the HTML document. lang="en"
<html lang="en">
sets the language to English.
Contains meta, title, CSS, and scripts (not shown
<head>
on screen).
<meta charset="UTF-8"> Ensures proper text encoding (UTF-8).
<title> Sets the browser tab name.
<style> Used for writing internal CSS styles.
* { box-sizing: border-box; Applies box sizing to all elements, helping layout
} management.
display: flex Creates a flexible layout model.
flex-direction: column/row Stack children vertically or horizontally.
overflow: hidden/auto Controls scrolling of content.
position: Positions elements with respect to their containers
absolute/relative/sticky or viewport.
border-radius Rounds corners.
Tag/Concept Description
box-shadow Adds shadow to elements.
Defines animation behavior (e.g. pulse, fadeIn,
@keyframes
blink).
<body> Holds all content visible to the user.
<header> The top bar of the app. Contains bot info.
<div class="chat-
Scrollable chat area.
container">
<div class="input-
Bottom section for typing and sending messages.
container">
<input type="text"> Input box for the user.
<button> Button to send message.
JavaScript: import Imports external libraries (Gemini API here).
GoogleGenAI Google’s Gemini API used for generating replies.
await Waits for an async function to complete.
addEventListener() Attaches events like "click" or "keypress".
createElement() Creates new HTML elements in JS.
innerHTML Used to inject HTML content into an element.
classList Assigns one or more CSS classes to an element.
trim() Removes extra spaces from input.
Tag/Concept Description
scrollTop = scrollHeight Scrolls the chat view to the bottom.
3. Interview Questions with Model Answers
Q1. What is the purpose of <!DOCTYPE html>?
A: It tells the browser to render the page using HTML5 standards.
Q2. How is Flexbox used in your chatbot?
A: Flexbox is used to align and arrange elements vertically and horizontally. For
example, the chat layout uses display: flex and flex-direction: column to stack
elements.
Q3. How do you differentiate between user and bot messages?
A: By assigning different classes (user, bot) to the message bubbles and styling
them with distinct colors and alignment using CSS.
Q4. What does the .online green dot indicate?
A: It visually represents that the bot is online using a green dot styled with box-
shadow, animation pulse, and position: absolute.
Q5. How do you integrate Gemini API in the project?
A: Using the @google/genai module imported via [Link], initializing with an
API key, and calling [Link]() and [Link]() for responses.
Q6. What’s the role of @keyframes in your chatbot UI?
A: It's used to define custom animations like:
• pulse: For blinking online dot.
• fadeIn: For new messages appearing.
• blink: For the "Typing..." effect.
Q7. Why is [Link]() used in sendMessage()?
A: It ensures that extra spaces are removed, so empty messages aren't sent.
Q8. How are messages added to the DOM?
A: Using createElement(), innerHTML, and appendChild() in the addMessage()
function.
Absolutely! Here's your Mock HR/Tech Interview Quiz based on your chatbot
code. It includes Multiple Choice, True/False, and Explain/Write code
questions — exactly the kind of mix you'd face in real interviews.
Mock HR/Tech Interview Quiz: Chatbot Project
SECTION A: Multiple Choice Questions (MCQs)
1. What does <!DOCTYPE html> do?
A) Links external CSS
B) Declares the script type
C) Declares the HTML document type
D) Starts a JavaScript module
2. Which of the following ensures an element’s padding and border are
included in its total width/height?
A) box-shadow
B) box-sizing: border-box
C) display: flex
D) position: absolute
3. In Flexbox, which property is used to align items vertically in a
column layout?
A) justify-content
B) align-items
C) flex-direction: column
D) margin-top: auto
4. What is the purpose of overflow-y: auto in .chat-container?
A) It animates scroll
B) It disables scrolling
C) It allows vertical scrolling when content overflows
D) It aligns content to the bottom
5. Which function is responsible for sending user input to Gemini AI?
A) sendMessage()
B) addMessage()
C) formatText()
D) createChat()
SECTION B: True or False
6. The .user class aligns messages to the left.
7. The formatText() function is used to bold **text** and convert ###
Heading to HTML styles.
8. The chatbot uses the Gemini API using a CDN import inside a
<script> tag with type="module".
9. The green dot status indicator uses @keyframes animation named
blink.
[Link] sendMessage() function uses await to handle asynchronous
response fetching.
SECTION C: Explain / Write Code
[Link] the purpose of @keyframes pulse. Where is it used in the
chatbot?
[Link] is the effect of using backdrop-filter: blur(6px); in .chat-
container?
[Link] the JavaScript code to add a new user message "Hi there!" to
the chat using addMessage().
[Link] how formatText() processes the string "**Hello** \n
###Title" into formatted HTML.
[Link] will happen if the API key is incorrect or expired when using
[Link]()?
Answer Key (For Your Review)
Section A:
1. C
2. B
3. C
4. C
5. A
Section B:
6. (False — .user aligns right using align-self: flex-end)
7. (True)
8. (True)
9. (False — it uses pulse, not blink)
10. (True)
Section C: (Model answers below)
Sample Section C Answers
Q11:
• @keyframes pulse animates the .online green dot under the bot logo. It
creates a pulsing effect by scaling and fading the circle.
Q12:
• backdrop-filter: blur(6px); adds a blur effect behind the .chat-container,
giving a frosted glass effect.
Q13:
addMessage("Hi there!", "user");
Q14:
• It converts "**Hello**" to <strong>Hello</strong>
• "###Title" is wrapped into a styled <div> with larger font and margin.
Q15:
• The chatbot will throw an error and fall into the catch block, showing
"Oops! Something went wrong." as a bot response.
Great! Let's break down the entire chatbot code into three separate sections:
Part 1: HTML (Structure Layer)
HTML is the skeleton of your chatbot. It defines what elements are on the page.
Basic Structure
<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body> ... </body>
</html>
• <!DOCTYPE html>: Declares HTML5.
• <html lang="en">: Root element of the HTML page.
<head> Tag
Contains metadata, styles, title, and script imports.
<meta charset="UTF-8" />
<title>Chatbot</title>
<style> ... CSS here ... </style>
<body> Content
All visible elements go here.
Header Section
<header>
<div class="header-content">
<div class="bot_logo">
<img class="logo" src="[Link]" alt="Your Bot" />
<span class="online"></span>
</div>
<div class="info">
<span class="bot_name">Technical Assistance</span>
<span class="status">Online</span>
</div>
</div>
</header>
• Shows bot name, logo, online dot.
Chat Section
<div class="chat-container" id="chat"></div>
• Empty container where messages will appear.
Input Section
<div class="input-container">
<input type="text" id="user-input" placeholder="Type your message..." />
<button id="send-btn">Send</button>
</div>
• User types in <input>.
• Sends with <button>.
Script Section (JS)
<script type="module"> ... JavaScript here ... </script>
• Imports Gemini API.
• Handles sending/receiving messages dynamically.
Part 2: CSS (Style Layer)
CSS controls how everything looks (colors, layout, fonts, animation).
Base Styling
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
background: linear-gradient(135deg, #c2e9fb, #a1c4fd);
• box-sizing: Keeps layout predictable.
• flex: Makes layout column-based.
• background: Gradient effect.
Header Styling
header {
background: #1e3a8a;
color: white;
padding: 12px 24px;
display: flex;
align-items: center;
.online {
position: absolute;
width: 10px;
height: 10px;
background-color: #22c55e;
border-radius: 50%;
animation: pulse 1.5s infinite;
• Bot name and green online indicator.
• animation: pulse: Blinks the green dot.
Chat Bubble Styling
.chat-bubble {
max-width: 75%;
padding: 10px 16px;
border-radius: 18px;
animation: fadeIn 0.3s ease-in-out;
}
.user {
align-self: flex-end;
background: linear-gradient(to right, #292b8b);
color: white;
.bot {
align-self: flex-start;
background: white;
color: black;
• user: Message aligned right, dark background.
• bot: Aligned left, white background.
• Rounded corners, fade-in animation.
Input Styling
input[type="text"] {
padding: 14px;
font-size: 16px;
border-radius: 12px;
button {
background: linear-gradient(to right, #3b82f6, #2563eb);
color: white;
border-radius: 12px;
• User input and button look clean, rounded.
Animations
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.5; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
• pulse: Used for online dot.
• fadeIn: Used for chat messages.
Part 3: JavaScript (Logic Layer)
JavaScript handles all the interactivity — what happens when you click or
type.
Import Gemini API
import { GoogleGenAI } from "[Link]
const ai = new GoogleGenAI({
apiKey: "YOUR_API_KEY",
});
const chat = await [Link]({ model: "gemini-2.5-flash", history: [] });
• Connects your chatbot to Google Gemini using an API key.
Select DOM Elements
const chatBox = [Link]("chat");
const input = [Link]("user-input");
const sendBtn = [Link]("send-btn");
• Grabs elements from HTML to interact with them.
Listen for Events
[Link]("click", sendMessage);
[Link]("keypress", e => {
if ([Link] === "Enter") sendMessage();
});
• Sends the message when button clicked or Enter key pressed.
Send Message Function
async function sendMessage() {
const prompt = "...";
const userMsg = [Link]();
if (!userMsg) return;
addMessage(userMsg, "user");
[Link] = "";
const typingBubble = [Link]("div");
[Link] = "chat-bubble bot typing";
[Link] = "Typing...";
[Link](typingBubble);
[Link] = [Link];
try {
const response = await [Link]({ message: prompt + userMsg });
[Link](typingBubble);
addMessage([Link], "bot");
} catch (err) {
[Link](typingBubble);
addMessage("Oops! Something went wrong.", "bot");
} finally {
[Link] = false;
• Sends the question with a prompt.
• Displays "Typing..." until response is received.
• Appends the bot's reply.
Add Message Function
function addMessage(text, sender) {
const bubble = [Link]("div");
[Link] = `chat-bubble ${sender}`;
const formattedTime = new Date().toLocaleTimeString([], { hour: '2-digit',
minute: '2-digit' });
[Link] = `
<div class="message-content">
<div class="message-text">${formatText(text)}</div>
<span class="timestamp">${formattedTime}</span>
</div>
`;
[Link](bubble);
[Link] = [Link];
}
• Dynamically creates a new chat bubble and appends it.
Format Text Function
function formatText(text) {
const lines = [Link]('\n').map(line => {
if ([Link]("###") && ![Link]("###")) {
return `<div style="font-size: 20px; font-weight: bold; margin: 6px
0;">${[Link](/^###\s*/, '')}</div>`;
line = [Link](/###(.*?)###/g, '<strong style="font-size:
18px;">$1</strong>');
line = [Link](/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
return line;
});
return [Link]('<br>');
• Transforms special formats like:
o **bold** → <strong>
o ### Heading → Bigger heading
o Preserves line breaks
Summary
Layer Role
HTML Defines the structure (chat box, button, input, etc.)
CSS Controls layout, colors, fonts, animations
Adds interactivity, connects to Gemini API, sends & receives
JavaScript
messages