Advertisement
NyteOwlDave

WebCalc

Jan 25th, 2019
160
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.29 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <title>WebCalc</title>
  5. </head>
  6. <body onload="Initialize()">
  7. <div><input id="idInput"/></div>
  8. <div>
  9. <button>7</button><button>8</button><button>9</button><button>A</button><button>COS</button>
  10. </div>
  11. <div>
  12. <button>4</button><button>5</button><button>6</button><button>B</button><button>SIN</button>
  13. </div>
  14. <div>
  15. <button>1</button><button>2</button><button>3</button><button>C</button><button>TAN</button>
  16. </div>
  17. <div>
  18. <button>.</button><button>0</button><button>=</button><button>D</button><button>ACOS</button>
  19. </div>
  20. <div>
  21. <button>+</button><button>-</button><button>x</button><button>E</button><button>ASIN</button>
  22. </div>
  23. <div>
  24. <button>*</button><button>/</button><button>%</button><button>F</button><button>ATAN</button>
  25. </div>
  26. <div>
  27. <button>&amp;</button><button>|</button><button>^</button><button>PI</button><button>LOG</button>
  28. </div>
  29. <div>
  30. <button>(</button><button>)</button><button>Clear</button><button>SQRT</button><button>EXP</button>
  31. </div>
  32. <div id="idReport"></div>
  33. </body>
  34. <script>
  35. function Initialize() {
  36.   document.querySelectorAll('button').forEach(b=>{
  37.     // report(b.innerText);
  38.     b.setAttribute('onclick','onClick(this)');
  39.   });
  40.   idInput.focus();
  41. }
  42. </script>
  43. <script>
  44. function onClick(e) {
  45.     idInput.focus();
  46.     if (e.innerText==='Clear') {
  47.         idInput.value='';
  48.         idReport.innerHTML='';
  49.     }
  50.     else if (e.innerText==='=') {
  51.         solve();
  52.     }
  53.     else if (e.innerText==='PI') {
  54.         idInput.value += 'Math.PI';
  55.     }
  56.     else if (e.innerText==='SQRT') {
  57.         idInput.value += 'Math.sqrt(';
  58.     }
  59.     else if (e.innerText==='COS') {
  60.         idInput.value += 'Math.cos(';
  61.     }
  62.     else if (e.innerText==='SIN') {
  63.         idInput.value += 'Math.sin(';
  64.     }
  65.     else if (e.innerText==='TAN') {
  66.         idInput.value += 'Math.tan(';
  67.     }
  68.     else if (e.innerText==='ACOS') {
  69.         idInput.value += 'Math.acos(';
  70.     }
  71.     else if (e.innerText==='ASIN') {
  72.         idInput.value += 'Math.asin(';
  73.     }
  74.     else if (e.innerText==='ATAN') {
  75.         idInput.value += 'Math.atan(';
  76.     }
  77.     else if (e.innerText==='LOG') {
  78.         idInput.value += 'Math.log(';
  79.     }
  80.     else if (e.innerText==='EXP') {
  81.         idInput.value += 'Math.exp(';
  82.     }
  83.     else if (e.innerText.match(/([A-F]|[0-9]|[+.*%^&|x])/)||
  84.         (e.innerText==='(')||
  85.         (e.innerText===')')||
  86.         (e.innerText==='/')||
  87.         (e.innerText==='-')) {
  88.         idInput.value += e.innerText;
  89.     }
  90.     else {
  91.         report('Nope!');
  92.     }
  93. }
  94. </script>
  95. <script>
  96. // Report a message or name/value pair
  97. function report(msg,name) {
  98.     const e = document.createElement('div');
  99.     if (name) {
  100.         e.innerHTML = `${name} = ${msg}`;
  101.     }
  102.     else {
  103.         e.innerHTML = String(msg);
  104.     }
  105.     e.setAttribute('class','report');
  106.     return appendReport(e);
  107. }
  108. </script>
  109. <script>
  110. // Append an element or string message to the report
  111. function appendReport(arg) {
  112.     if (arg instanceof HTMLElement) {
  113.         const elem = reportElement();
  114.         elem.appendChild(arg);
  115.         return elem;
  116.     }
  117.     return report(arg);
  118. }
  119. </script>
  120. <script>
  121. function reportElement() {
  122.     return document.getElementById('idReport');
  123. }
  124. </script>
  125. <script>
  126. const solve = function() {
  127.     try {
  128.         window.eval('report('+idInput.value+')');
  129.         // report(idInput.value);
  130.         // idInput.value='';
  131.     }
  132.     catch (err) {
  133.         report(err);
  134.     }
  135. }
  136. </script>
  137. <script>
  138. // Clear the report's content
  139. function clearReport() {
  140.     reportElement().innerHTML = '';
  141. }
  142. </script>
  143. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement