what i did today was make a calculator but it is an advance one <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Advanced Calculator<\/title>\n <style>\n * { box-sizing: border-box; font-family: system-ui, sans-serif; }\n body {\n background: #111827;\n color: #e5e7eb;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n }\n .calc {\n background: #020617;\n padding: 1rem;\n border-radius: 1rem;\n box-shadow: 0 20px 40px rgba(0,0,0,0.5);\n width: 360px;\n max-width: 100%;\n }\n .display {\n background: #020617;\n border-radius: 0.75rem;\n padding: 0.75rem 0.9rem;\n border: 1px solid #1f2937;\n margin-bottom: 0.75rem;\n }\n .expression {\n font-size: 0.85rem;\n color: #9ca3af;\n min-height: 1.2em;\n word-wrap: break-word;\n }\n .result {\n font-size: 1.6rem;\n text-align: right;\n margin-top: 0.25rem;\n word-wrap: break-word;\n }\n .row {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0.4rem;\n margin-bottom: 0.4rem;\n }\n button {\n border: none;\n border-radius: 0.6rem;\n padding: 0.7rem 0.4rem;\n font-size: 0.95rem;\n cursor: pointer;\n background: #111827;\n color: #e5e7eb;\n transition: background 0.1s, transform 0.05s;\n }\n button:active {\n transform: translateY(1px);\n background: #0f172a;\n }\n .btn-op { color: #38bdf8; }\n .btn-fn { color: #a855f7; font-size: 0.8rem; }\n .btn-eq {\n background: #22c55e;\n color: #022c22;\n font-weight: 600;\n }\n .btn-eq:active { background: #16a34a; }\n .btn-ac { color: #f97373; }\n .row-wide {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n gap: 0.4rem;\n margin-bottom: 0.4rem;\n }\n .history {\n margin-top: 0.5rem;\n max-height: 120px;\n overflow-y: auto;\n font-size: 0.8rem;\n border-top: 1px solid #1f2937;\n padding-top: 0.4rem;\n }\n .history-item {\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.15rem 0;\n cursor: pointer;\n }\n .history-exp { color: #9ca3af; }\n .history-res { color: #e5e7eb; }\n <\/style>\n<\/head>\n<body>\n <div class=\"calc\">\n <div class=\"display\">\n <div class=\"expression\" id=\"expression\"><\/div>\n <div class=\"result\" id=\"result\">0<\/div>\n <\/div>\n\n <div class=\"row\">\n <button class=\"btn-ac\" data-action=\"clear\">AC<\/button>\n <button data-action=\"backspace\">\u232b<\/button>\n <button class=\"btn-op\" data-value=\"(\">(<\/button>\n <button class=\"btn-op\" data-value=\")\">)<\/button>\n <\/div>\n\n <div class=\"row\">\n <button class=\"btn-fn\" data-fn=\"sin\">sin<\/button>\n <button class=\"btn-fn\" data-fn=\"cos\">cos<\/button>\n <button class=\"btn-fn\" data-fn=\"tan\">tan<\/button>\n <button class=\"btn-op\" data-value=\"\/\">\u00f7<\/button>\n <\/div>\n\n <div class=\"row\">\n <button class=\"btn-fn\" data-fn=\"log\">log<\/button>\n <button class=\"btn-fn\" data-fn=\"ln\">ln<\/button>\n <button class=\"btn-fn\" data-fn=\"sqrt\">\u221a<\/button>\n <button class=\"btn-op\" data-value=\"*\">\u00d7<\/button>\n <\/div>\n\n <div class=\"row\">\n <button data-value=\"7\">7<\/button>\n <button data-value=\"8\">8<\/button>\n <button data-value=\"9\">9<\/button>\n <button class=\"btn-op\" data-value=\"-\">\u2212<\/button>\n <\/div>\n\n <div class=\"row\">\n <button data-value=\"4\">4<\/button>\n <button data-value=\"5\">5<\/button>\n <button data-value=\"6\">6<\/button>\n <button class=\"btn-op\" data-value=\"+\">+<\/button>\n <\/div>\n\n <div class=\"row\">\n <button data-value=\"1\">1<\/button>\n <button data-value=\"2\">2<\/button>\n <button data-value=\"3\">3<\/button>\n <button class=\"btn-op\" data-value=\"^\">x\u02b8<\/button>\n <\/div>\n\n <div class=\"row-wide\">\n <button data-value=\"0\">0<\/button>\n <button data-value=\".\">.<\/button>\n <button class=\"btn-eq\" data-action=\"equals\">=<\/button>\n <\/div>\n\n <div class=\"history\" id=\"history\"><\/div>\n <\/div>\n\n <script>\n const exprEl = document.getElementById('expression');\n const resultEl = document.getElementById('result');\n const historyEl = document.getElementById('history');\n\n let expression = '';\n let lastResult = null;\n const history = [];\n\n function updateDisplay() {\n exprEl.textContent = expression;\n if (!expression) resultEl.textContent = lastResult !== null ? lastResult : '0';\n }\n\n function addToHistory(exp, res) {\n history.unshift({ exp, res });\n if (history.length > 20) history.pop();\n renderHistory();\n }\n\n function renderHistory() {\n historyEl.innerHTML = '';\n history.forEach((item, index) => {\n const div = document.createElement('div');\n div.className = 'history-item';\n div.innerHTML = `\n <span class=\"history-exp\">${item.exp}<\/span>\n <span class=\"history-res\">${item.res}<\/span>\n `;\n div.addEventListener('click', () => {\n expression = item.exp;\n lastResult = item.res;\n updateDisplay();\n });\n historyEl.appendChild(div);\n });\n }\n\n function insertValue(val) {\n expression += val;\n updateDisplay();\n }\n\n function insertFunction(fn) {\n \/\/ functions are in radians\n expression += fn + '(';\n updateDisplay();\n }\n\n function clearAll() {\n expression = '';\n lastResult = null;\n updateDisplay();\n }\n\n function backspace() {\n expression = expression.slice(0, -1);\n updateDisplay();\n }\n\n function toSafeExpression(exp) {\n \/\/ Replace ^ with ** and map functions to Math.*\n return exp\n .replace(\/\u03c0\/g, 'Math.PI')\n .replace(\/e\/g, 'Math.E')\n .replace(\/\\^\/g, '**')\n .replace(\/\\bsin\\(\/g, 'Math.sin(')\n .replace(\/\\bcos\\(\/g, 'Math.cos(')\n .replace(\/\\btan\\(\/g, 'Math.tan(')\n .replace(\/\\blog\\(\/g, 'Math.log10(')\n .replace(\/\\bln\\(\/g, 'Math.log(')\n .replace(\/\\bsqrt\\(\/g, 'Math.sqrt(');\n }\n\n function evaluateExpression() {\n if (!expression) return;\n try {\n const safe = toSafeExpression(expression);\n \/\/ eslint-disable-next-line no-new-func\n const fn = new Function('return ' + safe);\n let res = fn();\n if (typeof res === 'number' && !Number.isNaN(res) && Number.isFinite(res)) {\n \/\/ round to avoid floating noise\n res = Math.round((res + Number.EPSILON) * 1e12) \/ 1e12;\n lastResult = res;\n resultEl.textContent = res;\n addToHistory(expression, res);\n } else {\n resultEl.textContent = 'Error';\n }\n } catch (e) {\n resultEl.textContent = 'Error';\n }\n }\n\n document.addEventListener('click', (e) => {\n const btn = e.target.closest('button');\n if (!btn) return;\n\n const val = btn.getAttribute('data-value');\n const action = btn.getAttribute('data-action');\n const fn = btn.getAttribute('data-fn');\n\n if (val !== null) {\n insertValue(val);\n } else if (fn) {\n insertFunction(fn);\n } else if (action === 'clear') {\n clearAll();\n } else if (action === 'backspace') {\n backspace();\n } else if (action === 'equals') {\n evaluateExpression();\n }\n });\n\n \/\/ Basic keyboard support\n document.addEventListener('keydown', (e) => {\n const key = e.key;\n\n if ((key >= '0' && key <= '9') || key === '.' || key === '(' || key === ')') {\n insertValue(key);\n } else if (['+', '-', '*', '\/'].includes(key)) {\n insertValue(key);\n } else if (key === '^') {\n insertValue('^');\n } else if (key === 'Backspace') {\n backspace();\n } else if (key === 'Enter' || key === '=') {\n e.preventDefault();\n evaluateExpression();\n } else if (key === 'Escape') {\n clearAll();\n }\n });\n\n updateDisplay();\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"what i did today was make a calculator but it is an advance one<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-54","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/54\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}