In: Computer Science
Using HTML and JAVASCRIPT
Create a Content area on the main entry page will include inputs for customer entry for the following:
On the next page create content on the quote page (a separate page) will include the following:
Data from the entry page MUST be pulled from local storage in order to fill in quote page and ES6 concepts used where applicable.
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: