DEV Community: John Butcher

Introducing My New Time Card Calculator – With Printable Timesheet PDFs

John Butcher — Wed, 23 Apr 2025 05:05:21 +0000

If you’ve ever tried to manually calculate your work hours and prepare a timesheet, you know how tedious it can be specially when you’re doing it every week.

That’s why I built the Time Card Calculator, a free, easy-to-use tool that lets you quickly enter your work hours, subtract breaks, and now, print a clean, professional-looking timesheet as a PDF.

Whether you're managing your own hours or preparing a time report for someone else, this tool takes the hassle out of it.

What You Can Do with the Time Card Calculator
Here’s what makes this tool especially useful:

Log your daily work hours: Add start time, end time, and any unpaid break duration.

Accurate total hours: The calculator automatically computes your net work time.

Track multiple days: Enter data for a full workweek or pay period.

Print-friendly design: Once you’re done, click a button to generate a printable PDF of your entire timesheet.

No sign-up needed: Use it straight from your browser, no accounts or installations required.

Responsive and fast: Works smoothly on mobile, tablet, and desktop.

Why I Added the PDF Export Feature
After releasing the initial version of the calculator, I received a few messages from people asking if they could print or save their timesheets. That’s when I realized: not only do people want to calculate hours—they often need a copy to submit, share, or store.

So I built a clean, downloadable PDF option that keeps your entries neat and professional. Whether you’re turning it in to HR, emailing a client, or saving it for personal records, it’s just one click away.

Who This Tool Is For
This isn’t just for employees punching a clock. The Time Card Calculator is perfect for:

Freelancers and consultants who bill by the hour
Part-time workers tracking shifts
Contractors managing projects
Employers and managers reviewing hours
Anyone needing a clear breakdown of time worked

Basically, if you need to log and report hours—you’ll love how easy this is.

Built for Real-World Use
When I designed this tool, I focused on three things: clarity, accuracy, and usability. No fluff. Just a solid tool you can trust every week.

And I’m just getting started. Future updates may include:

Hourly pay calculation
CSV export
Cloud-based saving and sharing
Auto-fill for recurring shifts

Got a feature idea? I’d love to hear from you.

📌 Try the Time Card Calculator Now
If you're ready to simplify your work hour tracking, try it here:
👉 https://www.timecardcalculator.me/

Use it. Print your timesheet. Save your time.

And if it helps you out, consider sharing it with a coworker or friend, it might just save them some time too.

I Made a Website for Creating Pie Charts

John Butcher — Mon, 21 Apr 2025 04:23:35 +0000

As developers, we often find ourselves building tools we personally need or wish existed in a simpler form. That’s exactly what led me to create piechartmaker.me 🥧 — a fast, free, and easy-to-use pie chart generator for everyone.

In this post, I’ll walk you through:

Why I decided to build it
How I built it (tech stack + challenges)
Features and UI decisions
Future roadmap
Lessons learned
Why I Built This

I was working on a small analytics report and needed to whip up a pie chart. I searched for tools online and ran into a few common problems:

Most tools asked me to sign up or create an account

Others had cluttered interfaces packed with advanced options I didn’t need

Some required me to download software or use spreadsheet tools

And a few were just straight-up ugly 🙈

All I wanted was a clean, web-based tool where I could enter some labels and values, preview the chart, and download it as an image. So I built it.

The Tech Stack
Here’s the stack I chose and why:

Frontend: React + Tailwind CSS
React made it easy to create a dynamic form and live chart preview. Tailwind gave me utility-first styling out of the box, which helped keep the codebase small and maintainable.

Charting: Google Charts
Google Charts is one of the most robust charting libraries around. It supports beautiful, interactive charts and handles resizing and responsive layouts effortlessly.

Hosting: Vercel
I deployed the site using Vercel for zero-config deployment, fast CDN, and built-in HTTPS. Vercel’s previews and Git integration made iteration quick and painless.

Features
Here’s what the site does (as of now):

Dynamic Data Input
You can add as many data points as you want—each with a label and value. The chart updates in real-time as you type.

📸 Export as PNG, JPG or SVG
You can download your chart as a high-resolution PNG, JPG, SVG image. Perfect for presentations, school projects, or quick reports.

💻 Fully Client-Side
No data is ever sent to a server. Everything runs in the browser. Fast and privacy-friendly.

💡 UX Decisions
I deliberately avoided advanced options like tooltips, legends, or 3D rendering in this first version. The idea was to keep it minimal and intuitive—so that even someone with zero tech background could use it.

🛤️ What’s Coming Next
The current version works great for basic use cases, but I’ve got a list of features I’d love to add:

