fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Electricity Bill Calculator</title>
  5.     <style>
  6.         body {
  7.             font-family: Arial, sans-serif;
  8.             margin: 20px;
  9.             background-color: #f0f9ff; /* Light Blue Background */
  10.         }
  11.         .container {
  12.             background-color: #e0f2fe; /* Soft Blue Container */
  13.             padding: 30px;
  14.             border-radius: 12px;
  15.             box-shadow: 0 0 <15px rgba(0, 0, 0, 0.2);
  16.             max-width: 500px;
  17.             margin: 0 auto;
  18.         }
  19.         h1 {
  20.             color: #0c4a6e; /* Dark Blue Title */
  21.             text-align: center;
  22.             margin-bottom: 20px;
  23.         }
  24.         label {
  25.             display: block;
  26.             margin-bottom: 8px;
  27.             font-weight: bold;
  28.             color: #075985;
  29.         }
  30.         input[type="text"], input[type="number"], input[type="tel"] {
  31.             width: calc(100% - 20px);
  32.             padding: 10px;
  33.             margin-bottom: 15px;
  34.             border: 1px solid #38bdf8;
  35.             border-radius: 6px;
  36.         }
  37.         button {
  38.             background-color: #0284c7; /* Blue Button */
  39.             color: white;
  40.             padding: 12px 20px;
  41.             border: none;
  42.             border-radius: 6px;
  43.             cursor: pointer;
  44.             width: 100%;
  45.             font-size: 16px;
  46.         }
  47.         button:hover {
  48.             background-color: #0369a1; /* Darker Blue on Hover */
  49.         }
  50.         .result {
  51.             margin-top: 20px;
  52.             padding: 15px;
  53.             background-color: #ffffff;
  54.             border-radius: 6px;
  55.         }
  56.         .error {
  57.             color: red;
  58.             margin-bottom: 10px;
  59.         }
  60.         .bill-details {
  61.             text-align: left;
  62.             color: #0c4a6e;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="container">
  68.         <h1>Electricity Bill Calculator</h1>
  69.         <form method="post" action="" onsubmit="return validateForm()">
  70.             <label for="name">Customer Name:</label>
  71.             <input type="text" id="name" name="name" required>
  72.             <label for="phone">Phone Number:</label>
  73.             <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit number" required>
  74.             <div id="phoneError" class="error"></div>
  75.             <label for="units">Units Consumed:</label>
  76.             <input type="number" id="units" name="units" min="0" required>
  77.             <div id="unitsError" class="error"></div>
  78.             <button type="submit" name="submit">Calculate Bill</button>
  79.         </form>
  80.         <div class="result">
  81.             <?php
  82.             if (isset($_POST['submit'])) {
  83.                 $name = htmlspecialchars($_POST['name']);
  84.                 $phone = htmlspecialchars($_POST['phone']);
  85.                 $units = $_POST['units'];
  86.                 $bill = 0;
  87.                 if ($units <= 100) {
  88.                     $bill = 0;
  89.                 } else if ($units > 100 && $units <= 200) {
  90.                     $remaining_units = $units - 100;
  91.                     $bill = $remaining_units * 4.00;
  92.                 } else if ($units > 200 && $units <= 300) {
  93.                     $temp = 100 * 4.00;
  94.                     $remaining_units = $units - 200;
  95.                     $bill = $temp + ($remaining_units * 5.20);
  96.                 } else {
  97.                     $temp = (100 * 4.00) + (100 * 5.20);
  98.                     $remaining_units = $units - 300;
  99.                     $bill = $temp + ($remaining_units * 6.50);
  100.                 }
  101.                 echo "<div class='bill-details'>";
  102.                 echo "<h3>Bill Details</h3>";
  103.                 echo "<p><strong>Name:</strong> " . $name . "</p>";
  104.                 echo "<p><strong>Phone:</strong> " . $phone . "</p>";
  105.                 echo "<p><strong>Units Consumed:</strong> " . $units . " units</p>";
  106.                 echo "<h3>Total Bill Amount: Rs. " . number_format($bill, 2) . "</h3>";
  107.                 echo "</div>";
  108.             }
  109.             ?>
  110.         </div>
  111.     </div>
  112.     <script>
  113.         function validateForm() {
  114.             var units = document.getElementById("units").value;
  115.             var phone = document.getElementById("phone").value;
  116.             var unitsError = document.getElementById("unitsError");
  117.             var phoneError = document.getElementById("phoneError");
  118.             if (units < 0) {
  119.                 unitsError.textContent = "Units consumed cannot be negative.";
  120.                 return false;
  121.             } else {
  122.                 unitsError.textContent = "";
  123.             }
  124.             if (!/^[0-9]{10}$/.test(phone)) {
  125.                 phoneError.textContent = "Phone number must be 10 digits.";
  126.                 return false;
  127.             } else {
  128.                 phoneError.textContent = "";
  129.             }
  130.             return true;
  131.         }
  132.     </script>
  133. </body>
  134. </html>
Success #stdin #stdout 0.04s 25608KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html>
<head>
    <title>Electricity Bill Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f9ff; /* Light Blue Background */
        }
        .container {
            background-color: #e0f2fe; /* Soft Blue Container */
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 0 <15px rgba(0, 0, 0, 0.2);
            max-width: 500px;
            margin: 0 auto;
        }
        h1 {
            color: #0c4a6e; /* Dark Blue Title */
            text-align: center;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #075985;
        }
        input[type="text"], input[type="number"], input[type="tel"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #38bdf8;
            border-radius: 6px;
        }
        button {
            background-color: #0284c7; /* Blue Button */
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
        }
        button:hover {
            background-color: #0369a1; /* Darker Blue on Hover */
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #ffffff;
            border-radius: 6px;
        }
        .error {
            color: red;
            margin-bottom: 10px;
        }
        .bill-details {
            text-align: left;
            color: #0c4a6e;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Electricity Bill Calculator</h1>
        <form method="post" action="" onsubmit="return validateForm()">
            <label for="name">Customer Name:</label>
            <input type="text" id="name" name="name" required>
            <label for="phone">Phone Number:</label>
            <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit number" required>
            <div id="phoneError" class="error"></div>
            <label for="units">Units Consumed:</label>
            <input type="number" id="units" name="units" min="0" required>
            <div id="unitsError" class="error"></div>
            <button type="submit" name="submit">Calculate Bill</button>
        </form>
        <div class="result">
                    </div>
    </div>
    <script>
        function validateForm() {
            var units = document.getElementById("units").value;
            var phone = document.getElementById("phone").value;
            var unitsError = document.getElementById("unitsError");
            var phoneError = document.getElementById("phoneError");
            if (units < 0) {
                unitsError.textContent = "Units consumed cannot be negative.";
                return false;
            } else {
                unitsError.textContent = "";
            }
            if (!/^[0-9]{10}$/.test(phone)) {
                phoneError.textContent = "Phone number must be 10 digits.";
                return false;
            } else {
                phoneError.textContent = "";
            }
            return true;
        }
    </script>
</body>
</html>
https://ideone.com/CcCmim
language:
PHP (php 7.3.5)
created:
10 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!