contact form typing problem resolved.

riyaahlawat · Jul 7, 2024 · e0efb17 · e0efb17
1 parent e93a456
commit e0efb17
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 23 deletions.
diff --git a/js/script.js b/js/script.js
@@ -1,15 +1,20 @@
 const typingText = document.querySelector(".typing-text p"),
-inpField = document.querySelector(".wrapper .input-field"),
-tryAgainBtn = document.querySelector(".content button"),
-timeTag = document.querySelector(".time span b"),
-mistakeTag = document.querySelector(".mistake span"),
-wpmTag = document.querySelector(".wpm span"),
-cpmTag = document.querySelector(".cpm span");
+    inpField = document.querySelector(".wrapper .input-field"),
+    tryAgainBtn = document.querySelector(".content button"),
+    timeTag = document.querySelector(".time span b"),
+    mistakeTag = document.querySelector(".mistake span"),
+    wpmTag = document.querySelector(".wpm span"),
+    cpmTag = document.querySelector(".cpm span"),
+    contactBtn = document.getElementById('contacts-contactBtn'),
+    popup = document.getElementById('contacts-popup'),
+    closeBtn = document.querySelector('.contacts_close');
 
 let timer,
-maxTime = 60,
-timeLeft = maxTime,
-charIndex = mistakes = isTyping = 0;
+    maxTime = 60,
+    timeLeft = maxTime,
+    charIndex = mistakes = isTyping = 0,
+    isPopupOpen = false;
+
 
 function loadParagraph() {
     const ranIndex = Math.floor(Math.random() * paragraphs.length);
@@ -19,28 +24,34 @@ function loadParagraph() {
         typingText.innerHTML += span;
     });
     typingText.querySelectorAll("span")[0].classList.add("active");
-    document.addEventListener("keydown", () => inpField.focus());
-    typingText.addEventListener("click", () => inpField.focus());
+    document.addEventListener("keydown", (e) => {
+        if (!isPopupOpen) inpField.focus();
+    });
+    typingText.addEventListener("click", () => {
+        if (!isPopupOpen) inpField.focus();
+    });
 }
 
 function initTyping() {
+    if (isPopupOpen) return; // Prevent typing test when popup is open
+
     let characters = typingText.querySelectorAll("span");
     let typedChar = inpField.value.split("")[charIndex];
-    if(charIndex < characters.length - 1 && timeLeft > 0) {
-        if(!isTyping) {
+    if (charIndex < characters.length && timeLeft > 0) { // Allow typing till the end of characters
+        if (!isTyping) {
             timer = setInterval(initTimer, 1000);
             isTyping = true;
         }
-        if(typedChar == null) {
-            if(charIndex > 0) {
+        if (typedChar == null) { // Backspace
+            if (charIndex > 0) {
                 charIndex--;
-                if(characters[charIndex].classList.contains("incorrect")) {
+                if (characters[charIndex].classList.contains("incorrect")) {
                     mistakes--;
                 }
                 characters[charIndex].classList.remove("correct", "incorrect");
             }
         } else {
-            if(characters[charIndex].innerText == typedChar) {
+            if (characters[charIndex].innerText === typedChar) {
                 characters[charIndex].classList.add("correct");
             } else {
                 mistakes++;
@@ -51,23 +62,23 @@ function initTyping() {
         characters.forEach(span => span.classList.remove("active"));
         characters[charIndex].classList.add("active");
 
-        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
+        let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60);
         wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm;
-        
+
         wpmTag.innerText = wpm;
         mistakeTag.innerText = mistakes;
         cpmTag.innerText = charIndex - mistakes;
     } else {
         clearInterval(timer);
         inpField.value = "";
-    }   
+    }
 }
 
 function initTimer() {
-    if(timeLeft > 0) {
+    if (timeLeft > 0) {
         timeLeft--;
         timeTag.innerText = timeLeft;
-        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
+        let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60);
         wpmTag.innerText = wpm;
     } else {
         clearInterval(timer);
@@ -86,6 +97,32 @@ function resetGame() {
     cpmTag.innerText = 0;
 }
 
+// Function to open the popup
+function openPopup() {
+    popup.style.display = 'flex';
+    isPopupOpen = true;
+    document.getElementById('name').focus(); // Focus on the name input field
+}
+
+// Function to close the popup
+function closePopup() {
+    popup.style.display = 'none';
+    isPopupOpen = false;
+}
+
+// Event listener for the contact button
+contactBtn.addEventListener('click', openPopup);
+
+// Event listener for the close button
+closeBtn.addEventListener('click', closePopup);
+
+// Close the popup if user clicks outside the popup
+window.addEventListener('click', function(event) {
+    if (event.target === popup) {
+        closePopup();
+    }
+});
+
 loadParagraph();
 inpField.addEventListener("input", initTyping);
-tryAgainBtn.addEventListener("click", resetGame);
+tryAgainBtn.addEventListener("click", resetGame);
diff --git a/js/typing.js b/js/typing.js
@@ -1,3 +1,6 @@
+// EXTRA FILE
+// OLD LOGIC THAT WAS USED IN TYPING AREA
+
 const words = 'Amazon Web Services (AWS) offers a comprehensive suite of cloud computing services, enabling businesses to build and deploy scalable, resilient, and secure applications. With AWS, organizations can access a wide range of services including compute, storage, databases, machine learning, analytics, and more. Services like Amazon EC2 provide resizable compute capacity in the cloud, while Amazon S3 offers highly durable object storage. Managed database services like Amazon RDS and Amazon DynamoDB simplify database management tasks, and AWS Lambda allows developers to run code without provisioning or managing servers. With AWS, businesses can innovate faster, reduce infrastructure costs, and scale their applications globally with ease.'.split(' ');
 const wordsCount = words.length;
 const gameTime = 30 * 1000; // milliseconds