✅ CSV upload support

✅ Dark mode

✅ Export as SVG or PDF

✅ Shareable chart links (via query params or a simple backend)

✅ Mobile layout improvements

✅ More color customization options

Have more suggestions? I’d love to hear them!

🧠 What I Learned
This project was a great reminder that:

Even simple tools are useful when well-designed

Tailwind makes styling UIs way more enjoyable

Vercel continues to be my go-to for personal projects

And most importantly—building something small but complete feels amazing.

🙌 Try It Out
If you want to generate a quick pie chart without fuss, give it a spin:

👉 https://www.piechartmaker.me/

💬 Let’s Chat
Have you built a micro-tool that solved a real problem for you? I’d love to see it! Or if you’ve got feedback for mine—hit me up in the comments.

Thanks for reading
Happy charting!

I made a little website to convert time to decimal

John Butcher — Sat, 19 Apr 2025 17:42:23 +0000

Hey everyone 👋

So I recently found myself doing a bunch of annoying math converting hours and minutes into decimal format. You know, like when you’re filling out a timesheet or invoicing someone and need to turn 2 hours 45 minutes into 2.75?

It’s not hard math, but it’s just... annoying. Especially when you’re doing it multiple times a day.

So I made a quick little site:
👉 https://www.timetodecimalcalculator.com

Why I made it
Honestly? Because I was tired of Googling "2 hours 45 minutes to decimal" and clicking on spammy sites with ads everywhere. Most of the tools I found either looked like they were made in 2003 or tried to do way too much.

I just wanted something clean, simple, and fast. So I built one myself.

What it does
It’s super straightforward:

You enter the hours and minutes

It shows the decimal version instantly

That’s it 😄

No popups, no distractions, no waiting. Just one job, done well.

Tech stack (nothing fancy)
I kept it really simple:

Nextjs, TailwindCSS

Hosted on Vercel

Loads fast, works on mobile, does its job

No frameworks, no backend — just a quick and functional tool.

A few things I learned
Even with a tiny project like this, I learned a lot:

Simple can be powerful — People appreciate tools that don’t waste their time.

Mobile-first matters — A lot of people use these kinds of tools on their phone.

Build it for yourself first — If it solves your own problem, odds are it’ll help someone else too.

What’s next?
Not sure yet! Maybe I’ll add:

A reverse calculator (decimal to HH:MM)

A "copy to clipboard" button

A little Chrome extension version?

Open to ideas if you’ve got any!

Check it out
Anyway, if you ever need to do quick time-to-decimal conversions (or know someone who does), feel free to try it out:
👉 time to decimal

Let me know what you think — I’d love feedback, feature requests, or just a “hey this is neat” 😊

Thanks for reading!

I Built a Free Line Graph Maker - Supports Multi-Line Graphs & Easy Downloads 🎉

John Butcher — Fri, 11 Apr 2025 10:23:01 +0000

Hey folks 👋

I recently launched a new web tool: LineGraphMaker.me - a lightweight, no-login-required tool for creating clean and customizable line charts in your browser.

Whether you're a developer, student, data nerd, or just someone who needs a graph right now, this tool is designed to make the process fast, smooth, and frustration-free.

✨ What It Does
Here’s a quick rundown of what you can do:

📈 Create single or multi-line graphs
Plot one line or compare multiple data sets it's super flexible.

🎨 Customize everything
Titles, labels, colors, axis scales - all easily editable.

💾 Download your graph
Export charts as JPG, PNG, or SVG with one click - ready for reports, slides, or sharing.

⚡ No sign-up, no ads, no nonsense
Just open the site and start building your chart.

🛠️ How It Works
Frontend: React + Tailwind CSS

Charts: Chart.js under the hood

Exporting: Uses canvas and SVG rendering for clean downloads

Hosting: Deployed on Vercel

It’s optimized for speed and simplicity - no backend, no login, no data collection.

🧠 Why I Made It
I was working on a project and needed a quick way to visualize some time-series data. Most tools out there were either:

Too bloated with features I didn’t need

Hidden behind a sign-up wall

Or didn’t support exporting clean images

So I built my own tool - one that I could use and others could benefit from too.

🔗 Try It Out
👉 line graph maker

No account. No paywall. Just charts.

🚧 What’s Next?
I’m thinking of adding:

🗂️ CSV import

🌙 Dark mode

🔗 Embeddable charts

If you have feature ideas or feedback, I’d love to hear from you! Feel free to drop a comment or DM me right here on Dev.to.

Thanks for reading - and happy graphing! 🙌