diff --git a/calculator_ex_2025 b/calculator_ex_2025 new file mode 160000 index 0000000..c015871 --- /dev/null +++ b/calculator_ex_2025 @@ -0,0 +1 @@ +Subproject commit c015871a5915f882465eda2fd567e03e7bcfeda5 diff --git a/index.html b/index.html index 935c09e..4ae638a 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,10 @@
- +
diff --git a/script.js b/script.js new file mode 100644 index 0000000..985a512 --- /dev/null +++ b/script.js @@ -0,0 +1,74 @@ +let display=document.querySelector('.display') +let x,y; +let result; +let operator; + +let plus = document.getElementById('add') +let subtract = document.getElementById('subtract') +let multiply = document.getElementById('multiply') +let divide = document.getElementById('divide') + +plus.addEventListener('click', function(){ + operator='+'; + display.textContent='+'; +}) +subtract.addEventListener('click', function(){ + operator='-'; + display.textContent='-'; +}) +multiply.addEventListener('click', function(){ + operator='*'; + display.textContent='*'; +}) +divide.addEventListener('click', function(){ + operator='/'; + display.textContent='/'; +}) + +let equal = document.querySelector('#equal') + +let num = document.querySelectorAll('.number').forEach(btn=>{ + btn.addEventListener('click', function(){ + if(!operator){ + x=Number(btn.textContent); + display.textContent=btn.textContent; + } + else{ + y=Number(btn.textContent); + display.textContent=btn.textContent; + } + }) +}) + + +equal.addEventListener('click', function(){ + if(operator=='+'){ + result=x+y; + display.textContent=result; + } + if(operator=='-'){ + result = x-y; + display.textContent=result; + } + if(operator=='*'){ + result=x*y; + display.textContent=result; + } + if(operator=='/'){ + result=x/y; + display.textContent=result; + } + operator=''; + x=result; + +}) + +let clear = document.getElementById('clear') +clear.addEventListener('click', function(){ + x=0; + y=0; + operator=''; + display.textContent="" +}) + + diff --git a/style.css b/style.css index e8aee0c..3abeff1 100644 --- a/style.css +++ b/style.css @@ -45,6 +45,7 @@ body { text-align: right; margin-bottom: 10px; overflow-x: auto; + height: 95px; } .buttons { @@ -81,7 +82,6 @@ button:active { transform: translateY(0); } -/* Operations Row Styling */ .operations button { background-color: var(--op-bg); color: var(--op-color); @@ -92,14 +92,13 @@ button:active { filter: brightness(110%); } -/* Last Row Styling */ .last-row button { - background-color: #10b981; /* Green for equals/action */ + background-color: #10b981; color: white; } .last-row button:first-child { - background-color: #ef4444; /* Red for Clear */ + background-color: #ef4444; } .last-row button:nth-child(2) {