Practice Code Typing – SkillsTyping

Choose your language:

ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:

Ready

Exercise Algorithm Area

Correct typos to continue.

1function reverseString(str: string): string {
2let reversed = '';
3for (let i = str.length - 1; i >= 0; i--) {
4reversed += str[i];
5}
6return reversed;
7}

Algorithm description viewbox

Basic String Reversal

Algorithm description:

This function reverses a given string. It's a common introductory programming problem used to practice string manipulation and loop control. It can be applied in scenarios like reversing user input for display or in simple text processing tasks.

Algorithm explanation:

The `reverseString` function iterates through the input string from the last character to the first. It initializes an empty string `reversed`. In each iteration, it appends the current character to the `reversed` string. This builds the reversed string character by character. The loop condition `i >= 0` ensures all characters are processed. The time complexity is O(n), where n is the length of the string, because each character is accessed and appended once. The space complexity is O(n) because a new string of the same length is created to store the reversed result.

Pseudocode:

function reverseString(inputString):
  initialize reversedString to empty
  loop from last character index down to 0:
    append current character to reversedString
  return reversedString

Library

Playable exercises

Choose Exercise

Filter, sort, and preview algorithm before you choose one to play.

Total 23 published items

Pages 3 pages available

Language

Sort by Direction

Browse published coding scenarios with filters, sorting, and pagination.

Published

TSX Web (tsx)

Implement Queue using Stacks

Difficulty: writing: 2; length: 7
Popularity: 0
Created: 2026-01-26 13:51 UTC
Published: 2026-01-26 16:38 UTC
Author: Damian

#queue #stack #data structure #implementation #FIFO

goal: Implement a Queue using two Stacks. input: Operations on a Queue: enqueue, dequeue, peek, isEmpty. output: The result of the requested queue operation.

Canonical Algorithm Text

