From 3f186d0c702e3513da5a1694de9ea9c0c3167e30 Mon Sep 17 00:00:00 2001 From: Paolo Bautista Date: Sat, 30 Apr 2022 23:29:49 -0400 Subject: [PATCH] Typing Game Submission --- final-project/css/main.css | 60 +++++++++++++++++++++++++-- final-project/index.html | 15 ++++++- final-project/js/main.js | 83 ++++++++++++++++++++++++++++---------- 3 files changed, 131 insertions(+), 27 deletions(-) diff --git a/final-project/css/main.css b/final-project/css/main.css index 4dcf72d..cb01d4a 100644 --- a/final-project/css/main.css +++ b/final-project/css/main.css @@ -117,6 +117,22 @@ body { border-color: black; } +#main-menu { + color: white; + font-size: 50px; + margin-bottom: 1em; + text-align: center; +} +#mainButton { + border-radius: 10px; + border-color: transparent; + background-color: rgb(121, 121, 101); + font-size: 20px; + padding: 5px; + padding-left: 10px; + padding-right: 10px; +} + .container { background-color: blanchedalmond; padding: 1rem; @@ -126,21 +142,46 @@ body { } #timer { - position: absolute; - top: 2rem; + margin-bottom: 1em; font-size: 3rem; color: blanchedalmond; + background-color: red; + padding-left: 1rem; + padding-right: 1rem; + padding-top: .2rem; + padding-bottom: .2rem; + border-radius: 25px; font-weight: bold; + display: none; +} +#countdown { + color: white; + font-size: 50px; + margin-bottom: 1em; + text-align: center; +} +#wpm, #timeLeft, #length { + color: white; + font-size: 20px; +} +#finalScoreDiv { + display: none; + margin-bottom: 1em; + flex-direction: column; + text-align: center; +} +.container { + display:none; } #quoteDisplay { margin-left: calc(1rem + 2px); margin-right: calc(1rem + 2px); - /* -webkit-user-select: none; + -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; - user-select: none; */ + user-select: none; } #authorDisplay { margin-bottom: 1rem; @@ -151,10 +192,21 @@ body { font-style: italic; font-weight: bold; } +#quoteDisplay, #authorDisplay { + font-size: 20px; +} #nextButton { margin-top: 1rem; + display:none; + border-radius: 10px; + border-color: transparent; + background-color: rgb(121, 121, 101); + font-size: 20px; + padding: 5px; + padding-left: 10px; + padding-right: 10px; } .correct { diff --git a/final-project/index.html b/final-project/index.html index 5648e96..bdad36c 100644 --- a/final-project/index.html +++ b/final-project/index.html @@ -24,12 +24,25 @@ + +
+ +
+ +
0
+
+
+ + + +
-
diff --git a/final-project/js/main.js b/final-project/js/main.js index d47f59b..40da0d1 100644 --- a/final-project/js/main.js +++ b/final-project/js/main.js @@ -1,4 +1,4 @@ -const quote_api = 'https://api.quotable.io/random?minLength=160' +const quote_api = 'https://api.quotable.io/random?minLength=160&maxLength=200' const quoteDisplay = document.querySelector('#quoteDisplay') const authorDisplay = document.querySelector('#authorDisplay') const quoteInput = document.querySelector('#quoteInput') @@ -6,10 +6,16 @@ const nextButton = document.querySelector('#nextButton') const incorrectEntry = document.querySelector('#incorrectEntry') const timer = document.querySelector('#timer') const wpm = document.querySelector('#wpm') +const startButton = document.querySelector('#mainButton') +const mainMenu = document.querySelector('#main-menu') let timerStart = false; let startTime +let time = 60 let count = 5 +// wpm counter variable +let topScore; + // Current quote information, as globals let quote, authorName, quoteLength; @@ -21,7 +27,7 @@ const badKeys = [ "Enter", "Delete" ] - +quoteInput.readOnly = true; quoteInput.addEventListener('keydown', (event) => { @@ -36,7 +42,6 @@ quoteInput.addEventListener('keydown', (event) => { // Disable further typing event.preventDefault(); } - }) quoteInput.addEventListener('input', (event) => { @@ -45,6 +50,7 @@ quoteInput.addEventListener('input', (event) => { const arrayQuote = quoteDisplay.querySelectorAll('span') const arrayValue = quoteInput.value.split('') let finished = true; + arrayQuote.forEach((charSpan, index) => { if(typingError !== true || event.inputType == 'deleteContentBackward'){ const character = arrayValue[index] @@ -73,9 +79,19 @@ quoteInput.addEventListener('input', (event) => { }) +startButton.addEventListener('click', () => { + document.querySelector('#nextButton').style.display = "none"; + mainMenu.style.display = "none"; + startButton.style.display = "none"; + document.querySelector('.container').style.display = "block"; + getNextQuote() + quoteInput.focus(); +}) nextButton.addEventListener('click', () => { getNextQuote() - quoteInput.readOnly = false; + document.querySelector('#nextButton').style.display = "none"; + document.querySelector('#countdown').style.display = "block"; + document.querySelector('#finalScoreDiv').style.display = "none"; quoteInput.focus(); }) @@ -117,41 +133,64 @@ async function getNextQuote () { quoteInput.value = null; timerStart = true; count = 5; + time = 60; startTimer() } function startTimer() { timer.innerText = 0 - startTime = new Date() let interval = setInterval(() =>{ if (timerStart) { if (count > 0) { console.log(count); + document.querySelector('#countdown').innerText = "TIME TO START: " + count count--; + quoteInput.readOnly = true; + document.querySelector('#countdown').style.color = "white" + if (count == 2) { + document.querySelector('#countdown').style.color = "red" + } else if (count == 1) { + document.querySelector('#countdown').style.color = "yellow" + } else if (count == 0) { + document.querySelector('#countdown').style.color = "green" + } } else { - clearInterval(interval) - console.log('RUnning else on startTimer() interval') - setInterval(() => { - timer.innerText = getTimerTime() - }, 100); + console.log('Running else (code below) on time interval') + document.querySelector('#countdown').style.display = "none"; + timer.style.display = "block"; + quoteInput.readOnly = false; + if (time > 0) { + timer.innerText = time; + time--; + console.log(time) + } else { + clearInterval(interval) + console.log("Interval finished") + topScore = (quoteLength / 5) + document.querySelector('#wpm').innerText = "Words Per Minute: " + Math.round(topScore); + document.querySelector('#length').innerText = "Quote Length: " + quoteLength; + document.querySelector('#timeLeft').innerText = "Seconds Taken to Complete: " + (60 - time); + document.querySelector('#nextButton').style.display = "block"; + document.querySelector('#finalScoreDiv').style.display = "flex"; + } } + } else { + time = time + 1 + clearInterval(interval) + console.log("Interval finished") + topScore = (quoteLength / 5) / ((60 - time) / 60); + document.querySelector('#wpm').innerText = "Words Per Minute: " + Math.round(topScore); + document.querySelector('#length').innerText = "Quote Length: " + quoteLength; + document.querySelector('#timeLeft').innerText = "Seconds Taken to Complete: " + (60 - time); + document.querySelector('#nextButton').style.display = "block"; + document.querySelector('#finalScoreDiv').style.display = "flex"; } }, 1000); - + } -function getTimerTime() { - if (timerStart){ - if (count > 0){ - return (new Date() - startTime) / 1000 - }else { - let calcWpm = (quoteLength / 5) / timer.innerText - wpm.innerText = calcWpm - return timer.innerText = timer.innerText - } - } -} +