Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Kal's Dump Run, & Moving Service Inc."
Bootstrap 3.3.0 Snippet by
DumpRun
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
413
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Kal's Dump Run, & Moving Service Inc.</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="custom.css" rel="stylesheet" type="text/css"> <script> function finalCost(){ var locationGas = document.getElementById("location_gas").value; var serviceType = document.getElementById("service_type").value; var secondaryLabourer = document.getElementById("secondary_labourer").value; var total = (parseInt(locationGas)*5) + ((serviceType)*30) + ((secondaryLabourer)*10) document.getElementById("result").innerHTML = total; } </script> </head> <body> <div class="_box"> <h3>Kal's Dump Run, & Moving Service Inc.</h3><br> <form> <div class="form-group"> <label>1. Location (Gas Economy)</label> <select class="form-control" id="location_gas" onchange="finalCost()"> <option value="0" selected>Select Location</option> <option value="1">Cassidy, Cedar, Nanaimo, Lantzville</option> <option value="2">Ladysmith, Nanoose, Parksville</option> <option value="3">Coombs, Erington, Qualicum</option> <option value="4">Duncan, Port Alberni</option> <option value="5">Victoria</option> </select> </div> <div class="form-group"> <label>2. Service Type</label> <select class="form-control" id="service_type" onchange="finalCost()"> <option value="0">Moving, or Dumping?</option> <option value="0">Metal Removal (Free)</option> <option value="1">1 Load Move within same location</option> <option value="2">1 Load move outside of selected location</option> <option value="2">1 Load mixed garbage removal</option> <option value="4">1 Load mixed construction demo</option> </select> </div> <div class="form-group"> <label>3. Secondary Labourer?</label> <select class="form-control" id="secondary_labourer" onchange="finalCost()"> <option value="0">Would you like a secondary labourer?</option> <option value="1">Yes</option> <option value="0">No</option> </select> </div> <br> <div class="form-group"> <label>Total Cost ($) : </label> <span id="result" style="background-color: #7527b0;color: #fff;padding: 6px 70px;font-weight: 600;font-size: 18px; margin-left: 10px;border-radius: 5px;">0</span> </div> </form> </div> </body> </html>
#output { background-color: #c5edf3; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 2px solid #009688; font-family: sans-serif; line-height: 1.8; } #newPublish { background-color: #c5edf3; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 2px solid #009688; font-family: sans-serif; line-height: 1.8; } .box { background-color: #f7f7f7; margin-top: 60px; margin-bottom: 50px; padding: 40px 60px; } #details_info { background-color: #f7f7f7; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 1px solid #cccccc; font-family: sans-serif; line-height: 1.8; margin-left: 90px; } .box3 { margin-top: 80px; margin-left: 150px; margin-right: 150px; margin-bottom: 60px; padding: 40px 50px; background-color: gainsboro; } .box11 { margin-top: 80px; margin-left: 250px; margin-right: 250px; margin-bottom: 60px; padding: 40px 50px; background-color: gainsboro; line-height: 2.5; } .web_design_box { margin-top: 30px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 40px 50px; background-color: #d9edf7; box-shadow: 3px 5px 10px #318f86; } ._box { margin-top: 30px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 40px 50px; background-color: #c6badc; box-shadow: 3px 5px 10px #7527b0; } .online_food_delivery_box { margin-top: 50px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 20px 40px; background-color: #d4c0b9; box-shadow: 3px 5px 10px #714c4a; } .result_box { margin-top: 15%; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 20px 40px; background-color: #d4c0b9; box-shadow: 3px 5px 10px #8BC34A; } .result_box_text { color: #232222; font-size: 20px; text-align: center; padding-top:10px; } .result_box_text span { color: #614136; font-size: 26px; text-align: center; }
Related:
See More
Template
Material Dashboard Pro BS3
292.5K
268
Responsive Moving Box Carousel
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76