A calculator app made using HTML, CSS, and Javascript. This is the solution to the Odin Project's calculator task
The design used for this calculator was a community made design from Figma.
I started by creating my HTML elements and assigning classes. Next, I moved onto the CSS, where I imported my fonts, and began with things like removing default properties, and using flexbox to center the calculator. I spent some time adding background colors, font colors, font properties, hover effects, and small details such as changing the cursor to pointer when hovering over a button. Then, I began working on the Js. I started my ensuring the dom was loaded in, to ensure event listeners would work. I declared the nesscary variables for buttons and things needed. I created my changeDisplayMode() function to switch the theme from light to dark mode. I spent time utilizing things like adding and removing class lists, to change hover effects, font and background colors. In addition, I learned how to set a viewing theme based on the user's preference. Next, I worked on creating a system for displaying button inputs. I created a function called updateCalDisplay (). I used things like text content, which allowed me to display the content of the html element when a button is clicked. This allowed me to do things like click a button and have it's value show up on the display. I also, created a limit for the amount of digits allowed on the display. I used an if statement to define the logic of what to do if the digits are 13, and if their less then 13. Now, I had some basic features of my calculator working. I moved onto some smaller functions such as deleting digits, and clearing the calulator. I once again used an if statement to define the logic of what to do if there is no digit in the display, and if there is a digit. For the clearCal() function, I reset all the values of the calculator to the orignal, before anything was changed. Now, once this was done, I created my system to perform calculations. I created a function to handle displaying pi and the exponent, as well as the value of the first number. Then in my calculate() function, I used a switch instance to define the logic of how to perform every operation. I used built in Javascript functions such as parseFloat() to convert a strings into numbers, and toFixed() to define how many decimals to show. I added some final touches such as audio that plays when you click or type a button, as well as keyboard input, to allow ease of use. Finally, I spent some time testing everything, tested the website on multiple browsers and used the bulit in device emulation feature to view how the calculator would look on different displays.