https://github.com/arshdeepsahni/svelte-calculator

Minimal (Svelte + Tailwind) Calculator Package
https://github.com/arshdeepsahni/svelte-calculator

calculator svelte sveltejs tailwindcss

Last synced: 25 days ago
JSON representation

Minimal (Svelte + Tailwind) Calculator Package

• Host: GitHub
• URL: https://github.com/arshdeepsahni/svelte-calculator
• Owner: ArshdeepSahni
• Created: 2021-07-17T19:56:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-19T08:00:14.000Z (over 3 years ago)
• Last Synced: 2024-10-13T00:03:55.004Z (25 days ago)
• Topics: calculator, svelte, sveltejs, tailwindcss
• Language: Svelte
• Homepage: https://www.npmjs.com/package/svelte-calculator
• Size: 707 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  






```

npm i svelte-calculator

```










  






  



  










  











  
Props








|Prop|About|Default Value|Format|

|---|---|---|---|

|Sound|Key Sounds|true|Boolean|

|animation|Boolean Value to Enable and Disable Default Animation|true|Boolean|

|size|Size of Calculator|"100"|Any Size out of [ "50" , "75" , "90" , "95" , "100" , "105" , "110" , "125" , "150" ]|

|normalKeyColor|Background Color of Normal Numeric Keys of Calculator|rgba( 243 , 244 , 246 )|ColorName or rgb or rgba or Hex|

|operatorKeyColor|Background Color of Operator Keys of Calculator|rgba( 229 , 231 , 235 )|ColorName or rgb or rgba or Hex|

|Class|Classes to add to the Calculator Component|NA|ClassName (String)|

|calculatorBackground|Background Color of Calculator|#ffffff|ColorName or rgb or rgba or Hex|

|inputBackground|Background Color of Screen of Calculator|rgba( 229 , 231 , 235 )|ColorName or rgb or rgba or Hex|










  











  
Steps To Use thus Plugin:

  

  






 1. Install
 


```bash

npm i svelte-calculator

```








 2. Import
 


```javascript

// in .js file where you want to use this component

import Calculator from "svelte-calculator";

```



  




 4. Usage
 


```javascript

// in the same.js file where you want to use this component outside  tag

```



  










  













```diff

+ Developed with ❤️ by Arshdeep Singh

```