Skip to content

liad calculator #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Liaddj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

liad calculator #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
69 changes: 34 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,44 @@
<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="style.css">
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="calculator">
<div class="display">&nbsp;</div>
<div class="buttons">
<div class="row">
<button class="number" id="number-7">7</button>
<button class="number" id="number-8">8</button>
<button class="number" id="number-9">9</button>
</div>
<div class="row">
<button class="number" id="number-4">4</button>
<button class="number" id="number-5">5</button>
<button class="number" id="number-6">6</button>
</div>
<div class="row">
<button class="number" id="number-1">1</button>
<button class="number" id="number-2">2</button>
<button class="number" id="number-3">3</button>
</div>
<div class="row operations">
<!-- <button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button> -->
</div>
<div class="row last-row">
<button id="clear">C</button>
<button class="number" id="number-0">0</button>
<button id="equal">=</button>
</div>
<div class="container">

<h1 class="calc-title">Liad Pro Calculator</h1>
<div class="display"></div>

<div>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button id="add">+</button>

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need id in here? you can use classes for everything

</div>
<div>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button id="subtract">-</button>
</div>
<div>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button id="multiply">*</button>
</div>
<div>
<button class="number">0</button>
<button id="clear">C</button>
<button id="equal">=</button>
<button id="divide">/</button>
</div>
</div>
</div>
<script src="script.js"></script>

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

</html>
77 changes: 77 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
let firstNum = '';
let secondNum = '';
let operator = null;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need to initialize this as null? the default undefined wont be good here?

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 => {

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good use in the loop here

number.addEventListener('click', function(event) {
const value = event.target.textContent;

if (!operator) {
firstNum += value;
display.textContent = firstNum;
} else {
secondNum += value;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With early return you can make this shorter :

    if (!operator) {
      firstNum += value;
      display.textContent = firstNum;
      return
      secondNum += value;
      display.textContent = secondNum;

You will have to use another type of loop tho because you cannot exit the loop iteration when using forEach

display.textContent = secondNum;
}
});
});

plus.addEventListener('click', function() {
operator = '+';

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think that you can combine those 4 functions into a single one? they are kind of the same

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);

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Number of the default empty string will result on 0, so why not start with 0 for first number?

}
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 = '';
})
126 changes: 40 additions & 86 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is this helping you ?

@Liaddj Liaddj Nov 29, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really helpful and thank you very much

@Tamir198 Tamir198 Nov 29, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to know why you chose to do so, is it because of you wanted the children be absolute? something else?

}

* {
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;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try not to mix different units, stick to one

margin-bottom: 25px;
color: #333;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors should come from css variables

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;

@Tamir198 Tamir198 Nov 28, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think you can do the same with flex?

@Liaddj Liaddj Nov 29, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

of course tust me...

@Tamir198 Tamir198 Nov 29, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good, flex will be much better and modern approach

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);
}