mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-18 17:23:40 -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