updated

mjafory · Feb 10, 2024 · 002e969 · 002e969
1 parent 125b2ff
commit 002e969
Show file tree

Hide file tree

Showing 50 changed files with 511 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -125,7 +125,7 @@
 				<div class="column mouse" id="mouse"> <a href="mouse6/index.html">Draggable Words</a></div>
 			</div>
 			<div class="col-sm">
-				<div class="column mouse" id="mouse"> <a href="#">Coming Soon</a></div>
+				<div class="column mouse" id="keyboard"> <a href="keyboard6/">Typeing Test</a></div>
 			</div>
 		</div>
 	</div>

diff --git a/keyboard6/.vs/VSWorkspaceState.json b/keyboard6/.vs/VSWorkspaceState.json
@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}
diff --git a/keyboard6/.vs/slnx.sqlite b/keyboard6/.vs/slnx.sqlite
diff --git a/keyboard6/.vs/typing/FileContentIndex/05de71d0-5bee-4c0f-9dd8-2199ec6d18fe.vsidx b/keyboard6/.vs/typing/FileContentIndex/05de71d0-5bee-4c0f-9dd8-2199ec6d18fe.vsidx
diff --git a/keyboard6/.vs/typing/FileContentIndex/read.lock b/keyboard6/.vs/typing/FileContentIndex/read.lock
diff --git a/keyboard6/.vs/typing/v17/.wsuo b/keyboard6/.vs/typing/v17/.wsuo
diff --git a/keyboard6/img/keyboard.png b/keyboard6/img/keyboard.png
diff --git a/keyboard6/index.html b/keyboard6/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+	<meta charset="utf-8">
+	<title>Typing Speed Test</title>
+	<link rel="stylesheet" href="style.css">
+	<link rel="stylesheet" href="../nav.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+
+	<nav>
+		<div class="header"> <a href="../index.html" class="logo">CSS</a>
+			<br>
+			<p>Computer Steering Skills</p>
+			<div class="header-right"> <a href="#about" onclick="refreshPage()">Refresh</a> <a href="#about">Log in</a> <a href="#about">Sign in</a> </div>
+		</div>
+		<script type="application/javascript" src="../nav.js"></script>
+	</nav>
+
+	<div class="wrapper">
+		<input type="text" class="input-field">
+		<div class="content-box">
+			<div class="typing-text">
+				<p></p>
+			</div>
+			<div class="content">
+				<ul class="result-details">
+					<li class="time">
+						<p>Time Left:</p>
+						<span><b id="second"></b></span>
+					</li>
+					<li class="mistake">
+						<p>Mistakes:</p>
+						<span>0</span>
+					</li>
+					<li class="wpm">
+						<p>WPM:</p>
+						<span>0</span>
+					</li>
+					<li class="cpm">
+						<p>CPM:</p>
+						<span>0</span>
+					</li>
+				</ul>
+				<button>Try Again</button>
+
+				<div class="setting">
+
+
+					<form id="customTimeForm">
+						<label for="customTimeInput">Set Timer: </label>
+						<select name="cars" id="customTimeInput">
+							<option id="secods"></option>
+							<option value="240">240s</option>
+							<option value="180">180s</option>
+							<option value="150">150s</option>
+							<option value="120">120s</option>
+							<option value="90">90s</option>
+							<option value="60">60s</option>
+							<option value="30">30s</option>
+						</select>
+						<button type="button" onclick="setCustomTime()">Set</button>
+					</form>
+				</div>
+			</div>
+
+		</div>
+
+	</div>
+	<center><img src="img/keyboard.png" class="instruciton"></center>
+
+	<script src="js/paragraphs.js"></script>
+	<script src="js/script.js"></script>
+
+
+	<script>
+		function setCustomTime() {
+			const customTimeInput = document.getElementById('customTimeInput');
+			const customTime = parseInt(customTimeInput.value, 10);
+
+			if (!isNaN(customTime) && customTime > 0) {
+				// Save the custom time to local storage
+				localStorage.setItem('customTime', customTime);
+				location.reload();
+
+			} else {
+				alert('Please enter a valid positive number for custom time.');
+			}
+		}
+
+		document.getElementById("secods").innerHTML = parseInt(localStorage.getItem('customTime')) + "s";
+		document.getElementById("second").innerHTML = parseInt(localStorage.getItem('customTime')) + "s";
+
+	</script>
+
+</body>
+
+</html>
diff --git a/keyboard6/js/paragraphs.js b/keyboard6/js/paragraphs.js
diff --git a/keyboard6/js/script.js 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 = `<span>${char}</span>`
+		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
diff --git a/keyboard6/sounds/1.mp3 b/keyboard6/sounds/1.mp3
diff --git a/keyboard6/sounds/10.mp3 b/keyboard6/sounds/10.mp3
diff --git a/keyboard6/sounds/2.mp3 b/keyboard6/sounds/2.mp3
diff --git a/keyboard6/sounds/3.mp3 b/keyboard6/sounds/3.mp3
diff --git a/keyboard6/sounds/4.mp3 b/keyboard6/sounds/4.mp3
diff --git a/keyboard6/sounds/5.mp3 b/keyboard6/sounds/5.mp3
diff --git a/keyboard6/sounds/6.mp3 b/keyboard6/sounds/6.mp3
diff --git a/keyboard6/sounds/7.mp3 b/keyboard6/sounds/7.mp3
diff --git a/keyboard6/sounds/8.mp3 b/keyboard6/sounds/8.mp3
diff --git a/keyboard6/sounds/9.mp3 b/keyboard6/sounds/9.mp3
diff --git a/keyboard6/sounds/a.mp3 b/keyboard6/sounds/a.mp3
diff --git a/keyboard6/sounds/b.mp3 b/keyboard6/sounds/b.mp3
diff --git a/keyboard6/sounds/c.mp3 b/keyboard6/sounds/c.mp3
diff --git a/keyboard6/sounds/d.mp3 b/keyboard6/sounds/d.mp3
diff --git a/keyboard6/sounds/e.mp3 b/keyboard6/sounds/e.mp3
diff --git a/keyboard6/sounds/f.mp3 b/keyboard6/sounds/f.mp3
diff --git a/keyboard6/sounds/g.mp3 b/keyboard6/sounds/g.mp3
diff --git a/keyboard6/sounds/h.mp3 b/keyboard6/sounds/h.mp3
diff --git a/keyboard6/sounds/i.mp3 b/keyboard6/sounds/i.mp3
diff --git a/keyboard6/sounds/j.mp3 b/keyboard6/sounds/j.mp3
diff --git a/keyboard6/sounds/k.mp3 b/keyboard6/sounds/k.mp3
diff --git a/keyboard6/sounds/l.mp3 b/keyboard6/sounds/l.mp3
diff --git a/keyboard6/sounds/m.mp3 b/keyboard6/sounds/m.mp3
diff --git a/keyboard6/sounds/n.mp3 b/keyboard6/sounds/n.mp3
diff --git a/keyboard6/sounds/o.mp3 b/keyboard6/sounds/o.mp3
diff --git a/keyboard6/sounds/p.mp3 b/keyboard6/sounds/p.mp3
diff --git a/keyboard6/sounds/q.mp3 b/keyboard6/sounds/q.mp3
diff --git a/keyboard6/sounds/r.mp3 b/keyboard6/sounds/r.mp3
diff --git a/keyboard6/sounds/s.mp3 b/keyboard6/sounds/s.mp3
diff --git a/keyboard6/sounds/t.mp3 b/keyboard6/sounds/t.mp3
diff --git a/keyboard6/sounds/u.mp3 b/keyboard6/sounds/u.mp3
diff --git a/keyboard6/sounds/v.mp3 b/keyboard6/sounds/v.mp3
diff --git a/keyboard6/sounds/w.mp3 b/keyboard6/sounds/w.mp3
diff --git a/keyboard6/sounds/wrong.mp3 b/keyboard6/sounds/wrong.mp3
diff --git a/keyboard6/sounds/x.mp3 b/keyboard6/sounds/x.mp3
diff --git a/keyboard6/sounds/y.mp3 b/keyboard6/sounds/y.mp3
diff --git a/keyboard6/sounds/z.mp3 b/keyboard6/sounds/z.mp3