mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-20 14:13:42 -05:00
Compare commits
No commits in common. "e9eded3f6232abbce90975994a8b7b0d0b7ebcab" and "8bf93e2335fb582f2318f14e55c81625d86e343a" have entirely different histories.
e9eded3f62
...
8bf93e2335
3 changed files with 0 additions and 238 deletions
|
|
@ -1,27 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>MilkNet | Typing Speed Test</title>
|
|
||||||
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>Typing speed test</h1>
|
|
||||||
<p>Go or something idk</p>
|
|
||||||
<div id="text-to-type" class="text-to-type">
|
|
||||||
<!-- Random text will be inserted here -->
|
|
||||||
</div>
|
|
||||||
<textarea id="user-input" placeholder="Start typing..."></textarea>
|
|
||||||
<div id="stats">
|
|
||||||
<p>Time: <span id="timer">0</span>s</p>
|
|
||||||
<p>Speed: <span id="speed">0</span> WPM</p>
|
|
||||||
<p>Accuracy: <span id="accuracy">100</span>%</p>
|
|
||||||
</div>
|
|
||||||
<button id="restart-btn">Restart</button>
|
|
||||||
</div>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
145
type/script.js
145
type/script.js
|
|
@ -1,145 +0,0 @@
|
||||||
const textToTypeElement = document.getElementById('text-to-type');
|
|
||||||
const userInput = document.getElementById('user-input');
|
|
||||||
const timerDisplay = document.getElementById('timer');
|
|
||||||
const speedDisplay = document.getElementById('speed');
|
|
||||||
const accuracyDisplay = document.getElementById('accuracy');
|
|
||||||
const restartButton = document.getElementById('restart-btn');
|
|
||||||
|
|
||||||
let timer;
|
|
||||||
let seconds = 0;
|
|
||||||
let typedText = '';
|
|
||||||
let totalWords = 0;
|
|
||||||
let correctWords = 0;
|
|
||||||
let isTyping = false;
|
|
||||||
let originalText = '';
|
|
||||||
|
|
||||||
const texts = [
|
|
||||||
"the quick brown fox jumps over the lazy dog",
|
|
||||||
"oh the misery everybody wants to be my enemy",
|
|
||||||
"she said do you love me I tell her only partly",
|
|
||||||
"this sample text is sponsored by wavesmiley.com",
|
|
||||||
"i got two phones one for the plug and one for the load",
|
|
||||||
"whether tis nobler in the mind to suffer the slings and arrows of outrageous fortune",
|
|
||||||
"free nvidia geforce now ultraviolet fortnite proxy working february 2023",
|
|
||||||
"fuck a matthew crook I could never miss a target",
|
|
||||||
"croissant burglar never bluegrass premium gambit folding",
|
|
||||||
"dodecahedron mixtape groan fort chicken mountains",
|
|
||||||
"who's that? is he some sort of king? no, he's a legend",
|
|
||||||
"i've never had dinner with the president",
|
|
||||||
"water ice salt aye meep jacket leather coral",
|
|
||||||
"you scream I scream we all scream for okay",
|
|
||||||
"can I get a rizz and can you make it gyatt forever",
|
|
||||||
"soup vacuum insane wily grumbling vampire",
|
|
||||||
"habanero world island corn platinum triple zoom pebbles",
|
|
||||||
"pineapple backflip front side lefty righty zero forty one",
|
|
||||||
"eight seven tricks four troll deer fawn four",
|
|
||||||
"nine glue grass ground floor chips man woman horse no",
|
|
||||||
"mandy's candies we all love mandy's candies",
|
|
||||||
"flop moop jop grimb lich hop eleventyseven fish bart",
|
|
||||||
"frimp tomorrow forever popsicle evangelion humanity crystals",
|
|
||||||
"instead of drinking imported beers somebody brought a bottle of orphan tears",
|
|
||||||
"this mailbox is mine and this triagonal sign",
|
|
||||||
"milknet glaze i am milknet by playboi milky",
|
|
||||||
"limbo by mindcap and more",
|
|
||||||
"github lotus flower chinese bottom ninety",
|
|
||||||
"i told her i'm big like bieber she ain't believe me",
|
|
||||||
"it sounds like a lot of hoopla lemon lime cake"
|
|
||||||
];
|
|
||||||
|
|
||||||
// Randomly select a text
|
|
||||||
function getRandomText() {
|
|
||||||
const randomIndex = Math.floor(Math.random() * texts.length);
|
|
||||||
return texts[randomIndex];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the text to type
|
|
||||||
function setTextToType() {
|
|
||||||
originalText = getRandomText();
|
|
||||||
updateHighlightedText();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Highlight typed words
|
|
||||||
function updateHighlightedText() {
|
|
||||||
const inputWords = typedText.trim().split(/\s+/);
|
|
||||||
const textWords = originalText.split(' ');
|
|
||||||
|
|
||||||
const highlighted = textWords.map((word, index) => {
|
|
||||||
if (!inputWords[index]) return `<span>${word}</span>`;
|
|
||||||
if (inputWords[index] === word) {
|
|
||||||
return `<span style="color: #00ff00">${word}</span>`; // green for correct
|
|
||||||
} else {
|
|
||||||
return `<span style="color: #ff4444">${word}</span>`; // red for wrong
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
textToTypeElement.innerHTML = highlighted.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start a new typing test
|
|
||||||
function startTest() {
|
|
||||||
setTextToType();
|
|
||||||
userInput.value = '';
|
|
||||||
seconds = 0;
|
|
||||||
timerDisplay.innerText = seconds;
|
|
||||||
speedDisplay.innerText = 0;
|
|
||||||
accuracyDisplay.innerText = 100;
|
|
||||||
isTyping = false;
|
|
||||||
clearInterval(timer);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculate accuracy and speed
|
|
||||||
function countCorrectWords(input, text) {
|
|
||||||
const inputWords = input.split(' ');
|
|
||||||
const textWords = text.split(' ');
|
|
||||||
let correctCount = 0;
|
|
||||||
for (let i = 0; i < inputWords.length; i++) {
|
|
||||||
if (inputWords[i] === textWords[i]) {
|
|
||||||
correctCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return correctCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStats() {
|
|
||||||
const totalWordsTyped = typedText.trim().split(/\s+/).length;
|
|
||||||
correctWords = countCorrectWords(typedText, originalText);
|
|
||||||
|
|
||||||
let speed = 0;
|
|
||||||
if (seconds > 0) {
|
|
||||||
speed = Math.round((totalWordsTyped / 5) / (seconds / 60));
|
|
||||||
}
|
|
||||||
|
|
||||||
const accuracy = totalWordsTyped > 0
|
|
||||||
? Math.round((correctWords / totalWordsTyped) * 100)
|
|
||||||
: 100;
|
|
||||||
|
|
||||||
speedDisplay.innerText = speed;
|
|
||||||
accuracyDisplay.innerText = accuracy;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event listener for user input
|
|
||||||
userInput.addEventListener('input', function() {
|
|
||||||
if (!isTyping) {
|
|
||||||
startTimer();
|
|
||||||
isTyping = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
typedText = userInput.value;
|
|
||||||
totalWords = typedText.split(' ').length;
|
|
||||||
updateStats();
|
|
||||||
updateHighlightedText();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Timer function
|
|
||||||
function startTimer() {
|
|
||||||
timer = setInterval(function() {
|
|
||||||
seconds++;
|
|
||||||
timerDisplay.innerText = seconds;
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Restart test when the button is clicked
|
|
||||||
restartButton.addEventListener('click', startTest);
|
|
||||||
|
|
||||||
// Initialize the page
|
|
||||||
startTest();
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #000000;
|
|
||||||
color: #ffffff;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 900px;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-to-type {
|
|
||||||
font-size: 1.3em;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
background-color: #2a2a2a;
|
|
||||||
border: 1px solid #444;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
|
||||||
border: 1px solid #555;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#stats p {
|
|
||||||
font-size: 1em;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#restart-btn {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
font-size: 1em;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#restart-btn:hover {
|
|
||||||
background-color: #0056b3;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue