DEV Community: Krishna Sapkota

Most calculators on the internet are either too simple or too confusing. I wanted to build something that was both useful and scientifically based, so I built a Height Predictor Calculator using JavaScript that estimates adult height using multiple methods.

The Idea

One day I was wondering: “How tall will I be?”

Instead of building a simple calculator, I created one that uses:

Mid-Parental Method
Khamis–Roche Method
Bone Age Method

Method 1 – Mid-Parental Height

Boys = (Father height + Mother height + 13) / 2

Girls = (Father height + Mother height - 13) / 2

This gives a baseline estimate.

function midParental(father, mother, sex) {
  return sex === "male"
    ? (father + mother + 13) / 2
    : (father + mother - 13) / 2;
}

Method 2 – Khamis–Roche

Uses:

Age
Height
Weight
Parents height

Regression-based formula with blending for realistic results.

function khamisRoche(age, height, weight, father, mother) {
  const mid = (father + mother) / 2;
  let regression = /* coefficients logic */;
  return (regression * 0.65) + (mid * 0.35);
}

Method 3 – Bone Age

Adult Height = Current Height / Maturity Ratio

Accounts for growth tempo.

function boneAge(height, ratio) {
  return height / ratio;
}

Key Learnings

Always show a range, not exact number
Blend formulas for realistic output
UX matters more than math

Final Thoughts

Building tools like this is one of the best ways to learn JavaScript.

Try building your own calculators — they are simple, useful, and great for learning.

Try the tool here

[Boost]

Krishna Sapkota — Sun, 22 Mar 2026 09:24:03 +0000

Krishna Sapkota

Mar 22

How I Built a Simple Ovulation Calculator Using HTML, CSS, and JavaScript

#webdev #javascript #html #ai

Comments

2 min read

How I Built a Simple Ovulation Calculator Using HTML, CSS, and JavaScript

Krishna Sapkota — Sun, 22 Mar 2026 09:23:26 +0000

How I Built a Simple Ovulation Calculator Using HTML, CSS, and JavaScript

I’ve been building small, free online tools as part of my website, and recently I built an Ovulation Calculator that predicts the fertile window and next period date based on cycle data.

You can try it here:
👉 https://www.civvy.tech/health-tools/ovulation-calculator

This post is a short breakdown of how I built it.

The Idea

Many ovulation calculators online are cluttered, require login, or are full of ads.
I wanted to build something that is:

Fast
Private (no login)
Mobile friendly
Simple UI
Instant calculation

So I built a lightweight calculator using just HTML, CSS, and vanilla JavaScript.

How the Calculation Works

The logic is actually simple.

Most people ovulate 12–16 days before the next period, not exactly in the middle of the cycle.

So the formula I used:

Ovulation Day = Cycle Length − Luteal Phase Length

Then:

Fertile Window Start = Ovulation Date − 5 days
Fertile Window End = Ovulation Date + 1 day
Next Period = Last Period Date + Cycle Length

All calculations are done using JavaScript Date functions.

JavaScript Logic (Core Part)

The calculator takes 3 inputs:

First day of last period
Average cycle length
Luteal phase length

Then it calculates ovulation and fertile window dates dynamically and updates the UI instantly.

I also added:

Error handling
Live calculation on input change
Cycle phase timeline UI

SEO and Structure

Since I’m building a tools website, I also optimized the page for SEO:

Proper <title> and meta description
Canonical URL
Schema markup (SoftwareApplication)
Internal links to related tools
A long SEO content section explaining ovulation and fertile window

This helps the page rank on Google while still being a functional tool.

You can see the full page structure here:
👉 https://www.civvy.tech/health-tools/ovulation-calculator

What I Learned

Building small tools like this taught me:

Simple tools can be very useful
SEO + tools is a powerful combination
You don’t always need frameworks — vanilla JS is enough for many tools
Good UI and clear results matter more than complex tech

I’m continuing to build more calculators and utility tools here:
👉 https://www.civvy.tech/

If you're building a tools website or learning JavaScript, try building small calculators like this — they are great projects and actually useful to real people.

[Boost]

Krishna Sapkota — Fri, 13 Mar 2026 08:07:13 +0000

Building a Reaction Time Test in JavaScript

Krishna Sapkota ・ Mar 8

#webdev #programming #javascript #tutorial

How I Built a VTU SGPA Calculator Using JavaScript

Krishna Sapkota — Tue, 10 Mar 2026 20:34:52 +0000

How I Built a VTU SGPA Calculator Using JavaScript

Many VTU students struggle to calculate their SGPA manually after results are announced.

To make this easier, I built a simple VTU SGPA Calculator using JavaScript and a JSON data file.

In this post, I’ll explain how you can build a basic SGPA calculator using JavaScript and JSON.

SGPA Formula

VTU SGPA is calculated using a credit-weighted average formula.

SGPA = Σ (Credit × Grade Point) / Σ Credits

Example

