1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Looking for Guidance or Plugins to Implement TI-84 Calculator on My Website

Discussion in 'HTML & Website Design' started by abdulmuqeet554, Feb 2, 2025.

  1. #1
    I’m working on a project where I need to integrate a TI-84 calculator functionality into my website. However, I’m not familiar with the code required for this or if there are any existing plugins that can help.

    Does anyone have experience with creating or using a TI-84 calculator online? If so, could you kindly share any plugins, resources, or guidance on how to achieve this?

    Any help would be greatly appreciated!

    Thank you in advance!
     
    abdulmuqeet554, Feb 2, 2025 IP
  2. abdulmuqeet554

    abdulmuqeet554 Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    Someone please can help or suggest something???
     
    abdulmuqeet554, Feb 2, 2025 IP
  3. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #3
    Here you go...

    HTML
    
    
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>TI 84 Calculator Online</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    </head>
    <body>
    
     <div id="iframe-container">
      <iframe src="https://ti84calc.com/ti84calc"></iframe>
     </div>
     
    </body>
    </html>
    
    
    Code (markup):
    screen.css
    
    
    
    body {
       background-color: #f9f9f9;
       background-image:linear-gradient(to bottom, #00fefe, #066);
       background-attachment: fixed;
       font: normal 1em / 1.5  arial, helvetica, sans-serif;
     }
    #iframe-container {;
       width:80%;
       height:50em;
       margin:auto;
     }
     #iframe-container iframe{
       display: block;
       width: 100%;
       height: 100%;  
     }
    
    Code (markup):

    coothead
     

    Attached Files:

    denis bayly, Feb 3, 2025 IP
  4. abdulmuqeet554

    abdulmuqeet554 Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    But it has someother website added i dont want anyother website to be embeded.
     
    abdulmuqeet554, Feb 3, 2025 IP
  5. abdulmuqeet554

    abdulmuqeet554 Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    i want a code which shows the calculator only for my website. i don't want to embed the other website calculator into my website

    https://ti84calculators.com/
     
    abdulmuqeet554, Feb 3, 2025 IP
  6. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #6
     
    denis bayly, Feb 3, 2025 IP
  7. Ezenity

    Ezenity Greenhorn

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #7
    What you are asking for seems like being spoon-fed. I do not usually condone this however, I've learned from other individuals code. I hope this helps you with what you are looking for. This will still need additional work however, it is a start.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Custom Calculator</title>
      <!-- Link external CSS if you prefer a separate file -->
      <style>
        /* ====== BASIC RESET ====== */
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
       
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: sans-serif;
          background: #f0f0f0;
          height: 100vh;
        }
       
        .calculator {
          background: #444;
          border-radius: 10px;
          padding: 20px;
          width: 300px;
        }
       
        .calc-display {
          background: #222;
          color: #0f0;
          text-align: right;
          font-size: 1.5rem;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 15px;
          height: 2em;
          overflow-x: auto;
        }
       
        .buttons {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 10px;
        }
       
        .btn {
          background: #666;
          color: #fff;
          font-size: 1.2rem;
          border: none;
          padding: 15px;
          border-radius: 5px;
          cursor: pointer;
          transition: background 0.2s;
        }
       
        .btn:hover {
          background: #555;
        }
       
        /* Larger function buttons (Clear, etc.) */
        .btn.span-2 {
          grid-column: span 2;
        }
       
        /* Customize special/operator buttons */
        .operator {
          background: #ff9500;
        }
       
        .operator:hover {
          background: #e08a00;
        }
      </style>
    </head>
    <body>
     
      <div class="calculator">
        <div id="calc-display" class="calc-display">0</div>
        <div class="buttons">
          <!-- Row 1 -->
          <button class="btn" data-value="7">7</button>
          <button class="btn" data-value="8">8</button>
          <button class="btn" data-value="9">9</button>
          <button class="btn operator" data-value="/">÷</button>
         
          <!-- Row 2 -->
          <button class="btn" data-value="4">4</button>
          <button class="btn" data-value="5">5</button>
          <button class="btn" data-value="6">6</button>
          <button class="btn operator" data-value="*">×</button>
         
          <!-- Row 3 -->
          <button class="btn" data-value="1">1</button>
          <button class="btn" data-value="2">2</button>
          <button class="btn" data-value="3">3</button>
          <button class="btn operator" data-value="-">−</button>
         
          <!-- Row 4 -->
          <button class="btn" data-value="0">0</button>
          <button class="btn" data-value=".">.</button>
          <button class="btn operator" data-value="+">+</button>
          <button class="btn operator" data-value="=">=</button>
         
          <!-- Row 5 -->
          <button class="btn span-2" data-value="clear">C</button>
          <button class="btn operator" data-value="(">(</button>
          <button class="btn operator" data-value=")">)</button>
         
          <!-- Row 6 (Extra row for exponent, square root, etc.) -->
          <button class="btn operator" data-value="^">x^y</button>
          <button class="btn operator" data-value="sqrt">√x</button>
          <button class="btn operator" data-value="sin">sin</button>
          <button class="btn operator" data-value="cos">cos</button>
        </div>
      </div>
    
      <!-- Include a separate JS file or inline script -->
      <script>
        // Grab display element
        const display = document.getElementById('calc-display');
       
        // Current expression to evaluate
        let expression = '0';
       
        // Update the calculator display
        function updateDisplay(value) {
          display.textContent = value;
        }
       
        // Handle button clicks
        function handleButtonClick(e) {
          const clickedValue = e.target.getAttribute('data-value');
          if (!clickedValue) return; // Clicked somewhere else
         
          switch (clickedValue) {
            case 'clear':
              expression = '0';
              updateDisplay(expression);
              break;
            case '=':
              try {
                // Replace ^ with ** for exponent in JS
                let evalExpression = expression.replace(/\^/g, '**');
               
                // Evaluate sqrt, sin, cos, etc.
                evalExpression = evalExpression.replace(/sqrt\((.*?)\)/g, 'Math.sqrt($1)');
                evalExpression = evalExpression.replace(/sin\((.*?)\)/g, 'Math.sin($1)');
                evalExpression = evalExpression.replace(/cos\((.*?)\)/g, 'Math.cos($1)');
               
                // Evaluate using JavaScript
                let result = eval(evalExpression);
               
                // Round or format if you like
                // (Be cautious with float imprecision in JS)
                result = parseFloat(result.toFixed(10));
                expression = result.toString();
              } catch (err) {
                expression = 'Error';
              }
              updateDisplay(expression);
              break;
            case 'sqrt':
              // Insert sqrt(...) around the last number or entire expression
              // For simplicity, just do sqrt(expression)
              expression = `sqrt(${expression})`;
              updateDisplay(expression);
              break;
            case 'sin':
              expression = `sin(${expression})`;
              updateDisplay(expression);
              break;
            case 'cos':
              expression = `cos(${expression})`;
              updateDisplay(expression);
              break;
            default:
              // If the current display is '0' and user clicks a digit or '(' or sin, cos, etc.
              if (expression === '0' && !isNaN(clickedValue)) {
                expression = clickedValue;
              } else if (expression === '0' && (clickedValue === '(' || clickedValue === 'sin' || clickedValue === 'cos' || clickedValue === 'sqrt')) {
                expression = clickedValue + '(';
              } else {
                // Append the clicked value to the expression
                expression += clickedValue;
              }
              updateDisplay(expression);
              break;
          }
        }
       
        // Attach event listeners to all buttons
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(btn => {
          btn.addEventListener('click', handleButtonClick);
        });
      </script>
    
    </body>
    </html>
    
    HTML:
    HTML Structure
    • a container `.calculator` holds everything.
    • a display area (`#calc-display`) shows the current value or expression.
    • Each button has a `data-value` attribute which is read by JavaScript to know what action to take.

    JavaScript Details

    • Listens for button clicks and updates the expression or evaluates it
    • Handles operators like `+, -, *, /` and exponent with `^` (converted to `**` for JavaScript's exponent operator).
    • Demonstrates additional functions like `sqrt(...)`, `sin(...)`, `cos(...)`
    • This is just an example at simplistic terms. You can adapt or expand to handle more complex scientific notations or chain them together in a more sophisticated way like: `sin(sqrt(x))` ).

    You can integrate this into your site by creating a new page on your site. Now if you want this to look like a TI-84 you'll need to use CSS to create a more rectangular shape with a black or gray background. Add or remove rows to match the TI-84 button count and arrangement. Implement advanced features like storing variables (`Sto-<`) more trig functions (tan, asin, acos, etc.) or even a scrolling "screen". Also, keep in mind that an actual TI-84 emulator typically requires:
    • A legal copy of the TI-84 IS/ROM (owned by the user).
    • Emulator software (like jsTIfied, TIEmu, etc.).
    Those solutions are more complex and often subject to TI's licensing. The snippet provided here is a custom calculator that runs entirely on your site with no external dependencies.
     
    Ezenity, Feb 4, 2025 IP