javascript_series5_es6

by aelgy369

HTML

<body>
  <div id="content">
    <div id="counter">
      <div class="title">
        simple counter:
      </div>
      <div id="counterNum">
        <button class='plus'>+</button>
        <div id="number"></div>
        <button class='minus'>-</button>
        <button type='reset' class="reset">Reset</button>
      </div>
    </div>
    <hr>
    <div id="calculator">
      <div class="title">
        simple calculator:
      </div>
      <input type="number" class='firNum' placeholder="enter a number" />
      <input type="number" class='secNum' placeholder="enter a number"/>
      <button class='cal'>加/減/乘/除</button>
    </div>
  </div>
</body>

CSS

body {
  background-image: linear-gradient(to top right, #FFDAC8, #FF8F59, #D94600);
  height: 100vh;
  overflow: hidden;
  display: grid;
}

#content {
  height: 400px;
  width: 400px;
  align-self: center;
  justify-self: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.plus,
.minus {
  border-radius: 5px;
  border: 0px;
  font-size: 18px;
  background-color: #CCCCCC;
  width: 30px;
}

.reset {
  border-radius: 5px;
  background-color: #CCCCCC;
  border: 0px;
  margin: 0px 5px;
  font-size: 18px;
}

#counterNum {
  display: flex;
}

#number {
  background-color: #FFF;
  height: 20px;
  width: 40px;
  margin: 0px 5px;
  text-align: center;
  border-radius: 5px;
}

.firNum, .secNum {
  border-radius: 5px;
  border: 0px;
  font-size: 18px;
  width: 130px
}

.cal {
  border-radius: 5px;
  border: 0px;
  background-color: #CCCCCC;
  font-size: 18px;
}

JavaScript

const plusBtn = document.querySelector('.plus');
const minusBtn = document.querySelector('.minus');
const number = document.querySelector('#number')
const resetBtn = document.querySelector('.reset')
let a = 0;
number.innerHTML = a;

const plus = () => {
  a++;
  number.innerHTML = a;
}

const minus = () => {
  a--;
  number.innerHTML = a;
}

const reset = () => {
  a = 0;
  number.innerHTML = a
}

plusBtn.onclick = plus;
minusBtn.onclick = minus;
resetBtn.onclick = reset;

const cal = document.querySelector('.cal')

const calBtn = () => {
  const first = parseInt(document.querySelector('.firNum').value);
  const second = parseInt(document.querySelector('.secNum').value);
  if (isNaN(first) || isNaN(second)) {
    alert('請輸入正確的值');
  } else {
    const plus = first + second;
    alert("相加等於：" + plus);
    const minus = first - second;
    alert("相減等於：" + minus);
    const multi = first * second;
    alert("相乘等於：" + multi);
    const division = first / second;
    alert("相除等於：" + division);
  }
}

cal.onclick = calBtn;