{"id":20989128,"url":"https://github.com/nix7amcm/fcc-javascript-calculator","last_synced_at":"2026-05-05T04:03:10.424Z","repository":{"id":222159221,"uuid":"756428609","full_name":"Nix7amcm/FCC-JavaScript-Calculator","owner":"Nix7amcm","description":"This is my JavaScript Calculator project for FreeCodeCamp's Front End Development Libraries certification. It was built using HTML, Bootstrap and Sass for the UI and Vanilla JS + jQuery to implement the calculator logic.","archived":false,"fork":false,"pushed_at":"2024-02-12T16:52:03.000Z","size":202,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T06:53:10.186Z","etag":null,"topics":["bootstrap","freecodecamp","freecodecamp-project","html","javascript","jquery","sass","vanilla-js"],"latest_commit_sha":null,"homepage":"https://nix7amcm.github.io/FCC-JavaScript-Calculator/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nix7amcm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-12T16:40:18.000Z","updated_at":"2024-02-12T16:43:15.000Z","dependencies_parsed_at":"2024-02-12T18:08:04.328Z","dependency_job_id":null,"html_url":"https://github.com/Nix7amcm/FCC-JavaScript-Calculator","commit_stats":null,"previous_names":["nix7amcm/fcc-javascript-calculator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Nix7amcm/FCC-JavaScript-Calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-JavaScript-Calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-JavaScript-Calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-JavaScript-Calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-JavaScript-Calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nix7amcm","download_url":"https://codeload.github.com/Nix7amcm/FCC-JavaScript-Calculator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nix7amcm%2FFCC-JavaScript-Calculator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271752109,"owners_count":24814745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","freecodecamp","freecodecamp-project","html","javascript","jquery","sass","vanilla-js"],"created_at":"2024-11-19T06:23:53.600Z","updated_at":"2026-05-05T04:03:05.393Z","avatar_url":"https://github.com/Nix7amcm.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Calculator\n\nThis is a project for the freeCodeCamp Front End Libraries Certification. The project is to build a JavaScript calculator.\n\n* * *\n\nTable of Contents:\n- [Images](#images)\n- [Project Description](#project-description)\n- [Additional Notes](#additional-notes)\n- [Step-by-Step Guide to Implement the Calculator Logic](#step-by-step-guide-to-implement-the-calculator-logic)\n- [Full `script.js` Code With Detailed Comments](#full-scriptjs-code-with-detailed-comments)\n\n\n* * *\n\n## Images:\n\n#### \u003cu\u003eDesktop\u003c/u\u003e\n\n![Desktop screenshot of Javascript Calculator web page](assets/solution-images/desktop.png)\n\n#### \u003cu\u003eMobile\u003c/u\u003e\n\n![Mobile screenshot of Javascript Calculator web page](assets/solution-images/mobile.png)\n\n* * *\n\n## Project Description:\n\n**Objective:**  Build an app that is functionally similar to this: [https://javascript-calculator.freecodecamp.rocks/](https://javascript-calculator.freecodecamp.rocks/).\n\nFulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.\n\nYou can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!\n\n* * *\n\n### User Stories\n\n- [x] **User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `id=\"equals\"`.\n\n- [x] **User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id=\"zero\"`, `id=\"one\"`, `id=\"two\"`, `id=\"three\"`, `id=\"four\"`, `id=\"five\"`, `id=\"six\"`, `id=\"seven\"`, `id=\"eight\"`, and `id=\"nine\"`.\n\n- [x] **User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id=\"add\"`, `id=\"subtract\"`, `id=\"multiply\"`, `id=\"divide\"`.\n\n- [x] **User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id=\"decimal\"`.\n\n- [x] **User Story #5:** My calculator should contain a clickable element with an `id=\"clear\"`.\n\n- [x] **User Story #6:** My calculator should contain an element to display values with a corresponding `id=\"display\"`.\n\n- [x] **User Story #7:** At any time, pressing the `clear` button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`.\n\n- [x] **User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`.\n\n- [x] **User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`.\n\n- [x] **User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros.\n\n- [x] **User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted.\n\n- [x] **User Story #12:** I should be able to perform any operation (`+`, `-`, `*`, `/`) on numbers containing decimal points.\n\n- [x] **User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (`-`) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. `5 * 7`); if `5 * - 5 =` is entered, the result should be `-25` (i.e. `5 * (-5)`).\n\n- [x] **User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation.\n\n- [x] **User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places).\n\n**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: immediate execution logic and formula logic. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.\n\n**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =`\n\n* **Immediate Execution Logic:** `11.5`\n* **Formula/Expression Logic:** `32.5`\n\n* * *\n\n## Additional Notes:\n\nYou can build your project by [using this CodePen template](https://codepen.io/pen?template=MJjpwO) and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`\n\nOnce you're done, submit the URL to your working project with all its tests passing.\n\n**Note:** React 18 has known incompatibilities with the tests for this project (see [issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))\n\n\n\n* * *\n\n* * *\n\n## Step-by-Step Guide to Implement the Calculator Logic\n\nI entered my entire `script.js` code (with more detailed comments - provided below this) into ChatGPT. I asked it to 'reverse-engineer' it to create a detailed yet easy to follow step-by-step guide for creating the calculator logic. I did this so that I can return to this project at any time for help with future projects, or to remind myself of what I learned here. \n\n\n\n\u003e ChatGPT has been an envaluable tool in my learning to code, mainly due to the ability to ask any and as many questions required to understand whatever I want or need, and therefore to learn in the way that I learn. Following other people's tutorials, guides, courses, videos, etc, are great tools for learning, but in most cases are only suitable if you think and learn exactly like the person creating them. For me, I often find something missing, or have simple questions that can't be unanswered, and am wasting valuable learning hours searching the internet to find answers just to help something 'click'.  ChatGPT is also excellent for help with troubleshooting, and for providing guides and code snippets. It is not 100% reliable, which in itself is a bonus, as it has been through troubleshooting and asking more questions that I am learning even more. \n\n\n\nHere is the guide to recreate my calculator logic:\n\n\n\n1. **Wait for Document Ready**:\n   Start by creating a jQuery `$(document).ready()` function. This function will run once the HTML document is loaded and the DOM is ready.\n   \n   ```javascript\n   $(document).ready(function() {\n     // All calculator code will go inside this function.\n   });\n   ```\n\n2. **Initialize Variables**:\n   Inside the `$(document).ready()` function, declare and initialize the following variables:\n   \n   - `currentOperand`: This will hold the current operand as a string, starting with `\"0\"`.\n   - `previousOperand`: This will hold the previous operand as a string, starting empty.\n   - `currentOperation`: This will hold the current operation as a string, initialized to `null`.\n   - `shouldResetCurrentOperand`: A boolean flag to decide whether to reset the current operand, starting as `false`.\n   - `maxDigits`: A constant set to the maximum number of digits allowed, for example, `15`.\n   \n   ```javascript\n   let currentOperand = '0';\n   let previousOperand = '';\n   let currentOperation = null;\n   let shouldResetCurrentOperand = false;\n   const maxDigits = 15;\n   ```\n\n3. **Create Update Display Function**:\n   Define a function `updateDisplay()` that will refresh the calculator's display. In this function:\n   \n   - Use jQuery to set the HTML content of the `.current-operand` and `.previous-operand` elements with the appropriate operand values.\n   - Append the current operation to the previous operand display if it exists.\n   \n   ```javascript\n   function updateDisplay() {\n     $('.current-operand').html(currentOperand || '0');\n     let previousDisplay = previousOperand;\n     if (currentOperation != null) {\n       previousDisplay += ' ' + currentOperation;\n     }\n     $('.previous-operand').html(previousDisplay || ' ');\n   }\n   ```\n\n4. **Create Append Number Function**:\n   Define a function `appendNumber(number)` that will append a number to the current operand. This function should:\n   \n   - Check if the current operand should be reset or is \"0\" to replace the current operand with the new number.\n   - If not, append the number to the current operand if it doesn't exceed the maximum digits allowed.\n   - Update the display after appending the number.\n   \n   ```javascript\n   function appendNumber(number) {\n     if (currentOperand === '0' || shouldResetCurrentOperand) {\n       currentOperand = number;\n     } else if (currentOperand.length \u003c maxDigits) {\n       currentOperand += number;\n     } else {\n       $('.current-operand').html('Max digits');\n       setTimeout(updateDisplay, 1000);\n     }\n     shouldResetCurrentOperand = false;\n     updateDisplay();\n   }\n   ```\n\n5. **Create Append Decimal Function**:\n   Define a function `appendDecimal()` that will append a decimal point to the current operand. Conditions similar to the `appendNumber` function should be used.\n   \n   ```javascript\n   function appendDecimal() {\n     if (shouldResetCurrentOperand || currentOperand === '0' || currentOperand === '') {\n       currentOperand = '0.';\n       shouldResetCurrentOperand = false;\n       updateDisplay();\n     } else if (!currentOperand.includes('.') \u0026\u0026 currentOperand.length \u003c maxDigits) {\n       currentOperand += '.';\n       updateDisplay();\n     }\n   }\n   ```\n\n6. **Create Choose Operation Function**:\n   Define a function `chooseOperation(operator)` that will set the current operation and move the current operand to the previous operand. This function should:\n   \n   - Perform the computation if there's an existing operation and the reset flag is not set.\n   - Update the display after setting the operation.\n   \n   ```javascript\n   function chooseOperation(operator) {\n     if (currentOperand === '-' \u0026\u0026 currentOperation !== null) {\n       currentOperand = '';\n     }\n   \n     if (currentOperand !== '' || currentOperation === null) {\n       if (currentOperation !== null \u0026\u0026 !shouldResetCurrentOperand) {\n         compute();\n       }\n       previousOperand = currentOperand;\n       currentOperation = operator;\n       currentOperand = '';\n       shouldResetCurrentOperand = true;\n     } else if (currentOperation !== null \u0026\u0026 currentOperand === '' \u0026\u0026 operator !== '-') {\n       currentOperation = operator;\n     } else if (operator === '-') {\n       currentOperand = '-';\n       shouldResetCurrentOperand = false;\n     }\n   \n     updateDisplay();\n   }\n   ```\n\n7. **Create Compute Function**:\n   Define a function `compute()` to perform the arithmetic operations. This function should:\n   \n   - Parse the `previousOperand` and `currentOperand` as floating-point numbers.\n   - Use a `switch` statement to perform the operation based on `currentOperation`.\n   - Update the operands and operation after the calculation.\n   - Handle division by zero.\n   - Truncate the result if necessary and update the display.\n   \n   ```javascript\n   function compute() {\n     let computation;\n     const prev = parseFloat(previousOperand);\n     const current = parseFloat(currentOperand);\n     if (isNaN(prev) || isNaN(current)) return;\n     switch (currentOperation) {\n       // ... [cases for '+', '-', 'x', '/'] ...\n     }\n     previousOperand += ' ' + currentOperation + ' ' + currentOperand;\n     const computationString = computation.toString();\n     if (computationString.length \u003e 15) {\n       currentOperand = computationString.substring(0, 14) + '...';\n     } else {\n       currentOperand = computationString;\n     }\n     currentOperation = null;\n     shouldResetCurrentOperand = true;\n     updateDisplay();\n   }\n   ```\n\n8. **Create Clear Function**:\n   Define a function `clear()` that will reset all operands and the operation, and update the display.\n   \n   ```javascript\n   function clear() {\n     currentOperand = '0';\n     previousOperand = '';\n     currentOperation = null;\n     shouldResetCurrentOperand = false;\n     updateDisplay();\n   }\n   ```\n\n9. **Add Event Listeners**:\n   Add jQuery event listeners to bind click events to number buttons, operator buttons, the equals button, the clear button, and the decimal button.\n   \n   ```javascript\n   $(\".number\").on('click', function() {\n     const numberMap = { /* ... */ };\n     const number = numberMap[this.id];\n     appendNumber(number);\n   });\n   \n   $(\".operator\").on('click', function() {\n     const operatorMap = { /* ... */ };\n     const operator = operatorMap[this.id];\n     chooseOperation(operator);\n   });\n   \n   $(\"#equals\").on('click', function() {\n     if (currentOperation !== null) {\n       compute();\n     }\n   });\n   \n   $(\"#clear\").on('click', function() {\n     clear();\n   });\n   \n   $(\"#decimal\").on('click', function() {\n     appendDecimal();\n   });\n   ```\n\n10. **Initialize Display**:\n    Finally, call `updateDisplay()` to initialize the display at the end of your `$(document).ready()` function.\n    \n    ```javascript\n    updateDisplay();\n    ```\n    \n    \n\n***\n\n## Full `script.js` Code With Detailed Comments\n\nI used Github Copilot to help create this logic. Like ChatGPT, I have found it an envaluable tool for learning to code, and coding in general. It can explain, troubleshoot or provide code. Its autocomplete capabilities have greatly increased the speed which I can create and learn from projects.\n\nWhen I finished, I highlighted my entire code and asked Copilot to add detailed comments, which will be so helpful for returning to this project or anyone else viewing the code.\n\n```js\n//**** Create a jQuery function to run when the document loads and the DOM is ready:\n$( document ).ready( function () {\n  let currentOperand = '0'; //--- Current operand value\n  let previousOperand = ''; //--- Previous operand value\n  let currentOperation = null; //--- Current operation\n  let shouldResetCurrentOperand = false; //--- Flag to reset current operand\n  const maxDigits = 15; //--- Max digits allowed in the current operand\n\n\n  //_____ Update the display with curr \u0026 prev operands:\n  function updateDisplay () {\n    //\u003e\u003e\u003e Update the current operand display with the currentOperand value or '0' if it's empty:\n    $( '.current-operand' ).html( currentOperand || '0' );\n    //\u003e\u003e\u003e Set the previousDisplay variable to the value of previousOperand:\n    let previousDisplay = previousOperand;\n    //\u003e\u003e\u003e If there is a current operation, append it to the previousDisplay:\n    if ( currentOperation != null ) {\n      previousDisplay += ' ' + currentOperation;\n    }\n    //\u003e\u003e\u003e Update the previous operand display with the previousDisplay value or ' ' if it's empty:\n    $( '.previous-operand' ).html( previousDisplay || ' ' );\n  }\n\n\n  // _____ Append a number to the current operand:\n  function appendNumber ( number ) {\n    //\u003e\u003e\u003e If the current operand is '0' or shouldResetCurrentOperand flag is true, set the current operand to the number:\n    if ( currentOperand === '0' || shouldResetCurrentOperand ) {\n      currentOperand = number;\n      //\u003e\u003e\u003e If the length of the current operand is less than maxDigits, append the number to the current operand:\n    } else if ( currentOperand.length \u003c maxDigits ) {\n      currentOperand += number;\n    } else {\n      //\u003e\u003e\u003e If the number exceeds maxDigits, display a message:\n      $( '.current-operand' ).html( 'Max digits' ); //--- Display 'Max digits' in the current operand display\n      setTimeout( updateDisplay, 1000 ); //--- Show the message for 1 second\n      return; //--- Exit the function to prevent immediate updateDisplay call\n    }\n\n    //\u003e\u003e\u003e Reset the shouldResetCurrentOperand flag to false:\n    shouldResetCurrentOperand = false;\n    //\u003e\u003e\u003e Update the display with the new current operand value:\n    updateDisplay();\n  }\n\n\n  //_____ Append a decimal point to the current operand:\n  function appendDecimal () {\n    //\u003e\u003e\u003e If the shouldResetCurrentOperand flag is true or the current operand is '0' or empty, set the current operand to '0.':\n    if ( shouldResetCurrentOperand || currentOperand === '0' || currentOperand === '' ) {\n      currentOperand = '0.'; //--- Set the current operand to '0.'\n      shouldResetCurrentOperand = false; //--- Reset the shouldResetCurrentOperand flag to false\n      updateDisplay(); //--- Update the display with the new current operand value\n      //\u003e\u003e\u003e If the current operand does not already include a decimal point and its length is less than maxDigits, append a decimal point to the current operand:\n    } else if ( !currentOperand.includes( '.' ) \u0026\u0026 currentOperand.length \u003c maxDigits ) {\n      currentOperand += '.'; //--- Append a decimal point to the current operand\n      updateDisplay(); //--- Update the display with the new current operand value\n    }\n  }\n\n\n  //_____ Choose an operation:\n  function chooseOperation ( operator ) {\n    //\u003e\u003e\u003e If the last character of currentOperand is '-' and currentOperation is not null, clear currentOperand:\n    if ( currentOperand === '-' \u0026\u0026 currentOperation !== null ) {\n      currentOperand = '';\n    }\n\n    //\u003e\u003e\u003e If currentOperand is not empty or currentOperation is null, perform computation:\n    if ( currentOperand !== '' || currentOperation === null ) {\n      //\u003e\u003e\u003e If currentOperation is not null and shouldResetCurrentOperand is false, perform the computation:\n      if ( currentOperation !== null \u0026\u0026 !shouldResetCurrentOperand ) {\n        compute();\n      }\n      previousOperand = currentOperand; //--- Move the current operand to previous to prepare for a new value\n      currentOperation = operator; //--- Set the new operator\n      currentOperand = ''; //--- Clear the current operand for a new entry\n      shouldResetCurrentOperand = true; //--- The next input starts a new operand\n    } else if ( currentOperation !== null \u0026\u0026 currentOperand === '' \u0026\u0026 operator !== '-' ) {\n      //\u003e\u003e\u003e If the current operand is empty and the operator is not '-', update the current operation:\n      currentOperation = operator;\n    } else if ( operator === '-' ) {\n      //\u003e\u003e\u003e If the operator is '-', it means we are entering a negative number:\n      currentOperand = '-';\n      shouldResetCurrentOperand = false;\n    }\n\n    updateDisplay();\n  }\n\n\n  //_____ Perform the computation:\n  function compute () {\n    let computation; //--- Variable to store the computation result\n    const prev = parseFloat( previousOperand ); //--- Convert previousOperand to a floating-point number\n    const current = parseFloat( currentOperand ); //--- Convert currentOperand to a floating-point number\n    if ( isNaN( prev ) || isNaN( current ) ) return; //--- If either prev or current is NaN (Not a Number), return\n\n    //\u003e\u003e\u003e Perform the computation based on the current operation:\n    switch ( currentOperation ) {\n      case '+':\n        computation = prev + current; //--- Perform addition\n        break;\n      case '-':\n        computation = prev - current; //--- Perform subtraction\n        break;\n      case 'x':\n        computation = prev * current; //--- Perform multiplication\n        break;\n      case '/':\n        if ( current === 0 ) {\n          alert( \"Cannot divide by zero\" ); //--- Display an alert if attempting to divide by zero\n          return;\n        }\n        computation = prev / current; //--- Perform division\n        break; //--- Exit the switch statement\n      default:\n        return; //--- If currentOperation is not one of the above cases, return without performing any computation\n    }\n\n    //\u003e\u003e\u003e Set the previousOperand to the computation result and append the current operation and current operand to it:\n    previousOperand += ' ' + currentOperation + ' ' + currentOperand;\n    //\u003e\u003e\u003e Convert the computation result to a string:\n    const computationString = computation.toString();\n\n    //\u003e\u003e\u003e Check if computationString is longer than 16 characters before adding '...':\n    if ( computationString.length \u003e 15 ) {\n      currentOperand = computationString.substring( 0, 14 ) + '...'; //--- Truncate the computation result and add '...' if it exceeds 16 characters\n    } else {\n      currentOperand = computationString; //--- Set the currentOperand to the computation result\n    }\n\n    //\u003e\u003e\u003e Reset the currentOperation:\n    currentOperation = null;\n    //\u003e\u003e\u003e Set the shouldResetCurrentOperand flag to true:\n    shouldResetCurrentOperand = true;\n    //\u003e\u003e\u003e Update the display with the new values:\n    updateDisplay();\n  }\n\n\n  //_____ Clear the calculator:\n  function clear () {\n    currentOperand = '0'; //--- Reset the currentOperand to '0'\n    previousOperand = ''; //--- Reset the previousOperand\n    currentOperation = null; //--- Reset the currentOperation\n    shouldResetCurrentOperand = false; //--- Reset the shouldResetCurrentOperand flag to false\n    updateDisplay(); //--- Update the display with the new values\n  }\n\n\n  //_____ Event listener for number buttons:\n  $( \".number\" ).on( 'click', function () {\n    //\u003e\u003e\u003e Define a numberMap object that maps button ids to their corresponding numbers:\n    const numberMap = {\n      zero: '0',\n      one: '1',\n      two: '2',\n      three: '3',\n      four: '4',\n      five: '5',\n      six: '6',\n      seven: '7',\n      eight: '8',\n      nine: '9'\n    };\n\n    //\u003e\u003e\u003e Get the corresponding number from the numberMap based on the clicked button's id:\n    const number = numberMap[ this.id ];\n    //\u003e\u003e\u003e Append the number to the current operand:\n    appendNumber( number );\n  } );\n\n\n  //_____ Event listener for operator buttons:\n  $( \".operator\" ).on( 'click', function () {\n    //\u003e\u003e\u003e Define an operatorMap that maps button ids to their corresponding symbols:\n    const operatorMap = {\n      add: '+',\n      subtract: '-',\n      multiply: 'x',\n      divide: '/'\n    };\n\n    //\u003e\u003e\u003e Get the corresponding operator from the operatorMap based on the clicked button's id:\n    const operator = operatorMap[ this.id ];\n    //\u003e\u003e\u003e Choose the operation based on the clicked operator:\n    chooseOperation( operator );\n  } );\n\n\n  //_____ Event listener for equals button:\n  $( \"#equals\" ).on( 'click', function () {\n    if ( currentOperation !== null ) {\n      compute(); //--- Perform the computation if there is a current operation\n    }\n  } );\n\n\n  //_____ Event listener for clear button:\n  $( \"#clear\" ).on( 'click', function () {\n    clear(); //--- Clear the calculator\n  } );\n\n\n  //_____ Event listener for decimal button:\n  $( \"#decimal\" ).on( 'click', function () {\n    appendDecimal(); //--- Append a decimal point to the current operand\n  } );\n\n\n  //_____ Initialize the display:\n  updateDisplay();\n} );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnix7amcm%2Ffcc-javascript-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnix7amcm%2Ffcc-javascript-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnix7amcm%2Ffcc-javascript-calculator/lists"}