MarceloKade / 3D-Calculator

This is a 3D calculator project developed using HTML, CSS, and JavaScript. The calculator features basic functions such as addition, subtraction, multiplication, and division, as well as percentage and fractional numbers. There is also a sound that is activated after double-clicking on the same key, and is disabled in the same way

3D Calculator Project

calculator.mp4

Menu

• 3D Calculator Project
  • Presentation
  • Objective
  • Deploy
  • Functionalities
  • Technologies
  • What I Learned
    • CSS
    • JS
  • Status

Presentation

This is a 3D calculator project, developed using HTML, CSS, and JavaScript. The calculator has basic functions of addition, subtraction, multiplication, and division, as well as percentage and fractional numbers. There is also a sound that is activated after double-clicking on the same key, and is deactivated in the same way.

Objective

Apply basic web technologies: HTML5, CSS3, and JavaScript. In order to explore new features within these technologies. Learn more at: What I learned

Deploy

• Link : 3D-Calculator

Functionalities

• Addition
• Subtraction
• Multiplication
• Division
• Percentage
  • Type in the value you want to calculate the percentage of
  • Then type in the multiplication symbol (x)
  • Next, type in the percentage value you want to calculate, followed by the percentage symbol (%)
  • Finally, press the equal (=) key or the percentage (%) button
• Fractional numbers
• Clear display button "AC"
• Clear current input button "CE"
• Sound when clicking the same key twice in a row
• Error message after reaching 7 digits and forcing operations
• Keyboard integration

Technologies

What I Learned

CSS

• This project provided me with an opportunity to deepen my knowledge in web development, especially regarding the use of CSS properties "display: flex" and "display: grid" to create responsive layouts. Additionally, I was able to learn how to use shadow effects to give a three-dimensional appearance to the calculator.

• Through the manipulation of these properties and effects, I was able to efficiently and professionally style the calculator, highlighting operation buttons and numbers. To complete the realistic appearance of the calculator, I implemented an animation that simulates the effect of pressing a key when the user clicks on it.

• This project was a valuable experience for my development as a programmer and allowed me to apply the knowledge I gained in courses and tutorials in a practical way.

JS

• This project allowed me to deepen my knowledge using advanced concepts of object-oriented programming to define the behavior of the calculator.

• The code uses the HTML DOM to update the display of numbers and calculations, allowing users to interact with the calculator through the graphical interface.

• The calculator also allows users to use the keyboard to perform operations, in addition to the buttons on the graphical interface.

Status

• Completed: