文件列表:

Calculator.png (166686, 2023-06-08)
index.html (1667, 2023-06-08)
script.js (768, 2023-06-08)
style.css (1251, 2023-06-08)

# JavaScript_Calculator An Awesome Calculator build using HTML, CSS & JavaScript with dark mode feature. Basically The Calculator is a portable device used in our day life to perform various mathematical functions such as addition, subtraction, multiplication, division, root, etc. However, we have scientific or sophisticated calculators used to solve complex tasks such as trigonometry functions, degrees, exponential operators, log functions, hyperbolic functions, square root, and so on. In this project we crate a **Calculator** using the *JavaScript, HTML and CSS* programming languages. The Project folder is called - **Calculator**. inside this folder, we have three files - *index.html, style.css and script.js.* They are HTML document, stylesheet and script respectively. ## HTML: We start with the HTML code. The HTML code consists of a div with a class **calculator**. inside the calculator, we have two main divs. The first is the *display* div and the second is the *buttons* div. The *display* div consists of an *input* element with the type text. We set the *placeholder* to zero. inside buttons, we have 18 different buttons. They are numbers from 0 to 9, *AC* and *DEL* button, 4 basic operators, an equal to button and a decimal button. For all the buttons except AC, DEL and equal we assign a class called input-button. ## CSS: Now let us stylesheet this calculator using CSS. We start by discarding unwanted margins and paddings from all the elements. we set the background of the *body* to a linear gradient with solid colour stops Next, we set the width of the *calculator* to 375px and centre it using transforms. we even add some box shadows to make it stand out. To make it look even sleeker, we add some paddings to it. In the next step, we set width of the *display* and input element to 100%. we also use right as a value from the *text-align* property. we use the grid layout to position and arrange the buttons. We can further customize the buttons and display to suit the style. ## JavaScript: Now to add functionality to the calculator we will be using JavaScript. We start by creating a variable called *equal_pressed* which is set to zero. Every time the equal to the button is pressed, the value of the equal_pressed variable is changed to one. so once any evaluation is completed and equal to the button is pressed, the display will clear itself when the user enters a new number or operator for evaluation.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：