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 @@
+
+ Paolo's Speed Typing Game
+
+
+
+
+
+
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
- }
- }
-}
+