HTML/CSS - Messenger Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Messenger</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
</style>
</head>
<body>
<div class="header">
    <div style="position: relative;">
        <img src="https://cdn.pixabay.com/photo/2024/02/28/11/25/ai-generated-8601838_1280.jpg" alt="Contact" class="avatar-large">
        <div class="active-icon"></div> <!-- Active icon added here -->
    </div>
    <div>
        <span class="text-xl font-bold">Alice</span>
        <p>Active now</p>
    </div>
    <i class="fas fa-video"></i>
    <i class="fas fa-phone-alt"></i>
    <i class="fas fa-ellipsis-v"></i>
</div>
<div class="chat-container scrollbar">
<div class="message-group">

css

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    background-color:  #f0f2f5;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.header {
    background-color:  #0084ff;
    color:  white;
    padding: 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px  rgba(0, 0, 0, 0.2);
}
.avatar-large {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 3px 6px  rgba(0, 0, 0, 0.3);
}

// Created by 찬에라 but Thank you, all my dear friends: @Lorenzo Spadoni, @Oluwaseun, and @Benjamin Barnedo.
// wrap the JS code in a DOMContentLoaded event listener
document.addEventListener('DOMContentLoaded', () => {
// Select the input field element
    const inputField = document.querySelector('.input-field');
// Select the typing indicator element
const typingIndicator = document.getElementById('typing-indicator');
// Variable to store the timeout ID
let typingTimeout;
// Add an event listener for the 'input' event on the input field
inputField.addEventListener('input', () => {
    // Show the typing indicator
    typingIndicator.style.display = 'block';
    // Clear any existing timeout to avoid multiple timeouts
    clearTimeout(typingTimeout);
    // Set a new timeout to hide the typing indicator after 2 seconds
    typingTimeout = setTimeout(() => {
        typingIndicator.style.display = 'none';
    }, 2000);
});
})

BROWSER

Console