E-BOOK Portal in Javascript

Question:

E-Book Portal wanted to give grand discount to two types of Books – Comics and Science. Discount is given based on the number of books (bulk purchase), the customer order for that category.

Label NameComponent  NameDescription
Customer NamecustomerNameTo enter the name of the customer. “Enter the Customer Name” text should be displayed by default in the text box. When the user starts entering the name, this text should disappear.
Mobile NumbercustomerMobileNumberTo enter the mobile number. “Enter the Mobile Number” text should be displayed by default in the text box. When the user starts entering the value, this text should disappear.
Book CategorybookCategoryRadio button to choose either Science or Comics
TypebookTypeAn auto-complete feature should be available to the user for the following options.Weekly,Monthly,Fortnightly(Name of the auto-complete feature should be “bookTypes”) 
No of Books RequiredbookCountA Slider control with min value 1 and max value 500. By default the value should be 1. For this component set id attribute value as ‘bookval’.
Calculate Total Pricesubmit 
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.

·         All fields are mandatory.

·         Customer Name should contain only alphabets and space.

·         Customer Mobile Number should be of 10 digits and should start with 9/8.

Use JavaScript for doing the below calculation:

Customer on entering the valid values and clicking the submit button the total price  has to be calculated based on the below given discount rate chart and displayed as “Total Price is: ” …..  in a div tag. The div tag should have an id attribute with value as “result”.

(Total books * perbookCost) – discountpercentage

Note: Use getElementsByName or getElementById function to retrieve the values

Discount Rate chart

Book TypePer Book CostDiscount Rate(in percentage)
Science400 5% if total book count <=250
Science400 7% if total book count > 250
Comics300 3% if total book count <=250
Comics300 4% if total book count > 250

Sample Webpage:

Quiz for Exam - E-BOOK Portal
Quiz for Exam – E-BOOK Portal

The discount rate chart table should be designed as shown in the above sample webpage.

Quiz for Exam - E-BOOK Portal
Quiz for Exam – E-BOOK Portal

Styles to be applied: (Do not use Inline CSS)

1.       Body color should be “#E6E6FA”.

2.       For the discount rate table the border style should be solid and it should be display on the right side (use float property) of the webpage. (The table should have the id attribute with the value as “discounttable”).

3.       The heading should be done using <h1> tag the text color should be “#800080”, style should be “cursive” and it should be aligned to center of the webpage.

Code:

EBook.html

<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-Z\s]+" 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>

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *