diff --git a/final-project/css/main.css b/final-project/css/main.css
index 3e1432a..4dcf72d 100644
--- a/final-project/css/main.css
+++ b/final-project/css/main.css
@@ -134,11 +134,25 @@ body {
}
#quoteDisplay {
+ margin-left: calc(1rem + 2px);
+ margin-right: calc(1rem + 2px);
+ /* -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; */
+}
+#authorDisplay {
margin-bottom: 1rem;
margin-left: calc(1rem + 2px);
margin-right: calc(1rem + 2px);
+ display: flex;
+ justify-content: flex-end;
+ font-style: italic;
+ font-weight: bold;
}
+
#nextButton {
margin-top: 1rem;
}
diff --git a/final-project/index.html b/final-project/index.html
index f00332c..5648e96 100644
--- a/final-project/index.html
+++ b/final-project/index.html
@@ -1,10 +1,10 @@
-
+
-
-
+ 3475 Final Project
+
@@ -28,6 +28,8 @@
@@ -40,17 +42,9 @@
-
-
-
-
-
diff --git a/final-project/js/main.js b/final-project/js/main.js
index 5dd5052..b95c898 100644
--- a/final-project/js/main.js
+++ b/final-project/js/main.js
@@ -1,37 +1,79 @@
-const quote_api = 'https://api.quotable.io/random'
+const quote_api = 'https://api.quotable.io/random?minLength=160'
const quoteDisplay = document.querySelector('#quoteDisplay')
+const authorDisplay = document.querySelector('#authorDisplay')
const quoteInput = document.querySelector('#quoteInput')
const nextButton = document.querySelector('#nextButton')
+const incorrectEntry = document.querySelector('#incorrectEntry')
+const timer = document.querySelector('#timer')
+const wpm = document.querySelector('#wpm')
+let timerStart = false;
+let startTime
+let count = 5
+
+// Use this to flag typing errors
+let typingError = false
+
+// Key presses in this array will be ignored
+const badKeys = [
+ "Enter",
+ "Delete"
+]
+
+
+quoteInput.addEventListener('keydown', (event) => {
+
+ // Disable "bad" keys
+ if(badKeys.indexOf(event.key) !== -1){
+ console.error('"' + event.key + '" key is not allowed. Ignoring input.')
+ event.preventDefault();
+ }
+
+ // Or if there's a mistake
+ if(typingError === true && event.key !== 'Backspace'){
+ // Disable further typing
+ event.preventDefault();
+ }
-quoteInput.addEventListener('input', () => {
- const arrayQuote = quoteDisplay.querySelectorAll('span')
- const arrayValue = quoteInput.value.split('')
-
- arrayQuote.forEach((charSpan, index) => {
- const character = arrayValue[index]
- if (character == null) {
- charSpan.classList.remove('correct')
- charSpan.classList.remove('incorrect')
- } else if (character === charSpan.innerText) {
- charSpan.classList.add('correct')
- charSpan.classList.remove('incorrect')
- } else {
- charSpan.classList.add('incorrect')
- charSpan.classList.remove('correct')
-
- // This stops after you mess up and allows you to backspace but not continue typing after fixing your mistake
- // if (quoteInput.keyCode !== 13){ quoteInput.setAttribute('maxlength', 0)}
- // else{ quoteInput.setAttribute('maxlength', 100)}
- }
- })
})
-function dontType(event){
- event.preventDefault()
-}
+quoteInput.addEventListener('input', (event) => {
+ console.log(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]
+ if (character == null) {
+ charSpan.classList.remove('correct')
+ charSpan.classList.remove('incorrect')
+ typingError = false;
+ finished = false;
+ } else if (character === charSpan.innerText) {
+ charSpan.classList.add('correct')
+ charSpan.classList.remove('incorrect')
+ typingError = false;
+ } else {
+ charSpan.classList.add('incorrect')
+ charSpan.classList.remove('correct')
+ typingError = true
+ finished = false;
+ console.log('error', typingError, window.typingError)
+ }
+ }
+ })
+ if(finished) {
+ quoteInput.readOnly = true;
+ timerStart = false;
+ }
+ })
+
nextButton.addEventListener('click', () => {
getNextQuote()
+ quoteInput.readOnly = false;
+ quoteInput.focus();
})
function getRandomQuote() {
@@ -39,16 +81,63 @@ function getRandomQuote() {
.then(response => response.json())
.then(data => data.content)
}
+function getAuthorName(){
+ return fetch(quote_api)
+ .then(response => response.json())
+ .then(data => data.author)
+}
+function getQuoteLength(){
+ return fetch(quote_api)
+ .then(response => response.json())
+ .then(data => data.length)
+}
async function getNextQuote () {
const quote = await getRandomQuote()
+ const authorName = await getAuthorName()
quoteDisplay.innerHTML = ''
quote.split('').forEach(character => {
const charSpan = document.createElement('span')
charSpan.innerText = character
quoteDisplay.appendChild(charSpan)
})
+ authorDisplay.innerHTML = " -" + authorName
quoteInput.value = null;
+ timerStart = true;
+ count = 5;
+ startTimer()
+}
+
+
+function startTimer() {
+ timer.innerText = 0
+ startTime = new Date()
+ setInterval(() =>{
+ if (timerStart) {
+ if (count > 0) {
+ console.log(count);
+ count--;
+ }
+ else {
+ setInterval(() => {
+ timer.innerText = getTimerTime()
+ }, 100);
+ }
+ }
+ }, 1000);
+
+}
+function getTimerTime() {
+ if (timerStart){
+ if (count > 0){
+ return (new Date() - startTime) / 1000
+ }else {
+ const getLength = getQuoteLength()
+ let calcWpm = (getLength / 5) / timer.innerText
+ wpm.innerText = calcWpm
+ return timer.innerText = timer.innerText
+ }
+ }
+
}
-getNextQuote()
\ No newline at end of file