Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added condition check for user input #138

Closed
wants to merge 1 commit into from
Closed

added condition check for user input #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 25 additions & 3 deletions assets/css/practice.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -128,15 +151,14 @@ h2.subtitle {
background-color: antiquewhite;
}

#userInput {
#inputTwo {
font-family: 'Inconsolata', monospace;
font-weight: bold;
font-size: medium;
text-align: center;
padding: 5px;
min-width: 50%;
}

.highlight {
background-color: yellow;
color: black;
Expand Down
49 changes: 38 additions & 11 deletions assets/js/practice.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
Expand All @@ -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'
Expand Down Expand Up @@ -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 => {
Expand All @@ -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);
Expand Down
9 changes: 7 additions & 2 deletions practice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
Loading