DEV Community: huali

How I Built a Privacy-First Loan Calculator with Pure HTML and AI

huali — Sun, 15 Nov 2026 02:03:24 +0000

As a solo indie developer, I hate heavy backend architectures for simple tools.

When I decided to build a financial calculator, I had two goals: it had to be 100% private for the user, and it had to load instantly.

Here is how I built the Lihayo Loan Calculator using pure HTML, CSS, JavaScript, and AI.

1. The Math (Amortization Formula)

The core of any loan calculator is the amortization formula:
M = P * r * (1 + r)^n / ((1 + r)^n - 1)
Instead of relying on a server to run this math, all calculations happen directly in the user's browser. This means zero data is sent over the network.

2. Visualizing the Data with Chart.js

Numbers are boring. I wanted users to see how much of their money goes to principal vs. interest. I used Chart.js to create a dynamic doughnut chart that updates in real-time as the user types. It makes the financial reality much clearer.

3. Generating the Amortization Schedule

I used a simple JavaScript loop to generate a full month-by-month breakdown of the loan, including payment date, principal portion, interest portion, and remaining balance. No backend required.

4. Using AI for Speed

I used AI (like DeepSeek) to generate the CSS framework and debug edge cases (like handling leap years in the date calculations). It cut my development time in half.

The Result

You can try the tool here. It's completely free, ad-free, and runs entirely in your browser.
👉 https://app.lihayo.com/loan/

I also built a fully functional <iframe> embed version for other bloggers to use. Let me know what you think of the UI!

Why You Should Read an Amortization Schedule Before Signing Any Loan

huali — Wed, 11 Nov 2026 07:52:47 +0000

When most people take out a loan, they only look at two numbers: the monthly payment and the interest rate.

That’s a mistake. The real story is hidden in the amortization schedule.

An amortization schedule is a table that shows exactly how each monthly payment is split between principal and interest over the life of the loan. Here is why it matters:

1. Early Payments Are Mostly Interest

In the first few years of a standard 30-year mortgage, a massive portion of your payment goes straight to the bank as interest, and only a tiny fraction actually reduces your principal balance. If you sell your house in 3 years, you might be shocked to find out how little of the loan you’ve actually paid off.

2. It Reveals the Power of Extra Payments

Let’s say you have a $300,000 mortgage at 6%. If you make an extra $100 payment every month strictly toward the principal, the compounding effect is massive. You could shave years off your loan term and save tens of thousands of dollars in interest. You won’t see this magic unless you run the numbers.

3. It Exposes Hidden Fees

If your actual amortization schedule doesn’t match your expected calculations, it means the lender rolled fees or prepaid interest into the loan balance.

The Bottom Line

Don't sign a 30-year contract blindly. Run the math first.

I actually built a free, privacy-first financial tool matrix to help with this. No pop-ups, no signups, 100% client-side. You can generate a full visual amortization schedule and test "extra payment" scenarios instantly.

Check it out here: https://app.lihayo.com/loan/

If you are building financial tools, I also included a dynamic chart and an embeddable widget in the code. Let me know what you think!

How I Built a Free, Ad-Free Loan Calculator Using Pure HTML, Chart.js, and AI

huali — Sun, 08 Nov 2026 06:29:04 +0000

Have you ever tried to use a simple online loan calculator, only to be hit with intrusive pop-ups, banner ads, and a mandatory signup form? I got tired of it.

As an indie developer, I wanted to build a tool that just works. No signups, no servers, no tracking. Everything runs locally in your browser.

Here is how I built the Loan Calculator on Lihayo Tools using pure HTML, Chart.js, and AI.

The Core: Pure Client-Side JavaScript

The most important rule was "no backend." Every calculation happens on the user's device. This guarantees 100% privacy. When a user enters their loan amount, interest rate, and term, the JavaScript instantly calculates the amortization formula: M = P * r * (1 + r)^n / ((1 + r)^n - 1).

Visualizing the Data with Chart.js

Numbers alone can be boring. To help users understand how much of their payment goes to interest vs. principal, I integrated Chart.js. A simple doughnut chart updates in real-time as the user types. It makes the financial reality very clear.

Generating the Amortization Schedule

