{"id":105,"date":"2025-03-22T06:03:55","date_gmt":"2025-03-22T06:03:55","guid":{"rendered":"https:\/\/kingstatue.com\/?p=105"},"modified":"2025-03-22T06:03:55","modified_gmt":"2025-03-22T06:03:55","slug":"project-arithmetic-calculator","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=105","title":{"rendered":"Project &#8211; Arithmetic Calculator"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">HTML file: mycalc.html<\/mark><\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- my_calc.html \nAuthor: VBhat\n-->\n\n&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>VBhat's Simple Calculator&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"calc_style.css\">\n&lt;\/head>\n&lt;body style=\"background-color:white;\">\n    &lt;div class=\"calculator\">\n        &lt;div class=\"hdg\">VBhat's Math Calculator!&lt;\/div>\n        &lt;br>\n        &lt;div class=\"display-container\">\n            &lt;div class=\"expression-display\" id=\"expression-display\">&lt;\/div>\n            &lt;div class=\"display\" id=\"display\">0&lt;\/div>\n        &lt;\/div>\n        &lt;br>\n        &lt;div class=\"buttons\">    \n     \n            &lt;button class=\"btn\" onclick=\"clearDisplay()\">CE&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"clearDisplay()\">C&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"reciprocal()\">1\/x&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendOperator('\u00f7')\">\u00f7&lt;\/button>\n            \n            &lt;button class=\"btn\" onclick=\"calculateSquare()\">x\u00b2&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"calculateCube()\">x\u00b3&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"calculateSquareRoot()\">\u221a&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"calculateCubeRoot()\">\u221b&lt;\/button>\n\n            &lt;button class=\"btn\" onclick=\"appendNumber('7')\">7&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('8')\">8&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('9')\">9&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendOperator('x')\">x&lt;\/button>\n\n            &lt;button class=\"btn\" onclick=\"appendNumber('4')\">4&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('5')\">5&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('6')\">6&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendOperator('-')\">-&lt;\/button>\n\n            &lt;button class=\"btn\" onclick=\"appendNumber('1')\">1&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('2')\">2&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('3')\">3&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendOperator('+')\">+&lt;\/button>\n\n            &lt;button class=\"btn\" onclick=\"clearDisplay()\">1\/x&lt;\/button>          \n            &lt;button class=\"btn\" onclick=\"appendNumber('0')\">0&lt;\/button>\n            &lt;button class=\"btn\" onclick=\"appendNumber('.')\">.&lt;\/button>\n            &lt;button class=\"equal\" onclick=\"calculate()\">=&lt;\/button>\n        \n     \n        &lt;\/div>\n    &lt;\/div>\n    &lt;script src=\"calc_script.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JavaScript file<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* calc_sript.js \n  Author: VBhat\n*\/\nlet display = document.getElementById('display');\nlet expressionDisplay = document.getElementById('expression-display');\n\nlet currentInput = '';\nlet operator = '';\nlet previousInput = '';\nlet expression = '';\n\/\/ Configurable maximum number of characters\nconst maxCharacters = 20;\n\/*\nIn JavaScript, the || operator returns the first \"truthy\" value it finds from left to right. If the first value is falsy, \nit moves on and returns the second one.\nIf currentInput has a value (like \"5\", \"12\", etc.), then use that.\n\nIf currentInput is empty or falsy (like \"\", null, or undefined), then fall back to '0'.\n*\/\nfunction updateDisplay() {\n    expressionDisplay.innerText = expression;\n    display.innerText = currentInput || '0';\n\n}\n\nfunction appendNumber(number) {\n    if (currentInput.length >= maxCharacters) return;\n    currentInput += number;\n    updateDisplay();\n}\n\nfunction appendOperator(op) {\n    if (currentInput === '') return;\n    if (previousInput !== '') {\n        calculate();\n    }\n    operator = op;\n    previousInput = currentInput;\n    currentInput = '';\n    expression += ` ${previousInput} ${operator}`;\n    updateDisplay();\n}\n\nfunction clearDisplay() {\n    currentInput = '';\n    previousInput = '';\n    operator = '';\n    expression = '';\n    updateDisplay();\n}\n\nfunction reciprocal() {\n    if (parseFloat(currentInput) !== 0) {\n        currentInput = (1 \/ parseFloat(currentInput)).toString();\n    } else {\n        currentInput = \"Error\";\n    }\n    updateDisplay();\n}\n\nfunction calculate() {\n    let result;\n    \/*\n    parseFloat() is a JavaScript built-in function \n    that converts a string into a floating-point number (i.e., a number with decimals).\n    It reads the string from left to right and converts as much as it can into a valid number.\n    If it can't convert the string at all, it returns NaN (Not a Number).\n    *\/\n    const prev = parseFloat(previousInput);\n    const current = parseFloat(currentInput);\n    if (isNaN(prev) || isNaN(current)) return;\n\n    switch (operator) {\n        case '+':\n            result = prev + current;\n            break;\n        case '-':\n            result = prev - current;\n            break;\n        case 'x':\n            result = prev * current;\n            break;\n        case '\u00f7':\n            if (current === 0) {\n                result = 'Error';\n            } else {\n                result = prev \/ current;\n            }\n            break;\n        default:\n            return;\n    }\n    expression += ` ${current} =`;\n    \/*\n    Converts the result (which is likely a number) into a string so that \n    we can manipulate its characters.\n    .slice(0, maxCharacters)\n\nslice(start, end) extracts a portion of the string from start (inclusive) to end (exclusive).\nHere, slice(0, maxCharacters) means:\nStart from index 0 (first character).\nExtract up to maxCharacters characters.\nIf maxCharacters is 10, \nit extracts the first 10 characters.\nThis ensures that currentInput doesn't exceed maxCharacters in length.\nIt is useful for limiting the number of digits displayed in a calculator \n\n    *\/\n    currentInput = result.toString().slice(0, maxCharacters);\n    operator = '';\n    previousInput = '';\n    updateDisplay();\n}\n\nfunction calculateSquare() {\n    if (currentInput === '') return;\n    expression = `(${currentInput})\u00b2 =`;\n    currentInput = Math.pow(parseFloat(currentInput), 2).toString().slice(0, maxCharacters);\n    updateDisplay();\n}\n\nfunction calculateCube() {\n    if (currentInput === '') return;\n    expression = `(${currentInput})\u00b3 =`;\n    currentInput = Math.pow(parseFloat(currentInput), 3).toString().slice(0, maxCharacters);\n    updateDisplay();\n}\n\nfunction calculateSquareRoot() {\n    if (currentInput === '') return;\n    expression = `\u221a(${currentInput}) =`;\n    currentInput = Math.sqrt(parseFloat(currentInput)).toString().slice(0, maxCharacters);\n    updateDisplay();\n}\n\nfunction calculateCubeRoot() {\n    if (currentInput === '') return;\n    expression = `\u221b(${currentInput}) =`;\n    currentInput = Math.cbrt(parseFloat(currentInput)).toString().slice(0, maxCharacters);\n    updateDisplay();\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS file<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Author: VBhat *\/\n\/* Beginning of CSS file *\/\n\n    \/* Basic body styling *\/\n    body {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: #222;\n        margin: 0;\n        font-family: Arial, sans-serif;\n        font-size: 20px;\n        \/* height: 100vh; *\/\n      }\n\n  \/* Calculator styling *\/\n\n.calculator {\n    background-color: #222; \n    border: 10px solid #2f2e2e; \n    border-radius: 10px;\n    padding: 5px;\n    margin: 20px;\n    \/* box-shadow: 0 0 10px rgba(93, 4, 4, 0.1); *\/\n    box-shadow: 0 0 10px rgba(237, 240, 238, 0.95);\n    \n}\n\n\/* Display container for expression and result *\/\n\/* \n1. display: flex;\nThis makes .display-container a flexbox container, allowing its child elements to be arranged flexibly.\n2. flex-direction: column;\nThis sets the flex container to arrange its child elements vertically (top to bottom), instead of the default horizontal layout.\n3. align-items: flex-end;\nThis aligns all child elements to the right (end of the flex container) along the cross-axis (horizontal axis in this case).\n4. background-color: #333;\nThis sets the background color to a dark gray (#333).\n5. color: white;\nThis changes the text color of the container and its children to white.\n6. padding: 10px;\nThis adds 10px of space inside the container on all sides, preventing content from touching the edges.\n7. border-radius: 5px;\nThis rounds the corners of the container with a 5px radius, giving it a smoother look.\n8. margin-bottom: 10px;\nThis adds 10px of space below the container, ensuring separation from other elements.\n*\/\n.display-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    background-color: #333;\n    color: white;\n    padding: 10px;\n    border-radius: 5px;\n    margin-bottom: 10px;\n}\n\n\/* Expression display *\/\n.expression-display {\n    \/* font-size: 1.2em; *\/\n    font-size: 1em;\n    min-height: 20px;\n    padding:5px;\n    color: #bbb;\n}\n\n\/* Main display *\/\n.display {\n    \/* font-size: 2em; *\/\n    font-size: 1.5em;\n    height: 50px;\n    color: white;\n}\n\n.hdg {\n    \/* color: rgb(254, 250, 5); *\/\n    color:orange;\n    font-size: 1.5em;\n    text-align: center;\n    padding: 8px;\n    margin-bottom: 8px;\n}\n\/* \n1. display: grid;\nThis makes the .buttons container a CSS Grid container.\nGrid allows arranging child elements in a structured, responsive layout.\n2. grid-template-columns: repeat(4, 1fr);\nThis defines the layout for the grid columns.\nrepeat(4, 1fr) means:\nThere will be 4 equal-width columns.\n1fr (fractional unit) ensures each column takes up an equal portion of the available space.\n3. gap: 10px;\nThis sets the spacing between grid items (both rows and columns) to 10 pixels.\n\nThis CSS rule creates a grid layout for .buttons where:\nIt has 4 equal columns.\nEach item inside .buttons is placed in one of these columns.\nA 10px gap is maintained between items.\n*\/\n.buttons {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 10px;\n}\n\/*\nfont-size: 1.5em; => Here em is a relative unit: \nIt is based on the font size of the parent element.\nCalculation:\nIf the parent element has a font size of 16px (default browser font size), \nthen: 1.5em=1.5\u00d716px=24px\nIf the parent element's font size is 20px, then:\n1.5em=1.5\u00d720px=30px\n*\/\n\n.btn {\n    padding: 20px;\n    \/* font-size: 2em; *\/\n    font-size: 1.5em;\n    border: none;\n    border-radius: 5px;\n    background-color: #2f2e2e; \n    color: #f0f0f0;\n    cursor: pointer;\n    transition: background-color 0.3s;\n}\n\n.equal {\n    padding: 20px;\n    font-size: 2em;\n    border: none;\n    border-radius: 5px;\n    background-color: #078409; \n    color: #f0f0f0;\n    cursor: pointer;\n    transition: background-color 0.3s;\n}\n\n.btn:hover {\n    background-color: white; \n    color: black;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML file: mycalc.html JavaScript file CSS file<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,21,24,28],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet","category-html","category-javascript-programming","category-projects"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=105"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}