Basic assignment

logica de calcul propusa:

##INITIALIZRE
operand 1 e 0
operand 2 e null
operatie e null
display e 0
eroare e null

##APASAREA UNUI BUTON
daca nu am operatie retinuta:
	daca e cifra, si primul operand = 0, atunci primul operand devine cifra
		altfel, se adauga cifra la primul operand, update display
	daca e operatie
		retin operatia
		
daca am operatie retinuta
	daca e cifra, se adauga cifra la al doilea operand, update display
	daca e operatie si operand 2 e null, se schimba operatia
		altfel
			daca operand 2 = 0 si operatia retinuta e "/", afisez eroare
				altfel
				aplica operatia
				afisez rezultatul
				operand 1 devine rezultatul
				operand 2 devine null
				operatia retinuta devine noua operatie
	
daca apas "egal"
	daca nu am operatie retinuta sau operand 2 este null, nu fac nimic
	daca operand 2 = 0 si operatia e /, throw error (setTimeout)
		altfel
			aplica operatia
			afisez rezultatul
			operand 1 devine rezultatul
			operand 2 devine null
			operatia retinuta devine null
	
daca apas C
	operand 1 devine 0
	operand 2 devine null
	operatie devine null
	display devine 0
	eroare devine null

Starting point:

<!doctype html>

<html lang="en">
<head>
</head>

<body>
  <div id="calculator">
    <div id="display"> 
      <p>0</p>
    </div>
    
    <div id="butoane">
      <div>
		<button class="actiuni" onclick="myFunction(this.innerHTML)">C</button>
		<button class="actiuni" onclick="myFunction(this.innerHTML)">Sterge</button>
		<button class="actiuni" onclick="myFunction(this.innerHTML)">/</button>
		<button class="actiuni" onclick="myFunction(this.innerHTML)">x</button>
      </div>
      <div>
        <div id="cifre">
  
        </div>
        <div id="restbutoane">
			<button class="actiuni" onclick="myFunction(this.innerHTML)">-</button>
			<button class="actiuni" onclick="myFunction(this.innerHTML)">+</button>
			<button id="egal" class="actiuni" onclick="myFunction(this.innerHTML)">=</button>
        </div>
      
      </div>
    </div>
  </div>
</body>

</html>

body{
  background-color:#B1DBF3;
}
#calculator{
  width:240px;
}
button{
  width:60px;
  height:60px;
  background-color:#388095;
  border: 1px solid #304156;
}
#butoane{
 font-size:0px; 
}
#zero{
  width:120px;
}
#cifre{
  width:75%;
  float:left;
}
#cifre button{
  background-color:#28354F;
}
#restbutoane{
  float:right;
  width:25%; 
}
#egal{
  height:120px;
  background-color:#DA8128;
}

for (let i = 9; i >= -1 ; i--){
  var btn = document.createElement("BUTTON");
  btn.innerHTML = i;
  if (i === 0)
  {
    btn.setAttribute("id","zero");
  }
  document.getElementById("cifre").appendChild(btn);
  
  btn.setAttribute("onClick","myFunction(this.innerHTML)")
}

btn.innerHTML = ".";
document.getElementById("cifre").appendChild(btn);

function myFunction(clicked){
let display = document.querySelector("#display p").innerHTML;
  display = clicked;
  if (isNaN(Number(clicked))) 
  {
    console.log("nu este cifra");
  }
  else
    {
      console.log(clicked)
    }
}

PreviousExtra Resources NextThe Color Game

Last updated 1 year ago

Was this helpful?