Design Layout
Key Point
- Avoid layout broken when there are too many numbers on the screen.
- Perform the basic calculator functions.
Skills Used
- HTML5
- CSS3
- JavaScript
- Bootstrap 3
Step By Step
- HTML5
- Use flexbox skill and list, to arrange the design payout.
- CSS3
- Use some hover effect to increase user experience.
- JavaScript
- Numbers buttons
- Operators Buttons
- Use
toFixed() to limit length behind decimal point.
- Delete button
- Use
slice() to perform it
- Decimal button
- Use
includes() to prevent appearance of second decimal point.
- double-zero button
- Display calculation result
- Use
eval() to perform, it can calculate the result inside the string type data.
- Display calculation detail
Demo
https://a7474267.github.io/JS-Dungeon-LV3/