Mathematics — 4 credits — Grade A (9 points)
Physics — 3 credits — Grade B (8 points)

JSON Data File for Subjects

Instead of hardcoding subjects in JavaScript, we store them in a JSON file.

subjects.json

[
  { "subject": "Mathematics", "credits": 4 },
  { "subject": "Physics", "credits": 3 },
  { "subject": "Chemistry", "credits": 3 },
  { "subject": "Programming", "credits": 4 }
]

This approach makes the calculator:

easier to maintain
easy to update subjects
reusable for different semesters

HTML Structure

<h2>VTU SGPA Calculator</h2>

<div id="subjects"></div>

<button onclick="calculateGPA()">Calculate SGPA</button>

<p id="result"></p>

This creates a simple interface where students can enter their grade points.

Loading Subjects from JSON

fetch("subjects.json")
  .then(res => res.json())
  .then(data => {

    const container = document.getElementById("subjects");

    data.forEach(sub => {

      container.innerHTML += `
        <div>
          ${sub.subject} (${sub.credits} credits)
          <input type="number" min="0" max="10" class="grade">
        </div>
      `;

    });

  });

This dynamically loads the subject list and creates input fields.

SGPA Calculation Logic

function calculateGPA(){

  const grades = document.querySelectorAll(".grade");

  let totalCredits = 0;
  let weightedSum = 0;

  grades.forEach((input, index) => {

    const grade = parseFloat(input.value) || 0;
    const credits = subjects[index].credits;

    weightedSum += grade * credits;
    totalCredits += credits;

  });

  const gpa = weightedSum / totalCredits;

  document.getElementById("result").innerText =
    "Your SGPA: " + gpa.toFixed(2);

}

This calculates SGPA using the credit-weighted formula.

Why Use JSON?

Using JSON helps because:

subjects can be updated easily
the calculator works for different semesters
the structure is scalable

Try the Full Tool

If you're a VTU student, you can try the full calculator here:

https://www.civvy.tech/vtu-sgpa

Conclusion

Building a VTU SGPA calculator with JavaScript and JSON is simple and efficient.

It helps students:

calculate SGPA quickly
avoid manual calculation errors
maintain and expand the calculator easily

Building a Reaction Time Test in JavaScript

Krishna Sapkota — Sun, 08 Mar 2026 07:37:31 +0000

How I built a browser-based reaction time test with multi-round scoring, audio feedback, and localStorage — all in plain JS.

I recently shipped a reaction time test — the classic "click when the screen turns green" game. It runs entirely in the browser with zero dependencies. In this post I'll walk through how it works, what made it interesting to build, and the exact patterns I used.

How the game works

Player clicks the zone to start a round
The screen turns red — player must wait
After a random delay (1.5 – 4 seconds), the screen turns green
Player clicks as fast as possible — their reaction time is recorded in ms
After 5 rounds, a final results panel shows average, best, worst, and a percentile rating

If the player clicks while waiting (before green), they get an "early click" penalty and must retry.

The state machine

Everything hinges on a single state variable. This keeps conditional logic clean and prevents weird edge cases.

let state = 'idle'; // idle | waiting | ready | done

The click handler just delegates to the right function based on current state:

window.handleClick = function () {
  if (state === 'idle')    { startRound();      return; }
  if (state === 'waiting') { earlyClick();      return; }
  if (state === 'ready')   { recordReaction();  return; }
  if (state === 'done')    { resetGame();       return; }
};

This pattern keeps each phase completely isolated. Adding a new state is one function and one if line.

Randomising the delay

The whole game breaks if the delay is predictable. A fixed delay lets players time it by muscle memory rather than actually reacting to the visual.

function startRound() {
  state = 'waiting';
  const delay = 1500 + Math.random() * 2500; // 1.5s – 4s
  goTimer = setTimeout(showGreen, delay);
}

Math.random() gives a float in [0, 1), so the wait is anywhere from 1.5 to 4 seconds. Users can never predict it.

Measuring reaction time accurately

Date.now() is fine for most things, but performance.now() gives sub-millisecond precision and isn't affected by system clock changes mid-game. Always use it for timing.

function showGreen() {
  state = 'ready';
  startTime = performance.now(); // mark the moment green appears
  zone.className = 'ready';
  zText.textContent = 'CLICK NOW!';
}

function recordReaction() {
  const rt = Math.round(performance.now() - startTime); // delta in ms
  scores.push(rt);
}

Math.round() keeps results as clean integers — nobody needs to know they reacted in 247.3821 ms.

Handling the early click

If the player clicks while the screen is still red (state === 'waiting'), you need to:

