چگونه با جاوااسکریپت ماشین حساب بسازیم :)

خوب شکل بالا ماشین حساب ما رو نشون میده که در عین سادگی تقریبا کنترول شده و بی عیب کار می کنه.

بریم به قسمت کد ها

html
<div class=&quotconteaner&quot>
<div id=&quotshownumer&quot>
<div id=&quotsunelespans&quot>
<span id=&quotyek&quot></span>
<span id=&quotdoo&quot></span>
<span id=&quotsee&quot></span>
</div>
</div>
<button id=&quotplus&quot>+</button>
<button id=&quotmines&quot>-</button>
<button id=&quotmultiple&quot>x</button>
<button id=&quotdivision&quot>/</button>
<button id=&quotclean&quot>c</button>
<button id=&quottwo&quot>2</button>
<button id=&quotthree&quot>3</button>
<button id=&quotfour&quot>4</button>
<button id=&quotfive&quot>5</button>
<button id=&quotsix&quot>6</button>
<button id=&quotzero&quot>0</button>
<button id=&quotone&quot>1</button>
<button id=&quotseven&quot>7</button>
<button id=&quotegiht&quot>8</button>
<button id=&quotnine&quot>9</button>
<button id=&quotequal&quot>=</button>

css
*{
font-size: xx-large;}

.conteaner{
width: 50%;
height: 500px;
display: grid;
grid-template-columns: 50px 50px 50px 50px 50px;
gap: 20px;
grid-auto-rows: 100px;
margin-right: auto;
margin-left: auto;
}
#shownumer{
background-color: rgb(3, 225, 66);
grid-column: 1 / -1;
grid-row: 1;
font-size: 60px;
text-align: center;
}
span{
font-size: 50px;
}

button#equal{
background-color: rgb(247, 0, 0);
grid-column: 1 / -1;
grid-row: auto;}
button:not(#equal){
border-radius: 50%;
background-color: black;
color: aliceblue;
}
#sunelespans{
text-align: center;
}
#plus{
background-color: #af1a1aa1!important
}
#mines{
background-color: rgb(18 130 219) !important;
}

#multiple{
background-color: rgb(63, 35, 173) !important;
}
#division{
background-color: rgb(156, 93, 157) !important;
}
#clean{
background-color: rgb(199, 122, 22) !important;
}

قسمت جاوااسکریپتیش

js
const spanone=document.querySelector(&quot#yek&quot)
const spanthree= document.querySelector(&quot#see&quot)
const spancondition=document.querySelector(&quot#doo&quot)
const one=document.getElementById(&quotone&quot)
one.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(1)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(1)
}
})
const two=document.getElementById(&quottwo&quot)
two.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(2)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(2)
}
})
const three=document.getElementById(&quotthree&quot)
three.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(3)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(3)
}
})
const four=document.getElementById(&quotfour&quot)
four.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(4)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(4)
}
})
const five=document.getElementById(&quotfive&quot)
five.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(5)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(5)
}
})
const six=document.getElementById(&quotsix&quot)
six.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(6)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(6)
}
})

const seven=document.getElementById(&quotseven&quot)
seven.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(7)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(7)
}
})
const eight=document.getElementById(&quotegiht&quot)
eight.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(8)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(8)
}
})
const nine=document.getElementById(&quotnine&quot)
nine.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(9)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(9)
}
})
const zero=document.getElementById(&quotzero&quot)
zero.addEventListener(&quotclick&quot,e=>{
if(spancondition.textContent==&quot&quot){
yek.append(0)
} else if(!spancondition.textContent==&quot&quot){
spanthree.append(0)
}
})
const plus=document.querySelector(&quot#plus&quot)
plus.addEventListener(&quotclick&quot,e=>{
if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){
document.querySelector(&quot#doo&quot)=plus.textContent
} else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && 
!spanthree.textContent==&quot&quot){
equall()
document.querySelector(&quot#doo&quot)=plus.textContent
} else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){
document.querySelector(&quot#doo&quot)=plus.textContent
}
})
const mines=document.querySelector(&quot#mines&quot)
mines.addEventListener(&quotclick&quot,e=>{
if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){
document.querySelector(&quot#doo&quot)=mines.textContent
} else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && 
!spanthree.textContent==&quot&quot){
equall()
document.querySelector(&quot#doo&quot)=mines.textContent
}else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){
document.querySelector(&quot#doo&quot)=mines.textContent
}
})
const multiple=document.querySelector(&quot#multiple&quot)
multiple.addEventListener(&quotclick&quot,e=>{
if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){
document.querySelector(&quot#doo&quot)=multiple.textContent
} else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && 
!spanthree.textContent==&quot&quot){
equall()
document.querySelector(&quot#doo&quot)=multiple.textContent
}else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){
document.querySelector(&quot#doo&quot)=multiple.textContent
}
})

const division=document.querySelector(&quot#division&quot)

division.addEventListener(&quotclick&quot,e=>{
if(!spanone.textContent==&quot&quot && spancondition.textContent==&quot&quot ){
document.querySelector(&quot#doo&quot)=division.textContent
} else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot && 
!spanthree.textContent==&quot&quot){
equall()
document.querySelector(&quot#doo&quot)=division.textContent
}else if(!spanone.textContent==&quot&quot && !spancondition.textContent==&quot&quot){
document.querySelector(&quot#doo&quot)=division.textContent
}
})
function equall(){
const shownumer=document.querySelector(&quot#shownumer&quot)
let firstvalue=document.querySelector(&quot#yek&quot)
let firstvalueu=parseInt(firstvalue.textContent)
const secondvalue=document.querySelector(&quot#doo&quot)
let secondvalueu=secondvalue.textContent
let thirdvalue=document.querySelector(&quot#see&quot)
let thirdvalueu=parseInt(thirdvalue.textContent)
switch(secondvalueu){
case &quot+&quot :firstvalue=firstvalueu+thirdvalueu ,
thirdvalue=&quot&quot,secondvalue=&quot&quot
break;
case &quot-&quot :firstvalue=firstvalueu-thirdvalueu ,
thirdvalue=&quot&quot,secondvalue=&quot&quot
break;
case &quotx&quot :firstvalue=firstvalueu*thirdvalueu ,
thirdvalue=&quot&quot,secondvalue=&quot&quot
break;
case &quot/&quot :firstvalue=firstvalueu/thirdvalueu ,
thirdvalue=&quot&quot,secondvalue=&quot&quot
break;
}
}
const equal=document.querySelector(&quot#equal&quot)
equal.addEventListener(&quotclick&quot,e=>{
equall()})
const clean=document.querySelector(&quot#clean&quot)
clean.addEventListener(&quotclick&quot,e=>{
let firstvalue=document.querySelector(&quot#yek&quot)
const secondvalue=document.querySelector(&quot#doo&quot)
let thirdvalue=document.querySelector(&quot#see&quot)
firstvalue=&quot&quot
secondvalue=&quot&quot
thirdvalue=&quot&quot
})

ccc