How I Built a Football Formation Builder with Vanilla JavaScript

Sam — Fri, 11 Sep 2026 00:18:06 +0000

Building small web tools has become one of the ways I learn what actually works in the browser.

Recently, while working on Toolsyte, I built a Football Formation Builder that allows users to create a football lineup visually by choosing a formation and positioning players on a pitch.

The goal was fairly simple: make something that works directly in the browser, is easy to understand, and doesn't require users to create an account just to build a formation.

You can try the Football Formation Builder here:

https://toolsyte.com/tools/sports/football-formation-builder/

What I wanted to build

The basic idea was to give users a football pitch where they could build their own team visually.

Instead of creating a static page showing diagrams of formations, I wanted the formation itself to be interactive.

A user should be able to choose a formation, see the players arranged on the pitch, and customize the lineup.

This also meant thinking beyond just desktop screens. A football formation builder is something people may open on a phone, so the interface needed to remain usable on smaller screens as well.

Keeping the tool browser-based

Toolsyte is primarily built around lightweight web tools, so I didn't want this project to require a large framework or complicated infrastructure.

The formation builder uses the same general approach:

HTML for the structure
CSS for the interface and football pitch
JavaScript for the interactive behaviour

Keeping the tool browser-based also means that most of the interaction can happen immediately on the page.

For this type of utility, that simplicity was important to me.

The football pitch was the interesting part

A normal calculator usually follows a straightforward pattern:

Input → calculation → result

A formation builder is different.

The result itself is visual.

The interface has to represent a football pitch while placing multiple players in positions that make sense for the selected formation.

For example, changing formations means changing how those player positions are distributed across the pitch.

That made the project more interesting than simply displaying a predefined image for every formation.

Making formations reusable

One thing I wanted to avoid was treating every formation as an entirely separate interface.

The pitch remains the same.

What changes is the arrangement of the players.

That makes it possible for the application to use the selected formation to determine where the players should appear rather than loading a completely different pitch every time.

It also makes the tool easier to expand as additional formation options are added.

Responsive design mattered more than I expected

A football pitch naturally wants a reasonable amount of screen space.

Desktop gives you plenty of it.

Mobile doesn't.

So part of building the tool was making sure that the pitch, players and surrounding controls could still work when the available width became much smaller.

This is one of the recurring lessons I've had while building web tools: something that looks simple on desktop can require considerably more thought once you test it on a phone.

Building the tool as part of a larger collection

The Football Formation Builder isn't a standalone project.

It's part of Toolsyte, where I've been building different browser-based tools, calculators and interactive utilities.

That has influenced how I approach new tools.

Instead of asking only:

"Can I make this?"

I've started asking:

"Can someone understand what this does immediately?"

and:

"Can they actually use it comfortably without unnecessary steps?"

Those questions have become increasingly important as I've built more tools.

What I learned from this project

The biggest lesson wasn't really about football.

It was about building interactive tools around visual information.

A traditional calculator can hide most of its logic behind a form and show a number at the end.

With something like a formation builder, the interface is part of the result.

Player positioning, pitch proportions, controls, responsiveness and usability all have to work together.

It was a useful reminder that even relatively small web tools can involve interesting UI problems.

What's next

I'm continuing to experiment with interactive tools on Toolsyte, including calculators, quizzes and other browser-based utilities.

For the Football Formation Builder specifically, the aim is to keep it useful without turning a straightforward tool into something unnecessarily complicated.

If you're interested in trying it, you can find it here:

Football Formation Builder:
https://toolsyte.com/tools/sports/football-formation-builder/

I'd also be interested to hear how other developers would approach a visual tool like this using plain JavaScript.

I Built a Free Spin the Wheel Tool That Anyone Can Use (No Sign-Up Required)

Sam — Sun, 02 Aug 2026 04:11:42 +0000

Sometimes the hardest decisions are the smallest ones.

Who's going first? Who wins the giveaway? Which task should I work on next? Which restaurant should we visit? Instead of debating, I usually end up saying, "Let's just spin a wheel."

Surprisingly, many online spin wheel tools I found were cluttered with intrusive ads, required unnecessary sign-ups, or felt outdated. I wanted something that was fast, simple, and worked well on any device.

So I built one.

Why I Built It

I'm currently building Toolsyte, a collection of free online tools designed to solve everyday problems with clean interfaces and a focus on speed and usability.

The Spin the Wheel was one of the first tools I wanted to create because it's useful in so many situations—from classrooms and meetings to family game nights and giveaways.

Features

Add your own custom entries
Customize wheel colors
Smooth spinning animation
Mobile-friendly design
Free to use
No account or sign-up required A Few Use Cases

I've already found it useful for:

Choosing random winners for giveaways
Classroom activities
Team-building sessions
Picking games or challenges
Deciding where to eat
Assigning random tasks
Breaking decision deadlocks with friends

It's one of those simple tools that ends up being useful more often than you'd expect.

Building It

While the interface looks simple, getting the experience right took some work.

A few things I focused on:

Keeping the wheel animation smooth
Making the result feel fair and predictable
Ensuring it worked well on both desktop and mobile
Keeping the interface clean without unnecessary distractions

I wanted the tool to load quickly and let users start spinning immediately.

Try It

If you'd like to try it yourself:

https://toolsyte.com/tools/wheel/spin-the-wheel/

I'd genuinely appreciate any feedback or suggestions for improvements.

DEV Community: Sam

How I Built a Football Formation Builder with Vanilla JavaScript

I Built a Free Spin the Wheel Tool That Anyone Can Use (No Sign-Up Required)