Texas Instruments TI-84 Plus CE

 <!DOCTYPE html>

<html> <head> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .calculator { width: 320px; background-color: #102e4a; border-radius: 15px; padding: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } .logo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .logo-text { color: white; font-size: 14px; font-weight: bold; } .ti-logo { color: #dc3545; font-weight: bold; font-size: 18px; } .screen-container { background-color: #1e1e1e; padding: 10px; margin-bottom: 15px; border-radius: 5px; } .screen { height: 160px; background-color: #bbe1fa; border: 1px solid #777; border-radius: 2px; position: relative; overflow: hidden; font-family: monospace; } .screen-content { padding: 8px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .graph-area { height: 120px; border-bottom: 1px dashed #777; margin-bottom: 5px; position: relative; } .input-line { height: 20px; font-size: 16px; display: flex; align-items: center; } .cursor { display: inline-block; width: 8px; height: 14px; background-color: black; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .keypad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .key { height: 32px; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; font-size: 12px; position: relative; color: white; background-color: #333; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .key:active { transform: translateY(2px); box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .key-blue { background-color: #1565c0; } .key-red { background-color: #dc3545; } .key-green { background-color: #28a745; } .key-2nd { background-color: #007bff; } .key-alpha { background-color: #28a745; } .key-math { background-color: #17a2b8; } .key-apps { background-color: #6f42c1; } .key-prgm { background-color: #fd7e14; } .key-vars { background-color: #20c997; } .key-clear { background-color: #dc3545; } .key-arrow { background-color: #495057; } .key-enter { background-color: #007bff; grid-column: 5; grid-row: 5 / span 2; height: auto; } .key-zero { grid-column: 1 / span 2; } .small-text { font-size: 9px; position: absolute; top: 2px; left: 3px; } .top-text { color: white; font-size: 10px; margin-top: -4px; text-align: center; } .axis { position: absolute; background-color: #333; } .x-axis { width: 100%; height: 1px; top: 50%; } .y-axis { height: 100%; width: 1px; left: 50%; } .plot-point { position: absolute; width: 2px; height: 2px; background-color: #333; border-radius: 50%; } </style> </head> <body> <div class="calculator"> <div class="logo"> <span class="ti-logo">TI</span> <span class="logo-text">84 PLUS CE</span> </div> <div class="screen-container"> <div class="screen"> <div class="screen-content"> <div class="graph-area" id="graphArea"> <div class="x-axis axis"></div> <div class="y-axis axis"></div> </div> <div class="input-line"> <span id="expression"></span><span class="cursor"></span> </div> </div> </div> </div> <div class="keypad"> <!-- Row 1 --> <button class="key key-2nd">2nd<span class="small-text" style="color: white;">OFF</span></button> <button class="key key-math">MATH</button> <button class="key key-apps">APPS</button> <button class="key key-prgm">PRGM</button> <button class="key key-vars">VARS</button> <!-- Row 2 --> <button class="key key-alpha">ALPHA<span class="small-text" style="color: yellow;">LOCK</span></button> <button class="key key-blue">X,T,θ,n</button> <button class="key key-blue">STAT</button> <button class="key key-green">WINDOW</button> <button class="key key-green">ZOOM</button> <!-- Row 3 --> <button class="key key-green">TRACE</button> <button class="key key-green">GRAPH</button> <button class="key key-blue">TABLE</button> <button class="key key-clear">CLEAR</button> <button class="key key-red">DEL</button> <!-- Row 4 --> <button class="key key-arrow" id="upArrow">▲</button> <button class="key">÷</button> <button class="key">×</button> <button class="key">−</button> <button class="key">+</button> <!-- Row 5 --> <button class="key key-arrow" id="leftArrow">◀</button> <button class="key key-arrow" id="rightArrow">▶</button> <button class="key" id="key7">7</button> <button class="key" id="key8">8</button> <button class="key" id="key9">9</button> <!-- Row 6 --> <button class="key key-arrow" id="downArrow">▼</button> <button class="key">(</button> <button class="key" id="key4">4</button> <button class="key" id="key5">5</button> <button class="key" id="key6">6</button> <!-- Row 7 --> <button class="key">STO→</button> <button class="key">)</button> <button class="key" id="key1">1</button> <button class="key" id="key2">2</button> <button class="key" id="key3">3</button> <!-- Row 8 --> <button class="key">ON</button> <button class="key" id="key0">0</button> <button class="key">.</button> <button class="key">(-)</button> <button class="key key-enter">ENTER</button> </div> </div> <script> // Calculator state const state = { expression: '', graphMode: false, memory: 0, graphPoints: [] }; // DOM elements const expressionEl = document.getElementById('expression'); const graphArea = document.getElementById('graphArea'); // Number keys for (let i = 0; i <= 9; i++) { const key = document.getElementById(`key${i}`); if (key) { key.addEventListener('click', () => { addToExpression(i.toString()); }); } } // Function to add characters to the expression function addToExpression(char) { state.expression += char; updateDisplay(); } // Update the display function updateDisplay() { expressionEl.textContent = state.expression; } // Clear button document.querySelector('.key-clear').addEventListener('click', () => { state.expression = ''; updateDisplay(); }); // Delete button document.querySelector('.key-red').addEventListener('click', () => { state.expression = state.expression.slice(0, -1); updateDisplay(); }); // Basic operations document.querySelectorAll('.key').forEach(key => { const text = key.textContent.trim(); if (['+', '−', '×', '÷', '.', '(', ')', 'STO→', '(-)'].includes(text)) { key.addEventListener('click', () => { let char = text; if (text === '×') char = '*'; if (text === '÷') char = '/'; if (text === '−') char = '-'; if (text === 'STO→') char = '->'; if (text === '(-)') char = '-'; addToExpression(char); }); } }); // Enter key document.querySelector('.key-enter').addEventListener('click', () => { try { if (state.expression.includes('->')) { // Store value const parts = state.expression.split('->'); if (parts.length === 2) { const value = eval(parts[0]); state.memory = value; state.expression = value.toString(); } } else if (state.expression.includes('y=')) { // Graph mode state.graphMode = true; plotFunction(state.expression.split('y=')[1]); state.expression = ''; } else { // Calculate expression const result = eval(state.expression); state.expression = result.toString(); } } catch(e) { state.expression = 'Error'; } updateDisplay(); }); // Graph button document.querySelector('.key-green').addEventListener('click', () => { if (state.graphMode) { state.graphMode = false; clearGraph(); } else { state.expression = 'y='; updateDisplay(); } }); // Plot function function plotFunction(expr) { clearGraph(); // Generate points try { const width = graphArea.offsetWidth; const height = graphArea.offsetHeight; // Scale from -10 to 10 on both axes const scale = 10; const points = []; for (let x = -scale; x <= scale; x += 0.1) { // Create function from expression const fn = new Function('x', `return ${expr}`); const y = fn(x); if (!isNaN(y) && isFinite(y)) { // Convert to screen coordinates const screenX = (x + scale) * (width / (2 * scale)); const screenY = height - (y + scale) * (height / (2 * scale)); points.push({ x: screenX, y: screenY }); } } // Draw the function state.graphPoints = points; drawGraph(); } catch(e) { console.error('Error plotting function:', e); } } // Draw the graph function drawGraph() { const points = state.graphPoints; for (let i = 0; i < points.length; i++) { const point = document.createElement('div'); point.className = 'plot-point'; point.style.left = points[i].x + 'px'; point.style.top = points[i].y + 'px'; graphArea.appendChild(point); } } // Clear the graph function clearGraph() { const points = graphArea.querySelectorAll('.plot-point'); points.forEach(point => point.remove()); state.graphPoints = []; } // Arrow keys document.getElementById('upArrow').addEventListener('click', () => { // Navigate up in history or increase a value }); document.getElementById('downArrow').addEventListener('click', () => { // Navigate down in history or decrease a value }); document.getElementById('leftArrow').addEventListener('click', () => { // Move cursor left }); document.getElementById('rightArrow').addEventListener('click', () => { // Move cursor right }); // ON button (reset) document.querySelector('.key').addEventListener('click', () => { state.expression = ''; state.graphMode = false; clearGraph(); updateDisplay(); }); </script> </body> </html>

Comments

Post a Comment

Popular posts from this blog

Muhammed please post these calculator's

  <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > TI-108 Calculator </ title > < style > body { display : flex ; justify-content : center ; align-items : center ; height : 100 vh ; background-color : #f5f5f5 ; font-family : Arial , sans-serif ; margin : 0 ; } .calculator { width : 260 px ; background-color : #1e8ed0 ; border-radius : 10 px ; padding : 20 px ; box-shadow : 0 10 px 20 px rgba ( 0 , 0 , 0 , 0.3 ) ; position : relative ; } .brand { position : absolute ; top : 15 p...
Read more

6 Article

  Word Problems Made Easy with Your Calculator (From Scary to Super Simple!) Hey problem-solving superstars! Let's be honest - word problems can feel like trying to solve a puzzle written in a foreign language. You read it once, twice, maybe three times, and still think "What are they even asking me?" But here's the secret: word problems aren't trying to trick you. They're just real life dressed up in math clothes. And with your calculator as your sidekick, you can crack any word problem code! The STAR Method - Your Word Problem Superpower Before we dive into calculator magic, let's learn the STAR method: S - Stop and Read (What's actually happening?) T - Think and Translate (What math is hiding in the words?) A - Attack with Calculator (Let the calculator do the heavy lifting!) R - Review and Check (Does your answer make sense?) Let's see STAR in action! Example 1: The Pizza Party Problem The Problem : "Sarah is planning a pi...
Read more