Hugging Face's logo

Spaces:
GameDev102
/
meme-typing-speed-test
Running

App Files Community
meme-typing-speed-test / index.html
GameDev102's picture
GameDev102
Add 3 files
6c131e3 verified
raw
history blame contribute delete
24.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Meme Typing Speed Test</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
body {
 font-family: 'Comic Neue', cursive;
 transition: background-image 0.5s ease-in-out;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 min-height: 100vh;
 }
.bg-overlay {
 background-color: rgba(0, 0, 0, 0.6);
 }
.text-display {
 font-size: 1.2rem;
 line-height: 1.8;
 letter-spacing: 0.05em;
 }
.correct {
 color: #4ade80;
 }
.incorrect {
 color: #f87171;
 text-decoration: underline;
 }
.current {
 background-color: rgba(74, 222, 128, 0.3);
 border-left: 2px solid #4ade80;
 }
.fade-in {
 animation: fadeIn 0.5s;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.meme-caption {
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
 animation: bounce 1s infinite alternate;
 }
@keyframes bounce {
 from { transform: translateY(0); }
 to { transform: translateY(-5px); }
 }
.result-card {
 backdrop-filter: blur(10px);
 background-color: rgba(255, 255, 255, 0.15);
 }
 </style>
</head>
<body class="bg-gray-900 text-white" id="app">
 <div class="bg-overlay min-h-screen flex flex-col items-center justify-center p-4 md:p-8">
 <div class="w-full max-w-4xl mx-auto">
 <!-- Header -->
 <header class="text-center mb-8 fade-in">
 <h1 class="text-4xl md:text-5xl font-bold mb-2 text-yellow-300">Meme Typing Speed Test</h1>
 <p class="text-lg md:text-xl text-gray-300">Type fast, get roasted, enjoy the memes!</p>
 </header>
<!-- Stats Display -->
 <div class="flex justify-between mb-6 bg-gray-800 rounded-lg p-4 shadow-lg">
 <div class="text-center">
 <p class="text-sm text-gray-400">Speed</p>
 <p class="text-2xl font-bold" id="wpm">0</p>
 <p class="text-xs">WPM</p>
 </div>
 <div class="text-center">
 <p class="text-sm text-gray-400">Accuracy</p>
 <p class="text-2xl font-bold" id="accuracy">100</p>
 <p class="text-xs">%</p>
 </div>
 <div class="text-center">
 <p class="text-sm text-gray-400">Time</p>
 <p class="text-2xl font-bold" id="time">60</p>
 <p class="text-xs">seconds</p>
 </div>
 </div>
<!-- Meme Caption -->
 <div class="text-center mb-6">
 <p class="text-xl md:text-2xl font-bold meme-caption text-yellow-300" id="meme-caption">Ready to get roasted by your typing speed?</p>
 </div>
<!-- Typing Test Area -->
 <div id="test-container" class="fade-in">
 <div class="mb-6 p-4 bg-gray-800 rounded-lg shadow-lg">
 <div id="text-display" class="text-display mb-4 h-24 overflow-y-auto"></div>
 <input
type="text"
id="input-field"
class="w-full p-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
placeholder="Click here to start typing..."
autocomplete="off"
 autocorrect="off"
 autocapitalize="off"
 spellcheck="false"
 >
 </div>
<div class="text-center">
 <button id="start-btn" class="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold rounded-lg transition duration-200">
 Start Test
 </button>
 </div>
 </div>
<!-- Results (Hidden Initially) -->
 <div id="results-container" class="hidden fade-in">
 <div class="result-card rounded-lg p-6 mb-6 shadow-xl border border-gray-700">
 <h2 class="text-3xl font-bold text-center mb-4 text-yellow-300">Your Results</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-sm text-gray-400">Final Speed</p>
 <p class="text-3xl font-bold" id="final-wpm">0</p>
 <p class="text-xs">Words Per Minute</p>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-sm text-gray-400">Accuracy</p>
 <p class="text-3xl font-bold" id="final-accuracy">100</p>
 <p class="text-xs">% Correct</p>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-sm text-gray-400">Meme Level</p>
 <p class="text-3xl font-bold" id="meme-level">Snail</p>
 <p class="text-xs">Speed Tier</p>
 </div>
 </div>
<div class="text-center mb-6">
 <p class="text-xl font-bold" id="final-caption">You type like a sloth on a lazy Sunday!</p>
 </div>
<div class="flex flex-col md:flex-row justify-center gap-4">
 <button id="restart-btn" class="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold rounded-lg transition duration-200">
 Try Again
 </button>
 <button id="share-btn" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg transition duration-200">
 Share Results
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Sample texts for typing test
 const sampleTexts = [
 "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!",
 "Crazy Fredrick bought many very exquisite opal jewels. The five boxing wizards jump quickly. My girl wove six dozen plaid jackets before she quit.",
 "Jinxed wizards pluck ivy from the big quilt. Crazy Fredrick bought many very exquisite opal jewels. Sphinx of black quartz, judge my vow.",
 "The quick onyx goblin jumps over the lazy dwarf. Pack my red box with five dozen quality jugs. How quickly daft jumping zebras vex!",
 "Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Two driven jocks help fax my big quiz. Five quacking zephyrs jolt my wax bed."
 ];
// Meme GIFs for different speed tiers
 const memeGifs = {
 slow: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGJhZ2J0dG9uY2J0d3F4dGJ5d3R6Z2V4eXJ2bGJ5b2VtZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7TKTD1P5JCDoQxKU/giphy.gif",
 medium: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l0HU20BZ6LbSEITza/giphy.gif",
 fast: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7aCTPPm4OHfRLSH6/giphy.gif",
 ultra: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT5LMHxhOfscxPfIfm/giphy.gif"
 };
// Meme captions for different speed tiers
 const memeCaptions = {
 slow: [
 "Your grandma types faster than this.",
 "Are you typing with your nose?",
 "I've seen sloths move faster.",
 "Is your keyboard made of molasses?",
 "At this rate, you'll finish by next Christmas."
 ],
 medium: [
 "Not bad... for a turtle.",
 "You're trying, and that's what counts.",
 "Speed: Average. Meme potential: High.",
 "You type like a middle manager.",
 "Could be worse... could be better."
 ],
 fast: [
 "WOOOSH! You're going places!",
 "Someone's been practicing!",
 "Now we're cooking with gas!",
 "Look at you go, speed demon!",
 "The keyboard is on fire!"
 ],
 ultra: [
 "HOLY MOLY! Are you a robot?",
 "The Flash called, he wants his speed back.",
 "You type faster than light travels.",
 "Did you sell your soul for typing powers?",
 "NASA wants to study your fingers."
 ]
 };
// Final result captions
 const resultCaptions = {
 slow: [
 "You type like a sloth on a lazy Sunday.",
 "Your fingers move at geological speeds.",
 "At least you're consistent... consistently slow.",
 "Maybe try voice typing next time?",
 "The good news: You can only improve from here!"
 ],
 medium: [
 "You're the typing equivalent of vanilla ice cream.",
 "Not too hot, not too cold... just right.",
 "You type like a reliable Honda Civic.",
 "Perfectly adequate in every way.",
 "You're the human equivalent of 60 WPM."
 ],
 fast: [
 "Look at you, you speedy little typist!",
 "Your fingers dance across the keyboard!",
 "You type like a caffeinated secretary.",
 "The keyboard trembles at your approach!",
 "You've clearly spent too much time online."
 ],
 ultra: [
 "ARE YOU EVEN HUMAN? This is insane!",
 "Your fingers are a blur of typing fury!",
 "The keyboard can't keep up with you!",
 "You type faster than most people think!",
 "Warning: Typing at this speed may cause spontaneous combustion."
 ]
 };
// DOM elements
 const textDisplay = document.getElementById('text-display');
 const inputField = document.getElementById('input-field');
 const startBtn = document.getElementById('start-btn');
 const wpmDisplay = document.getElementById('wpm');
 const accuracyDisplay = document.getElementById('accuracy');
 const timeDisplay = document.getElementById('time');
 const memeCaption = document.getElementById('meme-caption');
 const testContainer = document.getElementById('test-container');
 const resultsContainer = document.getElementById('results-container');
 const finalWpm = document.getElementById('final-wpm');
 const finalAccuracy = document.getElementById('final-accuracy');
 const memeLevel = document.getElementById('meme-level');
 const finalCaption = document.getElementById('final-caption');
 const restartBtn = document.getElementById('restart-btn');
 const shareBtn = document.getElementById('share-btn');
// Test variables
 let currentText = '';
 let timer;
 let timeLeft = 60;
 let isTyping = false;
 let correctChars = 0;
 let incorrectChars = 0;
 let totalTyped = 0;
 let wpm = 0;
 let accuracy = 100;
 let speedInterval;
 let lastUpdateTime = 0;
 let correctKeystrokes = 0;
 let totalKeystrokes = 0;
// Initialize the app
 function init() {
 // Preload all GIFs
 preloadGifs();
// Set up event listeners
 startBtn.addEventListener('click', startTest);
 inputField.addEventListener('input', checkTyping);
 inputField.addEventListener('keydown', (e) => {
 if (e.key === 'Enter') {
 e.preventDefault();
 }
 });
 restartBtn.addEventListener('click', resetTest);
 shareBtn.addEventListener('click', shareResults);
// Display a random text sample
 displaySampleText();
 }
// Preload all GIFs to avoid loading delays
 function preloadGifs() {
 Object.values(memeGifs).forEach(url => {
 const img = new Image();
 img.src = url;
 });
 }
// Display a random sample text
 function displaySampleText() {
 currentText = sampleTexts[Math.floor(Math.random() * sampleTexts.length)];
 textDisplay.innerHTML = '';
currentText.split('').forEach(char => {
 const span = document.createElement('span');
 span.textContent = char;
 textDisplay.appendChild(span);
 });
 }
// Start the typing test
 function startTest() {
 if (isTyping) return;
isTyping = true;
 timeLeft = 60;
 correctChars = 0;
 incorrectChars = 0;
 totalTyped = 0;
 wpm = 0;
 accuracy = 100;
 correctKeystrokes = 0;
 totalKeystrokes = 0;
// Update UI
 startBtn.classList.add('hidden');
 inputField.value = '';
 inputField.focus();
 timeDisplay.textContent = timeLeft;
// Start timer
 timer = setInterval(updateTimer, 1000);
// Start WPM calculation
 lastUpdateTime = Date.now();
 speedInterval = setInterval(calculateSpeed, 2000);
// Set initial meme
 updateMeme();
 }
// Update the timer
 function updateTimer() {
 timeLeft--;
 timeDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
 finishTest();
 }
 }
