Calculator

HTML

CSS

JS

<div class="container">
        <form name="form" class="form-one">
            <input type="text" id="result" name="answer" class="answer">
            <br>
            <input type="button" value="AC" onclick="clearScreen()" class="clear">
            <input type="button" value="Del" onclick="del()" class="buttons">
            <input type="button" value="/" onclick="display('/')" class="buttons">
            <br>
            <input type="button" value="1" onclick="display('1')" class="buttons">
            <input type="button" value="2" onclick="display('2')" class="buttons">
            <input type="button" value="3" onclick="display('3')" class="buttons">
            <input type="button" value="*" onclick="display('*')" class="buttons">
            <br>
            <input type="button" value="4" onclick="display('4')" class="buttons">
            <input type="button" value="5" onclick="display('5')" class="buttons">
            <input type="button" value="6" onclick="display('6')" class="buttons">
            <input type="button" value="+" onclick="display('+')" class="buttons">
            <br>
            <input type="button" value="7" onclick="display('7')" class="buttons">
            <input type="button" value="8" onclick="display('8')" class="buttons">
            <input type="button" value="9" onclick="display('9')" class="buttons">
            <input type="button" value="-" onclick="display('-')" class="buttons">
            <br>
            <input type="button" value="." onclick="display('.')" class="buttons">
            <input type="button" value="0" onclick="display('0')" class="buttons">
            <input type="button" value="=" onclick="giveAns('=')" class="equal">
        </form>
    </div>

*{
            margin: 0;
            padding: 0;
            font-size: 18px;
            box-sizing: border-box;
        }
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        .container{
            display: block;
            width: 320px;
            background-color: antiquewhite;
            border: 1px solid #333;
        }
        .answer{
            border: none;
            width: 100%;
            height: 5rem;
            background-color: #333;
            color: #d7ff5f;
            font-size: 60px;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .clear, .equal{
            width: 160px;
            background-color: #585858;
            cursor: pointer;
        }
        .clear:hover, .equal:hover{
            background-color: blueviolet;
        }
        .clear:active, .equal:active{
            background-color: darkmagenta;
        }
        .buttons{
            width: 80px;
            cursor: pointer;
        }
        .buttons:hover{
            background-color: #ddd;
        }
        .buttons:active{
            background-color: #bbb;
        }
        input{
            margin-right: -5px;
            height: 50px;
            border: 1px solid #333;
        }

Ad #1

Ad #2