<pre class="ql-syntax" spellcheck="false">&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;style&gt; *{ padding: 0; margin: 0; font-family: 'poppins', sans-serif; } body{ background-color: #495250; display: grid; height: 100vh; place-items: center; } .main{ width: 400px; height: 450px; background-color: white; position: absolute; border: 5px solid black; border-radius: 6px; } .main input[type='text'] { width: 88%; position: relative; height: 80px; top: 5px; text-align: right; padding: 3px 6px; outline: none; font-size: 40px; border: 5px solid black; display: flex; margin: auto; border-radius: 6px; color: black; } .btn input[type='button']{ width:90px; padding: 2px; margin: 2px 0px; position: relative; left: 13px; top: 20px; height: 60px; cursor: pointer; font-size: 18px; transition: 0.5s; background-color: #495250; border-radius: 6px; color: white; } .btn input[type='button']:hover{ background-color: black; color: white; } &lt;/style&gt; &lt;script&gt; function Solve(val) { var v = document.getElementById('res'); v.value += val; } function Result() { var num1 = document.getElementById('res').value; var num2 = eval(num1); document.getElementById('res').value = num2; } function Clear() { var inp = document.getElementById('res'); inp.value = ''; } function Back() { var ev = document.getElementById('res'); ev.value = ev.value.slice(0,-1); } &lt;/script&gt; &lt;title&gt;Calulator&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="main"&gt; &lt;input type="text" id = 'res'&gt; &lt;div class="btn"&gt; &lt;input type="button" value = 'C' onclick = "Clear()"&gt; &lt;input type="button" value = '%' onclick = "Solve('%')"&gt; &lt;input type="button" value = '←' onclick ="Back('←')"&gt; &lt;input type="button" value = '/' onclick = "Solve('/')"&gt; &lt;br&gt; &lt;input type="button" value = '7' onclick = "Solve('7')"&gt; &lt;input type="button" value = '8' onclick = "Solve('8')"&gt; &lt;input type="button" value = '9' onclick = "Solve('9')"&gt; &lt;input type="button" value = 'x' onclick = "Solve('*')"&gt; &lt;br&gt; &lt;input type="button" value = '4' onclick = "Solve('4')"&gt; &lt;input type="button" value = '5' onclick = "Solve('5')"&gt; &lt;input type="button" value = '6' onclick = "Solve('6')"&gt; &lt;input type="button" value = '-' onclick = "Solve('-')"&gt; &lt;br&gt; &lt;input type="button" value = '1' onclick = "Solve('1')"&gt; &lt;input type="button" value = '2' onclick = "Solve('2')"&gt; &lt;input type="button" value = '3' onclick = "Solve('3')"&gt; &lt;input type="button" value = '+' onclick = "Solve('+')"&gt; &lt;br&gt; &lt;input type="button" value = '00'onclick = "Solve('00')"&gt; &lt;input type="button" value = '0' onclick = "Solve('0')"&gt; &lt;input type="button" value = '.' onclick = "Solve('.')"&gt; &lt;input type="button" value = '=' onclick = "Result()"&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src = 'Calc.js' &gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
</pre>
<h1><br /></h1>

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow