Skip to content

Commit

Permalink
final changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Devanshu1603
Devanshu1603 committed Aug 20, 2024
0 parents commit 54c95d0
Show file tree
Hide file tree
Showing 4 changed files with 340 additions and 0 deletions.
Binary file added Screenshot_2024-08-20_020141-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
176 changes: 176 additions & 0 deletions calculator.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}

body {
background-color:#e3f2fd;
display: flex;
justify-content: center;

}


.container{
display: flex;
justify-content: space-between;
width: 1100px;
margin: 0px;

}

#box1{
width: 500px;
margin-top:120px;
padding: 30px;
border-radius: 7px;
}

#btn{
background-color: white;
/* color: rgb(156, 224, 241); */
border: none;
width: 185px;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}

#main_box {
height: 550px;
width: 390px;
margin-top: 100px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
padding: 20px;
}

.button-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;

}

button {
width: 60px;
height: 60px;
font-size: 23px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color:white;
box-shadow: 0 0 3px 3px rgba(0,0,0,0.15);

}

button:hover {
background-color: #e3f2fd;
}

#display {
width: 100%;
height: 70px;
font-size: 24px;
padding: 0px;
border: none;
background-color: white;
border-radius: 5px;
margin-bottom: 20px;
margin-top: 20px;
box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
text-align: center;
}


.header{
height: 40px;
text-align: center;
margin: 0px;
}
#logo{
margin-left: 10px;
}


@media (max-width: 910px) {
.container {
flex-direction: column;

}

#box1 {
width: 65%;
margin-top: 0px;
margin-left: 12%;
}

#main_box {
height: 550px;
width: 390px;
margin-top: 20px;
margin-left: 15%;
margin-bottom: 50px;
}

.button-row {
display: flex;
justify-content: space-between;
}

button {
width: 70px;
height: 60px;
font-size: 20px;
margin: 2px;
}

#display {
font-size: 20px;
height: 60px;
}
}

@media (max-width: 480px) {
.container {
padding: 1px;
align-items: center;
}

#box1 {
width: 100%;
margin-top: 10px;
}

#main_box {
width: 100%;
margin-top: 10px;
}

.button-row {
flex-direction: row;
align-items: center;
}

button {
width: 70px;
height: 50px;
font-size: 18px;
margin: 2px 0;
}

#display {
font-size: 18px;
height: 50px;
}
}

@media (max-width: 1140px){
#main_box{
margin-right: 30px;
}
}
102 changes: 102 additions & 0 deletions calculator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
let display = document.getElementById('display');
let buttons = document.querySelectorAll('button');



let calculator = {
displayValue: '',

init() {
buttons.forEach(button => {
button.addEventListener('click', () => {
this.handleButtonPress(button);
console.log(button.id);
});
});
},

handleButtonPress(button) {
switch (button.id) {
case 'clear':
this.clearDisplay();
break;
case 'clear_all':
this.clearAll();
break;
case 'backspace':
this.backspace();
break;

case 'divide':
case 'multiply':
case 'subtract':
case 'add':
case 'log':
case 'sqrt':
this.getOperator(button.id);
break;
case 'equals':
this.calculateResult();
break;

default:
this.getNumber(button.textContent);
}
},

clearDisplay() {
this.displayValue = '';
display.value = '';
},

clearAll() {
this.displayValue = '';
display.value = '';
},

backspace() {
this.displayValue = this.displayValue.slice(0, -1);
display.value = this.displayValue;
},



getNumber(number) {
this.displayValue += number;
display.value = this.displayValue;
},

getOperator(operator) {
switch (operator) {
case 'divide':
this.displayValue += '/';
break;
case 'multiply':
this.displayValue += '*';
break;
case 'subtract':
this.displayValue += '-';
break;
case 'add':
this.displayValue += '+';
break;
case 'sqrt':
this.displayValue = Math.sqrt(this.displayValue);
break;
case 'log':
this.displayValue = Math.log(this.displayValue);
break;


}
display.value = this.displayValue;
},

calculateResult() {
let result = eval(this.displayValue);
this.displayValue = result;
display.value = this.displayValue;
}
};

calculator.init();
62 changes: 62 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CALCULATOR</title>
<link rel="stylesheet" href="calculator.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
<div class="container">
<div id='box1'>
<div className='text' id='text2'><h1>Calculator</h1></div>
<div className='text'><p>A simple and intuitive calculator application designed to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. The user-friendly interface ensures ease of use for quick calculations, while the underlying logic is optimized for accuracy and performance. Ideal for both everyday use and educational purposes.</p></div>

</div>
<div id="main_box">
<div class="header"><h1>CALCULATOR <i id="logo" class="fas fa-calculator"></i></h1></div>
<input type="text" id="display" readonly>
<div class="button-row">
<button id="clear_all">AC</button>
<button id="backspace"><i class="fa-solid fa-circle-xmark"></i></button>
<button id="equals"><i class="fa-solid fa-equals"></i></button>
<button id="divide"><i class="fa-solid fa-divide"></i></button>
</div>
<div class="button-row">
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="multiply">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="button-row">
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="subtract"><i class="fa-solid fa-minus"></i></button>
</div>
<div class="button-row">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="add"><i class="fa-solid fa-plus"></i></button>
</div>
<div class="button-row">
<button id="decimal">.</button>
<button id="zero">0</button>
<button id="sqrt"><i class="fa-solid fa-square-root-variable"></i></button>
<button id="log">ln</button>

</div>
</div>
</div>
<script src="calculator.js"></script>
</body>

</html>

0 comments on commit 54c95d0

Please sign in to comment.