mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-20 18:23:41 -05:00
Compare commits
12 commits
8bf93e2335
...
e9eded3f62
| Author | SHA1 | Date | |
|---|---|---|---|
|
e9eded3f62 | ||
|
|
b5596a39f9 | ||
|
|
a68b8e3fdb | ||
|
|
093436b219 | ||
|
|
8c48e8aaca | ||
|
|
8b63a675b1 | ||
|
|
71c437fc0e | ||
|
|
b33323ad88 | ||
|
|
1a0f14c4e1 | ||
|
|
dafc70d953 | ||
|
|
60090f6f01 | ||
|
|
3798bcd836 |
3 changed files with 238 additions and 0 deletions
27
type/index.html
Normal file
27
type/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!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
Normal file
145
type/script.js
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
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();
|
||||||
66
type/style.css
Normal file
66
type/style.css
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
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