JavaScript Real Life Programs — PBA Institute Tutorial
Chapter 18 · JavaScript Programming Series
12 min read Beginner

JavaScript Real Life Programs

These programs apply JavaScript to everyday real-world tasks — EMI, taxes, electricity bills, ATMs and more. They combine input, logic, and output to solve practical problems.

Why Real-Life Programs?

Real-life programs convert classroom learning into practical skill. By coding EMI calculators, tax planners, and bill generators you learn to combine input, validation, logic, and clean output — exactly what employers expect.

What You'll Build

💰

EMI Calculator

Loan amount, rate, tenure → monthly EMI.

🧾

Income Tax

Calculate tax based on income slabs.

⚡

Electricity Bill

Per-unit slab pricing.

🏧

ATM Simulator

PIN check, balance, withdraw, deposit.

🎂

Age Category

Child / Teen / Adult / Senior.

🌡️

Temperature

Celsius ↔ Fahrenheit converter.

Skills Practiced

  • Reading and converting numeric input from the user.
  • Branching with if-else-if for slab logic.
  • Using Math methods for power and rounding.
  • Formatting output for clarity (₹, %, decimals).

JavaScript Real Life Applications

JavaScript is widely used in modern web development for creating interactive and dynamic websites.

It is used in banking systems, e-commerce websites, online forms, calculators, games, authentication systems, and real-time applications.

Importance of JavaScript in Real Life

  • Form Validation before submission.
  • Dynamic content updates without page reload.
  • Interactive maps and navigation systems.
  • Online calculators and banking systems.
  • Browser games and animations.
  • Authentication and login systems.

Program 1 — EMI Calculator

EMI Calculator 
<script>

let P = 500000;

let R = 9 / 12 / 100;

let N = 60;

let EMI =

(P * R *

Math.pow(1+R,N))

/

(Math.pow(1+R,N)-1);

document.write(

"Monthly EMI = ₹"

+ EMI.toFixed(2)

);

</script>
Output Monthly EMI = ₹10379.50

Form Validation

Validate Username & Password 
<form

id="myForm"

onsubmit=
"return validateForm()"

>

<input
type="text"
id="username"
placeholder="Username"
>

<input
type="password"
id="password"
placeholder="Password"
>

<button type="submit">
Submit
</button>

</form>

<script>

function validateForm(){

  var username =

  document
  .getElementById(
  'username'
  ).value;

  var password =

  document
  .getElementById(
  'password'
  ).value;

  if(

  username === ''

  ||

  password === ''

  ){

    alert(
    'Please fill all fields'
    );

    return false;

  }

  return true;

}

</script>

Dynamic Content

Update Content Dynamically 
<div id="dynamicContent">

Initial Content

</div>

<button

onclick=
"updateContent()"

>

Update Content

</button>

<script>

function updateContent(){

  var dynamicDiv =

  document
  .getElementById(
  'dynamicContent'
  );

  dynamicDiv.innerHTML =

  'Updated Content';

}

</script>

Email Validation

Check Email Address 
<script>

function validateEmail(){

  var email =

  document
  .getElementById(
  "email"
  ).value;

  var emailRegex =

  /^[^\s@]+@
  [^\s@]+\.
  [^\s@]+$/;

  if(

  emailRegex.test(email)

  ){

    alert(
    "Valid email address"
    );

  }

  else{

    alert(
    "Invalid email address"
    );

  }

}

</script>

<input
type="text"
id="email"
>

<button

onclick=
"validateEmail()"

>

Validate Email

</button>

Program 2 — Income Tax Calculator

Income Tax Program 
<script>

let income = 850000;

let tax = 0;

if(income <= 250000)

tax = 0;

else if(income <= 500000)

tax =

(income-250000)*0.05;

else if(income <= 1000000)

tax =

12500 +

(income-500000)*0.20;

else

tax =

112500 +

(income-1000000)*0.30;

document.write(

"Tax = ₹" + tax

);

</script>
Output Tax = ₹82500

Program 3 — Electricity Bill

Electricity Bill Program 
<script>

let units = 320;

let bill = 0;

if(units <= 100)

bill = units * 2;

else if(units <= 200)

bill =

200 +

(units-100)*3;

else if(units <= 500)

bill =

500 +

(units-200)*5;

else

bill =

2000 +

(units-500)*7;

document.write(

"Bill = ₹" + bill

);

</script>
Output Bill = ₹1100

Program 4 — ATM Simulator

ATM Program 
<script>

let balance = 5000;

let pin = 1234;

let entered =

Number(

prompt(
"Enter PIN"
)

);

if(entered !== pin){

  document.write(
  "Invalid PIN"
  );

}

else{

  let amt = Number(

  prompt(
  "Withdraw Amount"
  )

  );

  if(amt > balance)

  document.write(
  "Insufficient Balance"
  );

  else{

    balance -= amt;

    document.write(

    "Success! New Balance = ₹"

    + balance

    );

  }

}

</script>

Program 5 — Age Category

Age Category Program 
<script>

let age = 24;

let cat =

age < 13

? "Child"

: age < 20

? "Teen"

: age < 60

? "Adult"

: "Senior";

document.write(

"Category: "

+ cat

);

</script>
Output Category: Adult

Real-Life Use Cases

🏦

Banking

EMI and ATM systems.

⚡

Utilities

Electricity bill generation.

📧

Validation

Form and email checking.

📊

Finance

Tax calculators and reports.

Practice Questions

  • Create a Simple Interest calculator.
  • Build a discount calculator.
  • Create a student marks calculator.
  • Build a temperature converter.
  • Create a responsive login form.

Frequently Asked Questions

Question Answer
Why learn real-life programs? They improve practical coding skills.
Can these programs be used online? Yes, they can run in web browsers.
Do these programs need a database? No, basic examples use only variables.

Conclusion

JavaScript real-life programs help developers understand how programming concepts are used in practical applications like banking, billing, authentication, and dynamic websites.

JavaScript All Chapters

Introduction User Input If Else Loops Number Pattern Array 2D Array Switch Case Function String Function Math Function Date Time Function Class Constructor Inheritance Regular Expression Small Application Events Real Life

Continue Learning

Previous

Go to Events Chapter

Next

Go to Number Pattern Chapter