Facebook
From gCode, 1 Month ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 32
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         html,
  9.         body {
  10.             height: 100%;
  11.             width: 100%;
  12.             overflow: hidden;
  13.         }
  14.  
  15.         .container {
  16.             position: relative;
  17.             width: 700px;
  18.             height: max-content;
  19.             left: 50%;
  20.             top: 50%;
  21.             transform: translate(-50%, -50%);
  22.             text-align: center;
  23.         }
  24.  
  25.         .wrap {
  26.             position: relative;
  27.             width: max-content;
  28.             height: max-content;
  29.             top: 50%;
  30.             transform: translateY(-50%);
  31.         }
  32.  
  33.         .msg {
  34.             position: absolute;
  35.             left: 3px;
  36.             top: 32px;
  37.             font-size: 12px;
  38.             width: 200px;
  39.             height: 15px;
  40.             margin-top: 5px;
  41.             text-align: left;
  42.         }
  43.  
  44.         .exp {
  45.             position: relative;
  46.             height: 30px;
  47.             width: 600px;
  48.             line-height: 30px;
  49.             font-size: 28px;
  50.             text-align: center;
  51.             border-radius: 5px;
  52.             border: 1px solid #bbb;
  53.             outline: none;
  54.         }
  55.  
  56.         .exp:focus {
  57.             border: 1px solid #66aaff;
  58.             box-shadow: 0 0 3px #4488ff;
  59.         }
  60.  
  61.         .submit {
  62.             margin-top: 10px;
  63.             height: 30px;
  64.             width: 200px;
  65.             border-radius: 5px;
  66.             border: 1px solid #bbb;
  67.             outline: none;
  68.         }
  69.  
  70.         .submit:focus {
  71.             border: 1px solid #4488ff;
  72.             box-shadow: 0 0 3px #4488ff;
  73.             outline: none;
  74.         }
  75.  
  76.         .submit:hover {
  77.             background: #66aaff;
  78.             border: 1px solid #4488ff;
  79.             outline: none;
  80.             cursor: pointer;
  81.         }
  82.  
  83.  
  84.         .good {
  85.             box-shadow: 0 0 3px #66cc66;
  86.             border: 1px solid #44aa44;
  87.             outline: none;
  88.         }
  89.  
  90.         .exp.good {
  91.             background: #88ff88;
  92.         }
  93.  
  94.         .submit.good:hover {
  95.             background: #88ff88;
  96.             outline: none;
  97.         }
  98.  
  99.         .good:focus {
  100.             box-shadow: 0 0 3px #66cc66;
  101.             border: 1px solid #44aa44;
  102.         }
  103.  
  104.         /* */
  105.         .bad {
  106.             box-shadow: 0 0 3px #ff0000;
  107.             border: 1px solid red;
  108.  
  109.         }
  110.  
  111.         .exp.bad {
  112.             background: #ffaaaa;
  113.         }
  114.  
  115.         .submit.bad:hover {
  116.             background: #ffaaaa;
  117.             outline: none;
  118.         }
  119.  
  120.         .bad:focus {
  121.             box-shadow: 0 0 3px #ff0000;
  122.             border: 1px solid red;
  123.         }
  124.  
  125.     </style>
  126. </head>
  127.  
  128. <body>
  129.     <div class="container">
  130.         <div class="wrap">
  131.             <input type="text" class="exp" placeholder="Type your expression here"><br>
  132.             <button class="submit">Check expression</button>
  133.             <div class="msg"></div>
  134.         </div>
  135.     </div>
  136.     <script>
  137.         let btn = document.querySelector('.submit');
  138.         let input = document.querySelector('.exp');
  139.         let msg = document.querySelector('.msg');
  140.         // /^[0-1+a-z+\~+\^+\=+\<+\>+\(+\)+\s+]+$/ig
  141.         let allowedChars = /^[0-1a-z\~\(]+[0-1a-z\~\^\=\<\>\(\)\s]+[0-1a-z\)]+$/ig;
  142.         let string;
  143.  
  144.         var item = '';
  145.         var items = [];
  146.         var bracketStartIndex = [];
  147.         var bracketEndIndex = [];
  148.         var bracketBuffor = 0;
  149.         var nestLevel = 0;
  150.         var nesting = [];
  151.  
  152.         function getInput() {
  153.             let check = input.value;
  154.             return check;
  155.         }
  156.  
  157.  
  158.         function getItems() {
  159.             items = [];
  160.             nestedBrackets = [];
  161.             for (let i = 0; i < string.length; i++) {
  162.                 var unchangedString = string;
  163.                 var changedString = string.split('');
  164.                 changedString = changedString.filter(function(str) {
  165.                     return /\S/.test(str);
  166.                 });
  167.             }
  168.  
  169.             for (let i = 0; i < changedString.length; i++) {
  170.  
  171.  
  172.                 if (changedString[i] == '(') {
  173.  
  174.                     bracketBuffor++;
  175.                     bracketStartIndex.push(i);
  176.  
  177.                 }
  178.                 if (changedString[i] == ')') {
  179.  
  180.                     nesting.push(bracketBuffor);
  181.  
  182.                     bracketBuffor--;
  183.                     bracketEndIndex.push(i);
  184.                 }
  185.  
  186.                 if (bracketBuffor > nestLevel) {
  187.                     nestLevel = bracketBuffor;
  188.                     console.log('nesting up');
  189.  
  190.                 } else {
  191.                     console.log('maximum nest level');
  192.                     nestLevel--;
  193.                 }
  194.  
  195.  
  196.  
  197.                 /*if (bracketBuffor > 1) {
  198.                     nestedItem += changedString[i];
  199.                 }
  200.  
  201.                 if (bracketBuffor != 0) {
  202.                     item += changedString[i];
  203.                     if (changedString[i] == ')') {
  204.                         // item += changedString[i];
  205.                         bracketBuffor--;
  206.                         if (bracketBuffor == 0) {
  207.                             items.push(item);
  208.                             item = '';
  209.                         } else {
  210.  
  211.                             items.push(nestedItem);
  212.                             nestedBrackets.push(nestedItem);
  213.                             //nestedItem = '';
  214.  
  215.                         }
  216.                     }
  217.                 }
  218. */
  219.                 console.log(bracketBuffor);
  220.             }
  221.             console.log(nesting);
  222.  
  223.             console.log(bracketStartIndex);
  224.             console.log(bracketEndIndex);
  225.             console.log(nestLevel);
  226.             //console.log(changedString);
  227.             //console.log(items);
  228.         }
  229.  
  230.  
  231.         function validate(str) {
  232.             if (str.match(allowedChars)) {
  233.                 string = getInput();
  234.                 if (input.classList.contains('bad')) {
  235.                     input.classList.remove('bad');
  236.                     btn.classList.remove('bad');
  237.                 }
  238.                 input.classList.add('good');
  239.                 btn.classList.add('good');
  240.                 msg.innerHTML = 'Your expression is correct!';
  241.                 msg.style.color = 'green';
  242.  
  243.                 getItems();
  244.  
  245.             } else {
  246.                 if (input.classList.contains('good')) {
  247.                     input.classList.remove('good');
  248.                     btn.classList.remove('good');
  249.                 }
  250.                 input.classList.add('bad');
  251.                 btn.classList.add('bad');
  252.                 msg.innerHTML = 'Your expression is not correct!';
  253.                 msg.style.color = 'red';
  254.             }
  255.  
  256.         }
  257.  
  258.         btn.addEventListener('mouseup', function() {
  259.             validate(getInput());
  260.         });
  261.  
  262.     </script>
  263. </body>
  264.  
  265. </html>
  266.