viewbill.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
.main {
border: 1px solid black;
border-radius: 10px;
margin: 5%;
margin-left: 20%;
margin-right: 20%;
background-color: azure;
}
table {
border: 1px solid black;
margin: 2%;
width: 96%;
}
.one {
padding-top: 2%;
display: flex;
width: 98%;
margin-right: 1%;
margin-left: 2%;
}
.two {
font-family: 'Times New Roman';
font-size: 18px;
text-align: right;
}
th {
font-size: 20px;
margin-right: 2%;
margin-top: 3%;
}
.the {
background-color: rgb(211, 204, 209);
}
button {
font-size: 15px;
background-color: rgb(159, 128, 189);
font-weight: bold;
}
h1 {
font-size: 25px;
margin-left: 5%;
margin-right: 4%;
border-radius: 3px;
background-color: rgb(182, 142, 170);
color:rgb(82, 55, 82);
}
.uni {
font-size: 20px;
}
.olc {
float: right;
font-size: 20px;
}
.lst {
border: 1px solid black;
background-color: rgb(168, 142, 168);
font-size: 20px;
margin-bottom: 2%;
width: fit-content;
margin-left: 40%;
}
.the {
font-size: 20px;
font-weight: bold;
}
.logm {
border: 1px solid black;
border-radius: 2%;
margin-left: 35%;
margin-top: 8%;
width: 30%;
}
.logf {
font-size: 15px;
margin-left: 35%;
margin-top: 2%;
width: 25%;
font-family: 'Times New Roman';
font-weight: bold;
}
.logh {
font-family : 'Times New Roman';
text-align : center;
color : hsla(300, 53%, 10%, 0.797);
background-color : #9b919b;
}
table {
border: 1px solid black;
margin: 2%;
width: 96%;
}
.one {
padding-top: 2%;
display: flex;
width: 98%;
margin-right: 1%;
margin-left: 2%;
}
.two {
font-family: 'Times New Roman';
font-size: 18px;
text-align: right;
}
th {
font-size: 20px;
margin-right: 2%;
margin-top: 3%;
}
.the {
background-color: rgb(211, 204, 209);
}
button {
font-size: 15px;
background-color: rgb(159, 128, 189);
font-weight: bold;
}
h1 {
font-size: 25px;
margin-left: 5%;
margin-right: 4%;
border-radius: 3px;
background-color: rgb(182, 142, 170);
color:rgb(82, 55, 82);
}
.uni {
font-size: 20px;
}
.olc {
float: right;
font-size: 20px;
}
.lst {
border: 1px solid black;
background-color: rgb(168, 142, 168);
font-size: 20px;
margin-bottom: 2%;
width: fit-content;
margin-left: 40%;
}
.the {
font-size: 20px;
font-weight: bold;
}
.b {
background-color: aquamarine;
}
</style>
<body class="b">
<div class="main">
<h1>Quick Ebill</h1>
<table>
<tr class = "one">
<nav>
<th style = "border: 2px;"><a href = "viewbill.html">Home</a></th>
<th><a href = "Bill.html">Pay Bill</a></th>
<th><a href = "Regcom.html">Register Complaint</a></th>
<th><a href = "comstatus.html">Complaint Status</a></th>
</nav>
</tr>
<tr class = "two">
<td></td>
<td style="background-color: rgb(185, 172, 201); text-align: center;">Welcome <label><span id="ua"></span></label></td>
<td>
<a href="login.html">
<button onclick="logn()" style="margin-right: 15%;">Logout</button>
</a>
</td>
</tr>
</table>
<h1>View Bill and Pay</h1>
<table>
<tr>
<thead class="u" style="background-color:rgb(185, 172, 201);">
<td>Consumer Number</td>
<td>Select</td>
<td>Due Amount(₹)</td>
<td>Payable(₹)</td>
</thead>
</tr>
<tr class="uni">
<td id="rno1"></td>
<td><input onclick="checkcon()" id = "cb1" type ="checkbox"></td>
<td id="r1"></td>
<td id="r4"></td>
</tr>
<tr class="uni">
<td id="rno2"></td>
<td><input onclick="checkcon()" id = "cb2" type = "checkbox"></td>
<td id="r2"></td>
<td id="r5"></td>
</tr>
<tr class="uni">
<td id="rno3"></td>
<td><input onclick="checkcon()" id = "cb3" type = "checkbox"></td>
<td id="r3"></td>
<td id="r6"></td>
</tr>
</table>
<table>
<tr class="olc">
<td>Total Amount Payable :₹</td>
<td id="tot" style="background-color:rgb(185, 172, 201);"></td>
</tr>
</table>
<nav class = "lst">
<button onclick="jean()">Proceed to Pay</button>
</nav>
</div>
document.getElementById("ua").innerHTML=localStorage.getItem("u");
document.getElementById("rno1").innerHTML =Math.ceil(Math.random()*Math.pow(10,13));
document.getElementById("rno2").innerHTML =Math.ceil(Math.random()*Math.pow(10,13));
document.getElementById("rno3").innerHTML =Math.ceil(Math.random()*Math.pow(10,13));
let a = document.getElementById("r1").innerHTML = Math.ceil(Math.random()*Math.pow(10,4));
let b = document.getElementById("r2").innerHTML = Math.ceil(Math.random()*Math.pow(10,4));
let c = document.getElementById("r3").innerHTML = Math.ceil(Math.random()*Math.pow(10,4));
document.getElementById("r4").innerHTML = a;
document.getElementById("r5").innerHTML = b;
document.getElementById("r6").innerHTML = c;
function checkcon(){
t=0;
if(document.getElementById("cb1").checked==true){
t = a;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v1",t);
//console.log(localStorage.getItem("v1"));
}
if(document.getElementById("cb2").checked==true){
t = b;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v2",t);
}
if(document.getElementById("cb3").checked==true){
t = c;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v3",t);
}
if(document.getElementById("cb1").checked==true && document.getElementById("cb2").checked==true){
t = a+b;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v4",t);
}
if(document.getElementById("cb2").checked==true && document.getElementById("cb3").checked==true){
t = b+c;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v5",t);
}
if(document.getElementById("cb3").checked==true && document.getElementById("cb1").checked==true){
t = c+a;
document.getElementById("tot").innerHTML = t;
localStorage.setItem("v6",t);
}
if(document.getElementById("cb1").checked==true && document.getElementById("cb2").checked==true && document.getElementById("cb3").checked==true){
t = a+b+c;
document.getElementById("tot").innerHTML =t;
localStorage.setItem("v7",t);
}
if(document.getElementById("cb1").checked!=true && document.getElementById("cb2").checked!=true && document.getElementById("cb3").checked!=true){
t=0;
document.getElementById("tot").innerHTML =t;
localStorage.setItem("v8",t);
}
else
{
localStorage.setItem('total',t);
}
}
</script> </html>