Site to calculate electricity bill using HTML, CSS and Java Script

-

 >> HTML code to enter customer name, customer id and units consumed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Electricity Bill Calculator</title>
</head>
<body>
  <div class="container">
    <h1>Electricity Bill Calculator</h1>
    <form id="bill-form">
      <label for="name">Name:</label>
      <input type="text" id="name" required><br>
     
      <label for="id">Customer ID:</label>
      <input type="text" id="id" required><br>
     
      <label for="units">Units Consumed:</label>
      <input type="number" id="units" required><br>
     
      <button type="button" id="calculate">Calculate Bill</button>
    </form>
    <div id="bill-result" class="hidden">
      <h2>Bill Details</h2>
      <p><strong>Name:</strong> <span id="result-name"></span></p>
      <p><strong>Customer ID:</strong> <span id="result-id"></span></p>
      <p><strong>Units Consumed:</strong> <span id="result-units"></span></p>
      <p><strong>Total Cost:</strong> <span id="result-cost"></span></p>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

>> CSS code for the site.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: bisque;
  }
 
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }
 
  form {
    margin-bottom: 20px;
  }
 
  label {
    display: inline-block;
    width: 120px;
    margin-right: 10px;
    font-weight: bold;
  }
 
  input {
    padding: 5px;
    width: 100%;
    margin-bottom: 10px;
  }
 
  button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
  }
 
  .hidden {
    display: none;
  }

>> Java Script to set data in local storage.

document.addEventListener('DOMContentLoaded', () => {
    var billForm = document.getElementById('bill-form');
    var calculateButton = document.getElementById('calculate');
    var resultContainer = document.getElementById('bill-result');
    var resultName = document.getElementById('result-name');
    var resultId = document.getElementById('result-id');
    var resultUnits = document.getElementById('result-units');
    var resultCost = document.getElementById('result-cost');
   
    calculateButton.addEventListener('click', () => {
      var name = document.getElementById('name').value;
      var id = document.getElementById('id').value;
      var units = parseFloat(document.getElementById('units').value);
     
      if (units <= 199) {
        charges = units * 1.20;
    } else if (units <= 399) {
        charges = 199 * 1.20 + (units - 199) * 1.50;
    } else if (units <= 599) {
        charges = 199 * 1.20 + 200 * 1.50 + (units - 399) * 1.80;
    } else {
        charges = 199 * 1.20 + 200 * 1.50 + 200 * 1.80 + (units - 599) * 2;
    }

    if (charges > 500) {
        extra_charge = charges * 0.15;
        charges += extra_charge;
    }

    if (charges < 100) {
        charges = 100;
    }
     
      resultName.textContent = name;
      resultId.textContent = id;
      resultUnits.textContent = units;
      resultCost.textContent = `₹${charges.toFixed(2)}`;
     
      resultContainer.classList.remove('hidden');
     
      // Save data to localStorage
      var userData = {
        name,
        id,
        units,
        charges
      };
     
      localStorage.setItem('user_data', JSON.stringify(userData));
    });
  });
 

>> Outputs generated:

Website output on chrome


local storage








Comments

Post a Comment

Popular posts from this blog

Let us C Chapter 1.(H)

-
 (a)Ramesh’s basic salary is input through the keyboard. His dearness allowance is 40% of basic salary, and house rent allowance is 20% of basic salary. Write a program to calculate his gross salary. #include <stdio.h> int main (){ int bs , gs ; printf ( "Enter basic salary: " ); scanf ( " %d " , & bs ); gs = bs + ( bs * 40 / 100 ) + ( bs * 20 / 100 ); printf ( "Gross salary is %d " , gs ); } (b) The distance between two cities (in km.) is input through the keyboard. Write a program to convert and print this distance in meters, feet, inches and centimeters.  #include <stdio.h> int main () {     int m , c ;     float d , f ;     printf ( "Distance between two cities(in km): " );     scanf ( " %f " , & d );     m = d * 1000 ; f = d * 3280.84 ; c = d * 100000 ;     printf ( " %f is equal to %d metres. \n " , d , m );     printf ( " %f is equal to %f feet. \n " , d , f );   ...
Read more

Functions and recrusion.

-
1.Write a program using functions to find the average of three numbers. #include <stdio.h> float average ( int a, int b, int c); int main (){     int a , b , c ;     printf ( "Enter the value of a" );     scanf ( " %d " , & a );     printf ( "Enter the value of b" );     scanf ( " %d " , & b );     printf ( "Enter the value of c" );     scanf ( " %d " , & c );     printf ( "The average is %f " , average ( a , b , c )); } float average ( int a, int b, int c){     float res ;     res = (a + b + c) / 3 ;     return res ; } 2.Write a function to convert Celcius temperature into Fahrenheit. #include <stdio.h> float far ( float a); int main (){     float a ;     printf ( "Enter the Temparature in celsius:" );     scanf ( " %f " , & a );     printf ( "The temprature in Farenheit: %f " , far ( a )); } ...
Read more

Quick calculator using HTML,CSS and Java Script.

-
Image
 >>HTML codes. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "cal.css" >     < title >Calculator</ title > </ head > < body >     < div class = "calculator" >         < input type = "text" id = "display" disabled >         < div class = "buttons" >             < button onclick = " appendToDisplay ( '7' ) " >7</ button >             < button onclick = " appendToDisplay ( '8' ) " >8</ button >             < button onclick = " appendToDisplay ( '9' ) " >9</ button >             < button onclick...
Read more