class QueueUsingStacks { private stack1: number[]; // Primary stack for enqueue operations private stack2: number[]; // Secondary stack for dequeue operations constructor() { this.stack1 = []; this.stack2 = []; } /** * Adds an element to the back of the queue. * @param x The elem...

Description Algorithm

This implementation demonstrates how to create a Queue data structure using only two Stacks. A queue follows a First-In, First-Out (FIFO) principle, while stacks follow a Last-In, First-Out (LIFO) principle. This is a cl...

Explanation

The QueueUsingStacks class uses two stacks: `stack1` for enqueuing and `stack2` for dequeuing. When an element is enqueued, it's simply pushed onto `stack1`. When an element needs to be dequeued, the algorithm first checks if `stack2` is empty. If it is, all elements from `stack1` are popped and pushed onto `stack2`. This reversal process ensures that the elements in `stack2` are now in the correct FIFO order for dequeueing. The `dequeue` operation then pops from `stack2`. The `peek` operation works similarly to `dequeue` but does not remove the element. The `isEmpty` operation checks if both stacks are empty. The time complexity for `enqueue` is O(1). The `dequeue` and `peek` operations have an amortized time complexity of O(1), as each element is pushed and popped from each stack at most once over the lifetime of the queue. The space complexity is O(n), where n is the number of elements in the queue, due to the storage required by the two stacks.

Pseudocode

class QueueUsingStacks: stack1 = empty stack stack2 = empty stack method enqueue(x): push x onto stack1 method dequeue(): if stack2 is empty: while stack1 is not empty: pop element from stack1 push element onto stack2 if...

Published

TSX Web (tsx)

Typed Context: Theme Provider

Difficulty: writing: 6; length: 3
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#typed context #react #typescript #theme provider #global state

goal: Implement a type-safe theme provider using React Context. input: A `ThemeProvider` component wrapping child components. output: Provides theme context to descendant components.

Canonical Algorithm Text

import React, { createContext, useContext, useState, ReactNode } from 'react'; interface Theme { backgroundColor: string; textColor: string; fontSize: string; } interface ThemeContextType { theme: Theme; setTheme: (newTheme: Theme) => void; } // Default theme const defaultTheme:...

Description Algorithm

This code implements a type-safe theme provider using React Context API. It defines a `Theme` interface for theme properties (like background color, text color, font size) and a `ThemeContextType` interface for the conte...

Explanation

The `ThemeProvider` component utilizes React's `createContext` to establish a `ThemeContext`. The `ThemeContextType` interface ensures that the values provided to the context (`theme` and `setTheme`) are strictly typed. The `ThemeProvider` itself manages the `theme` state using `useState`, initialized with either `initialTheme` or a `defaultTheme`. The `setTheme` function updates this state. The `ThemeContext.Provider` makes the `theme` and `setTheme` available to all descendant components. The `useTheme` hook simplifies context consumption by calling `useContext(ThemeContext)`. It includes a crucial runtime check: if `context` is `undefined` (meaning `useTheme` was called outside of a `ThemeProvider`), it throws an error, preventing potential runtime issues. Time complexity for context provision and consumption is O(1) per render. Space complexity is O(1) for the context value itself.

Pseudocode

Define Theme interface with backgroundColor, textColor, fontSize. Define ThemeContextType interface with theme (Theme) and setTheme (function). Define defaultTheme object. Create ThemeContext using createContext, initial...

Published

TSX Web (tsx)

State-Machine UIs: Order Status Tracker

Difficulty: writing: 1; length: 5
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#state-machine ui #typescript #enum #state management #workflow

goal: Model an order status tracker using a state machine. input: The current order state and an action. output: The next order state.

Canonical Algorithm Text

type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled'; interface OrderState { status: OrderStatus; message: string; } // Initial state const initialOrderState: OrderState = { status: 'pending', message: 'Order placed, awaiting confirmation.' }; // Fu...

Description Algorithm

This code defines a simple state machine for tracking order statuses. The `OrderStatus` type is a union of possible states ('pending', 'processing', 'shipped', 'delivered', 'cancelled'). The `OrderState` interface holds...

Explanation

The order status tracker is implemented as a finite state machine. The `OrderStatus` type defines the discrete states an order can be in. The `transitionOrderStatus` function acts as the state transition logic. It uses a `switch` statement on the `currentState.status` and checks the `action` to determine the next state. Invalid transitions or actions from terminal states (like 'delivered' or 'cancelled') result in the current state being returned. This ensures that the order progresses logically through its lifecycle. The use of a union type for `OrderStatus` and explicit actions provides strong type safety. Time complexity is O(1) for state transitions as it's a simple switch statement. Space complexity is O(1) for storing the state.

Pseudocode

Define OrderStatus as a union of 'pending', 'processing', 'shipped', 'delivered', 'cancelled'. Define OrderState interface with status (OrderStatus) and message (string). Define initialOrderState with status 'pending'. C...

Published

TSX Web (tsx)

Type-Safe Forms: Zod Schema Validation

Difficulty: writing: 4; length: 10
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#schema-driven forms #zod #typescript #react #validation

goal: Build a type-safe form with Zod validation in a React component. input: User input through form fields. output: A validated form data object or displayed validation errors.

Canonical Algorithm Text

import { z, ZodError } from 'zod'; import React, { useState, ChangeEvent, FormEvent } from 'react'; // Define the form schema using Zod const userSchema = z.object({ firstName: z.string().min(1, 'First name is required'), lastName: z.string().min(1, 'Last name is required'), emai...

Description Algorithm

This React component implements a user registration form with robust client-side validation using Zod. It defines a schema for the form data, infers the TypeScript type from this schema, and uses this type for state mana...

Explanation

The `UserForm` component uses Zod to define a schema (`userSchema`) that dictates the structure and validation rules for form data. `z.infer<typeof userSchema>` creates a TypeScript type (`UserFormData`) that perfectly matches the schema, ensuring type safety for the `formData` state. The `handleChange` function updates the `formData` state, performing basic type coercion for numbers and checkboxes. The `handleSubmit` function calls `userSchema.parse(formData)`. If the data conforms to the schema, it proceeds; otherwise, Zod throws a `ZodError`. This error is caught, and its `errors` array is iterated to extract field names and messages, which are then stored in the `errors` state and displayed to the user. The `renderError` helper conditionally shows error messages. Time complexity for validation is proportional to the number of fields and rules in the schema, typically O(N) where N is the number of fields. Space complexity is O(M) where M is the number of fields for storing form data and errors.

Pseudocode

Import Zod and React hooks. Define userSchema using Zod for firstName, lastName, email, optional age, and termsAccepted. Infer UserFormData type from userSchema. Define FormErrors interface. Initialize formData state wit...

Published

TSX Web (tsx)

Discriminated Rendering: Event Handler Types

Difficulty: writing: 6; length: 2
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#discriminated unions #typescript #type safety #event handling #union types

goal: Implement type-safe event handling using discriminated unions. input: An `AppEvent` object, which can be one of several specific event types. output: A string describing the event that occurred.

Canonical Algorithm Text

type ClickEvent = { type: 'click'; x: number; y: number; }; type KeyPressEvent = { type: 'keypress'; key: string; }; type MouseMoveEvent = { type: 'mousemove'; deltaX: number; deltaY: number; }; type AppEvent = ClickEvent | KeyPressEvent | MouseMoveEvent; function handleEvent(eve...

Description Algorithm

This function demonstrates discriminated unions in TypeScript to handle different event types. Each event type has a common `type` property that acts as a discriminant. The `handleEvent` function takes an `AppEvent` (a u...

Explanation

The `handleEvent` function leverages discriminated unions to achieve type-safe handling of different event types. Each event type (`ClickEvent`, `KeyPressEvent`, `MouseMoveEvent`) has a literal `type` property that uniquely identifies it. The `AppEvent` type is a union of these specific event types. The `switch` statement on `event.type` allows TypeScript to narrow down the type of `event` within each `case` block, ensuring that only the correct properties (e.g., `x`, `y` for `click`) are accessed. The `default` case with `never` is a common pattern for ensuring exhaustiveness, causing a compile-time error if a new event type is added to the union but not handled in the switch. Time complexity is O(1) as it's a simple switch. Space complexity is O(1).

Pseudocode

Define ClickEvent type with type='click', x, y. Define KeyPressEvent type with type='keypress', key. Define MouseMoveEvent type with type='mousemove', deltaX, deltaY. Define AppEvent as a union of ClickEvent, KeyPressEve...

Published

TSX Web (tsx)

Typed Props: User Profile Card

Difficulty: writing: 5; length: 3
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#typed props #react #typescript #component #ui

goal: Implement a typed React component for displaying user profile information. input: A `UserProfileProps` object containing user details. output: A JSX element representing the user profile card.

Canonical Algorithm Text

interface UserAddress { street: string; city: string; zipCode: string; } interface UserProfileProps { userId: number; username: string; email?: string; // Optional email address?: UserAddress; // Optional address isActive: boolean; } function UserProfileCard(props: UserProfilePro...

Description Algorithm

This component renders a user's profile information. It takes a `UserProfileProps` object as input, which includes user ID, username, optional email, optional address, and an active status. The component dynamically rend...

Explanation

The `UserProfileCard` component utilizes TypeScript's interface-based typing for its props, ensuring that all expected data fields are present and correctly typed. Optional fields (`email`, `address`) are handled using the `?` modifier, allowing them to be undefined. The component uses conditional rendering (`if (!address)` and `if (!email)`) to display these optional sections only when data is available, preventing rendering of empty sections. The `isActive` boolean prop influences the CSS class for styling. The time complexity is O(1) as it performs a fixed number of operations regardless of input size. Space complexity is also O(1) for the same reason.

Pseudocode

Define UserAddress interface with street, city, zipCode. Define UserProfileProps interface with userId, username, optional email, optional address, isActive. Create UserProfileCard function accepting UserProfileProps. De...

Published

TSX Web (tsx)

Generic Components: List Renderer

Difficulty: writing: 9; length: 2
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#generic components #react #typescript #list rendering #reusability

goal: Create a generic React component for rendering lists of any data type. input: An array of items, a render function for each item, and a key extraction function. output: A rendered list (<ul> or <ol>) of items.

Canonical Algorithm Text

import React from 'react'; interface ListRendererProps<T> { items: T[]; renderItem: (item: T, index: number) => React.ReactNode; keyExtractor: (item: T, index: number) => string | number; listClassName?: string; itemClassName?: string; } function ListRenderer<T>({ items, renderIt...

Description Algorithm

The `ListRenderer` is a generic React component designed to abstract the common task of rendering lists. It accepts an array of items (`items`), a function to render each item (`renderItem`), a function to extract a uniq...

Explanation

This `ListRenderer` component employs TypeScript generics (`<T>`) to create a flexible and type-safe way to render lists. The `ListRendererProps<T>` interface defines the component's props, where `T` represents the type of elements within the `items` array. The `renderItem` prop is a function that takes an item of type `T` and its index, returning the JSX to render for that item. The `keyExtractor` prop is crucial for React's reconciliation process and also receives an item of type `T`. The component handles the edge case of an empty or null `items` array by rendering a "No items to display." message. It then maps over the `items` array, using the provided `keyExtractor` to generate unique keys and `renderItem` to render each element within a list item (`<li>`). Time complexity is O(N) where N is the number of items, due to the mapping operation. Space complexity is O(N) for rendering the list elements.

Pseudocode

Define ListRendererProps generic interface with items (T[]), renderItem (function), keyExtractor (function), optional listClassName, optional itemClassName. RenderItem function accepts item (T) and index (number), return...

Published

TSX Web (tsx)

Generic Components: Data Fetching Wrapper

Difficulty: writing: 1; length: 3
Popularity: 0
Created: 2026-01-26 11:23 UTC
Published: 2026-01-26 13:44 UTC
Author: Admin

#generic components #react #typescript #data fetching #render props

goal: Create a generic React component for abstracting data fetching. input: A URL string and a render prop function. output: Rendered content based on fetched data, loading state, or error state.

Canonical Algorithm Text

import React, { useState, useEffect } from 'react'; interface DataFetcherProps<T> { url: string; children: (data: T | null, isLoading: boolean, error: Error | null) => React.ReactNode; } function DataFetcher<T>({ url, children }: DataFetcherProps<T>): JSX.Element { const [data, s...

Description Algorithm

This `DataFetcher` component is a generic React component designed to fetch data from a given URL and render it using a provided children function. It manages loading and error states internally. By using generics (`<T>`...

Explanation

The `DataFetcher` component uses TypeScript generics (`<T>`) to create a reusable data fetching mechanism. The `DataFetcherProps<T>` interface defines the component's props, where `T` is a type parameter representing the expected type of the fetched data. The `children` prop is a render prop function that receives the fetched `data` (typed as `T | null`), a `isLoading` boolean, and an `error` object. The `useEffect` hook performs the asynchronous data fetching using the `fetch` API. It updates the `data`, `isLoading`, and `error` states accordingly. Error handling includes checking `response.ok` and catching network or parsing errors. The `finally` block ensures `isLoading` is set to `false` regardless of success or failure. Time complexity is O(1) for the component's rendering logic, but the data fetching itself depends on network latency and server response time. Space complexity is O(1) for state management, plus the space for the fetched data.

Pseudocode

Define DataFetcherProps generic interface with url (string) and children (function). Children function accepts data (T | null), isLoading (boolean), error (Error | null) and returns ReactNode. Create DataFetcher generic...

Language (required)

Paste your code (required)

Max 20,000 characters. (Dangerous HTML/script fragments will be blocked)

Normalized preview:

I agree to Publish this, after admin approval (queued for review). (Not required) I confirm this submission is anonymous and does not contain personal data. I grant SkillsTyping a free, non-exclusive, worldwide, and irrevocable license to store, modify, adapt, and publish this content after review. I understand that publication is not guaranteed, that I retain no ownership or usage claims over published versions, and that no compensation will be provided. See Privacy Policy

Publish details

Shown only if you opt to submit for review. Required when consent is checked.

Title (required with consent)

Short description / summary (required with consent)

Algorithm explanation (required with consent)

Pseudocode (required with consent)