Users don't just want the monthly payment; they want the full breakdown. Using a simple JavaScript loop, the app generates a month-by-month table showing the payment date, principal portion, interest portion, and remaining balance.

Using AI to Accelerate Development

I am a solo developer, and AI (like DeepSeek and ChatGPT) was my co-pilot. I used AI to quickly scaffold the HTML structure, write the CSS variables for a clean UI, and debug the date overflow issues in the amortization table.

The Result

You can try the final product here. It is completely free, loads instantly, and has zero ads (for now, I might add minimal Google AdSense to keep the lights on).

Check out the tool here: https://app.lihayo.com/loan/

Building tools in public is an amazing experience. If you have any feedback on the UI or the math, let me know!

Why Most Student Loan Calculators Are Ad Traps (And How to Find a Clean One)

huali — Thu, 05 Nov 2026 03:12:47 +0000

If you've ever searched for a "student loan calculator", you know the drill. You land on a page, and before you can even enter your loan amount, you're hit with pop-ups, banner ads, and a mandatory signup form. Most of these tools are designed to capture your email or push you toward a refinancing offer, not to give you a clean, honest answer.

That's the problem with ad-heavy calculators. They distract from the math.

The math itself is simple. If you have a $35,000 loan at 6.5% interest over 10 years, your monthly payment is fixed. But what most calculators don't show you is the real lever: extra payments.

Here's a fact that often gets buried under ads: even a small extra monthly payment can save you thousands in interest and shave years off your loan. For example, on a $35,000 loan at 6.5%, putting an extra $100 per month toward the principal can drastically reduce the total interest you pay over the life of the loan.

The reason is simple: extra payments go directly to the principal balance. When the principal drops, the interest charged in subsequent months drops too. It's a compounding effect in your favor.

So how do you find a calculator that actually helps you? Look for three things:

No login required. A calculator should work instantly, without asking for your email.
No pop-ups or ads. A clean interface means you can focus on the numbers.
A visual chart. Seeing the split between principal and interest makes the math intuitive.

I built a free, no-ads student loan calculator that does exactly this. It includes an "Extra Monthly Payment" field and a real-time chart. You can try it here: https://app.lihayo.com/student-loan-calculator/

The goal is simple: give people a clean tool to see the truth about their loans, without the noise.

If you're paying off student loans, run the numbers on extra payments. The savings might surprise you.

How I Built a Privacy-Focused Loan Calculator with Pure JavaScript and Chart.js

huali — Mon, 02 Nov 2026 22:32:45 +0000

Have you ever used an online calculator, only to wonder: Where is my financial data going?

Most loan calculators today require you to upload your data to a server to compute the results. Some even ask for an email before showing the numbers. As a developer, I found this frustrating.

So, I decided to build my own. Here is how I built a completely serverless, 100% client-side Loan Calculator.

The Tech Stack (Keep it Simple)

To ensure maximum speed and zero server costs, I stuck to the basics:

HTML/CSS/JS: No heavy frameworks. Just a single HTML file.
Chart.js: To provide a visual breakdown of Principal vs. Interest.
Client-Side Logic: The amortization schedule is calculated entirely in the user's browser.

Why Privacy Matters in Finance

When a user inputs their loan amount and interest rate, that data is highly sensitive. By keeping the calculations 100% client-side, the data never leaves their device. There is no backend database, no logs, and no tracking.

This "privacy-first" approach is not just a feature; it's a selling point. Users trust tools that respect their data.

Visualizing the Numbers with Chart.js

Numbers in a table can be boring. To make the tool more intuitive, I integrated Chart.js. Whenever the user changes the loan amount or term, a dynamic doughnut chart updates instantly, showing exactly how much money goes toward the principal and how much goes to the bank as interest.

Here is a snippet of the calculation logic:

var monthlyRate = annualRate / 100 / 12;
var factor = Math.pow(1 + monthlyRate, months);
var monthlyPayment = principal * monthlyRate * factor / (factor - 1);

See it in Action

I recently built a specific page for a $50,000 loan calculator. You can test the live demo here:

👉 https://app.lihayo.com/50000-loan-calculator/

Building tools like this has taught me that the best user experience is often the simplest one. Keep it fast, keep it private, and let the client's browser do the work.

Happy coding!

