Revisions to Simple Calculator Script - Code Review Stack Exchange

Only now I knew that the opening body tag was the closing one

Source Link

edit approved Jun 3, 2020 at 12:52

38
17

The first thing I did is made the code formatting just a bit better. then I added a title tag a webpage cannot go on without a title after that I include the meta tags for the UTF-8 encoding and then the viewport meta tag for responsiveness. I also corrected your opening body tag you wrote it as the closing body tag.

<!DOCTYPE html>
<html>
  <head>
    <!-- These meta tags should be here -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Your page can't go on without a title -->
    <title>Your Page should have a title</title>
  </head>
  </body><body>
    <!-- Page Contents !-->
    <form name = "calculator">
    <table>
      <tr>
        <input type = "text" name = "display" id = "display" disabled>
      </tr>
      <tr>
        <td><input type = "button" name = "one" value = "1"></td>
        <td><input type = "button" name = "two" value = "2"></td>
        <td><input type = "button" name = "three" value = "3"></td>
        <td><input type = "button" name = "plus" value = "+"></td>
      </tr>
      <tr>
      <td><input type = "button" name = "four" value = "4"></td>
        <td><input type = "button" name = "five" value = "5"></td>
        <td><input type = "button" name = "six" value = "6"></td>
        <td><input type = "button" name = "minus" value = "-"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "seven" value = "7"></td>
        <td><input type = "button" name = "eight" value = "8"></td>
        <td><input type = "button" name = "nine" value = "9"></td>
        <td><input type = "button" name = "multiplicatio" value = "*"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "clear" value = "c"></td>
        <td><input type = "button" name = "0" value = "0"></td>
        <td><input type = "button" name = "equal" value = "="></td>
        <td><input type = "button" name = "division" value = "/"></td>
      </tr>
    </table>
    </form>
    <script src = "script.js"></script>
  </body>
</html>

The first thing I did is made the code formatting just a bit better. then I added a title tag a webpage cannot go on without a title after that I include the meta tags for the UTF-8 encoding and then the viewport meta tag for responsiveness

<!DOCTYPE html>
<html>
  <head>
    <!-- These meta tags should be here -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Your page can't go on without a title -->
    <title>Your Page should have a title</title>
  </head>
  </body>
    <!-- Page Contents !-->
    <form name = "calculator">
    <table>
      <tr>
        <input type = "text" name = "display" id = "display" disabled>
      </tr>
      <tr>
        <td><input type = "button" name = "one" value = "1"></td>
        <td><input type = "button" name = "two" value = "2"></td>
        <td><input type = "button" name = "three" value = "3"></td>
        <td><input type = "button" name = "plus" value = "+"></td>
      </tr>
      <tr>
      <td><input type = "button" name = "four" value = "4"></td>
        <td><input type = "button" name = "five" value = "5"></td>
        <td><input type = "button" name = "six" value = "6"></td>
        <td><input type = "button" name = "minus" value = "-"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "seven" value = "7"></td>
        <td><input type = "button" name = "eight" value = "8"></td>
        <td><input type = "button" name = "nine" value = "9"></td>
        <td><input type = "button" name = "multiplicatio" value = "*"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "clear" value = "c"></td>
        <td><input type = "button" name = "0" value = "0"></td>
        <td><input type = "button" name = "equal" value = "="></td>
        <td><input type = "button" name = "division" value = "/"></td>
      </tr>
    </table>
    </form>
    <script src = "script.js"></script>
  </body>
</html>

The first thing I did is made the code formatting just a bit better. then I added a title tag a webpage cannot go on without a title after that I include the meta tags for the UTF-8 encoding and then the viewport meta tag for responsiveness. I also corrected your opening body tag you wrote it as the closing body tag.

