Spaces:

ItsJayKee
/

codeflow-typeracer

Running

App Files Files Community

ItsJayKee commited on Jan 12

Commit

0cb4699

verified ·

1 Parent(s): 0270f27

manually add the snippets to the code, to make it work in my Visual Studio Code

Browse files

Files changed (1) hide show

script.js +115 -100

script.js CHANGED Viewed

@@ -5,97 +5,133 @@ const codeSnippets = {
 `<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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();`
-],
     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;
-  }
 }`
-]
 };
 // Get all snippets as one array for "all languages" option
 function getAllSnippets() {
@@ -255,45 +291,24 @@ function endGame(isCompleted = false) {
         saveResults(language, wpm, accuracy, timeTaken);
     }
 }
-// Save results to database
 async function saveResults(language, wpm, accuracy, timeTaken) {
-    try {
-        const response = await fetch('db.php', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                language,
-                wpm,
-                accuracy,
-                time: timeTaken
-            })
-        });
-        const data = await response.json();
-        if (!data.success) {
-            console.error('Failed to save results:', data.error);
-        }
-    } catch (error) {
-        console.error('Error saving results:', error);
-    }
 }
-// Fetch leaderboard data
 async function fetchLeaderboard() {
-    try {
-        const response = await fetch('db.php');
-        const data = await response.json();
-        if (data.success) {
-            return data.data;
-        }
-        return [];
-    } catch (error) {
-        console.error('Error fetching leaderboard:', error);
-        return [];
-    }
 }
 // Event listeners
 inputField.addEventListener('input', updateDisplay);

 `<!DOCTYPE html>
 <html lang="en">
 <head>
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <h1>Hello World</h1>
+  <script src="script.js"></script>
+</body>
+</html>`,
+`<div class="container">
+  <header class="header">
     <nav>
+      <ul class="nav-list">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
       </ul>
     </nav>
   </header>
+  <main id="main-content"></main>
+  <footer>&copy; ${new Date().getFullYear()}</footer>
+</div>`,
+`<form id="login-form">
+  <div class="form-group">
+    <label for="email">Email</label>
+    <input type="email" id="email" required>
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" id="password" required>
+  </div>
+  <button type="submit">Login</button>
+</form>`
+    ],
     javascript: [
+`function calculateTotal(items) {
+  return items.reduce((total, item) => {
+    return total + (item.price * item.quantity);
+  }, 0);
+}
+const cart = [
+  { name: 'Shirt', price: 25, quantity: 2 },
+  { name: 'Pants', price: 40, quantity: 1 }
+];
+const total = calculateTotal(cart);
+console.log('Total:', total);`,
+`class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
   }
+  greet() {
+    console.log(\`Hello, my name is \${this.name}\`);
   }
 }
+const person1 = new Person('Alice', 30);
+person1.greet();`,
+`const fetchData = async () => {
+  try {
+    const response = await fetch('api/data');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error:', error);
+    return null;
+  }
+};`
+    ],
     css: [
+`.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
+.header {
+  background: #333;
+  color: white;
+  padding: 1rem;
 }
+.nav-list {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+}`,
+`body {
+  font-family: 'Arial', sans-serif;
+  line-height: 1.6;
+  color: #333;
 }
+h1, h2, h3 {
+  color: #222;
+  margin-bottom: 1rem;
 }
+a {
+  color: #0066cc;
+  text-decoration: none;
+}`,
+`@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: fadeIn 0.3s ease;
 }`
+    ]
 };
 // Get all snippets as one array for "all languages" option
 function getAllSnippets() {
         saveResults(language, wpm, accuracy, timeTaken);
     }
 }
+// Mock save results function for local testing
 async function saveResults(language, wpm, accuracy, timeTaken) {
+    console.log('Results would be saved:', {
+        language,
+        wpm,
+        accuracy,
+        time: timeTaken
+    });
+    return { success: true };
 }
+// Mock leaderboard data for local testing
 async function fetchLeaderboard() {
+    return [
+        { language: 'javascript', wpm: 85, accuracy: 98, time_taken: 120, created_at: new Date() },
+        { language: 'html', wpm: 75, accuracy: 95, time_taken: 180, created_at: new Date() },
+        { language: 'css', wpm: 65, accuracy: 92, time_taken: 150, created_at: new Date() }
+    ];
 }
 // Event listeners
 inputField.addEventListener('input', updateDisplay);