svelte-calculator

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

https://user-images.githubusercontent.com/56549294/126066513-5445825f-a416-4c73-8ac3-0198e83f4fab.mov

---

Steps To Use thus Plugin:

• 1. Install

  
  

  npm i svelte-calculator




• 2. Import

  
  

  // in .js file where you want to use this component
  import Calculator from "svelte-calculator";




• 4. Usage

  
  

  // in the same.js file where you want to use this component outside <script></script> tag
  <Calculator
    size={"200"}
    normalKeyColor="white"
    operatorKeyColor="orange"
    Class={"calculatorClass"}
    animation={true}
    calculatorBackground={"rgba(0,0,0,0.1)"}
    inputBackground={"#DDE5B6"}
  />

---

+ Developed with ❤️ by Arshdeep Singh