/* --- General Styling & Theme --- */ :root { --bg-color: #f0f2f5; --text-color: #333; --container-bg: #ffffff; --input-bg: #e9e9e9; --btn-bg: #f9f9f9; --btn-hover-bg: #e0e0e0; --operator-bg: #ff9f0a; --operator-hover-bg: #e08e0a; --shadow-color: rgba(0, 0, 0, 0.1); } [data-theme="dark"] { --bg-color: #121212; --text-color: #f1f1f1; --container-bg: #1e1e1e; --input-bg: #2a2a2a; --btn-bg: #333; --btn-hover-bg: #444; --operator-bg: #ff9f0a; --operator-hover-bg: #e08e0a; --shadow-color: rgba(255, 255, 255, 0.1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: flex-start; /* Align to top */ min-height: 100vh; padding: 20px; } .main-container { display: flex; gap: 20px; width: 100%; max-width: 800px; flex-wrap: wrap; /* Allow wrapping on small screens */ } .tool-container { flex: 2; min-width: 360px; background: var(--container-bg); border-radius: 12px; box-shadow: 0 5px 20px var(--shadow-color); padding: 20px; } /* --- Tab System --- */ .tabs { display: flex; border-bottom: 2px solid var(--input-bg); margin-bottom: 20px; } .tab-btn { padding: 10px 15px; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--text-color); opacity: 0.6; transition: opacity 0.3s, border-bottom 0.3s; } .tab-btn.active { opacity: 1; border-bottom: 2px solid var(--operator-bg); } .tab-content { display: none; } .tab-content.active { display: block; } /* --- Calculator Styling --- */ .display input { width: 100%; padding: 20px; font-size: 2.5em; text-align: right; border: none; background-color: transparent; color: var(--text-color); margin-bottom: 15px; } .buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .btn { padding: 18px 5px; font-size: 1.2em; border: none; border-radius: 8px; background: var(--btn-bg); color: var(--text-color); cursor: pointer; transition: background-color 0.2s; } .btn:hover { background-color: var(--btn-hover-bg); } .operator { background: var(--operator-bg); color: #fff; } .operator:hover { background: var(--operator-hover-bg); } /* --- History Panel --- */ .history-container { flex: 1; min-width: 250px; background: var(--container-bg); border-radius: 12px; box-shadow: 0 5px 20px var(--shadow-color); padding: 20px; height: fit-content; } .history-container h3 { margin-bottom: 10px; border-bottom: 1px solid var(--input-bg); padding-bottom: 10px; } #history-list { list-style: none; max-height: 400px; overflow-y: auto; } #history-list li { padding: 8px 5px; border-bottom: 1px solid var(--input-bg); font-size: 14px; cursor: pointer; } #history-list li:hover { background-color: var(--btn-hover-bg); } #clear-history { width: 100%; padding: 8px; margin-top: 10px; border: none; background: var(--operator-bg); color: #fff; border-radius: 5px; cursor: pointer; } /* --- Unit Converter & Graphing Styling --- */ .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input, .form-group select { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid var(--input-bg); background: var(--input-bg); color: var(--text-color); font-size: 16px; } .converter-arrow { text-align: center; font-size: 24px; margin: 10px 0; } /* --- Theme Switch --- */ .theme-switch { margin-top: 20px; text-align: center; }
Calculator Unit Converter Graphing
C ⌫ ^ / 📋 7 8 9 * √ 4 5 6 - sin 1 2 3 + cos 0 . % = tan
Category LengthWeightTemperature
From
↓
To
Enter a function of x (e.g., x^2 or sin(x))
Draw Graph
Dark Mode
History
Clear History
document.addEventListener('DOMContentLoaded', () => { // --- Global Variables & Elements --- const display = document.getElementById('display'); const historyList = document.getElementById('history-list'); const parser = math.parser(); let expression = ''; let history = JSON.parse(localStorage.getItem('calcHistory')) || []; // --- Tab Switching Logic --- const tabs = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); const target = document.getElementById(tab.dataset.tab); tabContents.forEach(tc => tc.classList.remove('active')); target.classList.add('active'); }); }); // --- Calculator Logic --- const calcButtons = document.querySelectorAll('#calculator .btn'); calcButtons.forEach(button => { button.addEventListener('click', () => { const value = button.dataset.value; if (value === '=') { try { const result = parser.evaluate(expression); addToHistory(expression, result); display.value = result; expression = result.toString(); } catch (error) { display.value = 'Error'; expression = ''; } } else if (value === 'C') { expression = ''; display.value = ''; } else if (value === '⌫') { // Backspace expression = expression.slice(0, -1); display.value = expression; } else if (value === '📋') { // Copy navigator.clipboard.writeText(display.value).then(() => alert('Result copied!')); } else if (value === '%') { try { expression = `(${expression}) / 100`; display.value = parser.evaluate(expression); } catch { display.value = 'Error'; } } else if (['sin', 'cos', 'tan', 'sqrt'].includes(value)) { expression += value + '('; display.value = expression; } else { expression += value; display.value = expression; } }); }); // --- Keyboard Support --- document.addEventListener('keydown', (e) => { const key = e.key; if (document.querySelector('#calculator').classList.contains('active')) { if ((key >= '0' && key <= '9') || key === '.' || ['+', '-', '*', '/', '^', '(', ')'].includes(key)) { expression += key; display.value = expression; } else if (key === 'Enter') { e.preventDefault(); // Prevent form submission document.querySelector('.btn[data-value="="]').click(); } else if (key === 'Backspace') { document.querySelector('.btn[data-value="⌫"]').click(); } else if (key.toLowerCase() === 'c') { document.querySelector('.btn[data-value="C"]').click(); } } }); // --- History Logic --- function addToHistory(exp, res) { const historyItem = `${exp} = ${res}`; history.unshift(historyItem); // Add to the beginning if (history.length > 20) history.pop(); // Keep last 20 localStorage.setItem('calcHistory', JSON.stringify(history)); updateHistoryUI(); } function updateHistoryUI() { historyList.innerHTML = ''; history.forEach(item => { const li = document.createElement('li'); li.textContent = item; li.addEventListener('click', () => { display.value = item.split('=')[1].trim(); expression = display.value; }); historyList.appendChild(li); }); } document.getElementById('clear-history').addEventListener('click', () => { history = []; localStorage.removeItem('calcHistory'); updateHistoryUI(); }); // --- Unit Converter Logic --- const categorySelect = document.getElementById('converter-category'); const fromUnitSelect = document.getElementById('from-unit'); const toUnitSelect = document.getElementById('to-unit'); const fromValueInput = document.getElementById('from-value'); const toValueInput = document.getElementById('to-value'); const units = { length: { 'Meter (m)': 1, 'Kilometer (km)': 1000, 'Centimeter (cm)': 0.01, 'Foot (ft)': 0.3048, 'Inch (in)': 0.0254 }, weight: { 'Gram (g)': 1, 'Kilogram (kg)': 1000, 'Pound (lb)': 453.592, 'Ounce (oz)': 28.3495 }, temperature: ['Celsius (°C)', 'Fahrenheit (°F)', 'Kelvin (K)'] }; function populateUnits() { const category = categorySelect.value; fromUnitSelect.innerHTML = ''; toUnitSelect.innerHTML = ''; const unitData = units[category]; const unitNames = Array.isArray(unitData) ? unitData : Object.keys(unitData); unitNames.forEach(unit => { fromUnitSelect.add(new Option(unit, unit)); toUnitSelect.add(new Option(unit, unit)); }); convertUnits(); } function convertUnits() { const category = categorySelect.value; const fromUnit = fromUnitSelect.value; const toUnit = toUnitSelect.value; const fromValue = parseFloat(fromValueInput.value); if (isNaN(fromValue)) { toValueInput.value = ''; return; } let result; if (category === 'temperature') { if (fromUnit === toUnit) result = fromValue; else if (fromUnit === 'Celsius (°C)' && toUnit === 'Fahrenheit (°F)') result = (fromValue * 9/5) + 32; else if (fromUnit === 'Fahrenheit (°F)' && toUnit === 'Celsius (°C)') result = (fromValue - 32) * 5/9; else if (fromUnit === 'Celsius (°C)' && toUnit === 'Kelvin (K)') result = fromValue + 273.15; else if (fromUnit === 'Kelvin (K)' && toUnit === 'Celsius (°C)') result = fromValue - 273.15; else if (fromUnit === 'Fahrenheit (°F)' && toUnit === 'Kelvin (K)') result = (fromValue - 32) * 5/9 + 273.15; else if (fromUnit === 'Kelvin (K)' && toUnit === 'Fahrenheit (°F)') result = (fromValue - 273.15) * 9/5 + 32; } else { const fromFactor = units[category][fromUnit]; const toFactor = units[category][toUnit]; const valueInBase = fromValue * fromFactor; result = valueInBase / toFactor; } toValueInput.value = result.toFixed(4); } categorySelect.addEventListener('change', populateUnits); fromValueInput.addEventListener('input', convertUnits); fromUnitSelect.addEventListener('change', convertUnits); toUnitSelect.addEventListener('change', convertUnits); // --- Graphing Logic --- const functionInput = document.getElementById('function-input'); const drawGraphBtn = document.getElementById('draw-graph-btn'); const graphCanvas = document.getElementById('graph-canvas'); let chart; drawGraphBtn.addEventListener('click', () => { const funcStr = functionInput.value; if (!funcStr) return; try { const labels = []; const data = []; const scope = {}; const node = math.parse(funcStr); const code = node.compile(); for (let x = -10; x <= 10; x += 0.5) { labels.push(x); scope.x = x; data.push(code.evaluate(scope)); } if (chart) chart.destroy(); // Destroy old chart before creating new one chart = new Chart(graphCanvas.getContext('2d'), { type: 'line', data: { labels: labels, datasets: [{ label: `y = ${funcStr}`, data: data, borderColor: '#ff9f0a', tension: 0.1, fill: false }] } }); } catch (error) { alert('Invalid function. Please use "x" as the variable.'); } }); // --- Theme Toggle --- const themeToggle = document.getElementById('theme-toggle'); themeToggle.addEventListener('change', () => { document.body.setAttribute('data-theme', themeToggle.checked ? 'dark' : 'light'); }); // --- Initial Load --- updateHistoryUI(); populateUnits(); });
Posted by Billal A R
0 Comments