Scribd
Upload
4 views2 pages

Frontend Assignment Intern

Uploaded by

Priyanshu Singh
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
4 views2 pages

Frontend Assignment Intern

Uploaded by

Priyanshu Singh
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
You are on page 1/ 2

Introduction: We appreciate your participation in this project.

Please review the following


tasks and questions carefully and provide detailed responses. We look forward to reviewing
your answers.

Assignment: Responsive Chat Application (Frontend Only)

Build a responsive chat app frontend. Desktop and mobile compatible. Use JavaScript
to simulate a dummy chat personality.

Requirements:

●​ Fixed top navbar (does not move on scroll)


●​ Below navbar:
○​ Left collapsible menu
○​ Center main chat area
○​ Right-side panel
●​ Footer at bottom

Chat Interface Features:

●​ Header with chat title and dummy user/avatar


●​ Chat area:
○​ Chat bubbles for user and bot
○​ Smooth scroll, auto-scroll to latest message
●​ Input area:
○​ Text input expands on long messages
○​ Send button
○​ Press enter to send
●​ Dummy bot reply using JavaScript (predefined or random responses)

Styling:

●​ Use Flexbox or CSS Grid


●​ Responsive design for desktop and mobile
●​ Modern, minimal UI
●​ Clear text, visual contrast for sent and received messages
●​ Color palette must support readability
●​ Optional dark mode toggle

Reference:​
​
​

Bonus:

●​ Typing animation
●​ Message status (Sent, Delivered)
●​ Chat message transition animations
●​ Smooth sidebar collapse

Files to submit:

●​ index.html
●​ style.css
●​ script.js

Proactiveness matters; unnecessary messages will not be tolerated.

You might also like