calculator app with custom themes using a scss mixin

Community feedback

• 

  Shuaib•640

  @JustShuaibPosted over 2 years ago

  Hi there, I noticed I can't switch from theme three to theme two in your application. You should try to work on it. Also, if I divide a number by zero, the result is infinity. If I want to perform another operation after that, it adds infinity to whatever I type in. Same thing if I divide zero by zero. Also,If I have a result greater than 15 characters, it enlarges the screen. Was that intentional or a mistake?

  Going through your CSS too,you should make it one selector per line. For example, you have this.

  body[data-theme=theme-1] .calculator main #button-delete, body[data-theme=theme-1] .calculator main #button-reset, body[data-theme=theme-1] .calculator main #button-calculate {
  

  Add line break after each comma.

  You had quite complicated selectors too, for example

  body[data-theme=theme-2] .calculator header .theme-switch-container .theme-switch-labels .theme-switch-label {
  

  Chances are having complicated selectors like this is bad practice, try to keep it flat. This is a very nice solution regardless.

  Happy coding! 😊✌️

  0

  ---

  

  LuckyChimp•160

  @LuckyChimpPosted over 2 years ago

  Hey @JustShuaib You are right. You can't switch directly from the 3rd theme to the 2nd theme. But that's intentional, because nowhere did it say it had to be that way. You have to run the toggle between themes 1, 2 and 3 once completely, then it jumps back to theme 1. I think it's a matter of taste, because I kind of like exactly this animation.

  The unusual results appear, because a division of 0 by 0, as well as any other number divided by 0 is mathematically impossible. You can read about it here: https://en.wikipedia.org/wiki/Division_by_zero

  Thanks also for your hint regarding the CSS selectors. I know that the style.css file is incredibly hard to read and confusing. This is exactly why I almost exclusively use the CSS preprocessor SASS/SCSS in all of my projects. This preprocessor generated this file. The css style rules I wrote are in the files "style.scss" and "_themes.scss". With SCSS you can write clean, simple and less CSS rules. Have a look here: https://sass-lang.com/

  I fixed the bug where the result window expanded when more than 15 characters were entered by adding a width to the parent container and adding a max-width of 100% to the output field. Thank you very much for bringing it to my attention.

  Thanks anyway also for your others well meant advices. I appreciate it!

  0