Làm Máy tính đơn giản chỉ với HTML CSS và Javascript



DevForum giới thiệu các bạn code làm ứng dụng Máy tính đơn giản tính toán được chỉ với HTML CSS và Javascript

1. HTML

  <div class="bg">
    <form name="calculator">
      <table>
        <tr>
          <td colspan="4">
            <input type="text" name="display" disabled>
          </td>
        </tr>
        <tr>
          <td><input type="button" name="one" value="1" onclick="calculator.display.value += 1"></td>
          <td><input type="button" name="two" value="2" onclick="calculator.display.value += 2"></td>
          <td><input type="button" name="three" value="3" onclick="calculator.display.value += 3"></td>
          <td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
        </tr>
        <tr>
          <td><input type="button" name="four" value="4" onclick="calculator.display.value += 4"></td>
          <td><input type="button" name="five" value="5" onclick="calculator.display.value += 5"></td>
          <td><input type="button" name="six" value="6" onclick="calculator.display.value += 6"></td>
          <td><input type="button" class="operator" name="minus" value="-" onclick="calculator.display.value += '-'"></td>
        </tr>
        <tr>
          <td><input type="button" name="seven" value="7" onclick="calculator.display.value += 7"></td>
          <td><input type="button" name="eight" value="8" onclick="calculator.display.value += 8"></td>
          <td><input type="button" name="nine" value="9" onclick="calculator.display.value += 9"></td>
          <td><input type="button" class="operator" name="times" value="x" onclick="calculator.display.value += '*'"></td>
        </tr>
        <tr>
          <td><input type="button" class="operator" id="clear" name="clear" value="C" onclick="calculator.display.value = ''"></td>
          <td><input type="button" class="operator" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
          <td><input type="button" class="operator" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)"></td>
          <td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
        </tr>
      </table>
    </form>
    <h2 style="text-align: center;color: blue; font-weight: 700 ">DevForum</h2>
  </div>

2. CSS

.bg{
      background: rgb(74,149,233);
      padding-top: 100px;background: radial-gradient(circle, rgba(74,149,233,1) 0%, rgba(45,226,77,1) 100%);
      padding-bottom: 100px;
    }

    form {
      background: #fff;
      margin: 0 auto;
      width: 300px;
      padding: 20px;
      border-radius: 5px;
    }
    form * {
      box-sizing: border-box;
    }
    form table {
      width: 100%;
      border-collapse: collapse;
    }
    form table tr,
    form table td {
      border: 1px solid #eee;
    }
    form table tr:first-child input {
      height: 50px;
      padding: 0 10px;
      font-weight: 700;
    }
    form table tr:not(:first-child) td {
      height: 70px;
    }
    form table tr:not(:first-child) td input {
      height: 100%;
    }
    form table input {
      width: 100%;
      display: block;
      border: 0;
      font-size: 16px;
    }
    form table input:focus {
      outline: none;
    }
    form table input:hover {
      background: #eee;
      transition: all 0.2s ease-in-out;
    }
    form table input.operator {
      font-weight: 700;
      color: #fff;
      background: #ffcc00;
    }

3. JAVASCRIPT




Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.