-
-
-
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8aebf95
--- /dev/null
+++ b/script.js
@@ -0,0 +1,77 @@
+let firstNum = '';
+let secondNum = '';
+let operator = null;
+let display = document.querySelector('.display');
+
+let numbers = document.querySelectorAll('.number');
+
+let plus = document.querySelector('#add');
+let sub = document.querySelector('#subtract');
+let mul = document.querySelector('#multiply');
+let div = document.querySelector('#divide');
+
+let equal = document.querySelector('#equal');
+let clear_page = document.querySelector('#clear')
+
+
+numbers.forEach(number => {
+ number.addEventListener('click', function(event) {
+ const value = event.target.textContent;
+
+ if (!operator) {
+ firstNum += value;
+ display.textContent = firstNum;
+ } else {
+ secondNum += value;
+ display.textContent = secondNum;
+ }
+ });
+});
+
+plus.addEventListener('click', function() {
+ operator = '+';
+ display.textContent = operator;
+});
+
+div.addEventListener('click', function() {
+ operator = '/';
+ display.textContent = operator;
+});
+
+sub.addEventListener('click', function() {
+ operator = '-';
+ display.textContent = operator;
+});
+
+mul.addEventListener('click', function() {
+ operator = '*';
+ display.textContent = operator;
+});
+
+equal.addEventListener('click', function() {
+ let result;
+ if (operator === '+') {
+ result = Number(firstNum) + Number(secondNum);
+ }
+ if(operator === '-') {
+ result = Number(firstNum) - Number(secondNum);
+ }
+ if(operator === '/') {
+ result = Number(firstNum) / Number(secondNum);
+ }
+ if(operator === '*') {
+ result = Number(firstNum) * Number(secondNum);
+ }
+ display.textContent = result;
+
+ firstNum = result.toString();
+ secondNum = '';
+ operator = null;
+});
+
+clear_page.addEventListener('click', function(){
+firstNum = '';
+secondNum = '';
+operator = null;
+display.textContent = '';
+})
diff --git a/style.css b/style.css
index e8aee0c..4ca205b 100644
--- a/style.css
+++ b/style.css
@@ -1,108 +1,62 @@
-:root {
- --bg-color: #f3f4f6;
- --calc-bg: #ffffff;
- --btn-bg: #e5e7eb;
- --btn-hover: #d1d5db;
- --op-bg: #3b82f6;
- --op-color: #ffffff;
- --display-bg: #1f2937;
- --display-color: #ffffff;
- --text-color: #111827;
+body {
+ position: relative;
}
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- font-family: 'Inter', system-ui, -apple-system, sans-serif;
+.calc-title {
+ text-align: center;
+ font-size: 2.1rem;
+ font-weight: 700;
+ margin-top: 30px;
+ margin-bottom: 25px;
+ color: #333;
+ padding-bottom: 8px;
+ border-bottom: 3px solid #ffbf69;
+ width: 100%;
}
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background-color: var(--bg-color);
-}
-.calculator {
- background-color: var(--calc-bg);
- padding: 20px;
- border-radius: 20px;
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
- width: 320px;
- display: flex;
- flex-direction: column;
- gap: 15px;
+.container {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ translate: -50% -50%;
}
.display {
- background-color: var(--display-bg);
- color: var(--display-color);
- font-size: 2.5rem;
- padding: 20px;
- border-radius: 10px;
- text-align: right;
+ width: 300px;
+ height: 60px;
+ border: 0.5px solid black;
+ border-radius: 5px;
margin-bottom: 10px;
- overflow-x: auto;
-}
-
-.buttons {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-
-.row {
- display: flex;
- gap: 10px;
- justify-content: space-between;
+ text-align: right;
+ font-size: 24px;
+ padding: 5px;
+ background-color: rgb(255, 249, 242);
}
button {
- flex: 1;
- padding: 15px;
- font-size: 1.25rem;
- border: none;
- border-radius: 10px;
- background-color: var(--btn-bg);
- color: var(--text-color);
+ width: 70px;
+ height: 70px;
+ margin: 3px;
+ font-size: 20px;
+ border-radius: 5px;
+ border: 0.5px solid black;
cursor: pointer;
- transition: all 0.2s ease;
- font-weight: 500;
-}
-
-button:hover {
- background-color: var(--btn-hover);
- transform: translateY(-2px);
}
-button:active {
- transform: translateY(0);
-}
-/* Operations Row Styling */
-.operations button {
- background-color: var(--op-bg);
- color: var(--op-color);
- font-weight: bold;
+.container button:nth-of-type(odd) {
+ background-color: blanchedalmond;
}
-.operations button:hover {
- filter: brightness(110%);
+.container button:nth-of-type(even) {
+ background-color: rgb(255, 247, 228);
}
-/* Last Row Styling */
-.last-row button {
- background-color: #10b981; /* Green for equals/action */
- color: white;
+.container button:nth-of-type(odd):hover {
+ background-color: rgb(255, 220, 167);
}
-.last-row button:first-child {
- background-color: #ef4444; /* Red for Clear */
-}
-
-.last-row button:nth-child(2) {
- background-color: var(--btn-bg);
- color: var(--text-color);
-}
+.container button:nth-of-type(even):hover {
+ background-color: rgb(252, 235, 196);
+}
\ No newline at end of file