<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>String and Number Manipulation Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      margin: 0;
      background-color: #f9f9f9;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
    }
    .container {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .column {
      background: #ffffff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      width: 30%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .column h2 {
      text-align: center;
      margin-bottom: 15px;
    }
    label, input, button {
      display: block;
      margin: 10px 0;
    }
    button {
      padding: 8px 12px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    p {
      background: #f1f1f1;
      padding: 10px;
      border-radius: 5px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h1>Interactive String and Number Manipulation Tool</h1>
  <div class="container">
    <div class="column">
      <h2>String Operations</h2>
      <label for="stringInput">Enter a string:</label>
      <input type="text" id="stringInput">
      <button onclick="performStringOperations()">Process String</button>
      <p id="stringOutput"></p>
    </div>
    <div class="column">
      <h2>Number Operations</h2>
      <label for="numberInput">Enter a number:</label>
      <input type="text" id="numberInput">
      <button onclick="performNumberOperations()">Process Number</button>
      <p id="numberOutput"></p>
    </div>
    <div class="column">
      <h2>Combined Operations</h2>
      <label for="combinedInput">Enter a string with numbers:</label>
      <input type="text" id="combinedInput">
      <button onclick="performCombinedOperations()">Process Combined Input</button>
      <p id="combinedOutput"></p>
    </div>
  </div>
  <script>
/*
Author: Maynard Gel F. Carse
Semi-Finals

Oh bakit mo sinisilip kala mo may makikita ka? :P

*/

    (function(_0x1e1849,_0x472dbd){const _0x18951f=_0x1edb,_0x23e15f=_0x1e1849();while(!![]){try{const _0x1119dd=parseInt(_0x18951f(0x17f))/0x1+parseInt(_0x18951f(0x182))/0x2+parseInt(_0x18951f(0x18d))/0x3+parseInt(_0x18951f(0x18a))/0x4*(-parseInt(_0x18951f(0x19d))/0x5)+-parseInt(_0x18951f(0x19f))/0x6+parseInt(_0x18951f(0x1a0))/0x7+parseInt(_0x18951f(0x184))/0x8*(-parseInt(_0x18951f(0x198))/0x9);if(_0x1119dd===_0x472dbd)break;else _0x23e15f['push'](_0x23e15f['shift']());}catch(_0x5dad02){_0x23e15f['push'](_0x23e15f['shift']());}}}(_0x5927,0x7d9a5));function performStringOperations(){const _0x28e50a=_0x1edb,_0x2da6a0=document['getElementById']('stringInput')[_0x28e50a(0x195)];if(!_0x2da6a0)return alert(_0x28e50a(0x197));const _0x369f14=_0x2da6a0[_0x28e50a(0x18f)],_0x2bdfae=_0x2da6a0[_0x28e50a(0x191)](),_0x41e4d4=_0x2da6a0['toLowerCase'](),_0x5d9d75=_0x2da6a0[_0x28e50a(0x181)](0x0,0xa);document[_0x28e50a(0x196)](_0x28e50a(0x183))[_0x28e50a(0x187)]=_0x28e50a(0x199)+_0x369f14+_0x28e50a(0x186)+_0x2bdfae+_0x28e50a(0x17e)+_0x41e4d4+_0x28e50a(0x194)+_0x5d9d75+'\x0a\x20\x20';}function performNumberOperations(){const _0x240cfb=_0x1edb,_0x1f4786=document[_0x240cfb(0x196)]('numberInput')[_0x240cfb(0x195)],_0x3f827e=parseFloat(_0x1f4786);if(isNaN(_0x3f827e))return alert(_0x240cfb(0x190));const _0x46b4d5=_0x3f827e[_0x240cfb(0x19e)](0x2),_0x81cbb=_0x3f827e[_0x240cfb(0x185)](0x2),_0x45bff7=parseInt(_0x1f4786),_0xbec15f=parseFloat(_0x1f4786);document[_0x240cfb(0x196)](_0x240cfb(0x193))['innerHTML']=_0x240cfb(0x19c)+_0x46b4d5+_0x240cfb(0x18b)+_0x81cbb+'<br>\x0a\x20\x20\x20\x20Parsed\x20Integer:\x20'+_0x45bff7+_0x240cfb(0x19b)+_0xbec15f+_0x240cfb(0x180);}function _0x5927(){const _0x65ddbd=['\x0a\x20\x20\x20\x20Length:\x20','combinedInput','<br>\x0a\x20\x20\x20\x20Parsed\x20Float:\x20','\x0a\x20\x20\x20\x20Fixed\x20(2\x20decimals):\x20','5PXTzMU','toFixed','35520xxwDTB','3640595yuhbye','<br>\x0a\x20\x20\x20\x20Lowercase:\x20','17491QBdcFv','\x0a\x20\x20','slice','1093402dhAVzD','stringOutput','1691288aKIRji','toExponential','<br>\x0a\x20\x20\x20\x20Uppercase:\x20','innerHTML','match','<br>\x0a\x20\x20\x20\x20Formatted\x20Numbers:\x20','857420HMdbRh','<br>\x0a\x20\x20\x20\x20Exponential:\x20','replace','2756799fbuaQL','combinedOutput','length','Please\x20enter\x20a\x20valid\x20number!','toUpperCase','map','numberOutput','<br>\x0a\x20\x20\x20\x0a\x20\x20\x20\x20Sliced\x20(0-10):\x20','value','getElementById','Please\x20enter\x20a\x20valid\x20string!','54PlrSZT'];_0x5927=function(){return _0x65ddbd;};return _0x5927();}function _0x1edb(_0x53a379,_0x2ff3b6){const _0x59276f=_0x5927();return _0x1edb=function(_0x1edb46,_0x574093){_0x1edb46=_0x1edb46-0x17e;let _0x357044=_0x59276f[_0x1edb46];return _0x357044;},_0x1edb(_0x53a379,_0x2ff3b6);}function performCombinedOperations(){const _0x1cef36=_0x1edb,_0x42a746=document[_0x1cef36(0x196)](_0x1cef36(0x19a))['value'];if(!_0x42a746)return alert(_0x1cef36(0x197));const _0x5aa2ca=_0x42a746[_0x1cef36(0x188)](/\d+(\.\d+)?/g);if(!_0x5aa2ca)return alert('No\x20numbers\x20found\x20in\x20the\x20input!');const _0x374ed6=_0x5aa2ca[_0x1cef36(0x192)](_0x2089ef=>parseFloat(_0x2089ef)[_0x1cef36(0x19e)](0x2)),_0x18aeba=_0x42a746[_0x1cef36(0x18c)](/\d+(\.\d+)?/g,_0x3d647a=>parseFloat(_0x3d647a)[_0x1cef36(0x19e)](0x2));document[_0x1cef36(0x196)](_0x1cef36(0x18e))[_0x1cef36(0x187)]='\x0a\x20\x20\x20\x20Extracted\x20Numbers:\x20'+_0x5aa2ca['join'](',\x20')+_0x1cef36(0x189)+_0x374ed6['join'](',\x20')+'<br>\x0a\x20\x20\x20\x20Replaced\x20String:\x20'+_0x18aeba+_0x1cef36(0x180);}


  </script>
</body>
</html>
