Smaller Compact Calculator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #4a0072; \/* Purple background *\/\n }\n\n .calculator-wrapper {\n background-color: #0000a0; \/* Deep blue background *\/\n padding: 8px; \/* Reduced padding for compactness *\/\n border-radius: 15px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n width: 210px; \/* 20% smaller width *\/\n }\n\n .calculator {\n display: grid;\n grid-template-areas: \n \"display display display display\"\n \"ac ce percent divide\"\n \"seven eight nine multiply\"\n \"four five six subtract\"\n \"one two three add\"\n \"zero zero dot equal\";\n grid-gap: 4px; \/* Slightly reduced gap *\/\n }\n\n .display {\n grid-area: display;\n background-color: #c0c0c0; \/* Light silver display *\/\n color: #000;\n text-align: right;\n padding: 6px; \/* Reduced padding for display *\/\n border-radius: 8px;\n font-size: 1em; \/* Slightly smaller text size *\/\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n button {\n font-size: 0.8em; \/* Reduced font size *\/\n font-weight: bold;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 8px; \/* Smaller padding for compact buttons *\/\n }\n\n button:focus {\n outline: none;\n }\n\n \/* Button Colors *\/\n .control { background-color: #ff4500; color: #fff; } \/* AC and CE *\/\n .control:hover { background-color: #ff6347; }\n\n .secondary { background-color: #ff8c00; color: #fff; } \/* CE button *\/\n .secondary:hover { background-color: #ffa500; }\n\n .operator { background-color: #4169e1; color: #fff; } \/* Operators *\/\n .operator:hover { background-color: #4682b4; }\n\n .number { background-color: #1e90ff; color: #fff; } \/* Numbers *\/\n .number:hover { background-color: #87cefa; }\n\n .equal { background-color: #228b22; color: #fff; } \/* Equal button *\/\n .equal:hover { background-color: #32cd32; }\n\n .wide { grid-column: span 2; } \/* Buttons spanning 2 columns *\/\n <\/style>\n<\/head>\n<body>\n <div class=\"calculator-wrapper\">\n <div class=\"calculator\">\n \n <div class=\"display\" id=\"display\">0<\/div>\n\n \n <button class=\"control\" onclick=\"clearAll()\">AC<\/button>\n <button class=\"secondary\" onclick=\"clearEntry()\">CE<\/button>\n <button class=\"operator\" onclick=\"appendOperator('%')\">%<\/button>\n <button class=\"operator\" onclick=\"appendOperator('\/')\">\u00f7<\/button>\n\n \n <button class=\"number\" onclick=\"appendNumber('7')\">7<\/button>\n <button class=\"number\" onclick=\"appendNumber('8')\">8<\/button>\n <button class=\"number\" onclick=\"appendNumber('9')\">9<\/button>\n <button class=\"operator\" onclick=\"appendOperator('*')\">\u00d7<\/button>\n\n <button class=\"number\" onclick=\"appendNumber('4')\">4<\/button>\n <button class=\"number\" onclick=\"appendNumber('5')\">5<\/button>\n <button class=\"number\" onclick=\"appendNumber('6')\">6<\/button>\n <button class=\"operator\" onclick=\"appendOperator('-')\">\u2212<\/button>\n\n <button class=\"number\" onclick=\"appendNumber('1')\">1<\/button>\n <button class=\"number\" onclick=\"appendNumber('2')\">2<\/button>\n <button class=\"number\" onclick=\"appendNumber('3')\">3<\/button>\n <button class=\"operator\" onclick=\"appendOperator('+')\">+<\/button>\n\n \n <button class=\"number wide\" onclick=\"appendNumber('0')\">0<\/button>\n <button class=\"number\" onclick=\"appendDecimal()\">.<\/button>\n <button class=\"equal\" onclick=\"calculate()\">=<\/button>\n <\/div>\n <\/div>\n\n <script>\n let displayElement = document.getElementById('display');\n let expression = '';\n let resetDisplay = false;\n\n \/\/ Clear all input\n function clearAll() {\n expression = '';\n resetDisplay = false;\n updateDisplay('0');\n }\n\n \/\/ Clear the last entry\n function clearEntry() {\n expression = expression.slice(0, -1);\n updateDisplay(expression || '0');\n }\n\n \/\/ Append a number to the expression\n function appendNumber(number) {\n if (resetDisplay) {\n expression = number;\n resetDisplay = false;\n } else {\n expression += number;\n }\n updateDisplay(expression);\n }\n\n \/\/ Append an operator to the expression\n function appendOperator(operator) {\n if (resetDisplay) {\n resetDisplay = false;\n }\n if (expression === '' && operator !== '-') {\n return;\n }\n expression += ` ${operator} `;\n updateDisplay(expression);\n }\n\n \/\/ Append a decimal point\n function appendDecimal() {\n const parts = expression.split(\/[\\s]\/);\n const currentNumber = parts[parts.length - 1];\n\n if (!currentNumber.includes('.')) {\n expression += '.';\n updateDisplay(expression);\n }\n }\n\n \/\/ Evaluate the expression\n function calculate() {\n try {\n let result = eval(expression.replace(\/\u00f7\/g, '\/').replace(\/\u00d7\/g, '*').replace(\/%\/g, '\/100'));\n expression = result.toString();\n resetDisplay = true;\n updateDisplay(expression);\n } catch (error) {\n expression = 'Error';\n resetDisplay = true;\n updateDisplay(expression);\n }\n }\n\n \/\/ Update the display\n function updateDisplay(value) {\n displayElement.textContent = value;\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Smaller Compact Calculator 0 AC CE % \u00f7 7 8 9 \u00d7 4 5 6 \u2212 1 2 3 + 0 . =<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":3,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13,"date":"2025-05-05T01:06:02","date_gmt":"2025-05-05T01:06:02","guid":{"rendered":"https:\/\/virtualscienceteachers.com\/?page_id=13"},"modified":"2025-05-05T01:08:03","modified_gmt":"2025-05-05T01:08:03","slug":"calculator","status":"publish","type":"page","link":"https:\/\/virtualscienceteachers.com\/index.php\/calculator\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Smaller Compact Calculator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #4a0072; \/* Purple background *\/\n }\n\n .calculator-wrapper {\n background-color: #0000a0; \/* Deep blue background *\/\n padding: 8px; \/* Reduced padding for compactness *\/\n border-radius: 15px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n width: 210px; \/* 20% smaller width *\/\n }\n\n .calculator {\n display: grid;\n grid-template-areas: \n \"display display display display\"\n \"ac ce percent divide\"\n \"seven eight nine multiply\"\n \"four five six subtract\"\n \"one two three add\"\n \"zero zero dot equal\";\n grid-gap: 4px; \/* Slightly reduced gap *\/\n }\n\n .display {\n grid-area: display;\n background-color: #c0c0c0; \/* Light silver display *\/\n color: #000;\n text-align: right;\n padding: 6px; \/* Reduced padding for display *\/\n border-radius: 8px;\n font-size: 1em; \/* Slightly smaller text size *\/\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n button {\n font-size: 0.8em; \/* Reduced font size *\/\n font-weight: bold;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n padding: 8px; \/* Smaller padding for compact buttons *\/\n }\n\n button:focus {\n outline: none;\n }\n\n \/* Button Colors *\/\n .control { background-color: #ff4500; color: #fff; } \/* AC and CE *\/\n .control:hover { background-color: #ff6347; }\n\n .secondary { background-color: #ff8c00; color: #fff; } \/* CE button *\/\n .secondary:hover { background-color: #ffa500; }\n\n .operator { background-color: #4169e1; color: #fff; } \/* Operators *\/\n .operator:hover { background-color: #4682b4; }\n\n .number { background-color: #1e90ff; color: #fff; } \/* Numbers *\/\n .number:hover { background-color: #87cefa; }\n\n .equal { background-color: #228b22; color: #fff; } \/* Equal button *\/\n .equal:hover { background-color: #32cd32; }\n\n .wide { grid-column: span 2; } \/* Buttons spanning 2 columns *\/\n <\/style>\n<\/head>\n<body>\n <div class=\"calculator-wrapper\">\n <div class=\"calculator\">\n \n <div class=\"display\" id=\"display\">0<\/div>\n\n \n <button class=\"control\" onclick=\"clearAll()\">AC<\/button>\n <button class=\"secondary\" onclick=\"clearEntry()\">CE<\/button>\n <button class=\"operator\" onclick=\"appendOperator('%')\">%<\/button>\n <button class=\"operator\" onclick=\"appendOperator('\/')\">\u00f7<\/button>\n\n \n <button class=\"number\" onclick=\"appendNumber('7')\">7<\/button>\n <button class=\"number\" onclick=\"appendNumber('8')\">8<\/button>\n <button class=\"number\" onclick=\"appendNumber('9')\">9<\/button>\n <button class=\"operator\" onclick=\"appendOperator('*')\">\u00d7<\/button>\n\n <button class=\"number\" onclick=\"appendNumber('4')\">4<\/button>\n <button class=\"number\" onclick=\"appendNumber('5')\">5<\/button>\n <button class=\"number\" onclick=\"appendNumber('6')\">6<\/button>\n <button class=\"operator\" onclick=\"appendOperator('-')\">\u2212<\/button>\n\n <button class=\"number\" onclick=\"appendNumber('1')\">1<\/button>\n <button class=\"number\" onclick=\"appendNumber('2')\">2<\/button>\n <button class=\"number\" onclick=\"appendNumber('3')\">3<\/button>\n <button class=\"operator\" onclick=\"appendOperator('+')\">+<\/button>\n\n \n <button class=\"number wide\" onclick=\"appendNumber('0')\">0<\/button>\n <button class=\"number\" onclick=\"appendDecimal()\">.<\/button>\n <button class=\"equal\" onclick=\"calculate()\">=<\/button>\n <\/div>\n <\/div>\n\n <script>\n let displayElement = document.getElementById('display');\n let expression = '';\n let resetDisplay = false;\n\n \/\/ Clear all input\n function clearAll() {\n expression = '';\n resetDisplay = false;\n updateDisplay('0');\n }\n\n \/\/ Clear the last entry\n function clearEntry() {\n expression = expression.slice(0, -1);\n updateDisplay(expression || '0');\n }\n\n \/\/ Append a number to the expression\n function appendNumber(number) {\n if (resetDisplay) {\n expression = number;\n resetDisplay = false;\n } else {\n expression += number;\n }\n updateDisplay(expression);\n }\n\n \/\/ Append an operator to the expression\n function appendOperator(operator) {\n if (resetDisplay) {\n resetDisplay = false;\n }\n if (expression === '' && operator !== '-') {\n return;\n }\n expression += ` ${operator} `;\n updateDisplay(expression);\n }\n\n \/\/ Append a decimal point\n function appendDecimal() {\n const parts = expression.split(\/[\\s]\/);\n const currentNumber = parts[parts.length - 1];\n\n if (!currentNumber.includes('.')) {\n expression += '.';\n updateDisplay(expression);\n }\n }\n\n \/\/ Evaluate the expression\n function calculate() {\n try {\n let result = eval(expression.replace(\/\u00f7\/g, '\/').replace(\/\u00d7\/g, '*').replace(\/%\/g, '\/100'));\n expression = result.toString();\n resetDisplay = true;\n updateDisplay(expression);\n } catch (error) {\n expression = 'Error';\n resetDisplay = true;\n updateDisplay(expression);\n }\n }\n\n \/\/ Update the display\n function updateDisplay(value) {\n displayElement.textContent = value;\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Smaller Compact Calculator 0 AC CE % \u00f7 7 8 9 \u00d7 4 5 6 \u2212 1 2 3 + 0 . =<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":3,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/virtualscienceteachers.com\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}