Vue.js Calculator

Информация о материале
Просмотров: 149

vue_js_calc.html

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Кальнулятор</title>
  <meta charset="utf-8" />
  <link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
    <table border="1" style="border-collapse: collapse; text-align:center;" cellpadding="5px" align="center">
        <tr id="tablo_line">
          <td colspan="4">
            <input id="tablo" v-model="tablo" placeholder="Табло" size="25"></td>
          </tr>
        <tr id="out_line">
          <td colspan="4">
            <input id="out" v-model="out" placeholder="Ответ" size="25" disabled="true"></td>
          </tr>
          <tr>
            <td><button id="n7" type="button" v-on:click="add_num">7</button></td>
            <td><button id="n8" type="button" v-on:click="add_num">8</button></td>
            <td><button id="n9" type="button" v-on:click="add_num">9</button></td>
            <td><button id="plus" type="button" v-on:click="sign_press">+</button></td>
          </tr>
          <tr>
            <td><button id="n4" type="button" v-on:click="add_num">4</button></td>
            <td><button id="n5" type="button" v-on:click="add_num">5</button></td>
            <td><button id="n6" type="button" v-on:click="add_num">6</button></td>
            <td><button id="minus" type="button" v-on:click="sign_press">-</button></td>
          </tr>
          <tr>
            <td><button id="n1" type="button" v-on:click="add_num">1</button></td>
            <td><button id="n2" type="button" v-on:click="add_num">2</button></td>
            <td><button id="n3" type="button" v-on:click="add_num">3</button></td>
            <td><button id="multi" type="button" v-on:click="sign_press">*</button></td>
         </tr>
  
        <tr>
          <td><button id="nzap" type="button" v-on:click="add_zap">.</button></td>
          <td><button id="n0" type="button" v-on:click="add_num">0</button></td>
            <td>
              <button id="go" type="button" v-on:click="go">
                =
              </button>
            </td>
          <td><button id="div" type="button"  v-on:click="sign_press">/</button></td>
        </tr>
    </table>

</div>

<script src="https://unpkg.com/Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript./dist/vue.js"></script>
<script>
    let num1, num2, op;

    var app = new Vue({
        el: '#app',
        data: {
          tablo: "",
          out: "",
          counter:-10
        },
        methods: {
            add_num: function(event) {
              b = event.target.getAttribute('id');
              this.tablo = this.tablo + b[1];
            },
            add_zap: function(event) {
              this.tablo = this.tablo + ".";
            },
            sign_press: function(event) {
              op = event.target.getAttribute('id');
              num1 = Number(this.tablo);
              this.out = this.tablo;
              this.tablo = "";
            },
            go: function(event) {
              num2 = Number(this.tablo);
              if(op == "plus")
                this.out = String(num1 + num2);
              if(op == "minus")
                this.out = String(num1 - num2);
              if(op == "multi")
                this.out = String(num1 * num2);
              if(op == "div")
                this.out = String(num1 / num2);
              this.tablo = "";
            },
        }
    });

</script>
</body>
</html>


style.css

html, body {
    height: 100%;
    width: 100%;
}
  
#tablo_line {
    text-align: center;
    font-weight: bold;
    background-color: rgb(6, 102, 103);
}

#out_line {
    text-align: center;
    font-weight: bold;
    background-color: rgb(2, 160, 102);
}