ZuoTi.Pro
Question

The purpose is to serve as a bridge between your existing knowledge of HTML/JS and the server side programming. You are requi


MY SHOP NAME* : EMAIL* : PHONE* : 123-123-123 ADDRESS: CITY* : Post Code* : X9X X9X PROVINCE* : ONTARIO PRODUCT 1 : PRODUCT 2
MY SHOPs INVOICE NAME .. EMAIL PHONE DELIVERY ADDRESS JOHN DOE JOHN@TEST.COM 123-123-1234 123 XYZ STREET, TORONTO, ONTARIO,
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1 
<!doctype html>
<html lang="en">
  <head>
    <!--  meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1 class="text-center mb-5">My Shop</h1>

    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <form class="form-section" id="response_form" >
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Name*</label>
              <div class="col-sm-10">
                <input type="text" id="name" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Email*</label>
              <div class="col-sm-10">
                <input type="email" id="email" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Phone*</label>
              <div class="col-sm-10">
                <input type="phone" id="phone" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Address*</label>
              <div class="col-sm-10">
                <input type="text" id="address" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">City*</label>
              <div class="col-sm-10">
                <input type="text" id="city" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Post code*</label>
              <div class="col-sm-10">
                <input type="text" id="pcode" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Province*</label>
              <div class="col-sm-10">
                <input type="text" id="province" required class="form-control"  id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Product 1</label>
              <div class="col-sm-10">
                <input type="number" required id="product1" class="form-control" id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Product 2</label>
              <div class="col-sm-10">
                <input type="number" required id="product2" class="form-control" id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Product 3</label>
              <div class="col-sm-10">
                <input type="number" required id="product3" class="form-control" id="inputPassword">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label" required>Delivey Time*</label>
              <div class="col-sm-10">
                <select class="form-control" id="days"> 
                  <option value="30">1 Day</option>
                  <option value="20">2 Days</option>
                  <option value="15">3 Days</option>
                </select>
              </div>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
          </form>
          <div class="print-section" style="display: none;">
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Name*</label>
              <div class="col-sm-10 text-right">
                <div class="name"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Email*</label>
              <div class="col-sm-10 text-right">
                <div class="email"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Phone*</label>
              <div class="col-sm-10 text-right">
                <div class="phone"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Address*</label>
              <div class="col-sm-10 text-right">
                <div class="address"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">City*</label>
              <div class="col-sm-10 text-right">
                <div class="city"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Post code*</label>
              <div class="col-sm-10 text-right">
                <div class="pcode"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">Province*</label>
              <div class="col-sm-10 text-right">
                <div class="province"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label"><span id="qty1"></span> Product 1 @ 10.00</label>
              <div class="col-sm-7 text-right">
                <div class="product1"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label"><span id="qty2"></span> Product 2 @ 20.00</label>
              <div class="col-sm-7 text-right">
                <div class="product2"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label"><span id="qty3"></span> Product 3 @ 30.00</label>
              <div class="col-sm-7 text-right">
                <div class="product3"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label">Shipping Charge</label>
              <div class="col-sm-7 text-right">
                <div class="days"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label">Subtotal</label>
              <div class="col-sm-7 text-right">
                <div class="subtotal"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label">Taxes @ 13%</label>
              <div class="col-sm-7 text-right">
                <div class="taxes"></div>
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-5 col-form-label">Total</label>
              <div class="col-sm-7 text-right">
                <div class="total"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
 $('#response_form').on('submit',function (e) {
  e.preventDefault();
  $('#response_form').hide();
  $('.print-section').show();

  $('.name').html(document.getElementById("name").value);
  $('.email').html(document.getElementById("email").value);
  $('.phone').html(document.getElementById("phone").value);
  $('.address').html(document.getElementById("address").value);
  $('.city').html(document.getElementById("city").value);
  $('.pcode').html(document.getElementById("pcode").value);
  $('.province').html(document.getElementById("province").value);
  $('.days').html(document.getElementById("days").value);
  var days = document.getElementById("days").value;
  var qty1 = document.getElementById("product1").value;
  $('#qty1').html(qty1);
  $('.product1').html(qty1 * 10);
  var qty2 = document.getElementById("product2").value;
  $('#qty2').html(qty2);
  $('.product2').html(qty2 * 20);
  var qty3 = document.getElementById("product3").value;
  $('#qty3').html(qty3);
  $('.product3').html(qty3 * 30);
  $('.subtotal').html((qty3 * 30) + (qty2 * 20) + (qty1 * 10) + Number(days));
  var total = (qty3 * 30) + (qty2 * 20) + (qty1 * 10) + Number(days);
  var taxes = (total/100)*13;
  taxesround = taxes.toFixed(2);
  $('.taxes').html(taxesround);
  var total = total + taxes;
 totalround = total.toFixed(2);
  $('.total').html(totalround);
});

    </script>
  </body>
