{"id":16433292,"url":"https://github.com/kennyfrc/alpinejs-calculator","last_synced_at":"2025-10-11T09:42:07.856Z","repository":{"id":211253004,"uuid":"728600500","full_name":"kennyfrc/alpinejs-calculator","owner":"kennyfrc","description":"Working calculator example for alpine.js. Used for training purposes.","archived":false,"fork":false,"pushed_at":"2023-12-09T11:08:13.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-12T05:11:27.096Z","etag":null,"topics":["alpine-js","alpinejs","calculator","calculator-javascript"],"latest_commit_sha":null,"homepage":"https://jsfiddle.net/kennyfrc12/h9y3maoL/87/","language":"JavaScript","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/kennyfrc.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,"publiccode":null,"codemeta":null}},"created_at":"2023-12-07T09:40:06.000Z","updated_at":"2025-08-26T18:23:15.000Z","dependencies_parsed_at":"2023-12-09T11:37:40.788Z","dependency_job_id":null,"html_url":"https://github.com/kennyfrc/alpinejs-calculator","commit_stats":null,"previous_names":["kennyfrc/alpinejs-calculator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kennyfrc/alpinejs-calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennyfrc%2Falpinejs-calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennyfrc%2Falpinejs-calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennyfrc%2Falpinejs-calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennyfrc%2Falpinejs-calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kennyfrc","download_url":"https://codeload.github.com/kennyfrc/alpinejs-calculator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennyfrc%2Falpinejs-calculator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006750,"owners_count":26084182,"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-10-11T02:00:06.511Z","response_time":55,"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":["alpine-js","alpinejs","calculator","calculator-javascript"],"created_at":"2024-10-11T08:45:41.287Z","updated_at":"2025-10-11T09:42:07.798Z","avatar_url":"https://github.com/kennyfrc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine.js Calculator\n\nThis project is a simple calculator built using Alpine.js, HTML, and CSS.\n\n## Files\n\n- `index.html`: This is the main HTML file that contains the structure of the calculator.\n- `calculator.js`: This JavaScript file contains the logic for the calculator operations.\n- `styles.css`: This CSS file contains the styles for the calculator.\n\n## Usage\n\nTo use this calculator, you can serve the files using a simple HTTP server. For example, if you have Python installed, you can use the following command, using Python's built-in HTTP server:\n\n```bash\npython3 -m http.server 8000\n```\n\nThen, you can open the calculator in your browser by navigating to `http://localhost:8000/`.\n\nAlternatively, you can also use other one-liner HTTP servers through this link: [https://gist.github.com/willurd/5720255](https://gist.github.com/willurd/5720255).\n\n## JS Fiddle\n\nYou can also play around with the calculator using JS Fiddle: [https://jsfiddle.net/kennyfrc12/h9y3maoL/87/](https://jsfiddle.net/kennyfrc12/h9y3maoL/87/).\n\n\n## Understanding the HTML Structure\nThe calculator is composed of a display section and a set of keys. The display shows the current input, the operation selected, and the result. The keys include digits, operations, and function buttons.\n\n### Display Section\n- **Calculator Result (`calculator__result`)**: Displays the calculated result.\n- **Current Input (`calculator__input`)**: Shows the current input or operand.\n- **Calculator Status (`calculator__status`)**: Indicates the current operation.\n\n### Keys Section\n- **Function Buttons**: 'AC' for clearing the input, '±' for toggling the sign, and '%' for percentage.\n- **Operation Buttons**: Includes addition (+), subtraction (−), multiplication (×), and division (÷).\n- **Digit Buttons**: Buttons for digits 0-9 and the decimal point (.).\n- **Equal Button (=)**: To perform the calculation.\n\n## Alpine.js Setup\nAlpine.js works by adding directives to HTML elements. In our case, `x-data` initializes the calculator data and functions.\n\n### Initializing Alpine.js\n```html\n\u003cbody x-data=\"calculator()\"\u003e\n```\nThis line initializes our calculator component with the `calculator` function, which we will define in JavaScript.\n\n### Data and Methods\nOur calculator will have three main data properties: `result`, `currentInput`, and `operation`. Additionally, we will define methods for inputting digits, operations, and calculating the final result.\n\n## Implementing Calculator Logic\nHere's an overview of the JavaScript functions we'll implement:\n\n- **`calculator()`**: Initializes the data and methods.\n- **`inputDigit(digit)`**: Handles digit input.\n- **`inputOperation(operation)`**: Sets the current operation.\n- **`calculate()`**: Performs the calculation based on the current inputs and operation.\n- **`clearAll()`**: Clears all inputs and results.\n- **`toggleSign()`**: Toggles the sign of the current input.\n- **`inputDecimal()`**: Handles decimal point input.\n- **`calculatePercentage()`**: Calculates the percentage of the current input.\n\n### Skeleton Implementation\n```javascript\nfunction calculator() {\n    return {\n        result: '',\n        currentInput: '0',\n        operation: null,\n        previousKey: '',\n\n        inputDigit(digit) {\n            // Code to handle digit input\n        },\n        inputOperation(operation) {\n            // Code to set the current operation\n        },\n        calculate() {\n            // Code to perform the calculation\n        },\n        clearAll() {\n            // Code to clear all inputs and results\n        },\n        toggleSign() {\n            // Code to toggle the sign of the current input\n        },\n        inputDecimal() {\n            // Code to handle decimal point input\n        },\n        calculatePercentage() {\n            // Code to calculate the percentage of the current input\n        }\n    };\n}\n```\n\n## Interactive Elements with Alpine.js Directives\nAlpine.js allows us to bind these functions to our HTML elements using directives like `x-text` and `@click`.\n\n- **`x-text`**: This directive binds a data property to the text content of an element. For example, `x-text=\"result\"` will display the `result` property in the corresponding div.\n- **`@click`**: This directive adds a click event listener to an element. For instance, `@click=\"inputDigit('7')\"` will call the `inputDigit` function with '7' as an argument when the button is clicked.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennyfrc%2Falpinejs-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkennyfrc%2Falpinejs-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennyfrc%2Falpinejs-calculator/lists"}