DAC Bank is in the process of issuing various loans to its customers. To ease the customer they need to automate the feature of various loans issued by the bank like Vehicle, Home, Education loan etc. Create a Web page "DAC BANK - AVAIL LOAN" that has the below fields RULES/CONSTRAINTS: All validations should be based on HTML 5 (Do not use Javascript) · The component name should be same as given above. · The fields customerName and loanAmount are mandatory. · Gender should be either ‘Male’ or ‘Female’. · Customer Mobile Number should be of 10 digits and should start with 9/8/7. · Tenure can take a value between 1 and 5. Use JavaScript for doing the below : Customer on entering valid values and clicking the submit button display the message as "Thank you <customerName>. Your Loan Amount is loanAmount>" in a div tag with id "result". On providing the values the web page should look as follows : Styles to be applied: (Do not use Inline CSS) 1. Body color should be "#FFAACC". 2. The heading should be done using <h1> tag the text color should be "#770080", font family should be "cursive" and it should be aligned to center of the webpage. 3. The result should be bold and color of the text should be "#770080". Important Note : 1. Make sure all tags and attributes are in lower case 2. After displaying the output, the page should not get redirected. 3. Do not use 'let' or 'const' keywords. Instead, use 'var'. 4. Use getElementById() or getElementsByName() to fetch value out of the HTML components.
CODE:- <pre> 1 <!-- This is a partial code. Implement the neccessary codes --> 2 <html> 3 <head> 4 <style> 5 body 6 { 7 background-color:#FFAACC; 8 } 9 h1{ 10 color:#770080; 11 font-family:cursive; 12 text-align:center; 13 } 14 #result 15 { 16 font-weight:bold; 17 color:#770080; 18 } 19 </style> 20 <script> 21 function validate(){ 22 var name=document.getElementByName("customerName")[0].value; 23 var amount=document.getElementByName("loanAmount")[0].value; 24 document.getElementById("result").innerHTML="Thank you "+name+". Your Loan Amount is "+amount; 25 } 26 </script> 27 </head> 28 <body> 29 <h1>DAC BANK - AVAIL LOAN</h1> 30 <form> 31 <center> 32 <table> 33 <tr> 34 <td>Customer Name</td> 35 <td><input type="text" name="customerName" id="nam" pattern="[A-Z a-z]+" required></td> 36 </tr> 37 <tr> 38 <td>Address</td> 39 <td><textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea></td> 40 </tr> 41 <tr> 42 <td>Gender</td> 43 <td><input type="radio" name="gender" value="male">Male 44 <input type="radio" name="gender" value="female">Female</td> 45 </tr> 46 <tr> 47 <td>Email ID</td> 48 <td><input type="email" name="customerEmail" id="email"></td> 49 </tr> 50 <tr> 51 <td>Mobile Number</td> 52 <td><input type="text" name="customerMobileNumber" pattern="[7-9]{1}[0-9]{9}" maxlength="10"></td> 53 </tr> 54 <tr> 55 <td>Date of Birth</td> 56 <td><input type="date" name="dob" id="dob"></td> 57 </tr> 58 <tr> 59 <td>Loan Type</td> 60 <td><input name="loanType" list="loan" autocomplete="on"> 61 <datalist id="loan"> 62 <option value="Vehicle">Vehicle</option> 63 <option value="Home">Home</option> 64 <option value="Education">Education</option> 65 </datalist></td> 66 </tr> 67 <tr> 68 <td>Loan Amount</td> 69 <td><input type="text" name="loanAmount" placeholder="Enter the Amount" id="loanAmount" required></td> 70 </tr> 71 <tr> 72 <td>Tenure</td> 73 <td><input type="number" name="loanTenure" id="loan" min="1" max="5"></td> 74 </tr> 75 <tr> 76 <td><input type="submit" name="submit" value="Avail Loan" onclick="validate()"></td> 77 <td><input type="reset" name="reset"></td> 78 </tr> 79 </table> 80 </center> 81 </form> 82 <div id="result"></div> 83 </body> 84 </html>
Fail 1 - Check with the output statements or Check with the Javascript code or Check with Client UI requirements
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Submit an article or tip