explaingit

takcastel/css-calculator

Analysis updated 2026-05-18

★ 2HTMLAudience · developerComplexity · 4/5Setup · moderate

TLDR

A working calculator written in C, compiled to 8086 assembly, and executed inside a web browser by x86CSS, a CSS-only 8086 processor emulator with no JavaScript.

Mindmap

mindmap
  root((css-calculator))
    What it does
      Calculator in CSS
      8086 CPU emulator
      C to assembly
    Build Pipeline
      C source code
      Docker cross-compiler
      x86CSS emulator
    Tech Stack
      CSS emulator
      C language
      Docker toolchain
    Audience
      CSS experimenters
      Web developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Explore what CSS can do by running a compiled C program inside a CSS-only 8086 emulator in the browser.

USE CASE 2

Study the x86CSS build pipeline to see how C code is cross-compiled to 8086 and loaded into a CSS-based emulator.

USE CASE 3

Extend the calculator with additional operations by modifying the C source and rebuilding with the Docker toolchain.

What is it built with?

HTMLCSSCDockerx86 Assembly

How does it compare?

takcastel/css-calculatord4l3k/upasswyverncw/freeproxy
Stars222
LanguageHTMLHTMLHTML
Last pushed—2016-09-30—
Maintenance—Dormant—
Setup difficultymoderatemoderatemoderate
Complexity4/53/52/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Docker for the ia16-elf-gcc cross-compiler, only runs correctly in Chrome or Edge.

In plain English

This project is a calculator that runs inside a web browser through an unusual architecture. The calculator logic is written in C, compiled to 8086 assembly code (the instruction set used by personal computers in the 1980s), and then executed by x86CSS, which is an 8086 processor emulator built entirely out of CSS with no JavaScript involved. The result is a working calculator that runs inside Chrome or Edge, where CSS rules alone handle the processor simulation. The calculator supports digits 0 through 9 and the four basic arithmetic operations. Keys are entered by holding down a key on the numeric keypad, and the screen updates as the emulated processor handles each input. The build process uses Docker to run a cross-compiler toolchain (ia16-elf-gcc) that converts the C source file into a binary the CSS emulator can load. Running npm run build compiles the calculator program, and npm start serves the result as a local web page at localhost:8080 where you can interact with it. This is a technical demonstration project that explores the outer boundaries of what CSS can do, rather than a practical everyday tool. The x86CSS emulator it relies on was created separately by Lyra Rebane. The README is written in French. No license file is included in the repository.

Copy-paste prompts

Prompt 1
Explain how this CSS calculator works: how does C code become an 8086 binary that CSS alone can execute in a browser?
Prompt 2
How do I build and run the x86CSS calculator locally? What does the Docker toolchain do and what does npm run build produce?
Prompt 3
I want to add a square root function to this calculator. Where in calculator.c do I add the logic and how do I rebuild it?
Prompt 4
Why does the x86CSS emulator only work in Chrome and Edge? What browser feature does it depend on that other browsers lack?

Frequently asked questions

What is css-calculator?

A working calculator written in C, compiled to 8086 assembly, and executed inside a web browser by x86CSS, a CSS-only 8086 processor emulator with no JavaScript.

What language is css-calculator written in?

Mainly HTML. The stack also includes HTML, CSS, C.

How hard is css-calculator to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is css-calculator for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub takcastel on gitmyhub

Verify against the repo before relying on details.

Alternatives & similar repos