KASA IT Finishing School – Feedback Automation in Javascript

Question:

KASA IT Finishing school is conducting Corporate and initial training program for many companies and colleges.  Feedback is provided by the participants once the training is over.  The organization wants to automate the Feedback received.  Initially they plan to automate the feedback received from College. 

To facilitate this requirement create a Web page “College Training Feedback Form” that has the below fields. 

Note  :  All validations should be based on HTML 5 (Do not use Javascript)          

Label NameComponent  NameDescription
Participant NameparticipantNameTo enter the name of the participant.The name should accept only alphabets and space.The text “Enter your name” should be displayed by default in the text box. When the user starts entering the value, this text should disappear.
College NamecollegeNameTo enter the college name of the participant.
Participant AddressparticipantAddressTo enter the address of the participant. Provide the correct tag and attribute to create a text area with  5 rows and 20 columns.
GendergenderSelect the gender. Provide the correct input type to make this component a radio button.
Email IDemailTo enter the email of the participant.This field should accept a valid email.
Mobile NumbermobileNumberTo enter the mobile number.The mobile number should accept only digits.  It should contain 10 digits and start with 9/8/7.
Trainer’s NametrainerNameTo enter the trainer’s name
Course NamecourseNameTo enter the course name for which the feedback is provided
Course Completion datedateofcompletionTo select the date of completion of the course
Trainer’s FeedbacktrainerFeedbackAn auto-complete feature should be available to the user for the following options.Excellent, Very Good, Good, Average, Below Average(Name of the auto-complete feature should be “feedback”).Fill the tag to implement the autocomplete feature.
Submit Feedbacksubmit 
ClearResetReset Button.  On clicking this button, all fields should be reset.Provide the input type for this component.

Use JavaScript for doing the below calculation:

When the participant enters the valid values and clicks the “Submit Feedback” button the feedback for the trainer has to be displayed based on the below assumptions :

FeedbackFeedback Rate
Excellent5
Very Good4
Good3
Average2
Below Average1

The result is displayed as  “Feedback rating of  trainerName  is feedbackRate / 5.  Given by participant – participantName”   in a div tag   with  id  “result”.  

Note: Use getElementsByName or getElementById function to retrieve the values

Sample Webpage:

download 8

On providing the values the web page should look as follows :

download 9

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 should be “Courier New”, style should be “italics” 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:

<html>
    <style>
        body{
            background-color:#E6E6FA;
        }
        #discounttable{
            border-style:solid;
            float:right;
        }
        h1{
            color:#800080;
            font-family:cursive;
            text-align:center;
        }
        h2{
            text-align:center;
        }
    </style>
    <script>
        function validate()
        {
            var bcats=document.getElementsByName("bookCategory");
            var bcat;
            var price;
            var disc;
            for(var i=0;i<bcats.length;i++)
            {
                if(bcats[i].checked)
                {
                    bcat=bcats[i].value;
                }
            }
            var bcount=document.getElementById("bookval").value;
            bcount=parseInt(bcount);
            if(bcat=="Science")
            {
                price=400;
                if(bcount<=250)
                {
                    disc=5;
                }
                else{
                    disc=7;
                }
            }
            else{
                price=300;
                if(bcount<=250)
                {
                    disc=3;
                }
                else{
                    disc=4;
                }
            }
            var tot=bcount*price-((bcount*price*disc)/100);
            document.getElementById("result").innerHTML="Total Price is:"+tot;
        }
    </script>
    </head>
    <body>
        <h1>E-BOOK GRAND SALE</h1>
        <form name="form">
            <table>
                <tr>
                    <td>Customer Name</td>
                    <td><input type="text" name="customerName" placeholder="Enter the Customer Name" pattern="[a-zA-Zs]+" required></td>
                </tr>
                <tr>
                    <td>Mobile Number</td>
                    <td><input type="tel" name="customerMobileNumber" placeholder="Enter the Mobile Number" pattern="[89][0-9]{9}" required></td>
                </tr>
                <tr>
                    <td>
                        Book Category
                    </td>
                    <td>
                        <input type="radio" name="bookCategory" value="Science" required>Science
                        <input type="radio" name="bookCategory" value="Comics"  required>Comics
                    </td>
                </tr>
                <tr>
                    <td>Type</td>
                    <td>
                        <input list="bookTypes" name="bookType" required auto-complete >
                        <datalist id="bookTypes" >
                            <option value="Weekly">Weekly</option>
                            <option value="Monthly">Monthly</option>
                            <option value="Fortnightly">Fortnightly</option>
                        </datalist>
                    </td>
                </tr>
                <tr>
                    <td>No of Books Required</td>
                    <td><input type="range" name="bookCount" id="bookval" min="1" max="500" value="1" oninput="markOutputId.value=bookval.value">
                    <output name="markOutputName" id="markOutputId"></output></td>
                </tr>
                <tr>
                    <td><input type="button" name="submit" value="Calculate Total Price" onclick="validate()"></td>
                    <td><input type="reset" name="reset" ></td>
                </tr>
            </table>
            </form>
            <div id="result"></div>
            <table id="discounttable" border="1px">
            <caption>Discount Rate Chart</caption>
                <tr>
                    <th>Book Type</th>
                    <th>
                        Per Book Cost
                    </th>
                    <th>
                        Discount Rate(in percentage)
                    </th>
                </tr>
                <tr>
                    <td>Science</td>
                    <td>400</td>
                    <td>5% if total book count &lt;=250</td>
                </tr>
                <tr>
                    <td>Science</td>
                    <td>400</td>
                    <td>7% if total book count &gt; 250</td>
                </tr>
                <tr>
                    <td>Comics</td>
                    <td>300</td>
                    <td>3% if total book count &lt;= 250</td>
                </tr>
                <tr>
                    <td>Comics</td>
                    <td>300</td>
                    <td>4% if total book count &gt; 250</td>
                </tr>
            </table>
    </body>
</html>
  1. Window Resize
  2. Customer Data
  3. Three Division
  4. Check Box Using JQuery
  5. Drag an Object

Leave a Comment