Cancel the pending setTimeout so green never fires
Show a warning
Let them retry the same round (don't advance the round counter)

function earlyClick() {
  clearTimeout(goTimer); // cancel the green trigger
  state = 'idle';        // allow retry
  zone.className = 'early';
  zText.textContent = 'Too Early! 😬';
  zSub.textContent = 'Click to retry this round';
}

Forgetting clearTimeout is the classic bug here — the green would still fire after the player is already looking at the early-click screen.

Persisting the all-time best with localStorage

Round best is easy (just Math.min(...scores)), but an all-time personal best needs to survive page refreshes.

const STORAGE_KEY = 'rt_alltime_best';
let alltimeBest = parseInt(localStorage.getItem(STORAGE_KEY) || '99999');

function recordReaction() {
  const rt = Math.round(performance.now() - startTime);
  scores.push(rt);

  if (rt < alltimeBest) {
    alltimeBest = rt;
    localStorage.setItem(STORAGE_KEY, rt);
    renderBestBadge();
  }
}

function renderBestBadge() {
  bestBadge.textContent = alltimeBest < 99999 ? alltimeBest + ' ms' : '—';
}

'99999' is the sentinel "no score yet" value. Any real reaction time will beat it on the first attempt.

Audio feedback with the Web Audio API

Adding a short beep on "go" and "success" makes the experience feel snappier without importing a sound library.

function beep(frequency, duration, volume) {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);
    osc.frequency.value = frequency;
    gain.gain.value = volume || 0.15;

    osc.start();
    osc.stop(ctx.currentTime + duration);
    // fade out to avoid click artifacts
    gain.gain.setTargetAtTime(0, ctx.currentTime + duration * 0.7, 0.05);
  } catch (e) {
    // silently fail if AudioContext isn't supported
  }
}

// Usage
beep(880, 0.2, 0.2); // high beep on green
beep(660, 0.12, 0.15); // lighter beep on recording
beep(220, 0.3, 0.15); // low beep on early click

The try/catch is important — mobile Safari and some older browsers can throw on AudioContext creation. Never let audio break your game logic.

Computing the final stats

After 5 rounds:

function showFinal() {
  const avg   = Math.round(scores.reduce((a, b) => a + b, 0) / scores.length);
  const best  = Math.min(...scores);
  const worst = Math.max(...scores);
}

For the rating, I mapped averages to rough human percentile brackets based on published reaction time research:

let rating;
if      (avg < 200) rating = { emoji: '🏆', title: 'Elite Reflexes!',   sub: 'Top 1% globally.' };
else if (avg < 230) rating = { emoji: '⚡', title: 'Exceptional',        sub: 'Above 95th percentile.' };
else if (avg < 260) rating = { emoji: '✅', title: 'Above Average',      sub: 'Better than most.' };
else if (avg < 300) rating = { emoji: '👍', title: 'Average',            sub: 'Around the human average of 250 ms.' };
else                rating = { emoji: '🔄', title: 'Keep Practising',    sub: 'Warm up and try again.' };

The human average for a simple visual reaction test is roughly 200–250 ms. Anything under 200 ms is genuinely elite.

Visual state feedback with CSS classes

Instead of toggling individual style properties from JS, the zone element gets a single class that drives all visual changes:

#react-zone                { background: var(--c-surface); border: 2px solid var(--c-border); }
#react-zone.waiting        { background: linear-gradient(135deg, #1a0a0a, #2a0505); border-color: rgba(255, 50, 50, .3); }
#react-zone.ready          { background: linear-gradient(135deg, #0a2a10, #0a4020); border-color: rgba(0, 255, 100, .5); animation: pulse-green .6s ease-out; }
#react-zone.early          { background: linear-gradient(135deg, #2a1a00, #3a2a00); border-color: rgba(255, 200, 0, .5); }

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0   rgba(0, 255, 100, .6); }
  100% { box-shadow: 0 0 0 40px rgba(0, 255, 100, 0); }
}

From JS, changing state is just:

zone.className = 'waiting'; // or 'ready', 'early', ''

One assignment controls background, border, and animation all at once.

Round progress dots

Five dots track which rounds are done vs. active:

const dots = Array.from({ length: ROUNDS }, (_, i) => document.getElementById('dot' + i));

function updateDots() {
  dots.forEach((dot, i) => {
    dot.classList.remove('active', 'done');
    if (i < currentRound)      dot.classList.add('done');
    else if (i === currentRound) dot.classList.add('active');
  });
}

The CSS for the active dot uses a blink animation so the player always knows which round they're on:

.round-dot.active {
  border-color: var(--c-glow);
  animation: blink .8s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

Wrapping it in an IIFE

The whole script lives inside an immediately invoked function expression to avoid polluting the global scope (except for handleClick, which the HTML needs):

(function () {
  'use strict';

  // all state, DOM refs, and functions live here

  window.handleClick = function () { /* ... */ };
})();

Key takeaways

State machine over booleans — one state string beats a tangle of isWaiting, isReady, hasFired flags
performance.now() over Date.now() — higher precision, unaffected by clock drift
clearTimeout on early click — easy to forget, hard to debug if you do
CSS classes over inline styles — let CSS own the visual states, JS just sets the class
Try/catch AudioContext — audio should enhance, never break

You can try the live version at Reaction Test.

If you have questions or spot something I could improve, drop a comment below!