How To Build A Basic ArithmeticCalculator In JavaScript, HTML, and CSS

By Mark Chidozie   10 months ago   184
Programming

<html>
<head> 
<meta name="viewport" content="width=device-width, initial-scale= 1">
<head>
<title>CALCULATOR</title> 
</head> 
<body style="background-color: black" onload="bold()"> 
<style> 
button { 
width: 60px; 
height: 60px;

b { 
font-size: 40px; 

</style> 
<script> 
function one() { 
form.a.value+="1";
 } 
 function two() { 
 form.a.value+="2";
 } 
 function three() {
form.a.value+="3"; 

function four() { 
form.a.value+="4";
 } 
 function five() {
form.a.value+="5"; 

function six() { 
form.a.value+="6";
 } 
 function seven() { 
 form.a.value+="7";
 } 
 function eight() { 
 form.a.value+="8"; 
 } 
 function nine() { 
 form.a.value+="9";
 } 
 function zero() { 
 form.a.value+="0";
 } 
 function del() { 
 form.a.value=""; 
 } 
 function sum() {
form.a.value=eval(form.a.value); 
form.a.value=form.a.value; 

function divide() { 
form.a.value+="/"; 

function minus() { 
form.a.value+="-"; 

function add() { 
form.a.value+="+";
 } 
 function times() {
form.a.value+="*";
 } 
 function raise() { 
 form.a.value+="**"; 
 } 
 function rem() { 
 form.a.value+="%";
 } 
 function bold() { 
 document.getElementById("bold").style.fontSize = "50px"; 
 document.getElementById("bold").style.width = "300px"; 
 document.getElementById("bold").style.height = "100px";
 } 
 </script> 
 <form name="form"> 
 <center> 
 <b> 
 <textarea name="a"
rows="5"
cols="50" 
 placeholder="Off" 
 id="bold" 
 > 
 </textarea> 
 <hr><hr> 
 <button type="button" onclick="one()"><b>1</b></button> 
 <button type="button" onclick="two()"> <b>2</b> </button> 
 <button type="button" onclick="three()"> <b>3</b> </button>
 <button type="button" onclick="four()"> <b>4</b> </button> <br>
 <button type="button" onclick="five()"> <b>5</b> </button> 
 <button type="button" onclick="six()"> <b>6</b> </button> 
 <button type="button" onclick="seven()"> <b>7</b> </button>
 <button type="button" onclick="eight()"> <b>8</b> </button> <br>
 <button type="button" onclick="nine()"> <b>9</b> </button>
 <button type="button" onclick="zero()"> <b>0</b> </button>
 <button type="button" onclick="sum()"> <b>=</b> </button> 
 <button type="button" onclick="del()"> <b>M-</b> </button><br>
 <button type="button" onclick="add()"> <b>+</b> </button> 
 <button type="button" onclick="minus()"> <b>-</b> </button> 
 <button type="button" onclick="times()"> <b>X</b> </button> 
 <button type="button" onclick="divide()"> <b>/</b> </button> <br>
 <button type="button" onclick="rem()"> <b>r</b> </button> 
 <button type="button" onclick="raise()"> <b>#</b> 
 </button> 
 </form> 
 </body> 
 </html>

 

 

 

TIPS: copy the above codes, paste them in your desired text editor: (EG: Notepad++), save it as calculator.html, and watch yourself calculating like a pro

[NewsNaira]


Javascript Calculator


Share this article!


Login to comment and earn


Godwin John
10 months ago

Too complex


(Quote) (Likes: 1)
James
10 months ago

The making 💩 q


(Quote) (Likes: 2)
Emmanuel Isaiah`
9 months ago

hmmmm

am confussed ooooooooh


(Quote) (Likes)