diff --git a/index.html b/index.html index 4571de2..9c35b5a 100644 --- a/index.html +++ b/index.html @@ -125,7 +125,7 @@
Draggable Words
-
Coming Soon
+
Typeing Test
diff --git a/keyboard6/.vs/VSWorkspaceState.json b/keyboard6/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..6b61141 --- /dev/null +++ b/keyboard6/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/keyboard6/.vs/slnx.sqlite b/keyboard6/.vs/slnx.sqlite new file mode 100644 index 0000000..d03f564 Binary files /dev/null and b/keyboard6/.vs/slnx.sqlite differ diff --git a/keyboard6/.vs/typing/FileContentIndex/05de71d0-5bee-4c0f-9dd8-2199ec6d18fe.vsidx b/keyboard6/.vs/typing/FileContentIndex/05de71d0-5bee-4c0f-9dd8-2199ec6d18fe.vsidx new file mode 100644 index 0000000..009e2e5 Binary files /dev/null and b/keyboard6/.vs/typing/FileContentIndex/05de71d0-5bee-4c0f-9dd8-2199ec6d18fe.vsidx differ diff --git a/keyboard6/.vs/typing/FileContentIndex/read.lock b/keyboard6/.vs/typing/FileContentIndex/read.lock new file mode 100644 index 0000000..e69de29 diff --git a/keyboard6/.vs/typing/v17/.wsuo b/keyboard6/.vs/typing/v17/.wsuo new file mode 100644 index 0000000..7fbc237 Binary files /dev/null and b/keyboard6/.vs/typing/v17/.wsuo differ diff --git a/keyboard6/img/keyboard.png b/keyboard6/img/keyboard.png new file mode 100644 index 0000000..ae971b6 Binary files /dev/null and b/keyboard6/img/keyboard.png differ diff --git a/keyboard6/index.html b/keyboard6/index.html new file mode 100644 index 0000000..061ff78 --- /dev/null +++ b/keyboard6/index.html @@ -0,0 +1,101 @@ + + + + + + Typing Speed Test + + + + + + + + + +
+ +
+
+

+
+
+
    +
  • +

    Time Left:

    + +
  • +
  • +

    Mistakes:

    + 0 +
  • +
  • +

    WPM:

    + 0 +
  • +
  • +

    CPM:

    + 0 +
  • +