<!DOCTYPE html>
<html>
  <head>
    <!-- These meta tags should be here -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Your page can't go on without a title -->
    <title>Your Page should have a title</title>
  </head>
  <body>
    <!-- Page Contents !-->
    <form name = "calculator">
    <table>
      <tr>
        <input type = "text" name = "display" id = "display" disabled>
      </tr>
      <tr>
        <td><input type = "button" name = "one" value = "1"></td>
        <td><input type = "button" name = "two" value = "2"></td>
        <td><input type = "button" name = "three" value = "3"></td>
        <td><input type = "button" name = "plus" value = "+"></td>
      </tr>
      <tr>
      <td><input type = "button" name = "four" value = "4"></td>
        <td><input type = "button" name = "five" value = "5"></td>
        <td><input type = "button" name = "six" value = "6"></td>
        <td><input type = "button" name = "minus" value = "-"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "seven" value = "7"></td>
        <td><input type = "button" name = "eight" value = "8"></td>
        <td><input type = "button" name = "nine" value = "9"></td>
        <td><input type = "button" name = "multiplicatio" value = "*"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "clear" value = "c"></td>
        <td><input type = "button" name = "0" value = "0"></td>
        <td><input type = "button" name = "equal" value = "="></td>
        <td><input type = "button" name = "division" value = "/"></td>
      </tr>
    </table>
    </form>
    <script src = "script.js"></script>
  </body>
</html>

I explained my question a bit more in this edit

Source Link

edited Jun 3, 2020 at 12:14

XYBOX

69
1
13

The first thing I did is made the code formatting just a bit better. then I added a title tag a webpage cannot go on without a title after that I include the meta tags for the UTF-8 encoding and then the viewport meta tag for responsiveness

Notice added Insufficient justification by Vogel612

occurred Jun 3, 2020 at 12:06

Source Link

answered Jun 2, 2020 at 23:10

XYBOX

69
1
13

Yes, It can be better in many ways just replace all your code with this:

The first thing I did is made the code formatting just a bit better.

Tip: Use vscode as your code editor and add the prettier extension with it to format your code better.

<!DOCTYPE html>
<html>
  <head>
    <!-- These meta tags should be here -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Your page can't go on without a title -->
    <title>Your Page should have a title</title>
  </head>
  </body>
    <!-- Page Contents !-->
    <form name = "calculator">
    <table>
      <tr>
        <input type = "text" name = "display" id = "display" disabled>
      </tr>
      <tr>
        <td><input type = "button" name = "one" value = "1"></td>
        <td><input type = "button" name = "two" value = "2"></td>
        <td><input type = "button" name = "three" value = "3"></td>
        <td><input type = "button" name = "plus" value = "+"></td>
      </tr>
      <tr>
      <td><input type = "button" name = "four" value = "4"></td>
        <td><input type = "button" name = "five" value = "5"></td>
        <td><input type = "button" name = "six" value = "6"></td>
        <td><input type = "button" name = "minus" value = "-"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "seven" value = "7"></td>
        <td><input type = "button" name = "eight" value = "8"></td>
        <td><input type = "button" name = "nine" value = "9"></td>
        <td><input type = "button" name = "multiplicatio" value = "*"></td>
      </tr>
      <tr>
        <td><input type = "button" name = "clear" value = "c"></td>
        <td><input type = "button" name = "0" value = "0"></td>
        <td><input type = "button" name = "equal" value = "="></td>
        <td><input type = "button" name = "division" value = "/"></td>
      </tr>
    </table>
    </form>
    <script src = "script.js"></script>
  </body>
</html>

The Js part

The only thing I did with the Javascript is made the code formatting a lot more readable

window.onload = () => {
  const calculator = document.querySelector('form[name = "calculator"]');
  const btns = document.querySelectorAll(
    `form[name = "calculator"] table tr input[type = "button"]`
  );
  btns.forEach((button) => {
    if (button.value != "c" && button.value != "=") {
      button.addEventListener("click", () => {
        calculator.display.value += button.value;
      });
    } else {
      if (button.value == "c") {
        button.addEventListener("click", () => {
          calculator.display.value = "";
        });
      } else if (button.value == "=") {
        button.addEventListener("click", () => {
          calculator.display.value = eval(calculator.display.value);
        });
      }
    }
  });
};

Stack Exchange Network

Return to Answer