Spaces:

ItsJayKee
/

codeflow-typeracer

Running

App Files Files Community

ItsJayKee commited on Jan 12

Commit

993c9ec

verified ·

1 Parent(s): 17ece03

now add the code snippets for the test

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +46 -0
components/header.js +46 -0
index.html +79 -19
script.js +361 -0
style.css +34 -19

README.md CHANGED Viewed

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

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

components/footer.js ADDED Viewed

	@@ -0,0 +1,46 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: rgba(17, 24, 39, 0.8);
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .social-link {
+          transition: all 0.2s;
+        }
+        .social-link:hover {
+          color: #818cf8;
+          transform: translateY(-2px);
+        }
+      </style>
+      <footer class="py-8 px-6 mt-12">
+        <div class="container mx-auto">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-6 md:mb-0">
+              <h3 class="text-xl font-bold mb-2 text-indigo-400">CodeFlow</h3>
+              <p class="text-gray-400">Improve your coding speed and accuracy</p>
+            </div>
+            <div class="flex space-x-6">
+              <a href="#" class="social-link" aria-label="Twitter">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="#" class="social-link" aria-label="GitHub">
+                <i data-feather="github"></i>
+              </a>
+              <a href="#" class="social-link" aria-label="LinkedIn">
+                <i data-feather="linkedin"></i>
+              </a>
+            </div>
+          </div>
+          <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+            &copy; ${new Date().getFullYear()} CodeFlow Typing Challenge. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,46 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        header {
+          background-color: rgba(17, 24, 39, 0.8);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .container {
+          max-width: 1200px;
+        }
+        .logo {
+          color: #818cf8;
+          font-weight: 700;
+          font-size: 1.5rem;
+        }
+        .nav-link {
+          transition: color 0.2s;
+        }
+        .nav-link:hover {
+          color: #818cf8;
+        }
+      </style>
+      <header class="py-4 px-6">
+        <div class="container mx-auto flex justify-between items-center">
+          <a href="/" class="logo flex items-center">
+            <i data-feather="code" class="mr-2"></i>
+            CodeFlow
+          </a>
+          <nav class="hidden md:flex space-x-6">
+            <a href="#" class="nav-link">Home</a>
+            <a href="#" class="nav-link">About</a>
+            <a href="#" class="nav-link">Leaderboard</a>
+          </nav>
+          <button class="md:hidden">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </header>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,79 @@
-<!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>CodeFlow Typing 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">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8 max-w-4xl">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold mb-2 text-indigo-400">CodeFlow Typing Challenge</h1>
+            <p class="text-lg text-gray-400">Test your coding language typing speed & accuracy</p>
+        </div>
+        <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+            <div class="flex justify-between items-center mb-6">
+                <div class="flex space-x-4">
+                    <div class="bg-gray-700 px-4 py-2 rounded-lg">
+                        <span class="text-indigo-300">Time:</span>
+                        <span id="timer" class="ml-2">60s</span>
+                    </div>
+                    <div class="bg-gray-700 px-4 py-2 rounded-lg">
+                        <span class="text-indigo-300">Speed:</span>
+                        <span id="speed" class="ml-2">0 WPM</span>
+                    </div>
+                </div>
+                <button id="reset-btn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
+                    <i data-feather="refresh-cw" class="inline mr-2"></i>Reset
+                </button>
+            </div>
+            <div id="typing-area" class="bg-gray-900 rounded-lg p-6 mb-6 h-48 overflow-y-auto">
+                <div id="code-display" class="font-mono text-lg leading-relaxed"></div>
+            </div>
+            <textarea id="input-field" class="w-full bg-gray-900 border-2 border-gray-700 rounded-lg p-4 font-mono text-lg focus:border-indigo-500 focus:outline-none" rows="6" placeholder="Start typing here..."></textarea>
+        </div>
+        <div id="results" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg">
+            <h2 class="text-2xl font-bold mb-6 text-center text-indigo-400">Your Results</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gray-900 p-4 rounded-lg text-center">
+                    <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-wpm">0</div>
+                    <div class="text-gray-400">Words Per Minute</div>
+                </div>
+                <div class="bg-gray-900 p-4 rounded-lg text-center">
+                    <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-accuracy">0%</div>
+                    <div class="text-gray-400">Accuracy</div>
+                </div>
+                <div class="bg-gray-900 p-4 rounded-lg text-center">
+                    <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-time">0s</div>
+                    <div class="text-gray-400">Time Taken</div>
+                </div>
+            </div>
+            <div class="mt-8 text-center">
+                <button id="try-again-btn" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
+                    <i data-feather="repeat" class="inline mr-2"></i>Try Again
+                </button>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,361 @@

+// Code snippets for typing test
+const codeSnippets = [
+    // HTML
+    `<!DOCTYPE html>
+<html>
+<head>
+    <title>My Portfolio</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="home">
+            <h1>Welcome to My Portfolio</h1>
+            <p>I build amazing web experiences</p>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; ${new Date().getFullYear()}</p>
+    </footer>
+</body>
+</html>`,
+    // JavaScript
+    `class User {
+    constructor(name, email) {
+        this.name = name;
+        this.email = email;
+        this.score = 0;
+    }
+    login() {
+        console.log(this.name, 'just logged in');
+        return this;
+    }
+    logout() {
+        console.log(this.name, 'just logged out');
+        return this;
+    }
+    updateScore() {
+        this.score++;
+        console.log(this.name, 'score is now', this.score);
+        return this;
+    }
+}
+const user1 = new User('Alice', 'alice@example.com');
+user1.login().updateScore().updateScore().logout();`,
+    // React Component
+    `import React, { useState, useEffect } from 'react';
+function Counter() {
+    const [count, setCount] = useState(0);
+    const [isActive, setIsActive] = useState(false);
+    useEffect(() => {
+        let interval = null;
+        if (isActive) {
+            interval = setInterval(() => {
+                setCount(prev => prev + 1);
+            }, 1000);
+        }
+        return () => clearInterval(interval);
+    }, [isActive]);
+    return (
+        <div className="counter">
+            <h2>{count}</h2>
+            <button onClick={() => setIsActive(!isActive)}>
+                {isActive ? 'Pause' : 'Start'}
+            </button>
+            <button onClick={() => setCount(0)}>Reset</button>
+        </div>
+    );
+}
+export default Counter;`,
+    // Python
+    `def fibonacci(n):
+    """Return the first n Fibonacci numbers."""
+    fib_sequence = []
+    a, b = 0, 1
+    for _ in range(n):
+        fib_sequence.append(a)
+        a, b = b, a + b
+    return fib_sequence
+def is_prime(num):
+    """Check if a number is prime."""
+    if num < 2:
+        return False
+    for i in range(2, int(num**0.5) + 1):
+        if num % i == 0:
+            return False
+    return True
+if __name__ == "__main__":
+    print(fibonacci(10))
+    print([x for x in range(20) if is_prime(x)])`,
+    // CSS
+    `.card-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+    padding: 2rem;
+}
+.card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
+.card:hover {
+    transform: translateY(-5px);
+}
+.card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+}
+.card-content {
+    padding: 1.5rem;
+}
+@media (max-width: 768px) {
+    .card-container {
+        grid-template-columns: 1fr;
+    }
+}`,
+    // Node.js
+    `const express = require('express');
+const mongoose = require('mongoose');
+require('dotenv').config();
+const app = express();
+app.use(express.json());
+// Connect to MongoDB
+mongoose.connect(process.env.MONGODB_URI, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true
+})
+.then(() => console.log('Connected to MongoDB'))
+.catch(err => console.error('Connection error:', err));
+// Routes
+app.get('/', (req, res) => {
+    res.send('API is running');
+});
+// Error handling middleware
+app.use((err, req, res, next) => {
+    console.error(err.stack);
+    res.status(500).send('Something broke!');
+});
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => {
+    console.log(\`Server running on port \${PORT}\`);
+});`,
+    // SQL
+    `-- Create users table
+CREATE TABLE users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) NOT NULL UNIQUE,
+    email VARCHAR(100) NOT NULL UNIQUE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+-- Insert sample data
+INSERT INTO users (username, email) VALUES
+('johndoe', 'john@example.com'),
+('janedoe', 'jane@example.com');
+-- Query with join
+SELECT
+    p.id,
+    p.title,
+    p.content,
+    u.username AS author,
+    COUNT(c.id) AS comment_count
+FROM
+    posts p
+JOIN
+    users u ON p.user_id = u.id
+LEFT JOIN
+    comments c ON p.id = c.post_id
+GROUP BY
+    p.id
+ORDER BY
+    p.created_at DESC
+LIMIT 10;`
+];
+// DOM elements
+const codeDisplay = document.getElementById('code-display');
+const inputField = document.getElementById('input-field');
+const timerElement = document.getElementById('timer');
+const speedElement = document.getElementById('speed');
+const resetBtn = document.getElementById('reset-btn');
+const resultsSection = document.getElementById('results');
+const finalWPM = document.getElementById('final-wpm');
+const finalAccuracy = document.getElementById('final-accuracy');
+const finalTime = document.getElementById('final-time');
+const tryAgainBtn = document.getElementById('try-again-btn');
+// Game variables
+let timeLeft = 60;
+let timer;
+let isPlaying = false;
+let startTime;
+let endTime;
+let correctChars = 0;
+let totalChars = 0;
+// Initialize the game
+function initGame() {
+    // Select a random code snippet
+    const randomSnippet = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
+    totalChars = randomSnippet.length;
+    // Display the code with spans for each character
+    codeDisplay.innerHTML = '';
+    randomSnippet.split('').forEach(char => {
+        const span = document.createElement('span');
+        span.textContent = char;
+        codeDisplay.appendChild(span);
+    });
+    // Highlight the first character
+    codeDisplay.children[0].classList.add('current');
+    // Reset game state
+    inputField.value = '';
+    inputField.disabled = false;
+    inputField.focus();
+    timeLeft = 60;
+    timerElement.textContent = `${timeLeft}s`;
+    correctChars = 0;
+    isPlaying = false;
+    resultsSection.classList.add('hidden');
+}
+// Start the game
+function startGame() {
+    if (isPlaying) return;
+    isPlaying = true;
+    startTime = new Date();
+    timer = setInterval(() => {
+        timeLeft--;
+        timerElement.textContent = `${timeLeft}s`;
+        if (timeLeft <= 0) {
+            endGame();
+        }
+    }, 1000);
+}
+// Update the display as user types
+function updateDisplay() {
+    const inputText = inputField.value;
+    const codeSpans = codeDisplay.children;
+    // Reset all spans
+    for (let i = 0; i < codeSpans.length; i++) {
+        codeSpans[i].className = '';
+    }
+    // Mark correct/incorrect characters
+    let allCorrect = true;
+    for (let i = 0; i < inputText.length; i++) {
+        if (i < codeSpans.length) {
+            if (inputText[i] === codeSpans[i].textContent) {
+                codeSpans[i].classList.add('correct');
+                if (i === inputText.length - 1) {
+                    codeSpans[i].classList.add('current');
+                }
+            } else {
+                codeSpans[i].classList.add('incorrect');
+                allCorrect = false;
+            }
+        }
+    }
+    // Highlight next character if all correct so far
+    if (allCorrect && inputText.length < codeSpans.length) {
+        codeSpans[inputText.length].classList.add('current');
+    }
+    // Calculate and display typing speed
+    if (isPlaying) {
+        const elapsedTime = (new Date() - startTime) / 60000; // in minutes
+        const wordsTyped = inputText.length / 5; // standard word length
+        const wpm = Math.round(wordsTyped / elapsedTime) || 0;
+        speedElement.textContent = `${wpm} WPM`;
+    }
+    // Count correct characters for accuracy
+    correctChars = 0;
+    for (let i = 0; i < inputText.length && i < codeSpans.length; i++) {
+        if (inputText[i] === codeSpans[i].textContent) {
+            correctChars++;
+        }
+    }
+    // End game if all characters are typed correctly
+    if (inputText.length === codeSpans.length && allCorrect) {
+        endGame();
+    }
+}
+// End the game
+function endGame() {
+    clearInterval(timer);
+    isPlaying = false;
+    inputField.disabled = true;
+    endTime = new Date();
+    // Calculate results
+    const timeTaken = Math.max(1, 60 - timeLeft); // at least 1 second to avoid division by zero
+    const wordsTyped = correctChars / 5;
+    const wpm = Math.round((wordsTyped / timeTaken) * 60);
+    const accuracy = Math.round((correctChars / totalChars) * 100);
+    // Display results
+    finalWPM.textContent = wpm;
+    finalAccuracy.textContent = `${accuracy}%`;
+    finalTime.textContent = `${timeTaken}s`;
+    resultsSection.classList.remove('hidden');
+}
+// Event listeners
+inputField.addEventListener('input', updateDisplay);
+inputField.addEventListener('focus', startGame);
+resetBtn.addEventListener('click', initGame);
+tryAgainBtn.addEventListener('click', initGame);
+// Initialize the game on page load
+document.addEventListener('DOMContentLoaded', initGame);

style.css CHANGED Viewed

@@ -1,28 +1,43 @@
-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;
 }

+/* Custom styles for code highlighting */
+.correct {
+    color: #a3e635; /* lime-400 */
 }
+.incorrect {
+    color: #f87171; /* red-400 */
+    text-decoration: underline;
 }
+.current {
+    background-color: rgba(129, 140, 248, 0.3); /* indigo-400 with opacity */
+    border-left: 2px solid #818cf8; /* indigo-400 */
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #1f2937; /* gray-800 */
 }
+::-webkit-scrollbar-thumb {
+    background: #4b5563; /* gray-600 */
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280; /* gray-500 */
+}
+/* Animation for current character */
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+.current {
+    animation: blink 1s infinite;
+}