DAC Bank Loan Automation in Javascript

DAC Bank Loan Automation in Javascript

November 04, 2021

Question:

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        

Note : Every tag has been given a mark. Make sure the element names are correct   

Label NameComponent  NameDescription
Customer NamecustomerNameTo enter the name of the customer
AddresscustomerAddressTo enter the address of the customer.Use textarea with 5 rows and 20 columns.
GendergenderTo choose the gender.  User Radio Button.
Email IDcustomerEmailTo enter the email of the customer. Use HTML5 component so that this field accepts only valid Email ID.
Mobile NumbercustomerMobileNumberTo enter the mobile number
Date of BirthdobTo select the date of birth.  Use date type.
Loan TypeloanTypeAn auto-complete feature should be available to the user for the following options.Vehicle, Home, Education(ID of the auto-complete feature should be “loan”)
Loan  AmountloanAmountThe text “Enter the Amount” should be displayed by default in the text box. When the user starts entering the amount, this text should disappear
TenureloanTenureTo enter the period of loan. Use number type
Avail LoansubmitSubmit button
ResetresetOn clicking this button, all fields should be reset.

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”.

 Note: Use getElementsByName or getElementById function to retrieve the values

Sample Webpage:

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”.

CODE:–

<!DOCTYPE html>
<html>
    <head>
        <style>
            body
            {
                background-color: #FFAACC;
                
            }
            h1
            {
                color: #770080;
                font-family: cursive;
                text-align: center;
            }
            #result
            {
                font-weight: bold;
                color: #770080;
            }
            
        </style>
        <script>
            function validate()
            {
                document.getElementById("result").innerHTML="Thank you "+document.getElementById("name").value+". Your Loan Amount is "+document.getElementById("amt").value;
            }
        </script>
    </head>
    <body>
        <h1>DAC BANK - AVAIL LOAN</h1>
        <form >
            <table>
                <tr>
                    <td>Customer Name</td>
                    <td>
                        <input type="text" name="customerName" id="name" required>
                    </td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>
                        <textarea name="customerAddress" rows="5" cols="20"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>Gender</td>
                    <td>
                        <input type="radio" name="gender" value="male">Male
                        <input type="radio" name="gender" vaulue="female">Female
                    </td>
                </tr>
                <tr>
                    <td>Email ID</td>
                    <td>
                        <input type="email" name="customerEmail">
                    </td>
                    </tr>
                    <tr>
                    <td>Mobile Number</td>
                    <td>
                        <input type="" name="customerMobileNumber" pattern="[789][0-9]{9}">
                    </td>
                </tr>
                <tr>
                    <td>Date of Birth</td>
                    <td>
                        <input type="date" name="dob" id="dob">
                    </td>
                    </tr>
                    <tr>
                    <td>
                        Loan Type
                    </td>
                    <td>
                    <input list="loan" name="loanType" autocomplete="on">
                    <datalist id="loan">
                        <option value="Vehicle">Vehicle</option>
                        <option value="Home">Home</option>
                        <option value="Education">Education</option>
                    </datalist>
                    </td>
                </tr>
                <tr>
                    <td>Loan Amount</td>
                    <td>
                        <input type="text" name="loanAmount" id="amt" placeholder="Enter the Amount" required>
                    </td>
                </tr>
                <tr>
                    <td>Tenure</td>
                    <td>
                        <input type="number" min="1" max="5" name="loanTenure">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" name="submit" value="Avail Loan" onclick="validate()">
                    </td>
                    <td>
                        <input type="reset" name="reset">
                    </td>
                </tr>
            </table>
        </form>
        <div id="result"></div>
    </body>
</html>

 


Tags:

web technology programs with output | web technology programs pdf | web technology programs with output pdf | web technology practical programs | web technology html programs | web technology javascript programs | web technology lab programs for bca | simple web technology programs with output | web technology basic programs | b-web technology | web technology and programming | web technology lab programs using html | programs in web technology

i web technology | web technology lab programs | mca web technology lab programs | web technology lab manual with programs | web technology practical programs pdf | web technology sample programs | 2021 | new
Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)