From db3ecd6fb1c6d403e12586ef8b70d0e6dd43233f Mon Sep 17 00:00:00 2001
From: sarthakvermaa <114106172+sarthakvermaa@users.noreply.github.com>
Date: Sat, 9 Dec 2023 12:04:15 +0530
Subject: [PATCH] added condition check for user input

---
 assets/css/practice.css | 28 ++++++++++++++++++++---
 assets/js/practice.mjs  | 49 ++++++++++++++++++++++++++++++++---------
 practice.html           |  9 ++++++--
 3 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/assets/css/practice.css b/assets/css/practice.css
index af66c1d..6be9332 100644
--- a/assets/css/practice.css
+++ b/assets/css/practice.css
@@ -114,7 +114,30 @@ h2.subtitle {
 
 /* ============ Typing input box ============ */
 
-.user-input-box {
+.user-input-box-one {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: static;
+  
+  width: 70vw;
+  margin: 10px auto;
+  padding: 14px;
+  text-align: center;
+  border-radius: 14px;
+  background-color: antiquewhite;
+}
+#inputOne {
+font-family: 'Inconsolata', monospace;
+font-weight: bold;
+font-size: medium;
+text-align: center;
+padding: 5px;
+min-width: 50%;
+}
+.user-input-box-two {
+  display: none;
   position: fixed;
   top: 90%;
   left: 50%;
@@ -128,7 +151,7 @@ h2.subtitle {
   background-color: antiquewhite;
 }
 
-#userInput {
+#inputTwo {
   font-family: 'Inconsolata', monospace;
   font-weight: bold;
   font-size: medium;
@@ -136,7 +159,6 @@ h2.subtitle {
   padding: 5px;
   min-width: 50%;
 }
-
 .highlight {
   background-color: yellow;
   color: black;
diff --git a/assets/js/practice.mjs b/assets/js/practice.mjs
index 6edab3b..157cf4c 100644
--- a/assets/js/practice.mjs
+++ b/assets/js/practice.mjs
@@ -1,7 +1,8 @@
 // get elements from DOM
 const startBtn = document.getElementById("startBtn");
 const resetBtn = document.getElementById("resetBtn");
-const userInput = document.getElementById("userInput");
+let userInput = document.getElementById('inputOne');
+let userInputBox  = document.querySelector('.user-input-box-one');
 const messageEle = document.getElementById("message");
 const speedEle = document.getElementById("speed");
 const quoteEle = document.getElementById("quote");
@@ -14,6 +15,10 @@ const userHeader = document.getElementById("user-header");
 const onemin = document.getElementById("onemin");
 const twomin = document.getElementById("twomin");
 const fivemin = document.getElementById("fivemin");
+const inputOne = document.getElementById('inputOne');
+const inputTwo = document.getElementById('inputTwo');
+const userInputBox1 = document.querySelector('.user-input-box-one');
+const userInputBox2 = document.querySelector('.user-input-box-two');
 
 // import functions
 import { makeSentence } from './sentence.mjs'
@@ -144,16 +149,6 @@ startBtn.addEventListener("click", () => {
     extracted_words = quote.split(' ');
     extracted_words_length = extracted_words.length;
     wordIndex = 0;
-    
-    // hiding and showing elements in DOM
-    userHeader.style.display = "none";
-    levelSelector.style.display = 'none';
-    userInputBox.style.display = 'block';
-    userInput.style.display = 'inline';
-    startBtn.style.display = 'none';
-    startInstruction.style.display = 'none';
-    timingSessionChoose.style.display = "none";
-    resetBtn.style.display = 'inline-block';
 
     // making the quote in span tags
     const spanWords = extracted_words.map(word => {
@@ -166,6 +161,38 @@ startBtn.addEventListener("click", () => {
     userInput.innerText = '';
     userInput.focus();
 
+    const dynamicTextBox = document.querySelector('.dynamic-text-box');
+    // Get the viewport height
+    const viewportHeight = window.innerHeight;
+    // Get the height of the dynamic-text-box
+    const dynamicTextBoxHeight = dynamicTextBox.offsetHeight;
+    // Calculate 80% of the viewport height
+    const eightyPercentViewportHeight = 0.8 * viewportHeight;
+
+    // Compare the dynamic-text-box height with 80% of the viewport height
+    if (dynamicTextBoxHeight < eightyPercentViewportHeight) {
+        // Perform actions if the dynamic-text-box height is less than 80% of the viewport height
+        console.log("Dynamic text box height is less than 80% of viewport height.");
+        
+        userInput = inputOne;
+        userInputBox = userInputBox1;
+    } else {
+        // Perform actions if the dynamic-text-box height is greater than or equal to 80% of the viewport height
+        console.log("Dynamic text box height is greater than or equal to 80% of viewport height.");
+        
+        userInput = inputTwo;
+        userInputBox = userInputBox2;
+    }
+    // hiding and showing elements in DOM
+    userHeader.style.display = "none";
+    levelSelector.style.display = 'none';
+    userInputBox.style.display = 'block';
+    userInput.style.display = 'inline'; // textbox
+    startBtn.style.display = 'none';
+    startInstruction.style.display = 'none';
+    timingSessionChoose.style.display = "none";
+    resetBtn.style.display = 'inline-block';
+
     // setting up the timer
     startTime = new Date().getTime();
     startTimer(time);
diff --git a/practice.html b/practice.html
index 97eae73..04d60e4 100644
--- a/practice.html
+++ b/practice.html
@@ -124,8 +124,13 @@ <h3 class="startIns"> Press Space to Start</h3>
             </div>
             
             <!-- User typing field -->
-            <div class="user-input-box" id="userInputBox">
-                <input type="text" name="user-input" id="userInput">
+            <!-- First input box --> 
+            <div class="user-input-box-one" id="inputOneBox">
+                <input type="text" name="user-input-one" id="inputOne" class="input-style style-one hidden">
+            </div>
+            <!-- Second input box -->
+            <div class="user-input-box-two" id="inputTwoBox">
+                <input type="text" name="user-input-two" id="inputTwo" class="input-style style-two hidden">
             </div>
 
             <!-- Modal: User data -->