Question

In: Computer Science

Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs...

Using HTML and JAVASCRIPT

Create a Content area on the main entry page will include inputs for customer entry for the following:

  • Entry field (with labeling) for the Customer's name
  • Entry field (with labeling) for the Customer's email address
  • Entry field (with labeling) for which room the customer is planning on painting
  • Entry field (with labeling) for the width of the room
  • Entry field (with labeling) for the length of the room
  • Entry field (with labeling) using a colour box so the customer can pick the colour they want to paint the room
  • A selection list so the user can decide whether they want standard paint (24.99 per can) or premium paint (39.99 per can)
  • A button to create a quote for the customer

On the next page create content on the quote page (a separate page) will include the following:

  • Customer's contact information (name and email)
  • Room to be painted
  • Square footage of the room based on length and width
  • A colour swatch showing the colour the customer picked
  • The number of paint cans that will be needed to paint the room based on each can cover approximately 400 sq ft of wall space (rounded up)
  • The final price for the number of cans based on which type of paint was selected plus 13% HST

Data from the entry page MUST be pulled from local storage in order to fill in quote page and ES6 concepts used where applicable.

Solutions

Expert Solution

Here is your final updated code of paint quotation implemented in HTML+Javascript. This could be much improvised if we could have used any other programming language. But we can also achieve in plain html.

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="">
      <title>Paint Quotation</title>
   </head>
   <body>
      <div id="contact-form">
      <ul>
         <li><button id="quote" class="button">Paint Quotation</button></li>
      </ul>
      <form action="#" method="post" id="quote-form">
         <h2>Calculate the area to be painted</h2>
         <div>
            <p><label for="name">Your Name <span>*</span></label></p>
            <input type="text" id="name" name="name">
         </div>
         <div>
            <p><label for="email">Your email address <span>*</span></label></p>
            <input type="email" name="email" id="email">
         </div>
         <div>
            <p><label for="planning">For which room you're is planning on painting?<span>*</span></label></p>
            <input type="text" name="planning" id="planning">
         </div>
         <div style="display:inline-flex;">
            <div style="width:49%;margin-right: 75px;">
               <p><label for="room_length">Length of Room<span>*</span></label></p>
               <input type="text" name="room_length" id="room_length">
            </div>
            <div style="width:49%;">
               <p><label for="room_width">Width of Room<span>*</span></label></p>
               <input type="text" name="room_length" id="room_width">
            </div>
         </div>
         <div>
            <p><label for="color">Room Color?<span>*</span></label></p>
            <div class="color-wrapper">
               <p>Select color</p>
               <input type="text" name="custom_color" placeholder="#FFFFFF" id="pickcolor" class="call-picker" readonly>
               <div class="color-holder call-picker"></div>
               <div class="color-picker" id="color-picker" style="display: none"></div>
            </div>
         </div>
         <p><label for="color">Paint Quality<span>*</span></label></p>
         <div>
            <div style="    display: block;">
               <input type="radio" id="quality_standard" name="quality" value="standard">
               <label for="quality_standard">Standard (24.99 per can)</label><br>
               <input type="radio" id="quality_premium" name="quality" value="premium">
               <label for="quality_premium">Premium (39.99 per can)</label><br>
            </div>
         </div>
         <input type="submit" class="button" value="Create Quote">
      </form>
      <form action="#" method="post" id="quote-final">
         <h2>Your Quotation Request!</h2>
         <div>
            <p><label for="name">Name: <span>*</span></label></p>
            <p id="name_final" class="name_final final-out"></p>
         </div>
         <div>
            <p><label for="email">Email Address: <span>*</span></label></p>
            <p id="email_final" class="email_final final-out"></p>
         </div>
         <div>
            <p><label for="email">Room Planning: <span>*</span></label></p>
            <p id="planning_final" class="planning_final final-out"></p>
         </div>
         <div style="display:inline-flex;">
            <div style="width:49%;margin-right: 75px;">
               <p><label for="room_length">Length<span>*</span></label></p>
               <p name="room_length_final" id="length_final"></p>
            </div>
            <div style="width:49%;">
               <p><label for="room_width">Width<span>*</span></label></p>
               <p name="room_width_final" id="width_final"></p>
            </div>
            </div style="display:block">
            <div>
               <p><label for="email">Color Selected <span>*</span></label></p>
               <div class="color-holder call-picker"></div>
            </div>
            <div>
               <p><label for="message">Final Area<span>*</span></label></p>
               <p name="areaofroom_final" id="areaofroom_final"></p>
            </div>
            <div>
               <p><label for="message">HSN TAX (13%) <span>*</span></label></p>
               <p name="hsntax_final" id="hsntax_final"></p>
            </div>
            <input type="submit" class="button" value="Send!">
      </form>
      </div>
   </body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script>
      /**Form submit handling **/
      $(document).ready(function() {
      $('#quote-final').hide();
      function sendContactForm(){
        name = $("#name").val();
        email = $("#email").val();
        planning = $("#planning").val();
        room_width = $("#room_width").val(); 
        room_length = $("#room_length").val();
        color_pick = $("#pickcolor").val();
        final_area = room_width * room_length;
        $('#name_final').text(name);
        $('#email_final').text(email);
        $('#planning_final').text(planning);
        $('#length_final').text(room_length);
        $('#width_final').text(room_width);
        $('#areaofroom_final').text(final_area);
        $('#color_final').text(color_pick);
      }
      $("#quote-form").on("submit", function(){
        $('#quote-form').hide();
        $('#quote-final').show();
        sendContactForm();
        return false; //Do not submit form
      });
      
      });
       /** Color Picker **/
        var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', 
      '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF' ];
        var picker = $('#color-picker');
      
        for (var i = 0; i < colorList.length; i++ ) {
                picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
        }
      
        $('body').click(function () {
                picker.fadeOut();
        });
      
        $('.call-picker').click(function(event) {
                event.stopPropagation();
                picker.fadeIn();
                picker.children('li').hover(function() {
                        var codeHex = $(this).data('hex');
      
                        $('.color-holder').css('background-color', codeHex);
                        $('#pickcolor').val(codeHex);
                });
        });
   </script>
   <style>
      body {
      font: 15px/1.4 Arial, Sans-Serif;
      color: #252525;
      background: url(https://subtlepatterns.com/patterns/gradient_squares.png) repeat;
      }
      #contact-form { width: 600px; padding: 15px; background: #252525; margin: 0 auto; }
      ul { margin: 0 auto; padding: 0px; text-align: center;}
      li { list-style: none; display: inline-block; margin: 0px; padding: 0px;}
      li button { width: 297px; padding: 5px; }
      h2 { color: #fff; margin-top: 0px; padding-top: 0px;text-align: center;}
      form { 
      margin: 0 auto; 
      padding: 15px;
      }
      form p {
      color: #fff;
      padding: 0px;
      margin-bottom: 5px;
      }
      form label {
      font: normal 18px Arial, Helvetica; text-align: center; color:#fff;
      }
      form textarea {
      padding: 10px;
      width: 550px;
      height: 150px;
      }
      form div {
      margin-bottom: 10px;
      }
      input, select {
      padding: 10px;
      width: 100%;
      }
      select { width: 324px; }
      label span { color: #BA8Df0; }
      input, textarea, select {
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      outline: none;
      font: normal 18px Arial, Helvetica;  
      }
      input:focus, textarea:focus {
      -webkit-box-shadow: 0 0 4px 3px #BA8DF0;
      -moz-box-shadow: 0 0 4px 3px #BA8DF0;
      box-shadow: 0 0 4px 3px #BA8DF0;
      border: 1px solid #BA8DF0;
      }
      .button {
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      display: block;
      margin: 0 auto;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      border-radius:4px;
      background: #BA8Df0;
      color:#252525;
      border: none;
      font: bold 18px Arial, Helvetica; text-align: center;
      }
      .button:hover {
      box-shadow: inset 0 0px 10px 3px #7617eb;
      }
      .button:active {
      color: #fff;
      background: #7617eb;
      }
      .color-wrapper {
      position: relative;
      margin: 20px auto;
      display: flex;
      }
      .color-wrapper p {
      margin-bottom: 5px;
      }
      input.call-picker {
      border: 1px solid #AAA;
      color: #666;
      text-transform: uppercase;
      float: left;
      outline: none;
      height: 36px;
      padding: 0px 20px;
      text-transform: uppercase;
      width: 110px;
      }
      .color-picker {
      width: 130px;
      background: #F3F3F3;
      height: 81px;
      padding: 5px;
      border: 5px solid #fff;
      box-shadow: 0px 0px 3px 1px #DDD;
      position: absolute;
      top: 40px;
      left: 235px;
      }
      .color-holder {
      background: #fff;
      cursor: pointer;
      border: 1px solid #AAA;
      width: 40px;
      height: 36px;
      margin-left: 5px;
      }
      .color-picker .color-item {
      cursor: pointer;
      width: 10px;
      height: 10px;
      list-style-type: none;
      float: left;
      margin: 2px;
      border: 1px solid #DDD;
      }
      .color-picker .color-item:hover {
      border: 1px solid #666;
      opacity: 0.8;
      -moz-opacity: 0.8;
      filter:alpha(opacity=8);
      }
      input[type="radio"] {
      width: 15px;
      height: 15px;
      }
   </style>
</html>

Output:

venereology answered 3 months ago
Next > < Previous

Related Solutions

The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
HTML/CSS/JavaScript Create a page that converts 4 different measurements (i.e. length, volume, area, distance) to either...
HTML/CSS/JavaScript Create a page that converts 4 different measurements (i.e. length, volume, area, distance) to either Imperial or Metric values. When a value is entered into one of the fields, the converted amount is displayed in the other corresponding field. Example: Converting between litres and gallons. If you enter 25 for gallons, the value of 113.50 litres should be displayed. Converting between gallons and litres. If you enter 75 litres, the value of 16.52 gallons should be displayed. (Note, 1...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
(a) Create a HTML page for a single faceted search selector. It will include the name...
(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate...
For this assignment you need to create a ToDo list using Javascript, along with HTML and...
For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...
For this assignment you need to create a ToDo list using Javascript, along with HTML and...
For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...
For this assignment you need to create a ToDo list using Javascript, along with HTML and...
For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT