Spaces:

ItsJayKee
/

codetyper-racer

Running

App Files Files Community

ItsJayKee commited on Jan 16

Commit

1af3855

verified ·

1 Parent(s): dc933c1

okay make me a log in page, you need to put your name grade level and section. After logging in you will go into the 2nd page, this 2nd page is a fast typing test and instead of using real english language, we use html, css and Javascript language instead, they're 3 or more features but the important feature is, first you can select the type of language you test, like choosing html, css and javascript, second you can select the timer of this test, the timer is 1 minute 5 minutes 10 minutes and 30 minutes but the timer doesn't stop when it hits zero, it only stops when all the code snippets are all encoded, third is leaderboard where it shows the top users who used the typing test the leaderboard will get the credentials from the log in page and the most important is, after you finished the code, it will show your speed and accuracy, then there is a button and when you click the button it will display the code in another page

Browse files

Files changed (5) hide show

README.md +8 -5
index.html +70 -19
script.js +37 -0
style.css +67 -18
typing-test.html +826 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Codetyper Racer
-emoji: 👁
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeTyper Racer 🚀
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,70 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeTyper Racer - Login</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="w-full max-w-md">
+        <div class="bg-white rounded-xl shadow-2xl p-8">
+            <div class="text-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-800">CodeTyper Racer 🚀</h1>
+                <p class="text-gray-600 mt-2">Login to start your coding speed challenge</p>
+            </div>
+            <form id="loginForm" class="space-y-6">
+                <div>
+                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                    <input type="text" id="name" name="name" required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+                </div>
+                <div>
+                    <label for="gradeLevel" class="block text-sm font-medium text-gray-700 mb-1">Grade Level</label>
+                    <select id="gradeLevel" name="gradeLevel" required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+                        <option value="" disabled selected>Select your grade</option>
+                        <option value="Grade 7">Grade 7</option>
+                        <option value="Grade 8">Grade 8</option>
+                        <option value="Grade 9">Grade 9</option>
+                        <option value="Grade 10">Grade 10</option>
+                        <option value="Grade 11">Grade 11</option>
+                        <option value="Grade 12">Grade 12</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="section" class="block text-sm font-medium text-gray-700 mb-1">Section</label>
+                    <input type="text" id="section" name="section" required
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+                </div>
+                <button type="submit"
+                    class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 rounded-lg font-semibold shadow-lg hover:from-blue-600 hover:to-purple-700 transition transform hover:-translate-y-0.5">
+                    Start Typing Challenge
+                </button>
+            </form>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        document.getElementById('loginForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('name').value;
+            const gradeLevel = document.getElementById('gradeLevel').value;
+            const section = document.getElementById('section').value;
+            localStorage.setItem('userData', JSON.stringify({ name, gradeLevel, section }));
+            window.location.href = 'typing-test.html';
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,37 @@

+// Shared utility functions
+// Format time as MM:SS
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+// Calculate typing statistics
+function calculateTypingStats(startTime, endTime, correctChars, totalChars) {
+    const timeElapsed = (endTime - startTime) / 1000;
+    const wpm = Math.round((correctChars / 5) / (timeElapsed / 60));
+    const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
+    return { wpm, accuracy, timeElapsed, totalChars };
+}
+// Save result to leaderboard
+function saveToLeaderboard(result) {
+    const userData = JSON.parse(localStorage.getItem('userData'));
+    if (!userData) return;
+    let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+    leaderboard.push({
+        name: userData.name,
+        gradeLevel: userData.gradeLevel,
+        section: userData.section,
+        wpm: result.wpm,
+        accuracy: result.accuracy,
+        time: result.timeElapsed,
+        chars: result.totalChars,
+        timestamp: new Date().toISOString()
+    });
+    localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
+}

style.css CHANGED Viewed

@@ -1,28 +1,77 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Base styles */
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
 }
+/* Code display styling */
+#codeDisplay {
+    white-space: pre-wrap;
+    color: #c9d1d9;
+    background-color: #1e1e1e;
+    font-family: 'Fira Code', 'Courier New', monospace;
+    line-height: 1.5;
+    tab-size: 2;
 }
+/* Typing area styling */
+#typingArea {
+    font-family: 'Fira Code', 'Courier New', monospace;
+    line-height: 1.5;
+    tab-size: 2;
 }
+/* Progress bar animation */
+#progressFill {
+    transition: width 0.3s ease;
 }
+/* Modal animations */
+.modal-enter {
+    opacity: 0;
+    transform: scale(0.95);
 }
+.modal-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 200ms, transform 200ms;
+}
+.modal-exit {
+    opacity: 1;
+}
+.modal-exit-active {
+    opacity: 0;
+    transform: scale(0.95);
+    transition: opacity 200ms, transform 200ms;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #2d3748;
+}
+::-webkit-scrollbar-thumb {
+    background: #4a5568;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #718096;
+}
+/* Leaderboard table styling */
+#leaderboardBody tr:nth-child(even) {
+    background-color: rgba(74, 85, 104, 0.2);
+}
+#leaderboardBody tr:hover {
+    background-color: rgba(74, 85, 104, 0.4);
+}

typing-test.html ADDED Viewed

	@@ -0,0 +1,826 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeTyper Racer - Challenge</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <header class="bg-gray-800 py-4 shadow-lg">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <h1 class="text-xl font-bold">CodeTyper Racer 🚀</h1>
+            <div class="flex items-center space-x-4">
+                <div id="timerDisplay" class="bg-gray-700 px-4 py-2 rounded-lg font-mono">
+                    00:00
+                </div>
+                <button id="leaderboardBtn" class="flex items-center space-x-1 bg-gray-700 px-3 py-2 rounded-lg hover:bg-gray-600 transition">
+                    <i data-feather="bar-chart-2"></i>
+                    <span>Leaderboard</span>
+                </button>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Settings Panel -->
+            <div class="lg:w-1/4 bg-gray-800 p-6 rounded-xl shadow-lg">
+                <div class="mb-6">
+                    <h2 class="text-lg font-semibold mb-3">Language</h2>
+                    <div class="space-y-2">
+                        <button data-language="html" class="language-btn w-full bg-blue-600 text-white py-2 rounded-lg transition hover:bg-blue-700">
+                            HTML
+                        </button>
+                        <button data-language="css" class="language-btn w-full bg-blue-600 text-white py-2 rounded-lg transition hover:bg-blue-700">
+                            CSS
+                        </button>
+                        <button data-language="javascript" class="language-btn w-full bg-blue-600 text-white py-2 rounded-lg transition hover:bg-blue-700">
+                            JavaScript
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h2 class="text-lg font-semibold mb-3">Timer</h2>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button data-time="1" class="time-btn bg-gray-700 py-2 rounded-lg hover:bg-gray-600 transition">
+                            1 min
+                        </button>
+                        <button data-time="5" class="time-btn bg-gray-700 py-2 rounded-lg hover:bg-gray-600 transition">
+                            5 min
+                        </button>
+                        <button data-time="10" class="time-btn bg-gray-700 py-2 rounded-lg hover:bg-gray-600 transition">
+                            10 min
+                        </button>
+                        <button data-time="30" class="time-btn bg-gray-700 py-2 rounded-lg hover:bg-gray-600 transition">
+                            30 min
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h2 class="text-lg font-semibold mb-3">Difficulty</h2>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button data-difficulty="easy" class="difficulty-btn bg-green-600 py-2 rounded-lg hover:bg-green-700 transition">
+                            Easy
+                        </button>
+                        <button data-difficulty="medium" class="difficulty-btn bg-yellow-600 py-2 rounded-lg hover:bg-yellow-700 transition">
+                            Medium
+                        </button>
+                        <button data-difficulty="hard" class="difficulty-btn bg-red-600 py-2 rounded-lg hover:bg-red-700 transition">
+                            Hard
+                        </button>
+                    </div>
+                </div>
+                <button id="startTestBtn" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 rounded-lg font-semibold shadow-lg hover:from-purple-700 hover:to-blue-600 transition">
+                    Start Test
+                </button>
+            </div>
+            <!-- Typing Area -->
+            <div class="lg:w-3/4">
+                <div id="codeDisplay" class="bg-gray-800 p-6 rounded-xl shadow-lg font-mono text-gray-300 mb-6 h-64 overflow-y-auto">
+                    <p class="text-gray-500 italic">Select a language and click "Start Test" to begin</p>
+                </div>
+                <div class="relative">
+                    <textarea id="typingArea" disabled class="w-full bg-gray-800 border border-gray-700 rounded-lg p-4 font-mono text-gray-300 h-48 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" placeholder="Start typing here when the test begins..."></textarea>
+                    <div id="progressBar" class="h-1 bg-gray-700 rounded-full mt-2">
+                        <div id="progressFill" class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
+                    </div>
+                </div>
+                <div class="flex justify-between items-center mt-4">
+                    <div id="wpmDisplay" class="text-gray-400">WPM: 0</div>
+                    <div id="accuracyDisplay" class="text-gray-400">Accuracy: 0%</div>
+                    <button id="submitTestBtn" disabled class="bg-green-600 px-4 py-2 rounded-lg hover:bg-green-700 transition">
+                        Submit Code
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Leaderboard Modal -->
+    <div id="leaderboardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Leaderboard 🏆</h2>
+                <button id="closeLeaderboardBtn" class="text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-gray-700">
+                        <th class="text-left py-2">Rank</th>
+                        <th class="text-left py-2">Name</th>
+                        <th class="text-left py-2">Grade</th>
+                        <th class="text-left py-2">Section</th>
+                        <th class="text-right py-2">WPM</th>
+                        <th class="text-right py-2">Accuracy</th>
+                    </tr>
+                </thead>
+                <tbody id="leaderboardBody">
+                    <!-- Leaderboard data will be inserted here -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <!-- Results Modal -->
+    <div id="resultsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-2xl">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Your Results 🎉</h2>
+                <button id="closeResultsBtn" class="text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="grid grid-cols-2 gap-4 mb-6">
+                <div class="bg-gray-700 p-4 rounded-lg">
+                    <div class="text-gray-400">Words Per Minute</div>
+                    <div id="resultWPM" class="text-3xl font-bold">0</div>
+                </div>
+                <div class="bg-gray-700 p-4 rounded-lg">
+                    <div class="text-gray-400">Accuracy</div>
+                    <div id="resultAccuracy" class="text-3xl font-bold">0%</div>
+                </div>
+                <div class="bg-gray-700 p-4 rounded-lg">
+                    <div class="text-gray-400">Time</div>
+                    <div id="resultTime" class="text-3xl font-bold">00:00</div>
+                </div>
+                <div class="bg-gray-700 p-4 rounded-lg">
+                    <div class="text-gray-400">Characters</div>
+                    <div id="resultChars" class="text-3xl font-bold">0</div>
+                </div>
+            </div>
+            <button id="viewCodeBtn" class="w-full bg-blue-600 py-3 rounded-lg hover:bg-blue-700 transition">
+                View Your Code
+            </button>
+        </div>
+    </div>
+    <!-- Code Display Modal -->
+    <div id="codeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-gray-800 rounded-xl p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Your Code 💻</h2>
+                <button id="closeCodeBtn" class="text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <pre id="displayedCode" class="bg-gray-900 p-4 rounded-lg overflow-x-auto"></pre>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Sample code snippets for each language
+        const codeSnippets = {
+            html: {
+                easy: `<div class="container">
+    <h1>Welcome to my website</h1>
+    <p>This is a paragraph of text</p>
+    <button class="btn">Click me</button>
+</div>`,
+                medium: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <ul class="nav-links">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+</body>
+</html>`,
+                hard: `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Form</title>
+    <style>
+        .form-container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f9f9f9;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        input, select, textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            background: #4CAF50;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="form-container">
+        <h1>Contact Us</h1>
+        <form id="contactForm">
+            <div class="form-group">
+                <label for="name">Full Name:</label>
+                <input type="text" id="name" name="name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="form-group">
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+    </div>
+    <script>
+        document.getElementById('contactForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            alert('Form submitted successfully!');
+            this.reset();
+        });
+    </script>
+</body>
+</html>`
+            },
+            css: {
+                easy: `body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+}
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}`,
+                medium: `/* Button Styles */
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.btn-primary {
+    background-color: #3498db;
+    color: white;
+    border: 2px solid #3498db;
+}
+.btn-primary:hover {
+    background-color: #2980b9;
+    border-color: #2980b9;
+}
+.btn-outline {
+    background-color: transparent;
+    border: 2px solid #3498db;
+    color: #3498db;
+}
+.btn-outline:hover {
+    background-color: #3498db;
+    color: white;
+}`,
+                hard: `/* Responsive Grid Layout */
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+.card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+.card-header {
+    padding: 15px;
+    background: #3498db;
+    color: white;
+    font-weight: bold;
+}
+.card-body {
+    padding: 15px;
+}
+@media (max-width: 768px) {
+    .grid-container {
+        grid-template-columns: 1fr;
+    }
+}
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.card {
+    animation: fadeIn 0.5s ease forwards;
+}
+/* CSS Variables */
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --text-color: #333;
+    --light-gray: #f5f5f5;
+}
+body {
+    color: var(--text-color);
+    background: var(--light-gray);
+}
+.btn-primary {
+    background-color: var(--primary-color);
+}`
+            },
+            javascript: {
+                easy: `// Function to greet user
+function greet(name) {
+    return 'Hello, ' + name + '!';
+}
+// Calculate area of a rectangle
+function calculateArea(width, height) {
+    return width * height;
+}
+// Call functions
+console.log(greet('Alice'));
+console.log('Area:', calculateArea(5, 3));`,
+                medium: `// DOM Manipulation
+document.addEventListener('DOMContentLoaded', function() {
+    const button = document.getElementById('myButton');
+    const output = document.getElementById('output');
+    button.addEventListener('click', function() {
+        const name = prompt('What is your name?');
+        if (name) {
+            output.textContent = 'Hello, ' + name + '!';
+        }
+    });
+});
+// Fetch API example
+async function fetchData(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        console.log(data);
+        return data;
+    } catch (error) {
+        console.error('Error:', error);
+    }
+}
+// Example usage
+fetchData('https://api.example.com/data');`,
+                hard: `// Todo List Application
+class TodoApp {
+    constructor() {
+        this.todos = [];
+        this.initElements();
+        this.bindEvents();
+        this.loadFromLocalStorage();
+        this.render();
+    }
+    initElements() {
+        this.todoForm = document.getElementById('todoForm');
+        this.todoInput = document.getElementById('todoInput');
+        this.todoList = document.getElementById('todoList');
+    }
+    bindEvents() {
+        this.todoForm.addEventListener('submit', (e) => this.handleSubmit(e));
+        this.todoList.addEventListener('click', (e) => this.handleListClick(e));
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        const todoText = this.todoInput.value.trim();
+        if (todoText) {
+            this.addTodo(todoText);
+            this.todoInput.value = '';
+        }
+    }
+    handleListClick(e) {
+        if (e.target.classList.contains('delete-btn')) {
+            const id = parseInt(e.target.parentElement.dataset.id);
+            this.removeTodo(id);
+        } else if (e.target.tagName === 'LI') {
+            const id = parseInt(e.target.dataset.id);
+            this.toggleTodo(id);
+        }
+    }
+    addTodo(text) {
+        const newTodo = {
+            id: Date.now(),
+            text,
+            completed: false
+        };
+        this.todos.push(newTodo);
+        this.saveToLocalStorage();
+        this.render();
+    }
+    removeTodo(id) {
+        this.todos = this.todos.filter(todo => todo.id !== id);
+        this.saveToLocalStorage();
+        this.render();
+    }
+    toggleTodo(id) {
+        this.todos = this.todos.map(todo =>
+            todo.id === id ? {...todo, completed: !todo.completed} : todo
+        );
+        this.saveToLocalStorage();
+        this.render();
+    }
+    saveToLocalStorage() {
+        localStorage.setItem('todos', JSON.stringify(this.todos));
+    }
+    loadFromLocalStorage() {
+        const savedTodos = localStorage.getItem('todos');
+        if (savedTodos) {
+            this.todos = JSON.parse(savedTodos);
+        }
+    }
+    render() {
+        this.todoList.innerHTML = this.todos.map(todo => \`
+            <li data-id="\${todo.id}" class="\${todo.completed ? 'completed' : ''}">
+                \${todo.text}
+                <button class="delete-btn">×</button>
+            </li>
+        \`).join('');
+    }
+}
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    new TodoApp();
+});`
+            }
+        };
+        // DOM elements
+        const codeDisplay = document.getElementById('codeDisplay');
+        const typingArea = document.getElementById('typingArea');
+        const timerDisplay = document.getElementById('timerDisplay');
+        const startTestBtn = document.getElementById('startTestBtn');
+        const submitTestBtn = document.getElementById('submitTestBtn');
+        const progressFill = document.getElementById('progressFill');
+        const wpmDisplay = document.getElementById('wpmDisplay');
+        const accuracyDisplay = document.getElementById('accuracyDisplay');
+        const leaderboardBtn = document.getElementById('leaderboardBtn');
+        const leaderboardModal = document.getElementById('leaderboardModal');
+        const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn');
+        const leaderboardBody = document.getElementById('leaderboardBody');
+        const resultsModal = document.getElementById('resultsModal');
+        const closeResultsBtn = document.getElementById('closeResultsBtn');
+        const resultWPM = document.getElementById('resultWPM');
+        const resultAccuracy = document.getElementById('resultAccuracy');
+        const resultTime = document.getElementById('resultTime');
+        const resultChars = document.getElementById('resultChars');
+        const viewCodeBtn = document.getElementById('viewCodeBtn');
+        const codeModal = document.getElementById('codeModal');
+        const displayedCode = document.getElementById('displayedCode');
+        const closeCodeBtn = document.getElementById('closeCodeBtn');
+        // Test state variables
+        let selectedLanguage = 'html';
+        let selectedTime = 1;
+        let selectedDifficulty = 'easy';
+        let timerInterval;
+        let startTime;
+        let endTime;
+        let correctChars = 0;
+        let totalChars = 0;
+        let testActive = false;
+        let currentCode = '';
+        let userTypedCode = '';
+        // Set up language buttons
+        document.querySelectorAll('.language-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.language-btn').forEach(b => {
+                    b.classList.remove('bg-blue-700');
+                    b.classList.add('bg-blue-600');
+                });
+                btn.classList.remove('bg-blue-600');
+                btn.classList.add('bg-blue-700');
+                selectedLanguage = btn.dataset.language;
+            });
+        });
+        // Set up time buttons
+        document.querySelectorAll('.time-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.time-btn').forEach(b => {
+                    b.classList.remove('bg-gray-600');
+                    b.classList.add('bg-gray-700');
+                });
+                btn.classList.remove('bg-gray-700');
+                btn.classList.add('bg-gray-600');
+                selectedTime = parseInt(btn.dataset.time);
+            });
+        });
+        // Set up difficulty buttons
+        document.querySelectorAll('.difficulty-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.difficulty-btn').forEach(b => {
+                    if (b.dataset.difficulty === 'easy') {
+                        b.classList.remove('bg-green-700');
+                        b.classList.add('bg-green-600');
+                    } else if (b.dataset.difficulty === 'medium') {
+                        b.classList.remove('bg-yellow-700');
+                        b.classList.add('bg-yellow-600');
+                    } else {
+                        b.classList.remove('bg-red-700');
+                        b.classList.add('bg-red-600');
+                    }
+                });
+                if (btn.dataset.difficulty === 'easy') {
+                    btn.classList.remove('bg-green-600');
+                    btn.classList.add('bg-green-700');
+                } else if (btn.dataset.difficulty === 'medium') {
+                    btn.classList.remove('bg-yellow-600');
+                    btn.classList.add('bg-yellow-700');
+                } else {
+                    btn.classList.remove('bg-red-600');
+                    btn.classList.add('bg-red-700');
+                }
+                selectedDifficulty = btn.dataset.difficulty;
+            });
+        });
+        // Start test button
+        startTestBtn.addEventListener('click', startTest);
+        // Submit test button
+        submitTestBtn.addEventListener('click', endTest);
+        // Typing area events
+        typingArea.addEventListener('input', updateTypingStats);
+        // Leaderboard modal
+        leaderboardBtn.addEventListener('click', showLeaderboard);
+        closeLeaderboardBtn.addEventListener('click', () => {
+            leaderboardModal.classList.add('hidden');
+        });
+        // Results modal
+        closeResultsBtn.addEventListener('click', () => {
+            resultsModal.classList.add('hidden');
+        });
+        // View code button
+        viewCodeBtn.addEventListener('click', () => {
+            resultsModal.classList.add('hidden');
+            displayedCode.textContent = userTypedCode;
+            codeModal.classList.remove('hidden');
+        });
+        // Close code modal
+        closeCodeBtn.addEventListener('click', () => {
+            codeModal.classList.add('hidden');
+        });
+        // Format time as MM:SS
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        // Start the typing test
+        function startTest() {
+            // Get the code to type
+            currentCode = codeSnippets[selectedLanguage][selectedDifficulty];
+            codeDisplay.innerHTML = currentCode
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/\n/g, '<br>')
+                .replace(/ /g, '&nbsp;');
+            // Reset stats
+            correctChars = 0;
+            totalChars = 0;
+            testActive = true;
+            typingArea.disabled = false;
+            typingArea.value = '';
+            typingArea.focus();
+            progressFill.style.width = '0%';
+            wpmDisplay.textContent = 'WPM: 0';
+            accuracyDisplay.textContent = 'Accuracy: 0%';
+            // Start timer
+            const totalSeconds = selectedTime * 60;
+            let secondsLeft = totalSeconds;
+            timerDisplay.textContent = formatTime(secondsLeft);
+            startTime = new Date();
+            timerInterval = setInterval(() => {
+                secondsLeft--;
+                timerDisplay.textContent = formatTime(secondsLeft);
+                if (secondsLeft <= 0) {
+                    clearInterval(timerInterval);
+                    timerDisplay.textContent = "00:00";
+                    // Timer ends but test continues until all code is typed
+                }
+            }, 1000);
+            // Update UI
+            startTestBtn.disabled = true;
+            submitTestBtn.disabled = false;
+        }
+        // Update typing statistics
+        function updateTypingStats() {
+            if (!testActive) return;
+            userTypedCode = typingArea.value;
+            totalChars = userTypedCode.length;
+            // Calculate correct characters
+            let correct = 0;
+            for (let i = 0; i < totalChars; i++) {
+                if (i < currentCode.length && userTypedCode[i] === currentCode[i]) {
+                    correct++;
+                }
+            }
+            correctChars = correct;
+            // Calculate progress
+            const progress = Math.min((totalChars / currentCode.length) * 100, 100);
+            progressFill.style.width = `${progress}%`;
+            // Calculate accuracy
+            const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
+            accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;
+            // Calculate WPM (assuming 5 chars = 1 word)
+            const timeElapsed = (new Date() - startTime) / 1000 / 60; // in minutes
+            const wpm = timeElapsed > 0 ? Math.round((correctChars / 5) / timeElapsed) : 0;
+            wpmDisplay.textContent = `WPM: ${wpm}`;
+            // Check if all code is typed
+            if (totalChars >= currentCode.length) {
+                endTest();
+            }
+        }
+        // End the typing test
+        function endTest() {
+            if (!testActive) return;
+            testActive = false;
+            clearInterval(timerInterval);
+            endTime = new Date();
+            typingArea.disabled = true;
+            submitTestBtn.disabled = true;
+            startTestBtn.disabled = false;
+            // Calculate final stats
+            const timeElapsed = (endTime - startTime) / 1000;
+            const wpm = Math.round((correctChars / 5) / (timeElapsed / 60));
+            const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
+            // Show results
+            resultWPM.textContent = wpm;
+            resultAccuracy.textContent = `${accuracy}%`;
+            resultTime.textContent = formatTime(Math.round(timeElapsed));
+            resultChars.textContent = totalChars;
+            resultsModal.classList.remove('hidden');
+            // Save to leaderboard
+            saveToLeaderboard(wpm, accuracy);
+        }
+        // Show leaderboard
+        function showLeaderboard() {
+            leaderboardBody.innerHTML = '';
+            // Get leaderboard from local storage
+            let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+            // Sort by WPM descending
+            leaderboard.sort((a, b) => b.wpm - a.wpm);
+            // Display top 10
+            const top10 = leaderboard.slice(0, 10);
+            top10.forEach((entry, index) => {
+                const row = document.createElement('tr');
+                row.className = 'border-b border-gray-700';
+                row.innerHTML = `
+                    <td class="py-2">${index + 1}</td>
+                    <td class="py-2">${entry.name}</td>
+                    <td class="py-2">${entry.gradeLevel}</td>
+                    <td class="py-2">${entry.section}</td>
+                    <td class="py-2 text-right">${entry.wpm}</td>
+                    <td class="py-2 text-right">${entry.accuracy}%</td>
+                `;
+                leaderboardBody.appendChild(row);
+            });
+            leaderboardModal.classList.remove('hidden');
+        }
+        // Save result to leaderboard
+        function saveToLeaderboard(wpm, accuracy) {
+            const userData = JSON.parse(localStorage.getItem('userData'));
+            if (!userData) return;
+            let leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
+            leaderboard.push({
+                name: userData.name,
+                gradeLevel: userData.gradeLevel,
+                section: userData.section,
+                wpm,
+                accuracy,
+                timestamp: new Date().toISOString()
+            });
+            localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
+        }
+    </script>
+</body>
+</html>