From ad6e06704686cfee4940a24fbcb34da01891f77b Mon Sep 17 00:00:00 2001
From: Khawaja Fashi Ud Din Abdullah <khawajafashi9623@gmail.com>
Date: Wed, 23 Oct 2024 20:59:05 +0500
Subject: [PATCH] Animation input contact

---
 ContactUs.html |  8 ++++----
 js/script.js   | 30 +++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/ContactUs.html b/ContactUs.html
index 440943f..90d17f4 100644
--- a/ContactUs.html
+++ b/ContactUs.html
@@ -184,16 +184,16 @@
         <h1>Contact Us</h1>
         <form id="contactForm">
             <div class="form-group">
-                <input type="text" id="description" placeholder="Name" required>
+                <input type="text" class="anim" id="description" value="Name" required>
             </div>
             <div class="form-group">
-                <input type="text" id="phone" placeholder="Email" required>
+                <input type="text" class="anim" id="phone" value="Email" required>
             </div>
             <div class="form-group">
-                <input type="text" id="name" placeholder="Phone Number" required>
+                <input type="text" class="anim" id="name" value="Phone Number" required>
             </div>
             <div class="form-group">
-                <input type="text" id="email" placeholder="Description" required>
+                <input type="text" class="anim" id="email" value="Description" required>
             </div>
             <div class="form-group">
                 <button type="submit">Submit</button>
diff --git a/js/script.js b/js/script.js
index e797c5f..c23b332 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,4 +1,32 @@
-document.addEventListener('DOMContentLoaded', function() {
+function animateInputText(inputField, originalText) {
+    let currentIndex = 0;
+
+    function typeLetter() {
+        if (currentIndex < originalText.length) {
+            inputField.value += originalText[currentIndex];
+            currentIndex++;
+            setTimeout(typeLetter, 200);
+        } else {
+            setTimeout(clearAndRestart, 1000);
+        }
+    }
+
+    function clearAndRestart() {
+        inputField.value = '';
+        currentIndex = 0;
+        typeLetter();
+    }
+
+    clearAndRestart();
+}
+
+// Attach the event to each input field
+document.querySelectorAll('.anim').forEach((inputField) => {
+    const originalText = inputField.value;
+    animateInputText(inputField, originalText);
+});
+
+document.addEventListener('DOMContentLoaded', function () {
     const header = document.getElementById('chaos-header');
     const words = header.textContent.split(' ');
     header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');