How I Built a 100% Client-Side Date Calculator with Vanilla JS

huali — Mon, 02 Nov 2026 02:20:34 +0000

Hey Devs! 👋

I recently built a simple Date Calculator as a side project. I wanted something completely free, requiring no sign-up, and running 100% client-side so no user data ever hits a server.

Tech Stack:

Pure Vanilla HTML/CSS/JS (No React, no build tools)
Browser's native Date object for leap-year accurate math
Hosted on Cloudflare Pages

The most challenging part was dealing with time zones and making sure the difference between two dates was absolute. Using Date.UTC() solved this perfectly.

If you want to check it out, you can try it here: https://app.lihayo.com/date-calculator/

Let me know what you think! Feedback is always welcome. 🚀

Why I love building 100% client-side web tools (and how I do it)

huali — Wed, 28 Oct 2026 22:14:58 +0000

I'm a solo indie developer based in China. Over the past year I've built more than 20 small web tools, and almost all of them share one design decision: no backend at all.

Here's why I keep coming back to it.

No server means no data risk. When a tool runs entirely in the browser, the user's input never leaves their device. There's no database to leak, no logs to inspect, no "we may share data with partners" paragraph to write. Privacy stops being a policy and becomes an architecture. For things like a BMI calculator or a password generator, that's the right default.

Instant load. A single HTML file with inline CSS and JS is a few kilobytes. It renders before a typical React app has finished downloading its framework. Fast tools feel trustworthy.

Near-zero cost. Static files on Cloudflare Pages cost me basically nothing. No servers to patch, no uptime alerts at 3 a.m., no scaling bill when a post goes viral.

How I actually build them: plain HTML, CSS, and vanilla JavaScript. No build step, no framework. I deploy to Cloudflare Pages with a git push. I use AI as a pair programmer — mostly for scaffolding layouts and catching edge cases — but I keep the logic simple enough to read in one sitting.

That stack is what powers Lihayo Tools, a growing set of 20+ free utilities including BMI and TDEE calculators. Everything runs locally, no signup, no tracking.

If you've been thinking about shipping small tools, start with a single HTML file. It's still the most underrated stack on the web.

Why I built a 100% client-side BMI calculator that respects your privacy

huali — Sat, 24 Oct 2026 12:28:51 +0000

I'm a solo indie dev from China, and I got tired of BMI calculators that force you to sign up, drown you in ads, ignore imperial units, and just hand you a cold number with no context.

So I built my own. It's completely free, no signup, no ads, and 100% client-side — everything runs locally in your browser, and no data ever leaves your device.

It supports metric and imperial switching without reloading, live BMI updates, and proper input validation. The part I'm most happy with is a horizontal gradient band from blue to green to yellow to red, with a dynamic marker showing exactly where your BMI sits. You don't just see "24.1" — you see your position in the range.

It's all vanilla HTML, CSS, and JavaScript. No frameworks, no backend, no tracking. I'm building this in public and would love honest feedback — especially from webdev folks who care about privacy-first frontend tools.

If it's useful, I've also built 20+ other no-signup, pure frontend tools on the same site.

Try the BMI Pro tool here: https://app.lihayo.com/bmi-pro/

How I Built 17 Free Web Utilities Using AI and Cloudflare (Zero Code)

huali — Thu, 22 Oct 2026 06:29:42 +0000

Hi everyone! I'm a beginner with zero coding background, but I've always wanted to build useful tools for the web. Recently, I discovered a workflow that allowed me to build and deploy 17 pure HTML tools in just a few weeks.

Here is my stack:

AI for Code: I use DeepSeek and Claude to generate pure HTML/CSS/JS.
Hosting: I upload the files to Cloudflare Workers (completely free).
Domain: I bought my own domain and bind subdomains to each tool.

The hardest part:
The biggest challenge isn't writing the code; it's getting organic traffic. I've submitted my sites to Bing and added internal links, but SEO takes time. I've also integrated Adsterra to monetize the traffic.

My Tools:
I built everything from a Labrador Age Calculator to an Image Color Palette Extractor that exports CSS variables.

If you want to check them out, here is my main hub: https://app.lihayo.com

I would love to hear your feedback on the UI or any tips on getting the first 100 visitors! Thanks!