smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 06:20:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added display method

Browse source
This commit is contained in:
Mike 2023-10-03 23:06:45 -04:00
parent 8b78b5bc3a
commit 56e16c3741
3 changed files with 59 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
calculator/css/style.css
View file

@ -37,6 +37,10 @@
margin: 5px;
font-size: 25px;
width: 110px;
-webkit-transition: all 0.5s; /* add this line, chrome, safari, etc */
-moz-transition: all 0.5s; /* add this line, firefox */
-o-transition: all 0.5s; /* add this line, opera */
transition: all 0.5s; /* add this line */
}
#clear {
@ -51,6 +55,14 @@
width: 230px;
}
#action:hover {
background-color: #F0ECE2;
}
#clear:hover {
background-color: #FF6D60;
}
body {
display: flex;
justify-content: center;

39
calculator/index.html
View file

@ -15,26 +15,27 @@
0
</div>
<div class="buttons">
<button id="clear" class="btn">A/C</button>
<button id="action" class="btn">+/-</button>
<button id="action" class="btn">%</button>
<button id="action" class="btn">÷</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button id="action" class="btn">*</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button id="action" class="btn">-</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button id="action" class="btn">+</button>
<button id="zero" class="btn">0</button>
<button id="decimal" class="btn">.</button>
<button id="action" class="btn">=</button>
<button id="clear" class="btn" value="cls">A/C</button>
<button id="action" class="btn" value="+/-">+/-</button>
<button id="action" class="btn" value="%">%</button>
<button id="action" class="btn" value="÷">÷</button>
<button class="btn" value="7">7</button>
<button class="btn" value="8">8</button>
<button class="btn" value="9">9</button>
<button id="action" class="btn" value="*">*</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<button class="btn" value="6">6</button>
<button id="action" class="btn" value="-">-</button>
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button id="action" class="btn" value="+">+</button>
<button id="zero" class="btn" value="0">0</button>
<button id="decimal" class="btn" value=".">.</button>
<button id="action" class="btn" value="=">=</button>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

30
calculator/js/script.js
View file

@ -1,6 +1,10 @@
let firstNum = undefined
let secondNum = undefined
let operator = undefined
let firstNum = undefined;
let secondNum = undefined;
let operator = undefined;
let screen = document.querySelector('.screen');
const buttons = document.querySelectorAll('.btn');
function add(x, y) {
return Number(x + y);
@ -35,3 +39,23 @@ function operate(firstNum, secondNum, operator) {
return divive(firstNum, secondNum);
}
}
function updateDisplay(displayValue) {
let currentScreen = screen.textContent.trim();
console.log(currentScreen);
if (currentScreen.length >= 8) return;
if (Number(currentScreen) === 0) {
screen.textContent = displayValue;
} else {
screen.textContent += displayValue;
}
}
buttons.forEach(btn => {
btn.addEventListener('click', e => {
updateDisplay(e.target.value);
});
});