Scribd
Upload
21 views

Javascript Cs Operators

The document contains code for an OTT subscription registration form that collects user details like name, mobile number, user ID, password and subscription plan. It calculates and displays the total bill amount on form submission based on the selected plan.

Uploaded by

raghavkejriwal199
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Javascript Cs Operators

The document contains code for an OTT subscription registration form that collects user details like name, mobile number, user ID, password and subscription plan. It calculates and displays the total bill amount on form submission based on the selected plan.

Uploaded by

raghavkejriwal199
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

1 <html>

2 <head>
3 <title>Housing Loan EMI Calculator</title>
4 </head>
5 <body>
6
7 <h2>Housing Loan EMI Calculator</h2>
8
9 <form id="emiCalculatorForm">
10 <label for="loanAmount">Loan Amount (in Rs):</label>
11 <input type="number" id="loanAmount" name="loanAmount" required><br><br>
12
13 <label for="interestRate">Interest Rate (per annum):</label>
14 <input type="number" id="interestRate" name="interestRate" step="0.01" required
><br><br>
15
16 <label for="tenure">Tenure (in years):</label>
17 <input type="range" id="tenure" name="tenure" min="1" max="30" value="15"><br><br>
18
19 <output for="tenure" id="selectedTenure">15 years</output><br><br>
20
21 <button type="submit">Calculate EMI</button>
22 </form>
23
24 <div id="result" style="display: none;">
25 <h3>EMI Calculation Result</h3>
26 <p id="emi"></p>
27 </div>
28
29 <script>
30 document.getElementById("tenure").addEventListener("input", function() {
31 document.getElementById("selectedTenure").textContent = this.value + " years";
32 });
33
34 document.getElementById("emiCalculatorForm").addEventListener("submit", function(event
) {
35 event.preventDefault();
36 var loanAmount = parseFloat(document.getElementById("loanAmount").value);
37 var interestRate = parseFloat(document.getElementById("interestRate").value);
38 var tenure = parseInt(document.getElementById("tenure").value);
39
40 var monthlyInterestRate = interestRate / (12 * 100);
41 var totalPayments = tenure * 12;
42 var emi = (loanAmount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate,
totalPayments)) / (Math.pow(1 + monthlyInterestRate, totalPayments) - 1);
43
44 document.getElementById("emi").textContent = "EMI: Rs " + emi.toFixed(2);
45
46 document.getElementById("result").style.display = "block";
47 });
48 </script>
49
50 </body>
51 </html>
52
1 <html>
2 <head>
3 <title>Car Loan EMI Calculator</title>
4 </head>
5 <body>
6 <h2>Car Loan EMI Calculator</h2>
7 <form id="emiCalculatorForm">
8 <label for="loanAmount">Loan Amount:</label>
9 <input type="number" id="loanAmount" name="loanAmount" required><br><br>
10 <label for="interestRate">Interest Rate (per annum):</label>
11 <input type="number" id="interestRate" name="interestRate" step="0.01" required
><br><br>
12 <label for="tenure">Tenure (in years):</label>
13 <input type="range" id="tenure" name="tenure" min="1" max="10" value="5"><br><br>
14 <label for="panNumber">PAN Card Number:</label>
15 <input type="text" id="panNumber" name="panNumber" pattern=
"[A-Z]{5}[0-9]{4}[A-Z]{1}" title="Enter a valid PAN Card number" required><br><br>
16 <label for="mobileNumber">Mobile Number:</label>
17 <input type="tel" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}" title=
"Enter a valid 10-digit mobile number" required><br><br>
18 <output for="tenure" id="selectedTenure">5 years</output><br><br>
19 <button type="submit">Calculate EMI</button>
20 </form>
21 <div id="result" style="display: none;">
22 <h3>EMI Calculation Result</h3>
23 <table>
24 <thead>
25 <tr>
26 <th>Month</th>
27 <th>Principal</th>
28 <th>Interest</th>
29 <th>Total Payment</th>
30 </tr>
31 </thead>
32 <tbody id="emiDetails">
33 </tbody>
34 </table>
35 </div>
36 <script>
37 document.getElementById("tenure").addEventListener("input", function()
38 {
39 document.getElementById("selectedTenure").textContent = this.value + " years";
40 });
41 document.getElementById("emiCalculatorForm").addEventListener("submit", function(event
) {
42 event.preventDefault();
43 var loanAmount = parseFloat(document.getElementById("loanAmount").value);
44 var interestRate = parseFloat(document.getElementById("interestRate").value);
45 var tenure = parseInt(document.getElementById("tenure").value);
46 var panNumber = document.getElementById("panNumber").value;
47 var mobileNumber = document.getElementById("mobileNumber").value;
48 if (!isValidPAN(panNumber))
49 {
50 alert("Please enter a valid PAN Card number.");
51 return;
52 }
53
54 if (!isValidMobileNumber(mobileNumber))
55 {
56 alert("Please enter a valid 10-digit mobile number.");
57 return;
58 }
59 var monthlyInterestRate = interestRate / (12 * 100);
60 var totalPayments = tenure * 12;
61 var emi = (loanAmount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate,
totalPayments)) / (Math.pow(1 + monthlyInterestRate, totalPayments) - 1);
62 displayEMIDetails(loanAmount, interestRate, tenure, emi);
63 });
64 function isValidPAN(panNumber)
65 {
66 var regex = /[A-Z]{5}[0-9]{4}[A-Z]{1}/;
67 return regex.test(panNumber);
68 }
69 function isValidMobileNumber(mobileNumber)
70 {
71 var regex = /^[0-9]{10}$/;
72 return regex.test(mobileNumber);
73 }
74 function displayEMIDetails(loanAmount, interestRate, tenure, emi)
75 {
76 var totalPayments = tenure * 12;
77 var monthlyInterestRate = interestRate / (12 * 100);
78 var totalInterestPayable = 0;
79
80 var emiDetailsTable = document.getElementById("emiDetails");
81 emiDetailsTable.innerHTML = '';
82
83 for (var i = 1; i <= totalPayments; i++)
84 {
85 var interest = loanAmount * monthlyInterestRate;
86 var principal = emi - interest;
87 loanAmount -= principal;
88 totalInterestPayable += interest;
89 var row = `<tr>
90 <td>${i}</td>
91 <td>Rs ${principal.toFixed(1)}</td>
92 <td>Rs ${interest.toFixed(1)}</td>
93 <td>Rs ${emi.toFixed(1)}</td>
94 </tr>`;
95 emiDetailsTable.insertAdjacentHTML('beforeend', row);
96 }
97 document.getElementById("result").style.display = "block";
98 }
99 </script>
100 </body>
101 </html>
102
1 <html>
2 <head>
3 <title>Welcome User</title>
4 </head>
5 <body>
6
7 <h2>Welcome User</h2>
8
9 <form id="userInfoForm">
10 <label for="name">Name:</label>
11 <input type="text" id="name" name="name" required><br><br>
12
13 <label for="mobileNumber">Mobile Number:</label>
14 <input type="tel" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}" title=
"Enter a valid 10-digit mobile number" required><br><br>
15
16 <button type="submit">Submit</button>
17 </form>
18
19 <div id="greeting" style="display: none;">
20 <p id="welcomeMessage"></p>
21 </div>
22
23 <script>
24 function greetUser() {
25 var currentDate = new Date();
26 var currentHour = currentDate.getHours();
27
28 if (currentHour >= 0 && currentHour < 12) {
29 return "Good morning";
30 } else if (currentHour >= 12 && currentHour < 16) {
31 return "Good afternoon";
32 } else {
33 return "Good evening";
34 }
35 }
36
37 document.getElementById("userInfoForm").addEventListener("submit", function(event) {
38 event.preventDefault();
39
40 var name = document.getElementById("name").value;
41 var mobileNumber = document.getElementById("mobileNumber").value;
42
43 var greeting = greetUser();
44 var welcomeMessage = greeting + ", " + name + "! Welcome to our website. Your
mobile number is " + mobileNumber + ".";
45
46 document.getElementById("welcomeMessage").textContent = welcomeMessage;
47 document.getElementById("greeting").style.display = "block";
48 });
49 </script>
50
51 </body>
52 </html>
53
1 <html>
2 <head>
3 <title>OTT Subscription Registration</title>
4 </head>
5 <body>
6
7 <h2>OTT Subscription Registration</h2>
8
9 <form id="registrationForm">
10 <label for="name">Name:</label>
11 <input type="text" id="name" name="name" required><br><br>
12
13 <label for="mobileNumber">Mobile Number:</label>
14 <input type="tel" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}" title=
"Enter a valid 10-digit mobile number" required><br><br>
15
16 <label for="userId">User ID:</label>
17 <input type="text" id="userId" name="userId" required><br><br>
18
19 <label for="password">Password:</label>
20 <input type="password" id="password" name="password" required><br><br>
21
22 <label for="confirmPassword">Confirm Password:</label>
23 <input type="password" id="confirmPassword" name="confirmPassword" required><br><br>
24
25 <label>Subscription Plan:</label><br>
26 <input type="radio" id="oneMonth" name="plan" value="oneMonth">
27 <label for="oneMonth">1 Month</label><br>
28
29 <input type="radio" id="sixMonths" name="plan" value="sixMonths">
30 <label for="sixMonths">6 Months</label><br>
31
32 <input type="radio" id="oneYear" name="plan" value="oneYear">
33 <label for="oneYear">1 Year</label><br><br>
34
35 <button type="submit">Register</button>
36 </form>
37
38 <div id="billDetails" style="display: none;">
39 <h3>Subscription Bill Details</h3>
40 <p id="totalBill"></p>
41 </div>
42
43 <script>
44 document.getElementById("registrationForm").addEventListener("submit", function(event)
{
45 event.preventDefault();
46
47 var name = document.getElementById("name").value;
48 var mobileNumber = document.getElementById("mobileNumber").value;
49 var userId = document.getElementById("userId").value;
50 var password = document.getElementById("password").value;
51 var confirmPassword = document.getElementById("confirmPassword").value;
52 var plan = document.querySelector('input[name="plan"]:checked').value;
53
54 if (password !== confirmPassword)
55 {
56 alert("Passwords do not match.");
57 return;
58 }
59
60 var discount = 0;
61 var planName = "";
62
63
64 if (plan === "oneMonth") {
65 discount = 2;
66 planName = "1 Month";
67 } else if (plan === "sixMonths") {
68 discount = 6;
69 planName = "6 Months";
70 } else if (plan === "oneYear") {
71 discount = 15;
72 planName = "1 Year";
73 }
74
75 var totalBill = 100; // Base tariff for the subscription
76
77 // Apply discount
78 totalBill -= (totalBill * discount) / 100;
79
80 var message = "Thank you for registering, " + name + "! Your mobile number is " +
mobileNumber + ". Your user ID is " + userId + ". You have subscribed for " +
planName + ". Your total bill after " + discount + "% discount is Rs " +
totalBill.toFixed(2) + ".";
81
82 document.getElementById("totalBill").textContent = message;
83 document.getElementById("billDetails").style.display = "block";
84 });
85 </script>
86
87 </body>
88 </html>
89
1 <html>
2 <head>
3 <title>OTT Subscription Registration</title>
4 </head>
5 <body>
6
7 <h2>OTT Subscription Registration</h2>
8
9 <form id="registrationForm">
10 <label for="name">Name:</label>
11 <input type="text" id="name" name="name" required><br><br>
12
13 <label for="mobileNumber">Mobile Number:</label>
14 <input type="tel" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}" title=
"Enter a valid 10-digit mobile number" required><br><br>
15
16 <label for="userId">User ID:</label>
17 <input type="text" id="userId" name="userId" required><br><br>
18
19 <label for="password">Password:</label>
20 <input type="password" id="password" name="password" required><br><br>
21
22 <label for="confirmPassword">Confirm Password:</label>
23 <input type="password" id="confirmPassword" name="confirmPassword" required><br><br>
24
25 <h3>Permanent Address</h3>
26 <label for="door">Door:</label>
27 <input type="text" id="door" name="door" required><br><br>
28
29 <label for="street">Street:</label>
30 <input type="text" id="street" name="street" required><br><br>
31
32 <label for="address">Address:</label>
33 <input type="text" id="address" name="address" required><br><br>
34
35 <label for="state">State:</label>
36 <select id="state" name="state" required>
37 <option value="">Select State</option>
38 <option value="Andhra Pradesh">Andhra Pradesh</option>
39 <option value="Arunachal Pradesh">Arunachal Pradesh</option>
40
41 </select><br><br>
42
43 <input type="checkbox" id="copyAddress">
44 <label for="copyAddress">Copy Permanent Address to Communication Address
</label><br><br>
45
46 <h3>Communication Address</h3>
47 <label for="door_comm">Door:</label>
48 <input type="text" id="door_comm" name="door_comm"><br><br>
49
50 <label for="street_comm">Street:</label>
51 <input type="text" id="street_comm" name="street_comm"><br><br>
52
53 <label for="address_comm">Address:</label>
54 <input type="text" id="address_comm" name="address_comm"><br><br>
55
56 <label for="state_comm">State:</label>
57 <select id="state_comm" name="state_comm">
58 <option value="">Select State</option>
59 <option value="Andhra Pradesh">Andhra Pradesh</option>
60 <option value="Arunachal Pradesh">Arunachal Pradesh</option>
61
62 </select><br><br>
63
64 <button type="submit">Register</button>
65 </form>
66
67 <script>
68 document.getElementById("copyAddress").addEventListener("change", function() {
69 var isChecked = this.checked;
70 var door = document.getElementById("door").value;
71 var street = document.getElementById("street").value;
72 var address = document.getElementById("address").value;
73 var state = document.getElementById("state").value;
74
75 document.getElementById("door_comm").value = isChecked ? door : "";
76 document.getElementById("street_comm").value = isChecked ? street : "";
77 document.getElementById("address_comm").value = isChecked ? address : "";
78 document.getElementById("state_comm").value = isChecked ? state : "";
79 });
80 </script>
81
82 </body>
83 </html>
84

You might also like