Home page
Question asked when selected pizza box to appropriately classify it.
Answer of a particular item as wet item
Another example of a wet item(pizza box example with greasy selected)
Sort a pile of waste..into different bins
Sort a pile page
Dark mode...answer of a sanitary item
Colour vision preview
4-bins present...based on which sorting works
Design decisions of this website
The about page

Inspiration

Waste sorting confuses almost everyone. The rules are easy to forget, and the answer often depends on the item's condition: a clean pizza box and a greasy one go in different bins. People stand at the bins with a bag in one hand and no good way to check. [Add one sentence of your own about why this problem mattered to you.]

What it does

Tossup tells you which bin an item goes in.

Full-screen answer. Choose an item and the whole screen turns the colour of its bin, with the bin name in very large type, a one-line reason, and a short tip.
Colour, shape and word. Wet is a green droplet, Dry a blue square, Sanitary a red triangle, Special drop-off an orange diamond. Colour is never the only signal.
It asks when it depends. For items like pizza boxes, bottles, tea bags, glass and foil, it asks one question with two large buttons, then gives a definite answer.
Sort a pile. Paste a whole list and every item is filed into the four bins. It asks only about items that depend on condition or whose name it isn't sure it matched. You can copy the result as a list or print it.
Honest about gaps. If an item isn't in the list, it says so and offers a way to suggest it, instead of guessing.
Display options. Larger text, high contrast, reduced motion, dark mode, and a colour vision preview (protanopia, deuteranopia, tritanopia).
Works offline after the first visit, and press / anywhere to jump to search.

There are 109 everyday items, each with its own hand-drawn illustration.

How we built it

Tossup is a static single-page app in plain JavaScript with Vite. There is no framework and no backend. A small custom router uses the History API, and the answer screen expands from the item you tapped using the View Transitions API where the browser supports it. Search ranks exact, prefix, word-prefix, contains and fuzzy matches. The pile sorter reuses the same matcher and reports how confident each match is. All 109 illustrations are inline SVG drawn on one grid, with one stroke width and one soft fill, so they read as a single set. The colour vision preview uses SVG colour-matrix filters. Preferences are kept in the browser's local storage, and a service worker lets the app open without a connection. It is deployed on Vercel.

Challenges we ran into

False matches in search. Typing "old phone" matched "expired medicine". I changed word matching so every word you type has to match, and added a confidence level so the app asks "did you mean" instead of guessing.
Items that depend on condition. A single answer is wrong for a pizza box. I added a short decision step before the final answer.
Not relying on colour. Every bin needed a shape and a label as well as a colour, and I tested the pairs for contrast in light and dark mode.
Layering bugs. At one point the hero buttons sat on top of the search suggestions. The hero now collapses with an animation to make room for the list.
Making 109 drawings look like one set. Setting strict rules for grid, stroke and fill early on made it possible.

Accomplishments that we're proud of

18 of 18 colour contrast checks pass, in both light and dark themes.
An automated accessibility audit (axe-core) found no violations across 11 page states, in light and dark, at phone and desktop width.
A hand-drawn illustration for every one of the 109 items.
It answers in one glance, and a full bag can be sorted in a single step.
No accounts, no tracking, no analytics, and a plain-language privacy page.

What we learned

Good answers depend on knowing when not to answer: asking one question or admitting a gap beats a confident guess. Accessibility is easier when it is built in from the first screen rather than added at the end. Small details like layering order and focus handling decide whether an interface feels finished.

What's next for Tossup

Check every item against official municipal guidelines, and support city-specific rules, since waste rules vary by city.
More items and more languages.
Test with a screen reader and with people using it at real bins.
A shareable pile link, so a household can keep one list.