File tree Expand file tree Collapse file tree 3 files changed +125
-0
lines changed Expand file tree Collapse file tree 3 files changed +125
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Calculator</ title >
7+ < link rel ="stylesheet " href ="styles.css ">
8+ </ head >
9+ < body >
10+ < div class ="calculator ">
11+ < input type ="text " id ="display " readonly >
12+ < div class ="buttons ">
13+ < button onclick ="clearDisplay() "> C</ button >
14+ < button onclick ="addOperator('/') "> /</ button >
15+ < button onclick ="addOperator('*') "> *</ button >
16+ < button onclick ="deleteLast() "> DEL</ button > < br >
17+ < button onclick ="appendNumber('7') "> 7</ button >
18+ < button onclick ="appendNumber('8') "> 8</ button >
19+ < button onclick ="appendNumber('9') "> 9</ button >
20+ < button onclick ="addOperator('-') "> -</ button > < br >
21+ < button onclick ="appendNumber('4') "> 4</ button >
22+ < button onclick ="appendNumber('5') "> 5</ button >
23+ < button onclick ="appendNumber('6') "> 6</ button >
24+ < button onclick ="addOperator('+') "> +</ button > < br >
25+ < button onclick ="appendNumber('1') "> 1</ button >
26+ < button onclick ="appendNumber('2') "> 2</ button >
27+ < button onclick ="appendNumber('3') "> 3</ button >
28+ < button onclick ="calculate() "> =</ button > < br >
29+ < button onclick ="appendNumber('0') "> 0</ button >
30+ < button onclick ="appendNumber('.') "> .</ button >
31+ </ div >
32+ </ div >
33+ < script src ="script.js "> </ script >
34+ </ body >
35+ </ html >
Original file line number Diff line number Diff line change 1+ let display = document . getElementById ( "display" ) ;
2+
3+ function clearDisplay ( ) {
4+ display . value = "" ;
5+ }
6+
7+ function deleteLast ( ) {
8+ display . value = display . value . slice ( 0 , - 1 ) ;
9+ }
10+
11+ function appendNumber ( number ) {
12+ if ( number === '.' && display . value . includes ( '.' ) && ! isNaN ( display . value . slice ( - 1 ) ) ) {
13+ alert ( "Error: Multiple decimal points are not allowed." ) ;
14+ return ;
15+ }
16+ display . value += number ;
17+ }
18+
19+ function addOperator ( operator ) {
20+ const lastChar = display . value . slice ( - 1 ) ;
21+ if ( ! display . value || isNaN ( lastChar ) ) {
22+ alert ( "Error: Cannot add consecutive operators." ) ;
23+ return ;
24+ }
25+ display . value += operator ;
26+ }
27+
28+ function calculate ( ) {
29+ try {
30+ if ( display . value . includes ( "/0" ) ) {
31+ alert ( "Error: Division by zero is undefined." ) ;
32+ return ;
33+ }
34+ display . value = eval ( display . value ) ;
35+ } catch ( error ) {
36+ alert ( "Error: Invalid operation." ) ;
37+ }
38+ }
Original file line number Diff line number Diff line change 1+ body {
2+ font-family : Arial, sans-serif;
3+ display : flex;
4+ justify-content : center;
5+ align-items : center;
6+ height : 100vh ;
7+ margin : 0 ;
8+ background-color : # f5f5f5 ;
9+ }
10+
11+ .calculator {
12+ background : # fff ;
13+ padding : 20px ;
14+ border-radius : 10px ;
15+ box-shadow : 0 4px 10px rgba (0 , 0 , 0 , 0.2 );
16+ }
17+
18+ # display {
19+ width : 100% ;
20+ height : 50px ;
21+ font-size : 18px ;
22+ margin-bottom : 10px ;
23+ text-align : right;
24+ padding : 5px ;
25+ border : 1px solid # ccc ;
26+ border-radius : 5px ;
27+ background : # f9f9f9 ;
28+ }
29+
30+ .buttons {
31+ display : grid;
32+ grid-template-columns : repeat (4 , 1fr );
33+ gap : 10px ;
34+ }
35+
36+ button {
37+ height : 50px ;
38+ font-size : 18px ;
39+ border : none;
40+ border-radius : 5px ;
41+ cursor : pointer;
42+ background : # 007BFF ;
43+ color : white;
44+ }
45+
46+ button : hover {
47+ background : # 0056b3 ;
48+ }
49+
50+ button : active {
51+ background : # 003f7f ;
52+ }
You can’t perform that action at this time.
0 commit comments