<!DOCTYPE html><html><head><meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8"><link rel="stylesheet" href="styles/style.css"/><title>Calculator</title><style> *{padding:2px;margin:2px;box-sizing:border-box;font-family:sans-serif;font-size:22px;font-weight:bold;color:#ff6523;background-color:#ecf0f6;}input{border-radius:20px;box-shadow:inset -5px -5px -5px #fff 5px 5px 5px border-radius:50px;box-shadow:-5px -5px -5px rgba (0, 0, 0, 14);color:#ff6523;font-size:35px;text-align:end;margin:6px;height:110px;width:267px;}button{border-radius:50%;height:60px;width:60px;}.zero{border-radius:50px;height:60px;width:130px;}input::placeholder{color:#ff6523;} </style></head><body><input type="text" placeholder="0" id="result"> <div><button onclick="clrs()"> AC </button><button onclick="display ('%')"> % </button><button onclick="dle()"> DEL </button><buttononclick="display ('/')"> / </button></div><div><button onclick="display ('7')"> 7 </button><button onclick="display ('8')"> 8 </button><button onclick="display ('9')"> 9 </button><button onclick="display ('*')"> * </button></div><div><button onclick="display ('4')"> 4 </button><buttononclick="display ('5')"> 5 </button><button onclick="display ('6')"> 6 </button><button onclick="display ('+')"> + </button></div><div><button onclick="display ('1')"> 1 </button><buttononclick="display ('2')"> 2 </button><buttononclick="display ('3')"> 3 </button><button onclick="display ('-')"> - </button></div><div><button class="zero" onclick="display ('0')"> 0 </button><button onclick="display ('.')"> . </button><button class="equal-btn" onclick="calculate()"> = </button></div><script> var result = document.getElementById ("result");function display(number){result.value += (number);}function calculate (){final_number = result.value;final_result = eval (final_number);result.value = final_result;}function clrs(){result.value = "";}function dle(){result.value = result.value.slice(0,-1);}</script></body></html>