|
| 1 | +const main = document.querySelector(".main"); |
| 2 | +const typeArea = document.querySelector(".typingArea"); |
| 3 | +const btn = document.querySelector(".btn"); |
| 4 | + |
| 5 | +const words = [ |
| 6 | + "A day in the life of programmer", |
| 7 | + "What is JavaScript?", |
| 8 | + "What is React?", |
| 9 | + "What is Programming Language?", |
| 10 | + "What's your name?", |
| 11 | + "Where are you from?", |
| 12 | + "This is just random word", |
| 13 | + "What is Remix.js?", |
| 14 | + "New Technologies", |
| 15 | + "Is programming hard?", |
| 16 | + "Why do you wanna become a programmer?", |
| 17 | + "Which programming language you like the most?", |
| 18 | + "What is Golang? and why do you wanna learn it?", |
| 19 | + "What is CSS", |
| 20 | +]; |
| 21 | + |
| 22 | +const game = { |
| 23 | + start: 0, |
| 24 | + end: 0, |
| 25 | + user: "", |
| 26 | + arrText: "", |
| 27 | +}; |
| 28 | + |
| 29 | +btn.addEventListener("click", () => { |
| 30 | + if (btn.textContent === "Start") { |
| 31 | + play(); |
| 32 | + typeArea.value = ""; |
| 33 | + typeArea.disabled = false; |
| 34 | + } else if (btn.textContent === "Done") { |
| 35 | + typeArea.disabled = true; |
| 36 | + main.style.borderColor = "white"; |
| 37 | + end(); |
| 38 | + } |
| 39 | +}); |
| 40 | + |
| 41 | +function play() { |
| 42 | + let randText = Math.floor(Math.random() * words.length); |
| 43 | + main.textContent = words[randText]; |
| 44 | + game.arrText = words[randText]; |
| 45 | + main.style.borderColor = "#c8c8c8"; |
| 46 | + btn.textContent = "Done"; |
| 47 | + const duration = new Date(); |
| 48 | + game.start = duration.getTime(); // unix timestamp |
| 49 | +} |
| 50 | + |
| 51 | +function end() { |
| 52 | + const duration = new Date(); |
| 53 | + game.end = duration.getTime(); |
| 54 | + const totalTime = (game.end - game.start) / 1000; |
| 55 | + game.user = typeArea.value; |
| 56 | + const correct = results(); |
| 57 | + main.style.borderColor = "white"; |
| 58 | + main.innerHTML = `Time: ${totalTime} Score: ${correct.score} out of ${correct.total}`; |
| 59 | + btn.textContent = "Start"; |
| 60 | +} |
| 61 | + |
| 62 | +function results() { |
| 63 | + let valueOne = game.arrText.split(" "); |
| 64 | + let valueTwo = game.user.split(" "); |
| 65 | + let score = 0; |
| 66 | + valueOne.forEach((word, idx) => { |
| 67 | + if (word === valueTwo[idx]) { |
| 68 | + score++; |
| 69 | + } |
| 70 | + }); |
| 71 | + |
| 72 | + return { score, total: valueOne.length }; |
| 73 | +} |
0 commit comments