+ + +
+ + +
+ + + +
+
+
+ +
+ +
+
+ + + + + + + + + + diff --git a/keyboard6/js/paragraphs.js b/keyboard6/js/paragraphs.js new file mode 100644 index 0000000..3672511 --- /dev/null +++ b/keyboard6/js/paragraphs.js @@ -0,0 +1,21 @@ +const paragraphs = [ + "Once upon a time in the fantastical land of Whimsytopia, where marshmallow clouds rained confetti and bubblegum trees whispered jokes, a peculiar event unfolded. The renowned Snicker Snail Marathon was about to begin, featuring snails with turbocharged giggles propelling them forward. Spectators gathered, armed with feather dusters to tickle the snails if they slowed down. The winner received a lifetime supply of helium balloons, causing a helium shortage across the land and leading to the hilarious predicament of floating houses and talking squirrels with squeaky voices.", + + "Deep in the heart of Jovial Junction, where the aroma of chocolate chip cookies wafted through the air, an extraordinary baking competition took place. The participants, dressed as singing cupcakes and tap-dancing muffins, concocted desserts infused with laughter. The highlight was a cake that told knock-knock jokes as it was sliced, leaving everyone in stitches. The uproarious event ended with a confetti explosion, covering the entire town in a colorful shower of joy.", + + "In the whimsical city of Chuckleville, where clowns moonwalked and rubber chickens hosted talk shows, an ambitious group of rubber ducks embarked on a mission. They aimed to create the world's largest rubber duck pyramid. The endeavor led to a series of comical mishaps, with ducks quacking in harmony and performing synchronized flips. The grand finale involved the ducks forming a giant smiley face visible from space, spreading laughter across the globe.", + + "In the mythical realm of Giggletopia, where rainbow-hued elephants painted the sky and flying kittens delivered mail, an extraordinary sports event unfolded. The Laughing Olympics featured events like synchronized chuckling, belly-laugh marathons, and synchronized snorkel-snorting competitions. The victorious athletes, adorned with glittering jesters' hats, celebrated with a parade of dancing unicorns and a spectacular fireworks display of exploding joy bubbles.", + + "On the eccentric island of Chuckleberry, where jellybean rivers flowed and talking cacti told puns, an unconventional transportation system was implemented. Giant bouncing mushrooms, affectionately called 'Boing Shrooms,' became the primary mode of travel. Commuters hopped aboard the whimsical fungi, bouncing through the landscape with gleeful abandon. The island's residents soon mastered the art of mid-air somersaults, turning their daily commutes into a gravity-defying circus.", + + "In the town of Mirthville, where marshmallow pillows were the currency and tickle fights determined leadership, an outlandish talent show captivated the community. Performers showcased bizarre skills, including interpretative dancing avocados, opera-singing rubber bands, and breakdancing penguins. The uproarious applause caused a popcorn explosion, covering the entire venue in a confetti of popcorn kernels. The town unanimously declared it the most entertaining mishap ever.", + + "Within the peculiar village of Quibbleburg, where rubber chickens held political debates and dancing shadows had their own fan club, an uproarious discovery was made. The citizens stumbled upon a portal to a dimension where all knock-knock jokes came to life. The town was soon populated with living punchlines, creating a surreal atmosphere of perpetual laughter. Residents delighted in conversations with literal jokesters, transforming their daily interactions into a sidesplitting comedy routine.", + + "On the cosmic playground of Chuckletron-9, where shooting stars told dad jokes and moonwalking aliens taught dance classes, a peculiar space mission unfolded. Astronauts, equipped with giggle-inducing space suits, embarked on a quest to discover the source of intergalactic laughter. Their journey led them to a planet made entirely of jellybeans, where the inhabitants communicated through synchronized chuckles. The astronauts returned home with the cosmic secret to eternal joy.", + + "In the laugh-filled kingdom of Chucklington, where clouds formed into smiley faces and every day was 'Bring Your Pet Banana to Work' day, a peculiar contest took place. The 'Silent Chuckle Challenge' invited participants to convey laughter without making a sound. The finalists included a mime using invisible laughter bubbles and a ninja whose silent chuckles created ripples of joy. The winner received a trophy shaped like a whimsical snicker-snail, inspiring laughter for generations to come.", + + "Within the whimsically enchanted forest of Chucklewood, where trees hummed cheerful tunes and mischievous fairies replaced leaves with feather pens, a grand event unfolded. The Annual Giggling Tree Contest celebrated trees with the most infectious laughter. The winning tree, affectionately named 'Sir Chuckletrunk,' showered the forest with a cascade of joyful leaves, turning the entire woodland into a symphony of laughter and whimsy.", +]; diff --git a/keyboard6/js/script.js b/keyboard6/js/script.js new file mode 100644 index 0000000..ebd2cda --- /dev/null +++ b/keyboard6/js/script.js @@ -0,0 +1,96 @@ +const typingText = document.querySelector(".typing-text p"), + inpField = document.querySelector(".wrapper .input-field"), + tryAgainBtn = document.querySelector(".content button"), + timeTag = document.querySelector(".time span b"), + mistakeTag = document.querySelector(".mistake span"), + wpmTag = document.querySelector(".wpm span"), + cpmTag = document.querySelector(".cpm span"); + + +//let sound = new Audio('sounds/wrong2.mp3'); +let csound = new Audio('sounds/wrong.mp3'); + +let timer, + maxTime = parseInt(localStorage.getItem('customTime')) || 120, + timeLeft = maxTime, + charIndex = mistakes = isTyping = 0; + +function loadParagraph() { + const ranIndex = Math.floor(Math.random() * paragraphs.length); + typingText.innerHTML = ""; + paragraphs[ranIndex].split("").forEach(char => { + let span = `${char}` + typingText.innerHTML += span; + }); + typingText.querySelectorAll("span")[0].classList.add("active"); + document.addEventListener("keydown", () => inpField.focus()); + typingText.addEventListener("click", () => inpField.focus()); +} + +function initTyping() { + let characters = typingText.querySelectorAll("span"); + let typedChar = inpField.value.split("")[charIndex]; + if (charIndex < characters.length - 1 && timeLeft > 0) { + if (!isTyping) { + timer = setInterval(initTimer, 1000); + isTyping = true; + } + if (typedChar == null) { + if (charIndex > 0) { + charIndex--; + if (characters[charIndex].classList.contains("incorrect")) { + mistakes--; + } + characters[charIndex].classList.remove("correct", "incorrect"); + } + } else { + if (characters[charIndex].innerText == typedChar) { + characters[charIndex].classList.add("correct"); + } else { + mistakes++; + characters[charIndex].classList.add("incorrect"); + csound.play(); + } + charIndex++; + } + characters.forEach(span => span.classList.remove("active")); + characters[charIndex].classList.add("active"); + + let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60); + wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm; + + wpmTag.innerText = wpm; + mistakeTag.innerText = mistakes; + cpmTag.innerText = charIndex - mistakes; + } else { + clearInterval(timer); + inpField.value = ""; + } +} + +function initTimer() { + if (timeLeft > 0) { + timeLeft--; + timeTag.innerText = timeLeft; + let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60); + wpmTag.innerText = wpm; + } else { + clearInterval(timer); + } +} + +function resetGame() { + loadParagraph(); + clearInterval(timer); + timeLeft = maxTime; + charIndex = mistakes = isTyping = 0; + inpField.value = ""; + timeTag.innerText = timeLeft; + wpmTag.innerText = 0; + mistakeTag.innerText = 0; + cpmTag.innerText = 0; +} + +loadParagraph(); +inpField.addEventListener("input", initTyping); +tryAgainBtn.addEventListener("click", resetGame); diff --git a/keyboard6/sounds/0.mp3 b/keyboard6/sounds/0.mp3 new file mode 100644 index 0000000..ca8bc34 Binary files /dev/null and b/keyboard6/sounds/0.mp3 differ diff --git a/keyboard6/sounds/1.mp3 b/keyboard6/sounds/1.mp3 new file mode 100644 index 0000000..f34f3a0 Binary files /dev/null and b/keyboard6/sounds/1.mp3 differ diff --git a/keyboard6/sounds/10.mp3 b/keyboard6/sounds/10.mp3 new file mode 100644 index 0000000..0f04c20 Binary files /dev/null and b/keyboard6/sounds/10.mp3 differ diff --git a/keyboard6/sounds/2.mp3 b/keyboard6/sounds/2.mp3 new file mode 100644 index 0000000..e76d5b1 Binary files /dev/null and b/keyboard6/sounds/2.mp3 differ diff --git a/keyboard6/sounds/3.mp3 b/keyboard6/sounds/3.mp3 new file mode 100644 index 0000000..bd95ddd Binary files /dev/null and b/keyboard6/sounds/3.mp3 differ diff --git a/keyboard6/sounds/4.mp3 b/keyboard6/sounds/4.mp3 new file mode 100644 index 0000000..9bae550 Binary files /dev/null and b/keyboard6/sounds/4.mp3 differ diff --git a/keyboard6/sounds/5.mp3 b/keyboard6/sounds/5.mp3 new file mode 100644 index 0000000..2cad4fa Binary files /dev/null and b/keyboard6/sounds/5.mp3 differ diff --git a/keyboard6/sounds/6.mp3 b/keyboard6/sounds/6.mp3 new file mode 100644 index 0000000..5385c9c Binary files /dev/null and b/keyboard6/sounds/6.mp3 differ diff --git a/keyboard6/sounds/7.mp3 b/keyboard6/sounds/7.mp3 new file mode 100644 index 0000000..5741542 Binary files /dev/null and b/keyboard6/sounds/7.mp3 differ diff --git a/keyboard6/sounds/8.mp3 b/keyboard6/sounds/8.mp3 new file mode 100644 index 0000000..e574e5d Binary files /dev/null and b/keyboard6/sounds/8.mp3 differ diff --git a/keyboard6/sounds/9.mp3 b/keyboard6/sounds/9.mp3 new file mode 100644 index 0000000..2cf788d Binary files /dev/null and b/keyboard6/sounds/9.mp3 differ diff --git a/keyboard6/sounds/a.mp3 b/keyboard6/sounds/a.mp3 new file mode 100644 index 0000000..a4c8393 Binary files /dev/null and b/keyboard6/sounds/a.mp3 differ diff --git a/keyboard6/sounds/b.mp3 b/keyboard6/sounds/b.mp3 new file mode 100644 index 0000000..0a99f41 Binary files /dev/null and b/keyboard6/sounds/b.mp3 differ diff --git a/keyboard6/sounds/c.mp3 b/keyboard6/sounds/c.mp3 new file mode 100644 index 0000000..28c1038 Binary files /dev/null and b/keyboard6/sounds/c.mp3 differ diff --git a/keyboard6/sounds/d.mp3 b/keyboard6/sounds/d.mp3 new file mode 100644 index 0000000..f5e67fc Binary files /dev/null and b/keyboard6/sounds/d.mp3 differ diff --git a/keyboard6/sounds/e.mp3 b/keyboard6/sounds/e.mp3 new file mode 100644 index 0000000..5d08528 Binary files /dev/null and b/keyboard6/sounds/e.mp3 differ diff --git a/keyboard6/sounds/f.mp3 b/keyboard6/sounds/f.mp3 new file mode 100644 index 0000000..f740d0c Binary files /dev/null and b/keyboard6/sounds/f.mp3 differ diff --git a/keyboard6/sounds/g.mp3 b/keyboard6/sounds/g.mp3 new file mode 100644 index 0000000..0873469 Binary files /dev/null and b/keyboard6/sounds/g.mp3 differ diff --git a/keyboard6/sounds/h.mp3 b/keyboard6/sounds/h.mp3 new file mode 100644 index 0000000..d29158c Binary files /dev/null and b/keyboard6/sounds/h.mp3 differ diff --git a/keyboard6/sounds/i.mp3 b/keyboard6/sounds/i.mp3 new file mode 100644 index 0000000..7bec2c2 Binary files /dev/null and b/keyboard6/sounds/i.mp3 differ diff --git a/keyboard6/sounds/j.mp3 b/keyboard6/sounds/j.mp3 new file mode 100644 index 0000000..6d4cdbe Binary files /dev/null and b/keyboard6/sounds/j.mp3 differ diff --git a/keyboard6/sounds/k.mp3 b/keyboard6/sounds/k.mp3 new file mode 100644 index 0000000..89cd669 Binary files /dev/null and b/keyboard6/sounds/k.mp3 differ diff --git a/keyboard6/sounds/l.mp3 b/keyboard6/sounds/l.mp3 new file mode 100644 index 0000000..0eb5608 Binary files /dev/null and b/keyboard6/sounds/l.mp3 differ diff --git a/keyboard6/sounds/m.mp3 b/keyboard6/sounds/m.mp3 new file mode 100644 index 0000000..85ff820 Binary files /dev/null and b/keyboard6/sounds/m.mp3 differ diff --git a/keyboard6/sounds/n.mp3 b/keyboard6/sounds/n.mp3 new file mode 100644 index 0000000..9868944 Binary files /dev/null and b/keyboard6/sounds/n.mp3 differ diff --git a/keyboard6/sounds/o.mp3 b/keyboard6/sounds/o.mp3 new file mode 100644 index 0000000..48ecc58 Binary files /dev/null and b/keyboard6/sounds/o.mp3 differ diff --git a/keyboard6/sounds/p.mp3 b/keyboard6/sounds/p.mp3 new file mode 100644 index 0000000..7a4cdb5 Binary files /dev/null and b/keyboard6/sounds/p.mp3 differ diff --git a/keyboard6/sounds/q.mp3 b/keyboard6/sounds/q.mp3 new file mode 100644 index 0000000..e92106b Binary files /dev/null and b/keyboard6/sounds/q.mp3 differ diff --git a/keyboard6/sounds/r.mp3 b/keyboard6/sounds/r.mp3 new file mode 100644 index 0000000..9a8609f Binary files /dev/null and b/keyboard6/sounds/r.mp3 differ diff --git a/keyboard6/sounds/s.mp3 b/keyboard6/sounds/s.mp3 new file mode 100644 index 0000000..36754e3 Binary files /dev/null and b/keyboard6/sounds/s.mp3 differ diff --git a/keyboard6/sounds/t.mp3 b/keyboard6/sounds/t.mp3 new file mode 100644 index 0000000..06a1d6b Binary files /dev/null and b/keyboard6/sounds/t.mp3 differ diff --git a/keyboard6/sounds/u.mp3 b/keyboard6/sounds/u.mp3 new file mode 100644 index 0000000..e106517 Binary files /dev/null and b/keyboard6/sounds/u.mp3 differ diff --git a/keyboard6/sounds/v.mp3 b/keyboard6/sounds/v.mp3 new file mode 100644 index 0000000..9b81b9f Binary files /dev/null and b/keyboard6/sounds/v.mp3 differ diff --git a/keyboard6/sounds/w.mp3 b/keyboard6/sounds/w.mp3 new file mode 100644 index 0000000..0cfbc0a Binary files /dev/null and b/keyboard6/sounds/w.mp3 differ diff --git a/keyboard6/sounds/wrong.mp3 b/keyboard6/sounds/wrong.mp3 new file mode 100644 index 0000000..cbc41a1 Binary files /dev/null and b/keyboard6/sounds/wrong.mp3 differ diff --git a/keyboard6/sounds/x.mp3 b/keyboard6/sounds/x.mp3 new file mode 100644 index 0000000..54c3337 Binary files /dev/null and b/keyboard6/sounds/x.mp3 differ diff --git a/keyboard6/sounds/y.mp3 b/keyboard6/sounds/y.mp3 new file mode 100644 index 0000000..fbcb249 Binary files /dev/null and b/keyboard6/sounds/y.mp3 differ diff --git a/keyboard6/sounds/z.mp3 b/keyboard6/sounds/z.mp3 new file mode 100644 index 0000000..76f4db6 Binary files /dev/null and b/keyboard6/sounds/z.mp3 differ diff --git a/keyboard6/style.css b/keyboard6/style.css new file mode 100644 index 0000000..57130bb --- /dev/null +++ b/keyboard6/style.css @@ -0,0 +1,277 @@ +/* Import Google Font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + /* display: flex;*/ + padding: 0 0px; + /* + align-items: center; + justify-content: center; +*/ + min-height: 100vh; + background-image: linear-gradient(to left bottom, #d16ba5, #ab5d9b, #85508d, #60437c, #3d3668, #314072, #204a7a, #005480, #007ca5, #00a5c5, #1ed0de, #5ffbf1); +} + +::selection { + color: #fff; + background: #17A2B8; +} + +.wrapper { + width: 100%; + padding: 15px; + background: #fff; + border-radius: 0px; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); +} + +.wrapper .input-field { + opacity: 0; + z-index: -999; + position: absolute; +} + +.wrapper .content-box { + padding: 13px 20px 0; + border-radius: 10px; + border: 1px solid #bfbfbf; +} + +.content-box .typing-text { + overflow: hidden; + max-height: 30%; +} + +.typing-text::-webkit-scrollbar { + width: 0; +} + +.typing-text p { + font-size: 21px; + text-align: justify; + letter-spacing: 1px; + word-break: break-all; +} + +.typing-text p span { + position: relative; +} + +.typing-text p span.correct { + color: #56964f; +} + +.typing-text p span.incorrect { + color: #cb3439; + outline: 1px solid #fff; + background: #ffc0cb; + border-radius: 4px; +} + +.typing-text p span.active { + color: #17A2B8; +} + +.typing-text p span.active::before { + position: absolute; + content: ""; + height: 2px; + width: 100%; + bottom: 0; + left: 0; + opacity: 0; + border-radius: 5px; + background: #17A2B8; + animation: blink 1s ease-in-out infinite; +} + +@keyframes blink { + 50% { + opacity: 1; + } +} + +.content-box .content { + margin-top: 17px; + display: flex; + padding: 12px 0; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + border-top: 1px solid #bfbfbf; +} + +.content button { + outline: none; + border: none; + width: 105px; + color: #fff; + padding: 8px 0; + font-size: 16px; + cursor: pointer; + border-radius: 5px; + background: #17A2B8; + transition: transform 0.3s ease; +} + +.content button:active { + transform: scale(0.97); +} + +.content .result-details { + display: flex; + flex-wrap: wrap; + align-items: center; + width: calc(100% - 140px); + justify-content: space-between; +} + +.result-details li { + display: flex; + height: 20px; + list-style: none; + position: relative; + align-items: center; +} + +.result-details li:not(:first-child) { + padding-left: 22px; + border-left: 1px solid #bfbfbf; +} + +.result-details li p { + font-size: 19px; +} + +.result-details li span { + display: block; + font-size: 20px; + margin-left: 10px; +} + +li span b { + font-weight: 500; +} + +li:not(:first-child) span { + font-weight: 500; +} + +.setting { + position: absolute; + bottom: 10px; + right: 10px; + +} + +.setting #customTimeForm { + display: inline-block; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.setting label { + display: block; + margin-bottom: 10px; + font-size: 16px; +} + +.setting select { + padding: 8px; + font-size: 16px; +} + +.setting button { + padding: 8px 16px; + font-size: 16px; + cursor: pointer; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; +} + +.setting button:hover { + background-color: #45a049; +} + +.instruciton { + max-width: 50%; + padding: 10px; + position: relative; + bottom: -10vh; + + +} + + +@media (max-width: 745px) { + .wrapper { + padding: 20px; + } + + .content-box .content { + padding: 20px 0; + } + + .content-box .typing-text { + max-height: 100%; + } + + .typing-text p { + font-size: 19px; + text-align: left; + } + + .content button { + width: 100%; + font-size: 15px; + padding: 10px 0; + margin-top: 20px; + } + + .content .result-details { + width: 100%; + } + + .result-details li:not(:first-child) { + border-left: 0; + padding: 0; + } + + .result-details li p, + .result-details li span { + font-size: 17px; + } + + .instruciton { + max-width: 500px; + } +} + +@media (max-width: 518px) { + .wrapper .content-box { + padding: 10px 15px 0; + } + + .typing-text p { + font-size: 18px; + } + + .result-details li { + margin-bottom: 10px; + } + + .content button { + margin-top: 10px; + } +} diff --git a/nav.css b/nav.css index 1941505..30114e4 100644 --- a/nav.css +++ b/nav.css @@ -6,6 +6,7 @@ } */ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600&display=swap'); + nav { height: 100px; position: relative; @@ -18,6 +19,10 @@ body { font-family: 'Fira Sans', sans-serif; } +body::-webkit-scrollbar { + display: none; +} + .header { overflow: hidden; background-color: #f1f1f1; @@ -97,6 +102,7 @@ footer { } @media screen and (max-width: 500px) { + /* .header a { float: none; display: block; @@ -106,7 +112,8 @@ footer { .header-right { float: right; } -/* + + /* footer { position: relative; text-align: center; @@ -114,4 +121,4 @@ footer { padding: 10px; } */ -} \ No newline at end of file +}