ІДЗ

Розробити калькулятор, використовуючи JS, HTML,CSS.
Завдання на 10 б. : розробити простий калькулятор на 4 дії (+, -, *, /), який складається з трьох файлів.


1. створити файл html по типу :
<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,  initial-scale=1">
            <link rel="stylesheet" href="">
        <title>Кальклятор</title>
        <script src="calc3.js" defer></script>
    </head>
    <body>
        <p>Number1: <input type="text" id="n1">  </p>
        <p>Number2: <input type="text" id="n2">  </p>
        <button onclick="plus()">+</button>
.
.
.
.
        <hr>
        <p id="out">Result</p>
     
    </body>
</html>
 2. У файлі CSS розробити налаштування стилів.
3. У файлі JS прописати функції додавання, віднімання, множення та ділення
наприклад:
function plus () {
    var num1, num2, res;
    num1 = document.getElementById('n1').value;
    num1 = parseInt (num1);

    num2 = document.getElementById('n2').value;
    num2 = parseInt (num2);

    res = num1+num2;
    document.getElementById('out').innerHTML=res;
}


Завдання на 20 б. Створити калькулятор, який виконує всі дії (+,-,*,/), може розв'язувати рівняння на декілька дій, виконувати дії у дужках, очищує поле кнопкою "CLEAN", видаляє по одній цифрі кнопкою "BACKSPACE".
Приклад:


Для цього створити один файл HTML, у яком прописати стилі відображення кнопок та фонових кольорів, задати кількість кнопок та у частині script прописати функції додавання, віднімання....

Наприклад, для оформлення стилів:
<!DOCTYPE html>
<html>
    <head>
            <title>Кальклятор</title>
       
    </head>

    <style>
        body {
            background-color: aqua;
            user-select: none;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 4px;
            background-color: blue;
            padding: 4px;
            border-radius: 5px;
            max-width: 360px;
            font-family: "Tahoma";
        }

        .item {
            background-color: antiquewhite;
            color: black;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            cursor: pointer;
            font-weight: bold;
        }

        form {
            max-width: 100%;
        }

        input {
            width: 100%;
            height: 60px;
            border: none;
            font-size: 30px;
            outline: none;
            text-align: right;
        }

        .input {
            grid-column: 1/-1;
            padding: 0;
        }

        .clean {
            grid-column: 1/3;
            background-color: blueviolet;
        }

        .back {
            grid-column: 3/-1;
        }

        .equal {
            grid-column: 4;
            grid-row: 6/8;
            background-color: #bdbdbd;
        }

        .zero {
            grid-column: 1/3;
        }

    </style>

Приклад кнопок:
<body>
        <div class="container">
            <div class="item input"><form name="form"><input type="text" name="textview" readonly></form></div>
            <div class="item clean" onclick="clean()">C</div>
            <div class="item back" onclick="back()">&larr;</div>
            <div class="item" onclick="insert('+')">+</div>
            <div class="item"onclick="insert('-')">-</div>
            <div class="item"onclick="insert('*')">&times</div>
            <div class="item"onclick="insert('/')">&divide</div>
            <div class="item"onclick="insert('7')">7</div>
            <div class="item"onclick="insert('8')">8</div>
             .
             .
             .


Приклад функцій:
<script>
            function insert(num) {
                document.form.textview.value = document.form.textview.value + num;
               
            }

            function clean() {
                document.form.textview.value = "";
            }

            function back() {
                var exp = document.form.textview.value;
                document.form.textview.value = exp.substring(0,exp.length-1);
            }

            function equal() {
                var exp = document.form.textview.value;
                if(exp) {
                    document.form.textview.value = eval(exp);