React

Below are some projects I've written using the React library.

Most of the apps run using Babel, so you can easily view the code.

react logo

React Examples

Interactive examples of React code.
wikidata

Wikidata

An interface to Wikidata.org.
API

Public APIs

Browse public APIs via api.publicapis.org.
draw icon

SVG Tools

SVG drawing tools.

Seed Bead Graph Paper

Web version of graph paper for beading.
scan edit icon

Scanned Text Cleaner

Makes it easier to clean up scanned text for an EPUB.
stopwatch

Average Time

Enter a list of times and get total and average.
typewriter

Typing Test

Typing test which keeps track of your progress.
color band

Color Band

Try different color band formulas.
chesskers

Chesskers

Easy, chess-like game.
french doors outline

French Doors Colorizer

We installed some French doors and I wanted to experiment with color combos.

Calendar Component

Click to see next or previous months.
TicTacPawn icon

Tic Tac Pawn

Simple board game with pawns.

Big Timer

Stopwatch/timer with large SVG digits.
metric quiz

Metric Quiz

Test your ability to convert between metric and imperial measurements.
circuit

Circuits

Circuits rendered with hooks.
connected graph

Connected Points

Build and manipulate a web of connected points in SVG.
helium

Atom Renderer

Render atoms with a slider.

Calculator

Small project to learn about the useReducer hook.
switches icon

Binary Switches

A demonstration of binary switches and digits written with React.
abacus

Abaci

An interactive abacus and soroban in React.
sidebar icon

Sidebar

Demonstration of a React app with sidebar navigation that works with mobile devices.
pointer events

Pointer Events

App that responds to mouse and touch events.
pointer coordinates

Pointer Coordinates

Show values returned from mousedown and mousemove events.

Colored Squares

Just some colored squares in a grid with useState hooks.

Buttons and Lights

Buttons and lights which can affect each other.

Moving Squares

Several components which react to mousedown and mousemove events with useEffect.

Moving SVGs

Move SVG elements around with a mouse.
hexapawn

Hexapawn

A 3x3 chess game invented by Martin Gardner in 1962.
knife switch

Switches

An attempt at simulating circuits in React with ref callback methods.
react logo

Redux Examples

Interactive examples of Redux code.
slide rule icon

Slide Rule

In progress...