</html>
0 0
Add a comment
Know the answer?
Add Answer to:
The purpose is to serve as a bridge between your existing knowledge of HTML/JS and the...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Develop an HTML form that could be used to enter your book information (Books, Authors, and...

    Develop an HTML form that could be used to enter your book information (Books, Authors, and Publishers) start with the HTML/JavaScript template provided Expand upon it! What field information would you enter into a system? Have your form use more then just character text fields ... radio buttons, pick lists, and other elements make your form easier to use and you don't need to do lots of JavaScript checks. What fields would be mandatory ... which could be left blank?...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • Design an original, professional web site following the specifications listed below. This web sit...

    Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

  • Program Purpose In this program you will demonstrate your knowledge in programming OOP concepts, such as classes, encapsulation, and procedural programming concepts such as lınked lists, dynamic me...

    Program Purpose In this program you will demonstrate your knowledge in programming OOP concepts, such as classes, encapsulation, and procedural programming concepts such as lınked lists, dynamic memory allocation, pointers, recursion, and debugging Mandatory Instructions Develop a C++ object oriented solution to the Towers of Hanoi puzzle. Your solution will involve designing two classes one to represent individual Disk and another to represent the TowersOfHanoi game. TowersOfHanoi class will implement the game with three linked lists representing disks on each...

  • the case: XYZ Pty Ltd is an established company (the 'Company') that has been selling hardware...

    the case: XYZ Pty Ltd is an established company (the 'Company') that has been selling hardware tools and paints for the last 30 years using traditional "brick and mortar" business model, based on tradesmen coming to the store and selecting the goods they want to buy. They are currently seeking to expand their business to include on-line catalogue with ability to be browsed, select items to be put in the shopping bag and to make an on-line payment with goods...

  • Question: What does Hobbes suggest is the reason we have government at all? How does Locke’s...

    Question: What does Hobbes suggest is the reason we have government at all? How does Locke’s view of the need for government differ? Using these sources: From Thomas Hobbes, Leviathan book 1, chapter 13 So that in the nature of man, we find three principal causes of quarrel. First, competition; secondly, diffidence; thirdly, glory. The first maketh men invade for gain; the second, for safety; and the third, for reputation. The first use violence, to make themselves masters of other...

  • Discussion questions 1. What is the link between internal marketing and service quality in the ai...

    Discussion questions 1. What is the link between internal marketing and service quality in the airline industry? 2. What internal marketing programmes could British Airways put into place to avoid further internal unrest? What potential is there to extend auch programmes to external partners? 3. What challenges may BA face in implementing an internal marketing programme to deliver value to its customers? (1981)ǐn the context ofbank marketing ths theme has bon pururd by other, nashri oriented towards the identification of...

  • Super stuck on a couple of questions on this scenario. Advanced Scenario 7: Mark and Barbara...

    Super stuck on a couple of questions on this scenario. Advanced Scenario 7: Mark and Barbara Matthews Directions Using the tax software, complete the tax retum, including Form 1040 and all appropri- ate forms, schedules, or worksheets. Answer the questions following the scenario. Note: When entering Social Security numbers (SSNS) or Employer identification Numbers (EINS), replace the Xs as directed, or with any four digits of your choice. Interview Notes • Mark and Barbara are married and want to file...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT