JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS</title>
  <link rel="stylesheet" href="styles.css">
  <script src="main.js" defer></script>
</head>

<body>

  <label>Input Num1 <input type="text" id="num1"></label>
  <p id="error1"></p>
  <label>Input Num2 <input type="text" id="num2"></label>
  <p id="error2"></p>
  <button id="btn1">Plus</button>
  <button id="btn2">Minus</button>
  <hr>
  <div id="result">Результат: </div>
</body>

</html>

JavaScript

btn1.onclick = function() {
    var n1 = +num1.value;
    var n2 = +num2.value;

    if (isNaN(n1) || n1 == "") {
        error1.innerHTML = '<b>Please, provide a number</b>';
        result.innerHTML = 'Результат: ';
    } else if (isNaN(n2) || n2 == "") {
        error2.innerHTML = '<b>Please, provide a number</b>';
        result.innerHTML = 'Результат: ';
    }
    else {
        error1.innerHTML = '';
        error2.innerHTML = '';
        result.innerHTML = 'Результат: ' + (n1 + n2);
    }
}

btn2.onclick = function() {
    var n1 = +num1.value;
    var n2 = +num2.value;

    if (isNaN(n1) || n1 == "") {
        error1.innerHTML = '<b>Please, provide a number</b>';
        result.innerHTML = 'Результат: ';
    } else if (isNaN(n2) || n2 == "") {
        error2.innerHTML = '<b>Please, provide a number</b>';
        result.innerHTML = 'Результат: ';
    }
    else {
        error1.innerHTML = '';
        error2.innerHTML = '';
        result.innerHTML = 'Результат: ' + (n1 - n2);
    }
}