<title>calculator app</title>

<style>
* {

margin: 0px; padding: 0px; box-sizing: border-box; background-color: black; font-family: sans-serif; outline: none; }

.container { height: 100vh; display: flex; justify-content: center; align-items: center; }

.calculator { background-color: black; padding: 15px; border-radius: 30px; box-shadow: inset 5px 5px 12px black, 5px 5px 12px rgba(0, 0, 0, .16); display: grid; grid-template-columns: repeat(4, 68px); }

input { grid-column: span 4; height: 70px; widows: 260px; background-color: skyblue; box-shadow: inset -5px -5px 12px skyblue, inset 5px 5px 12px rgba(0, 0, 0, .16); border: none; border-radius: 30px; color: rgb(70, 70, 70); font-size: 50px; text-align: end; margin-top: 40px; margin-bottom: 30px; padding: 20px; }

button { height: 48px; width: 48px; background-color: skyblue; box-shadow: -5px -5px 12px black, 5px 5px 12px rgba(0, 0, 0, .16); border: none; border-radius: 50%; margin: 8px; font-size: 16px; font-weight: bold; }

.equal { width: 115px; border-radius: 40px; background-color: skyblue; box-shadow: -5px -5px 12px skyblue, 5px 5px 12px rgba(0, 0, 0, .16); } h1 { background-color:skyblue; padding: 15px; border-radius: 30px; box-shadow: inset 5px 5px 12px white, 5px 5px 12px rgba(0, 0, 0, .16); display: grid; grid-template-columns: repeat(4, 68px); } alert{ background-color:white; padding: 15px; border-radius: 30px; box-shadow: inset 5px 5px 12px skyblue, 5px 5px 12px rgba(0, 0, 0, .16); display: grid; grid-template-columns: repeat(4, 68px); } </style>

cal

CL DEL % / 7 8 9 x 4 5 6 - 1 2 3 + . 0 =

<script> let outputscreen = document.getElementById('output-screen');

function display(num) { outputscreen.value += num }

function calculate() { try { outputscreen.value = eval(outputscreen.value) } catch (err) { alert("yusstyleCal do not receive invalid format") } }

function clr() { outputscreen.value = '' }

function del() { outputscreen.value = outputscreen.value.slice(0, -1) } </script>