https://github.com/ali-sdg90/calculator

Calculator for CS Internship
https://github.com/ali-sdg90/calculator

calculator css html javascript scss

Last synced: 10 months ago
JSON representation

Calculator for CS Internship

• Host: GitHub
• URL: https://github.com/ali-sdg90/calculator
• Owner: Ali-Sdg90
• Created: 2022-11-08T11:06:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-25T08:53:19.000Z (about 3 years ago)
• Last Synced: 2025-03-25T22:21:16.640Z (over 1 year ago)
• Topics: calculator, css, html, javascript, scss
• Language: JavaScript
• Homepage: https://ali-sdg90.github.io/Calculator/
• Size: 148 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Calculator



    This is a project for the CS_Intership course, where we will implement a

    calculator with various functionalities. The goal of this project is to

    create a calculator that looks and behaves similarly to the Windows 10

    calculator while also being responsive and themeable.



Steps

Step 1: Implement a Calculator Layout



    In this step, we will implement a calculator layout that resembles the

    Windows 10 calculator in maximum size (Standard mode). The calculator will

    be unresponsive but resizable, which means that it can tolerate resizing

    from desktop view to tablet view.





    





    View on GitHub

    |

    View on JSFiddle





Step 2: Implement a Responsive Calculator



    In this step, we will make the calculator responsive just like the Windows

    10 calculator. This means that the calculator will be able to adjust its

    layout based on the screen size of the device.





    





    View on GitHub

    |

    View on JSFiddle





Step 3: Make the Calculator Functional



    In this step, we will add the ability to theme the calculator. We will add a

    green and blue theme, as well as a dark mode theme. Additionally, we will

    enhance the standard calculator by adding calculation functionalities using

    JavaScript.



A: Themeable Calculator



    In this substep, we will make the calculator themeable by adding a green and

    blue theme and a dark mode theme.





    





    View on GitHub

    |

    View on JSFiddle



B: Enhanced Calculator



    In this substep, we will enhance the standard calculator by adding

    calculation functionalities using JavaScript.





    
History + Calculable Calculator :

    


    



    
Memory Functioning :

    


    



    
Having LocalStorage :

    


    






    View on GitHub

    |

    View on JSFiddle





Step 4: Refactor the Style and Themeable with SCSS/SASS



    In this step, we will refactor the style and themeable of the calculator

    from the previous step using SCSS/SASS.





    





    View on GitHub



Conclusion



    In conclusion, this project is an excellent opportunity to develop practical

    skills in web development using HTML, CSS, and JavaScript, as well as

    SCSS/SASS. By following the four steps outlined in this README, we will

    create a functional calculator that resembles the Windows 10 calculator in

    appearance and functionality. Through this project, we will learn how to

    create a responsive and themeable calculator and enhance its functionality

    using JavaScript. Overall, this project will help us gain valuable

    experience in web development and provide a foundation for more advanced web

    development projects.