API tools faq
paste
Advertisement
lalatino

example

lalatino
Jul 11th, 2012
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3. <head>
  4. <title> Restaurant </title>
  5. <!-- http://stackoverflow.com/questions/11429171/javascript-multiplication-subtractions-and-hour-to-decimal-conversion -->
  6.  
  7. <style type="text/css">
  8.  
  9. body {
  10.     font-family: Helvetica;
  11.     text-align=center;
  12. }
  13.  
  14. .table1 {
  15.     width: 90%;
  16.     border: 1px solid #ccc;
  17.     margin: 1em auto;
  18. }
  19.  
  20. .table1 th {
  21.   background-color: #aaaaaa;
  22.   color:blue;
  23. }
  24.  
  25. .table1 td {
  26.   background-color: #eeeeee;
  27.   text-align: center;
  28. }
  29.  
  30. .table2 {
  31.     border: 0;
  32.     margin: 2em auto;
  33. }
  34.  
  35. .table2 td {
  36.     padding: 10px;
  37. }
  38.  
  39. .table3 {
  40.     width:40%;
  41.     text-align:center;
  42.     border: 2px dotted blue;
  43.     margin: 0 auto;
  44. }
  45.  
  46. .table3 td {
  47.     background-color: #eeaaaa;
  48.     text-align:center;
  49. }
  50.  
  51. </style>
  52. </head>
  53.  
  54. <body>
  55.  
  56. <form id="form1" method="post" action="">
  57.  
  58.  
  59. <table class="table1">
  60.  
  61. <thead>
  62.     <tr>
  63.         <th style="width:14.2%"> </th>
  64.         <th style="width:28.6%" colspan="2">Breakfast</th>
  65.         <th style="width:28.6%" colspan="2">Lunch</th>
  66.         <th style="width:28.6%" colspan="2">Dinner</th>
  67.     </tr>
  68.  
  69.     <tr>
  70.         <th style="width:12.4%"> </th>
  71.         <th style="width:12.6%">First</th>
  72.         <th style="width:12.6%">Last</th>
  73.         <th style="width:12.6%">First </th>
  74.         <th style="width:12.6%">Last</th>
  75.         <th style="width:12.6%">First</th>
  76.         <th style="width:12.6%">Last</th>
  77.     </tr>
  78. </thead>
  79.  
  80. <tbody>
  81.     <tr>
  82.         <td style="width:12.5%">Monday</td>
  83.         <td style="width:12.5%"><input type="text" id="Monday_Breakfast_FirstSeating" value="09:15" size="15" /></td>
  84.         <td style="width:12.5%"><input type="text" id="Monday_Breakfast_LastSeating" value="11:45" size="15" /></td>
  85.         <td style="width:12.5%"><input type="text" id="Monday_Lunch_FirstSeating" size="15" /></td>
  86.         <td style="width:12.5%"><input type="text" id="Monday_Lunch_LastSeating" size="15" /></td>
  87.         <td style="width:12.5%"><input type="text" id="Monday_Dinner_FirstSeating" size="15" /></td>
  88.         <td style="width:12.5%"><input type="text" id="Monday_Dinner_LastSeating" size="15" /></td>
  89.     </tr>
  90.  
  91.     <tr>
  92.         <td style="width:12.5%">Tuesday</td>
  93.         <td style="width:12.5%"><input type="text" id="Tuesday_Breakfast_FirstSeating" size="15" /></td>
  94.         <td style="width:12.5%"><input type="text" id="Tuesday_Breakfast_LastSeating" size="15" /></td>
  95.         <td style="width:12.5%"><input type="text" id="Tuesday_Lunch_FirstSeating" size="15" /></td>
  96.         <td style="width:12.5%"><input type="text" id="Tuesday_Lunch_LastSeating" size="15" /></td>
  97.         <td style="width:12.5%"><input type="text" id="Tuesday_Dinner_FirstSeating" size="15" /></td>
  98.         <td style="width:12.5%"><input type="text" id="Tuesday_Dinner_LastSeating" size="15" /></td>
  99.     </tr>
  100.  
  101. </tbody>
  102.  
  103. </table>
  104.  
  105. <table class="table2">
  106.     <tr>
  107.         <td style="background-gcolor:#eee">Restaurant Capacity</td>
  108.         <td style="background-gcolor:#aea; text-align:center">
  109.             <input type="text" id="Restaurant_Capacity" size="15" />
  110.         </td>
  111.     </tr>
  112.     <tr>
  113.         <td style="background-gcolor:#eee">Pacing Interval</td>
  114.         <td style="background-gcolor:#aea; text-align:center">
  115.             <select id="pacinter">
  116.                 <option value="0.25">0.25</option>
  117.                 <option value="0.5">0.50</option>
  118.             </select>
  119.         </td>
  120.     </tr>
  121.     <tr>
  122.         <td style="background-color:#aea; text-align:center">
  123.             <input type="button" value="Calculate" onclick="myFunction()" />
  124.         </td>
  125.         <td style="background-color:#eea; text-align:center">
  126.             <input type="reset" value="Reset" />
  127.         </td>
  128.     </tr>
  129. </table>
  130.  
  131.  
  132. <table id="result" class="table3">
  133.  
  134.     <tr>
  135.         <td style="width=33%">Breakfast</td>
  136.         <td style="width=33%">Lunch</td>
  137.         <td style="width=33%">Dinner</td>
  138.     </tr>
  139.    
  140.     <tr>
  141.         <td id="calculation1" style="font-size:15px">N/A</td>
  142.         <td id="calculation2" style="font-size:15px">N/A</td>
  143.         <td id="calculation3" style="font-size:15px">N/A</td>
  144.     </tr>
  145.    
  146. </table>
  147.  
  148. </form>
  149.  
  150. <script type="text/javascript">
  151. <!--
  152.  
  153. function myFunction() { // calculate
  154.     var calc1_div = document.getElementById("calculation1");
  155.     var calc2_div = document.getElementById("calculation2");
  156.     var calc3_div = document.getElementById("calculation3");
  157.     var pacing_interval;
  158.     var Monday_Breakfast_FirstSeating;
  159.     var Monday_Breakfast_LastSeating;
  160.     var Pacing;
  161.    
  162.     Monday_Breakfast_FirstSeating = getFloatingTime( document.getElementById("Monday_Breakfast_FirstSeating").value );
  163.     Monday_Breakfast_LastSeating = getFloatingTime( document.getElementById("Monday_Breakfast_LastSeating").value );
  164.     Pacing = (Monday_Breakfast_LastSeating - Monday_Breakfast_FirstSeating);
  165.     //alert(Pacing);
  166.     pacing_interval = parseFloat(document.getElementById("pacinter").value);
  167.     //alert(pacing_interval);
  168.    
  169.     calc1_div.innerHTML = Pacing.toFixed(2) + ' ; ' + getMinutes(Pacing) ;
  170. }
  171.  
  172. function getFloatingTime(str) { // this input parameter str is string, for example 09:15
  173.     var arr = str.split(":");
  174.     var ft = parseInt(arr[0],10) + (arr[1]/60); // http://www.ventanazul.com/webzine/articles/issues-parseint-javascript
  175.     //alert(ft);
  176.     //alert(arr[0] + arr[1]);
  177.     //console.log(arr); // see also http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
  178.     return ft; // ft is float variable, like 9.25 hours
  179. }
  180.  
  181. function getMinutes(ft) { // ft is float value , e.g. 2.50 hours
  182.     return parseInt(ft*60); // conversion to 150 minutes
  183. }
  184.  
  185.  
  186. //-->
  187. </script>
  188. </body>
  189. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!