// Calculate typing speed (WPM)
 function calculateSpeed() {
 const now = Date.now();
 const timeElapsed = (now - lastUpdateTime) / 1000 / 60; // in minutes
 const charsTyped = totalTyped;
if (timeElapsed > 0) {
 // WPM = (correct characters / 5) / minutes
 wpm = Math.round((correctChars / 5) / timeElapsed);
 accuracy = totalTyped > 0 ? Math.round((correctKeystrokes / totalKeystrokes) * 100) : 100;
wpmDisplay.textContent = wpm;
 accuracyDisplay.textContent = accuracy;
updateMeme();
 }
lastUpdateTime = now;
 correctChars = 0;
 totalTyped = 0;
 }
// Check typing against sample text
 function checkTyping() {
 if (!isTyping) return;
const inputText = inputField.value;
 const currentChar = inputText[inputText.length - 1];
 const expectedChar = currentText[inputText.length - 1];
totalTyped++;
 totalKeystrokes++;
// Check if the character is correct
 if (currentChar === expectedChar) {
 correctChars++;
 correctKeystrokes++;
 } else {
 incorrectChars++;
 }
// Update the text display with correct/incorrect styling
 updateTextDisplay(inputText);
 }
// Update the text display with coloring
 function updateTextDisplay(inputText) {
 const textSpans = textDisplay.querySelectorAll('span');
textSpans.forEach((span, index) => {
 // Reset classes
 span.className = '';
// Already typed characters
 if (index < inputText.length) {
 if (inputText[index] === currentText[index]) {
 span.classList.add('correct');
 } else {
 span.classList.add('incorrect');
 }
 }
// Current character
 if (index === inputText.length) {
 span.classList.add('current');
 }
 });
// Scroll to keep current character in view
 const currentSpan = textDisplay.querySelector('.current');
 if (currentSpan) {
 currentSpan.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
 }
// Update the meme based on current WPM
 function updateMeme() {
 let speedTier, randomCaption;
if (wpm <= 20) {
 speedTier = 'slow';
 randomCaption = memeCaptions.slow[Math.floor(Math.random() * memeCaptions.slow.length)];
 } else if (wpm <= 50) {
 speedTier = 'medium';
 randomCaption = memeCaptions.medium[Math.floor(Math.random() * memeCaptions.medium.length)];
 } else if (wpm <= 80) {
 speedTier = 'fast';
 randomCaption = memeCaptions.fast[Math.floor(Math.random() * memeCaptions.fast.length)];
 } else {
 speedTier = 'ultra';
 randomCaption = memeCaptions.ultra[Math.floor(Math.random() * memeCaptions.ultra.length)];
 }
// Update background
 document.body.style.backgroundImage = `url(${memeGifs[speedTier]})`;
// Update caption
 memeCaption.textContent = randomCaption;
 }
// Finish the test and show results
 function finishTest() {
 clearInterval(timer);
 clearInterval(speedInterval);
 isTyping = false;
// Calculate final WPM and accuracy
 const finalWpmValue = Math.max(0, wpm);
 const finalAccuracyValue = Math.max(0, Math.min(100, accuracy));
// Determine speed tier
 let speedTier, levelName, randomResultCaption;
if (finalWpmValue <= 20) {
 speedTier = 'slow';
 levelName = 'Snail';
 randomResultCaption = resultCaptions.slow[Math.floor(Math.random() * resultCaptions.slow.length)];
 } else if (finalWpmValue <= 50) {
 speedTier = 'medium';
 levelName = 'Average Joe';
 randomResultCaption = resultCaptions.medium[Math.floor(Math.random() * resultCaptions.medium.length)];
 } else if (finalWpmValue <= 80) {
 speedTier = 'fast';
 levelName = 'Speed Demon';
 randomResultCaption = resultCaptions.fast[Math.floor(Math.random() * resultCaptions.fast.length)];
 } else {
 speedTier = 'ultra';
 levelName = 'GOD MODE';
 randomResultCaption = resultCaptions.ultra[Math.floor(Math.random() * resultCaptions.ultra.length)];
 }
// Update final results
 finalWpm.textContent = finalWpmValue;
 finalAccuracy.textContent = finalAccuracyValue;
 memeLevel.textContent = levelName;
 finalCaption.textContent = randomResultCaption;
// Set final meme
 document.body.style.backgroundImage = `url(${memeGifs[speedTier]})`;
// Show results container
 testContainer.classList.add('hidden');
 resultsContainer.classList.remove('hidden');
 }
// Reset the test
 function resetTest() {
 clearInterval(timer);
 clearInterval(speedInterval);
isTyping = false;
 inputField.value = '';
// Reset displays
 wpmDisplay.textContent = '0';
 accuracyDisplay.textContent = '100';
 timeDisplay.textContent = '60';
// Show test container
 testContainer.classList.remove('hidden');
 resultsContainer.classList.add('hidden');
// Reset start button
 startBtn.classList.remove('hidden');
// Get new sample text
 displaySampleText();
// Reset meme
 memeCaption.textContent = "Ready to get roasted by your typing speed?";
 document.body.style.backgroundImage = '';
 }
// Share results
 function shareResults() {
 const finalWpmValue = finalWpm.textContent;
 const finalAccuracyValue = finalAccuracy.textContent;
 const levelName = memeLevel.textContent;
 const caption = finalCaption.textContent;
const shareText = `I just scored ${finalWpmValue} WPM (${finalAccuracyValue}% accuracy) on the Meme Typing Speed Test! ${caption} Try it yourself!`;
if (navigator.share) {
 navigator.share({
 title: 'My Typing Speed Results',
 text: shareText,
 url: window.location.href
 }).catch(err => {
 console.log('Error sharing:', err);
 fallbackShare(shareText);
 });
 } else {
 fallbackShare(shareText);
 }
 }
// Fallback for browsers that don't support Web Share API
 function fallbackShare(text) {
 // Copy to clipboard
 navigator.clipboard.writeText(text).then(() => {
 alert('Results copied to clipboard! Paste it anywhere to share.');
 }).catch(err => {
 console.log('Could not copy text: ', err);
 prompt('Copy this to share:', text);
 });
 }
// Initialize the app when the DOM is loaded
 document.addEventListener('DOMContentLoaded', init);
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GameDev102/meme-typing-speed-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>