Untitled

## HTML

<div class="icon-wrapper">
    <div class="icon-header">
        <div class="icon-message">
            <p></p>
        </div>
    </div>
    <button class="button-none chatbox-icon" onclick="connectWebSocket()" id="chatPageButton">
        <i class="fa-brands fa-bots fa-beat" style="color: var(--blue); font-size: 0rem;"><img src="resources/media/remaxy-head.png" alt="" id="chatIcon"></i>
    </button>
</div>


## JS
/* CHANGE ICON IMG DYNAMİC */
var textElement = document.querySelector(".icon-header p");
var imgUrls = [
  "resources/media/remaxy-head.png",
  "resources/media/remaxy-head-blink.png"
]
var currentImageIndex = 0;

var chatIcon = document.getElementById("chatIcon");
function changeIcon() {
  currentImageIndex = (currentImageIndex + 1) % imgUrls.length;
  if (currentImageIndex== 1) {
    displayTextEffect(textToDisplay, 0);
  }
  else {
    textElement.innerText=""
  }
  chatIcon.src = imgUrls[currentImageIndex];
}

// Change 2000 ms per image 
setInterval(changeIcon, 2000);

/* ICON HEADER TEXT DYNAMİC */
var textToDisplay = "Selam!";

function displayTextEffect(text, index) {
  if (index < text.length) {
      textElement.innerText = text.substring(0, index + 1);
      index++;
      setTimeout(function () {
          displayTextEffect(text, index);
      }, 100);
  }
}