5
\$\begingroup\$

Would you review my code ? It is simple calculator made in 2/3 hours. I am still new and I was trying out some tags. If you can add some comment and say what to do and what to improve I will be really grateful.

var buttonOne = document.forms.formularzCalc.keyOne;
var buttonTwo = document.forms.formularzCalc.keyTwo;
var buttonThree = document.forms.formularzCalc.keyThree;
var buttonFour = document.forms.formularzCalc.keyFour;
var buttonFive = document.forms.formularzCalc.keyFive;
var buttonSix = document.forms.formularzCalc.keySix;
var buttonSeven = document.forms.formularzCalc.keySeven;
var buttonEight = document.forms.formularzCalc.keyEight;
var buttonNine = document.forms.formularzCalc.keyNine;
var buttonZero = document.forms.formularzCalc.keyZero;
var buttonPlus = document.forms.formularzCalc.keyPlus;
var buttonMinus = document.forms.formularzCalc.keyMinus;
var buttonMulti = document.forms.formularzCalc.keyMulti;
var buttonDivide = document.forms.formularzCalc.keyDivide;
var buttonCancel = document.forms.formularzCalc.keyCancel;
var buttonResult = document.forms.formularzCalc.keyResult;
var resultArea = document.forms.formularzCalc.Wynik;
var znacznik = 0;
var x;
var y = "";



// klawisze
function LiczbaX() {
  resultArea.value += this.value
}

function LiczbaY() {
  if (resultArea.value != "")
    resultArea.value += this.value
}
// operatory arytmetyczne i przypisywanie wartości resultArea do x
function znak() {
  x = resultArea.value;
  resultArea.value = "";
  znacznik = this.value;
}

// przypisywanie wartości resultArea do y i obliczanie
function wyniczek() {
  y = resultArea.value;
  if (y == "")
    alert("Co do **** karmazyna ?!?");
  else {
    switch (znacznik) {
      case "+":
        if (isNaN(x) == false && isNaN(y) == false)
          resultArea.value = parseInt(x) + parseInt(y);
        else
          alert("Thats wrong! use C and try again");
        break;

      case "-":
        if (isNaN(x) == false && isNaN(y) == false)
          resultArea.value = parseInt(x) - parseInt(y);
        else
          alert("Thats wrong! use C and try again");
        break;

      case "*":
        if (isNaN(x) == false && isNaN(y) == false)
          resultArea.value = parseInt(x) * parseInt(y);
        else
          alert("Thats wrong! use C and try again");
        break;

      case "/":
        if (y == 0 || isNaN(x) == true || isNaN(y) == true)
          alert("Thats wrong! use C and try again");
        else
          resultArea.value = parseInt(x) / parseInt(y);
        break;
    }
  }
}
// zdarzenia kliknięć cyfr
buttonOne.addEventListener("click", LiczbaX)
buttonTwo.addEventListener("click", LiczbaX)
buttonThree.addEventListener("click", LiczbaX)
buttonFour.addEventListener("click", LiczbaX)
buttonFive.addEventListener("click", LiczbaX)
buttonSix.addEventListener("click", LiczbaX)
buttonSeven.addEventListener("click", LiczbaX)
buttonEight.addEventListener("click", LiczbaX)
buttonNine.addEventListener("click", LiczbaX)
buttonZero.addEventListener("click", LiczbaY)

// zdarzenia kliknięć cyfr
buttonPlus.addEventListener("click", znak)
buttonMinus.addEventListener("click", znak)
buttonMulti.addEventListener("click", znak)
buttonDivide.addEventListener("click", znak)

// zdarzenie podawania wyniku
buttonResult.addEventListener("click", wyniczek);
body {
  background-color: #fff0b7;
}


/* Edytowanie formularza */

form {
  width: 40%;
  margin: auto;
  text-align: center;
}

td input {
  width: 40px;
  height: 30px;
}

fieldset {
  border-color: #00998C;
  background-color: rgba(0, 0, 0, 0.05);
}

legend:first-letter {
  color: #DDcc67;
  font-size: 120%;
}

legend {
  background-color: #00998C;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 23px;
  font-weight: bolder;
  color: #eeeeee;
  font-family: "Arial Black";
  margin: 0 auto;
  text-shadow: 3px 3px 1px #333333;
}


/*  Edytowanie tabeli */

table {
  margin: auto;
}

th input {
  text-align: right;
}


/* reszta */

footer {
  width: 40%;
  background-color: #00998C;
  margin: 5px auto;
  text-align: center;
  border: 1px rgba(0, 0, 0, 0.30) solid;
  color: #EEEEEE;
  font-family: verdana;
  font-weight: bold;
  font-size: 80%;
  min-width: 250px;
  border-radius: 10px;
  padding: 3px 0px;
}

input[disabled] {
  box-shadow: 1px 1px 1px black;
}

img {
  position: absolute;
  left: 20px;
  top: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> Kalkulator </title>
  <link rel="stylesheet" href="kalkulatorCss.css" type="text/css">
</head>

<body>
  <form name="formularzCalc">
    <fieldset>
      <legend> Calc Upgraded version </legend>
      <table>
        <!-- Tabela do wyrównania zawartości kalkulatora -->
        <tr>
          <th colspan="4"><input type="text" name="Wynik" disabled></th>
          <!-- Użycie th w celu łatwiejszej edycji -->
        </tr>
        <tr>
          <td><input type="button" name="keySeven" value="7"></td>
          <td><input type="button" name="keyEight" value="8"></td>
          <td><input type="button" name="keyNine" value="9"></td>
          <td><input type="button" name="keyPlus" value="+"></td>
        </tr>
        <tr>
          <td><input type="button" name="keyFour" value="4"></td>
          <td><input type="button" name="keyFive" value="5"></td>
          <td><input type="button" name="keySix" value="6"></td>
          <td><input type="button" name="keyMinus" value="-"></td>
        </tr>
        <tr>
          <td><input type="button" name="keyOne" value="1"></td>
          <td><input type="button" name="keyTwo" value="2"></td>
          <td><input type="button" name="keyThree" value="3"></td>
          <td><input type="button" name="keyMulti" value="*"></td>
        </tr>
        <tr>
          <td><input type="reset" name="keyCancel" value="C"></td>
          <td><input type="button" name="keyZero" value="0"></td>
          <td><input type="button" name="keyResult" value="="></td>
          <td><input type="button" name="keyDivide" value="/"></td>
        </tr>
      </table>
    </fieldset>
  </form>
  <footer>
    The new Calc made by Hyakkimaru <sup>&copy;</sup> Wszelkie prawa zastrzeżone
  </footer>
  
  <script src="kalkulatorJavaScript.js"></script>
</body>

</html>

\$\endgroup\$
  • 3
    \$\begingroup\$ Welcome to Code Review! I hope you get some good answers. \$\endgroup\$ – Phrancis Mar 13 at 19:26
  • \$\begingroup\$ You could add another feature. For example, if I press 2 + 3 + 1 and then equals, I get 4. It only adds the last two numbers you entered. Apart from this it seems to work pretty good. \$\endgroup\$ – Dennis Fink Mar 20 at 18:27

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.