Projects are the best way to learn programming in general, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level. If you want to learn JavaScript and CSS concepts or even improve your skills in them more further this is a must do project.
HTML first:
In order for us to have an organized work I intended to use a table for this matter, it's not necessary to do this with the table tag and its inner components, it's just the way I see it should be done, you can use your own way if you're not comfortable with that.
CSS:
JavaScript:
Here we have 3 functions:
1) display(id): this function runs when the user clicks at any button except the "=" button and "C" button because these two button have their own functionality which we gonna talk about later, the display function shows the user actions, it takes the inner HTML of the clicked button and put it on the top of the display screen so the user can see what's happening.
2) clean(): which clears the screen, this function runs specifically when the user clicks on C button.
3) calc(): runs when the user clicks on the "=" button, which is going to evaluate the user actions (which are th innerHTML of the tag that has the id "actions") and put the result on the tag that has the id "screen".
2) clean(): which clears the screen, this function runs specifically when the user clicks on C button.
3) calc(): runs when the user clicks on the "=" button, which is going to evaluate the user actions (which are th innerHTML of the tag that has the id "actions") and put the result on the tag that has the id "screen".
Try the calculator Here: https://bit.ly/2X2wtuf
Download source code: https://github.com/wadiemendja/calculator
0 Comments