Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kennyfrc/alpinejs-calculator
Working calculator example for alpine.js. Used for training purposes.
https://github.com/kennyfrc/alpinejs-calculator
alpine-js alpinejs calculator calculator-javascript
Last synced: 28 days ago
JSON representation
Working calculator example for alpine.js. Used for training purposes.
- Host: GitHub
- URL: https://github.com/kennyfrc/alpinejs-calculator
- Owner: kennyfrc
- Created: 2023-12-07T09:40:06.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2023-12-09T11:08:13.000Z (11 months ago)
- Last Synced: 2023-12-10T11:28:09.022Z (11 months ago)
- Topics: alpine-js, alpinejs, calculator, calculator-javascript
- Language: JavaScript
- Homepage: https://jsfiddle.net/kennyfrc12/h9y3maoL/87/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Alpine.js Calculator
This project is a simple calculator built using Alpine.js, HTML, and CSS.
## Files
- `index.html`: This is the main HTML file that contains the structure of the calculator.
- `calculator.js`: This JavaScript file contains the logic for the calculator operations.
- `styles.css`: This CSS file contains the styles for the calculator.
## Usage
To 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:
```bash
python3 -m http.server 8000
```
Then, you can open the calculator in your browser by navigating to `http://localhost:8000/`.
Alternatively, you can also use other one-liner HTTP servers through this link: [https://gist.github.com/willurd/5720255](https://gist.github.com/willurd/5720255).
## JS Fiddle
You can also play around with the calculator using JS Fiddle: [https://jsfiddle.net/kennyfrc12/h9y3maoL/87/](https://jsfiddle.net/kennyfrc12/h9y3maoL/87/).
## Understanding the HTML Structure
The 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.
### Display Section
- **Calculator Result (`calculator__result`)**: Displays the calculated result.
- **Current Input (`calculator__input`)**: Shows the current input or operand.
- **Calculator Status (`calculator__status`)**: Indicates the current operation.
### Keys Section
- **Function Buttons**: 'AC' for clearing the input, '±' for toggling the sign, and '%' for percentage.
- **Operation Buttons**: Includes addition (+), subtraction (−), multiplication (×), and division (÷).
- **Digit Buttons**: Buttons for digits 0-9 and the decimal point (.).
- **Equal Button (=)**: To perform the calculation.
## Alpine.js Setup
Alpine.js works by adding directives to HTML elements. In our case, `x-data` initializes the calculator data and functions.
### Initializing Alpine.js
```html
```
This line initializes our calculator component with the `calculator` function, which we will define in JavaScript.
### Data and Methods
Our 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.
## Implementing Calculator Logic
Here's an overview of the JavaScript functions we'll implement:
- **`calculator()`**: Initializes the data and methods.
- **`inputDigit(digit)`**: Handles digit input.
- **`inputOperation(operation)`**: Sets the current operation.
- **`calculate()`**: Performs the calculation based on the current inputs and operation.
- **`clearAll()`**: Clears all inputs and results.
- **`toggleSign()`**: Toggles the sign of the current input.
- **`inputDecimal()`**: Handles decimal point input.
- **`calculatePercentage()`**: Calculates the percentage of the current input.
### Skeleton Implementation
```javascript
function calculator() {
return {
result: '',
currentInput: '0',
operation: null,
previousKey: '',
inputDigit(digit) {
// Code to handle digit input
},
inputOperation(operation) {
// Code to set the current operation
},
calculate() {
// Code to perform the calculation
},
clearAll() {
// Code to clear all inputs and results
},
toggleSign() {
// Code to toggle the sign of the current input
},
inputDecimal() {
// Code to handle decimal point input
},
calculatePercentage() {
// Code to calculate the percentage of the current input
}
};
}
```
## Interactive Elements with Alpine.js Directives
Alpine.js allows us to bind these functions to our HTML elements using directives like `x-text` and `@click`.
- **`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.
- **`@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.