1. need to get rid of the gaps between the input buttons 2. stop the page from constantly refreshing and clearing numbers

HTML-CSS
1

HTML Code:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

   

    <title>Calculator</title>

    <Link rel="stylesheet" type=text/css href="styles.css"></link>

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

  </head>

  <body>

      <div class="titel">Basic Calculator </div>

    <table border="0">

      <tr>

      <td colspan="3"><input type="text" id="result"></td>

        <td><input type="button" value="c" class="clear" onclick="clr()"></td>

      </tr>

      <tr>

          <td><input type="button" value="1" class="one" onclick="display('1')"></td>

          <td><input type="button" value="2" onclick="display('2')"></td>

          <td> <input type="button" value="3" onclick="display('3')"></td>

          <td> <input type="button" value="/" onclick="display('/')"></td>

      </tr>

      <tr>

          <td><input type="button" value="4" onclick="display('4')"></td>

        <td> <input type="button" value="5" onclick="display('5')"></td>

        <td> <input type="button" value="6" onclick="display('6')"></td>

        <td> <input type="button" value="-" onclick="display('-')"></td>

      </tr>

      <tr>

          <td><input type="button" value="7" onclick="display('7')"></td>

          <td> <input type="button" value="8" onclick="display('8')"></td>

            <td> <input type="button" value="9" onclick="display('9')"></td>

            <td> <input type="button" value="+" onclick="display('+')"></td>

            </tr>

            <tr>

                <td> <input type="button" value="." onclick="display('.')"></td>

                <td> <input type="button" value="0" onclick="display('0')"></td>

                <td> <input type="button" value="=" onclick="equate()"></td>

                <td> <input type="button" value="*" onclick="display('*')"></td>

            </tr>

    </table>

    <script>

        function clr(){document.getElementById("result").value=" ";}

        function display(val){document.getElementById("result").value+=val;}

        function equate(){

            let x=document.getElementById("result").value;

            let y = eval(x);

            document.getElementById("result").value=y;

        }

    </script>

  </body>

</html>

Now my CSS

div {

  border: 3px solid black;

  margin-right: 1200px;

  margin-top: 40px;

  text-align: center;

  background-color: blueviolet;

  color: white;

  font-family: Georgia, "Times New Roman", Times, serif;

  font-style: italic;

  font-weight: bold;

}

input {

  padding: 30px;

  background-color: green;

  border-collapse: collapse;

  color: white;

  font-size: 20px;

}

#result {

  background-color: white;

}

Screenshot (4)_LI
Screenshot (4)_LI1256Ă—820 46.2 KB

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
3

couple of thoughts

  1. you’d be better off using grid for the layout of this rather than a table
  2. you can do a search for html table calculator and get a few hits that will help with the design. If there’s something you don’t understand you can come back here and ask
  3. having the input color be white on a background color of white makes it kind of hard to see any numbers. when I do change the color I don’t see anything refreshing…unless I manually refresh the page myself.
1 Like
4

thanks Roma.1. good point. i am a complete novice and this is my very first attempt.
2. It looks then it is not the code which causes the page to get refreshed every second it must be something else. i press the number buttons on the calculator and it appears in the input box but then when the page gets refreshed it clears the input box of the numbers entered as well.

5

thanks Jeremy i will bear that in mind

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.