Hugging Face's logo

Spaces:
ItsJayKee
/
codeflow-typeracer
Running

App Files Community
ItsJayKee commited on
Commit
2ff6be1
·
verified ·
1 Parent(s): d4b0200

for example the snippet is in this form without spaces

Browse files

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();

make the form of the paragraph like this example here instead
<!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>

Files changed (1) hide show
  1. script.js +61 -61
script.js CHANGED
@@ -3,99 +3,99 @@
3
  const codeSnippets = {
4
  html: [
5
  `<!DOCTYPE html>
6
- <html>
7
  <head>
8
- <title>My Portfolio</title>
9
- <link rel="stylesheet" href="styles.css">
 
 
10
  </head>
11
  <body>
12
- <header>
13
- <nav>
14
- <ul>
15
- <li><a href="#home">Home</a></li>
16
- <li><a href="#projects">Projects</a></li>
17
- <li><a href="#contact">Contact</a></li>
18
- </ul>
19
- </nav>
20
- </header>
21
- <main>
22
- <section id="home">
23
- <h1>Welcome to My Portfolio</h1>
24
- <p>I build amazing web experiences</p>
25
- </section>
26
- </main>
27
- <footer>
28
- <p>&copy; ${new Date().getFullYear()}</p>
29
- </footer>
30
  </body>
31
  </html>`
32
- ],
33
-
34
  javascript: [
35
  `class User {
36
- constructor(name, email) {
37
- this.name = name;
38
- this.email = email;
39
- this.score = 0;
40
- }
41
 
42
- login() {
43
- console.log(this.name, 'just logged in');
44
- return this;
45
- }
46
 
47
- logout() {
48
- console.log(this.name, 'just logged out');
49
- return this;
50
- }
51
 
52
- updateScore() {
53
- this.score++;
54
- console.log(this.name, 'score is now', this.score);
55
- return this;
56
- }
57
  }
58
 
59
  const user1 = new User('Alice', 'alice@example.com');
60
  user1.login().updateScore().updateScore().logout();`
61
- ],
62
-
63
  css: [
64
  `.card-container {
65
- display: grid;
66
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
67
- gap: 2rem;
68
- padding: 2rem;
69
  }
70
 
71
  .card {
72
- background: white;
73
- border-radius: 8px;
74
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
75
- transition: transform 0.3s ease;
76
  }
77
 
78
  .card:hover {
79
- transform: translateY(-5px);
80
  }
81
 
82
  .card img {
83
- width: 100%;
84
- height: 200px;
85
- object-fit: cover;
86
- border-radius: 8px 8px 0 0;
87
  }
88
 
89
  .card-content {
90
- padding: 1.5rem;
91
  }
92
 
93
  @media (max-width: 768px) {
94
- .card-container {
95
- grid-template-columns: 1fr;
96
- }
97
  }`
98
- ]
99
  };
100
  // Get all snippets as one array for "all languages" option
101
  function getAllSnippets() {
 
3
  const codeSnippets = {
4
  html: [
5
  `<!DOCTYPE html>
6
+ <html lang="en">
7
  <head>
8
+ <meta charset="UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
+ <title>My Portfolio</title>
11
+ <link rel="stylesheet" href="styles.css">
12
  </head>
13
  <body>
14
+ <header>
15
+ <nav>
16
+ <ul>
17
+ <li><a href="#home">Home</a></li>
18
+ <li><a href="#projects">Projects</a></li>
19
+ <li><a href="#contact">Contact</a></li>
20
+ </ul>
21
+ </nav>
22
+ </header>
23
+ <main>
24
+ <section id="home">
25
+ <h1>Welcome to My Portfolio</h1>
26
+ <p>I build amazing web experiences</p>
27
+ </section>
28
+ </main>
29
+ <footer>
30
+ <p>&copy; ${new Date().getFullYear()}</p>
31
+ </footer>
32
  </body>
33
  </html>`
34
+ ],
 
35
  javascript: [
36
  `class User {
37
+ constructor(name, email) {
38
+ this.name = name;
39
+ this.email = email;
40
+ this.score = 0;
41
+ }
42
 
43
+ login() {
44
+ console.log(this.name, 'just logged in');
45
+ return this;
46
+ }
47
 
48
+ logout() {
49
+ console.log(this.name, 'just logged out');
50
+ return this;
51
+ }
52
 
53
+ updateScore() {
54
+ this.score++;
55
+ console.log(this.name, 'score is now', this.score);
56
+ return this;
57
+ }
58
  }
59
 
60
  const user1 = new User('Alice', 'alice@example.com');
61
  user1.login().updateScore().updateScore().logout();`
62
+ ],
 
63
  css: [
64
  `.card-container {
65
+ display: grid;
66
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
67
+ gap: 2rem;
68
+ padding: 2rem;
69
  }
70
 
71
  .card {
72
+ background: white;
73
+ border-radius: 8px;
74
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
75
+ transition: transform 0.3s ease;
76
  }
77
 
78
  .card:hover {
79
+ transform: translateY(-5px);
80
  }
81
 
82
  .card img {
83
+ width: 100%;
84
+ height: 200px;
85
+ object-fit: cover;
86
+ border-radius: 8px 8px 0 0;
87
  }
88
 
89
  .card-content {
90
+ padding: 1.5rem;
91
  }
92
 
93
  @media (max-width: 768px) {
94
+ .card-container {
95
+ grid-template-columns: 1fr;
96
+ }
97
  }`
98
+ ]
99
  };
100
  // Get all snippets as one array for "all languages" option
101
  function getAllSnippets() {