API tools faq
paste
Advertisement
Guest User

stackoverloadpastebin

a guest
Jul 28th, 2020
373
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.62 KB | None | 0 0
raw download clone embed print report
  1. "use strict";
  2.  
  3. /*
  4. New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
  5. Tutorial 13
  6. Case Problem 2
  7.  
  8. Author: 4terrabytes
  9. Date: 7/27/2020
  10.  
  11. Filename: dl_expenses.js
  12.  
  13. Function List
  14. =============
  15.  
  16. validateSummary()
  17. Validates the data entry in the summary field.
  18.  
  19. calcClass(sumClass)
  20. Sums up all of the data values for elements of the sumClass class.
  21.  
  22. calcExp()
  23. Calculates the travel expenses from all categories and dates.
  24.  
  25. formatNumber(val, decimals)
  26. Formats the value, "val" to the number of decimals indicated
  27. by "decimals", adding thousands separators.
  28.  
  29. formatUSCurrency(val)
  30. Formats the value, "val", as U.S. currency.
  31.  
  32. */
  33. //create an anon function
  34.  
  35. window.addEventListener("load", function() {
  36. var changingCells = document.querySelectorAll("table#travelExp input.sum");
  37. for(var i = 0; i < changingCells.length; i++) {
  38. changingCells[i].onchange = calcExp;
  39. }
  40. document.getElementById("submitButton").onclick = validateSummary;
  41. });
  42. function validateSummary(){
  43. var summary = document.getElementById("summary");
  44. if (summary.validity.valueMissing) {
  45. summary.setCustomValidity("You must include a summary of the trip in your report.");
  46. }
  47. else {
  48. summary.setCustomValidity("");
  49. }
  50. }
  51. function calcClass(sumClass) {
  52. var sumFields = document.querySelectorAll("." + sumClass);
  53. var sumTotal = 0;
  54. for (var i = 0; i < sumFields.length; i++) {
  55. var itemValue = parseFloat(sumFields[i].value);
  56. if(!isNaN(itemValue)) {
  57. sumTotal += itemValue;
  58. }
  59. }
  60. return sumTotal;
  61. }
  62.  
  63. function calcExp() {
  64. var expTable = document.querySelectorAll("table#travelExp tr");
  65.  
  66. for (var i = 0; i < expTable.length; i++) {
  67. var date = document.querySelectorAll("table#travelExp td");
  68. document.getElementById("subtotal"+ [i]).value = formatNumber(calcClass(date[i]), 2);
  69. }
  70. document.getElementById("transTotal").value = formatNumber(calcClass(trans), 2);
  71. document.getElementById("lodgeTotal").value = formatNumber(calcClass(lodge), 2);
  72. document.getElementById("mealTotal").value = formatNumber(calcClass(meal), 2);
  73. document.getElementById("otherTotal").value = formatNumber(calcClass(other), 2);
  74. document.getElementById("expTotal").value = formatUSCurrency(calcClass(sum));
  75. }
  76.  
  77. function formatNumber(val, decimals) {
  78. return val.toLocaleString(undefined, {minimumFractionDigits: decimals,
  79. maximumFractionDigits: decimals});
  80. }
  81.  
  82. function formatUSCurrency(val) {
  83. return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );
  84. }
  85.  
  86. //HTML Code
  87. <!DOCTYPE html>
  88. <html lang="en">
  89. <head>
  90. <!--
  91. New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
  92. Tutorial 13
  93. Case Problem 2
  94.  
  95. Travel Expense Report
  96. Author: 4terrabytes
  97. Date: 7/27/2020
  98.  
  99. Filename: dl_expense.html
  100. -->
  101.  
  102. <title>DeLong Enterprises Expense Report</title>
  103. <meta charset="utf-8" />
  104. <link href="dl_base.css" rel="stylesheet" />
  105. <link href="dl_layout.css" rel="stylesheet" />
  106. <script src="dl_expense.js" async></script>
  107.  
  108. </head>
  109.  
  110. <body>
  111. <header>
  112. <nav class="horizontal">
  113. <ul>
  114. <li><a href="#">Home</a></li>
  115. <li><a href="#">Policies</a></li>
  116. <li><a href="#">Reports</a></li>
  117. <li><a href="#">Employment</a></li>
  118. <li><a href="#">Financial</a></li>
  119. <li><a href="#">Insurance</a></li>
  120. <li><a href="#">Accounts</a></li>
  121. </ul>
  122. </nav>
  123. <img src="dl_logo.png" alt="DeLong Enterprises" id="logoImg" />
  124. </header>
  125.  
  126. <section>
  127. <form name="expReport" id="expReport" method="post" action="dl_valid.html">
  128.  
  129. <table id="travelSummary">
  130. <tr>
  131. <th>Trip Summary<span>*</span></th>
  132. </tr>
  133. <tr>
  134. <td>
  135. <textarea id="summary" name="summary" required></textarea>
  136. </td>
  137. </tr>
  138. </table>
  139.  
  140. <aside>
  141. <h1>Expense Report</h1>
  142. <p>Form: 2CEXP15<br />
  143. * --- Required Field
  144. </p>
  145. <p>Send Report To:<br />
  146. Debbie Larson<br />
  147. Personnel Dept.<br />
  148. Rm. 3801<br />
  149. Ext. 1250
  150. </p>
  151. </aside>
  152.  
  153. <table id="empInfo">
  154. <tr>
  155. <th>Last Name<span>*</span></th>
  156. <th>First Name<span>*</span></th>
  157. <th>M.I.</th>
  158. <th>Account<span>*</span></th>
  159. <td><input type="text" name="accID" id="accID" pattern="^ACT\d{6}$" placeholder="ACTnnnnnn" required /></td>
  160. </tr>
  161. <tr>
  162. <td><input type="text" name="lname" id="lname" required /></td>
  163. <td><input type="text" name="fname" id="fname" required /></td>
  164. <td><input type="text" name="init" id="init" required /></td>
  165. <th>Department<span>*</span></th>
  166. <td><input type="text" name="deptID" id="deptID" pattern="^DEPT\d{4,6}$" required placeholder="DEPTnnnnnn" /></td>
  167. </tr>
  168. <tr>
  169. <th>Social Security Number<span>*</span></th>
  170. <td colspan="2"><input type="text" name="ssn" id="ssn" pattern="^\d{3}-\d{2}-\d{4}$" required placeholder="nnn-nn-nnnn" /></td>
  171. <th>Project<span>*</span></th>
  172. <td><input type="text" name="projID" id="projID" pattern="^PROJ-[a-z]{2}-\d{3}$" required placeholder="PROJ-xx-ddd" /></td>
  173. </tr>
  174. </table>
  175.  
  176. <table id="travelExp">
  177. <thead>
  178. <tr>
  179. <th>Travel Date</th>
  180. <th>Air &amp; Trans</th>
  181. <th>Lodging</th>
  182. <th>Meals &amp; Tips</th>
  183. <th>Other</th>
  184. <th>TOTAL</th>
  185. </tr>
  186. </thead>
  187. <tfoot>
  188. <tr>
  189. <th>SUMMARY</th>
  190. <td><input type="text" name="transTotal" id="transTotal" readonly /></td>
  191. <td><input type="text" name="lodgeTotal" id="lodgeTotal" readonly /></td>
  192. <td><input type="text" name="mealTotal" id="mealTotal" readonly /></td>
  193. <td><input type="text" name="otherTotal" id="otherTotal" readonly /></td>
  194. <td><input type="text" name="expTotal" id="expTotal" readonly /></td>
  195. </tr>
  196. </tfoot>
  197. <tbody>
  198. <tr>
  199. <td>
  200. <input type="date" name="tDate0" id="tDate0" class="tDate" />
  201. </td>
  202. <td>
  203. <input type="text" name="trans0" id="trans0" class="trans date0 sum" />
  204. </td>
  205. <td>
  206. <input type="text" name="lodge0" id="lodg0" class="lodge date0 sum" />
  207. </td>
  208. <td>
  209. <input type="text" name="meal0" id="meal0" class="meal date0 sum" />
  210. </td>
  211. <td>
  212. <input type="text" name="other0" id="other0" class="other date0 sum" />
  213. </td>
  214. <td>
  215. <input type="text" name="subtotal0" id="subtotal0" class="subtotal" readonly />
  216. </td>
  217. </tr>
  218. <tr>
  219. <td>
  220. <input type="date" name="tDate1" id="tDate1" class="tDate" />
  221. </td>
  222. <td>
  223. <input type="text" name="trans1" id="trans1" class="trans date1 sum" />
  224. </td>
  225. <td>
  226. <input type="text" name="lodge1" id="lodg1" class="lodge date1 sum" />
  227. </td>
  228. <td>
  229. <input type="text" name="meal1" id="meal1" class="meal date1 sum" />
  230. </td>
  231. <td>
  232. <input type="text" name="other1" id="other1" class="other date1 sum" />
  233. </td>
  234. <td>
  235. <input type="text" name="subtotal1" id="subtotal1" class="subtotal" readonly />
  236. </td>
  237. </tr>
  238. <tr>
  239. <td>
  240. <input type="date" name="tDate2" id="tDate2" class="tDate" />
  241. </td>
  242. <td>
  243. <input type="text" name="trans2" id="trans2" class="trans date2 sum" />
  244. </td>
  245. <td>
  246. <input type="text" name="lodge2" id="lodg2" class="lodge date2 sum" />
  247. </td>
  248. <td>
  249. <input type="text" name="meal2" id="meal2" class="meal date2 sum" />
  250. </td>
  251. <td>
  252. <input type="text" name="other2" id="other2" class="other date2 sum" />
  253. </td>
  254. <td>
  255. <input type="text" name="subtotal2" id="subtotal2" class="subtotal" readonly />
  256. </td>
  257. </tr>
  258. <tr>
  259. <td>
  260. <input type="date" name="tDate3" id="tDate3" class="tDate" />
  261. </td>
  262. <td>
  263. <input type="text" name="trans3" id="trans3" class="trans date3 sum" />
  264. </td>
  265. <td>
  266. <input type="text" name="lodge3" id="lodg3" class="lodge date3 sum" />
  267. </td>
  268. <td>
  269. <input type="text" name="meal3" id="meal3" class="meal date3 sum" />
  270. </td>
  271. <td>
  272. <input type="text" name="other3" id="other3" class="other date3 sum" />
  273. </td>
  274. <td>
  275. <input type="text" name="subtotal3" id="subtotal3" class="subtotal" readonly />
  276. </td>
  277. </tr>
  278. <tr>
  279. <td>
  280. <input type="date" name="tDate4" id="tDate4" class="tDate" />
  281. </td>
  282. <td>
  283. <input type="text" name="trans4" id="trans4" class="trans date4 sum" />
  284. </td>
  285. <td>
  286. <input type="text" name="lodge4" id="lodg4" class="lodge date4 sum" />
  287. </td>
  288. <td>
  289. <input type="text" name="meal4" id="meal4" class="meal date4 sum" />
  290. </td>
  291. <td>
  292. <input type="text" name="other4" id="other4" class="other date4 sum" />
  293. </td>
  294. <td>
  295. <input type="text" name="subtotal4" id="subtotal4" class="subtotal" readonly />
  296. </td>
  297. </tr>
  298. <tr>
  299. <td>
  300. <input type="date" name="tDate5" id="tDate5" class="tDate" />
  301. </td>
  302. <td>
  303. <input type="text" name="trans5" id="trans5" class="trans date5 sum" />
  304. </td>
  305. <td>
  306. <input type="text" name="lodge5" id="lodg5" class="lodge date5 sum" />
  307. </td>
  308. <td>
  309. <input type="text" name="meal5" id="meal5" class="meal date5 sum" />
  310. </td>
  311. <td>
  312. <input type="text" name="other5" id="other5" class="other date5 sum" />
  313. </td>
  314. <td>
  315. <input type="text" name="subtotal5" id="subtotal5" class="subtotal" readonly />
  316. </td>
  317. </tr>
  318. </tbody>
  319. </table>
  320. <input id="submitButton" type="submit" value="Submit Report" />
  321. </form>
  322.  
  323. </section>
  324.  
  325. <footer>
  326. <nav class="vertical">
  327. <ul>
  328. <li><a href="#">Travel Expenses</a></li>
  329. <li><a href="#">Information Change</a></li>
  330. <li><a href="#">Time Off Request</a></li>
  331. <li><a href="#">Paystubs</a></li>
  332. <li><a href="#">Health Insurance</a></li>
  333. <li><a href="#">Forms/Requests</a></li>
  334. <li><a href="#">Team Contacts</a></li>
  335. <li><a href="#">Reimbursements</a></li>
  336. <li><a href="#">Grievances</a></li>
  337. <li><a href="#">Staff Directory</a></li>
  338. </ul>
  339. </nav>
  340. <p>DeLong Enterprises &copy; 2018 All Rights Reserved</p>
  341. </footer>
  342. </body>
  343. </html>
  344.  
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!