Skip to main content
Fast Fingers Logo

ADVERTISEMENT

320x100

JavaScript Practice

Modern JS, not just alert() calls. Practice the async, React, and Node patterns you use in actual projects.

Async / Await

An async function with try/catch. The await keyword and error destructuring come up constantly.

Part 1 of 1
async function fetchUserData(userId) { try { const response = await fetch(`/api/users/${userId}`); if (!response.ok) throw new Error(response.statusText); return await response.json(); } catch (err) { console.error('Fetch failed:', err); return null; } }
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 28 WPM
▼
⏱️ Start typing...

React Component

A functional React component with props destructuring and a click handler. JSX syntax is its own muscle memory.

Part 1 of 1
function UserCard({ name, email, avatarUrl, onEdit }) { return ( <div className="card"> <img src={avatarUrl} alt={name} /> <h2>{name}</h2> <p>{email}</p> <button onClick={() => onEdit(email)}>Edit</button> </div> ); }
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 28 WPM
▼
⏱️ Start typing...

Express Route Handler

A Node.js Express route with middleware, async handling, and JSON response. Real backend code.

Part 1 of 1
router.get('/users/:id', authenticate, async (req, res) => { const user = await User.findById(req.params.id).populate('roles'); if (!user) return res.status(404).json({ error: 'User not found' }); res.json({ data: user, status: 'ok' }); });
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 28 WPM
▼
⏱️ Start typing...

ES6 Destructuring

Object and array destructuring with defaults and renaming. The syntax is dense but very common.

Part 1 of 1
const { id, name = 'Anonymous', address: { city, zip } = {}, roles: [primaryRole] = [] } = userProfile; const [first, ...rest] = sortedItems;
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 30 WPM
▼
⏱️ Start typing...

Array Methods

Chained map, filter, and reduce. This pattern shows up in almost every JS codebase.

Part 1 of 1
const summary = orders.filter(o => o.status === 'completed').map(o => ({ id: o.id, total: o.items.reduce((sum, item) => sum + item.price * item.qty, 0) })).sort((a, b) => b.total - a.total);
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 28 WPM
▼
⏱️ Start typing...

Promise Chain

Old-school .then()/.catch() promise chaining. You still see this in legacy code and older packages.

Part 1 of 1
fetch('/api/config').then(res => res.json()).then(config => { localStorage.setItem('config', JSON.stringify(config)); return config; }).catch(err => { console.warn('Config load failed, using defaults', err); return defaultConfig; });
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 30 WPM
▼
⏱️ Start typing...

Event Handler

A form submit handler with preventDefault, FormData, and fetch. Standard frontend form code.

Part 1 of 1
form.addEventListener('submit', async (e) => { e.preventDefault(); const data = Object.fromEntries(new FormData(form)); submitBtn.disabled = true; await saveSettings(data); submitBtn.disabled = false; });
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 30 WPM
▼
⏱️ Start typing...

Template Literals

Template literals with multi-line content and embedded expressions. Mind the backtick key.

Part 1 of 1
const query = `SELECT u.id, u.name, COUNT(o.id) AS order_count FROM users u LEFT JOIN orders o ON o.user_id = u.id WHERE u.created_at > '${startDate}' GROUP BY u.id LIMIT ${pageSize} OFFSET ${page * pageSize}`;
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 30 WPM
▼
⏱️ Start typing...

ES6 Class

A class with constructor, getter, and method. Private fields with # are the newer part to nail.

Part 1 of 1
class EventBus { #listeners = new Map(); on(event, fn) { if (!this.#listeners.has(event)) this.#listeners.set(event, []); this.#listeners.get(event).push(fn); } emit(event, data) { this.#listeners.get(event)?.forEach(fn => fn(data)); } }
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 28 WPM
▼
⏱️ Start typing...

Import / Export

Named and default exports with re-exports. Getting module syntax right without thinking about it is a real skill.

Part 1 of 1
import React, { useState, useEffect, useCallback } from 'react'; import { formatDate, parseISO } from 'date-fns'; export { default as UserCard } from './UserCard'; export * from './utils';
WPM 0
Accuracy 100%
Progress 0%
Streak 0 🔥
Speed Target: 32 WPM
▼
⏱️ Start typing...
Back to Practice

ADVERTISEMENT

336×280