In today's post, we are going to talk about how we can make a good calculator using javascript, you might be aware of JavaScript, it is a programming language that runs on the browser. , It is also called scripting language, JavaScript is not compiled, while C language, C ++, C # etc are compiled languages, if you know C language, you can easily learn other languages | From javascript. There are two ways to create a calculator,
With the help of which you can create a calculator, but in today's post, we will create a calculator using eval () in JavaScript. Only two lines of JavaScript will be used in this, and to make the calculator look good, we will also use HTML and CSS. Hello friends my name is uttam kumar see this image and i use only 2 line code of javascript. continue reading.
We use HTML to add elements to a webpage, and use CSS to make that element look good. This is not a programming language. With this we can only design web pages. And we can tell which element we have to show.
HTML:-The full form of html is Hyper Text Markup Language. The invention of html 1991 was the first by Burens Lee, but in 1995 HTML2.0 was made the first standard HTML. Whenever you design a web page. So without this you cannot design your webpage. Whenever you create an HTML file, use Filename.html to save it. This is not a case sensitive language. And you do not need to download any HTML editor for this language, you can do its coding on notepad.
Also Read:--- How to insert CSS in html document
CSS:- The full form of CSS is a Cascading Style Sheet. And it is most commonly used to design elements added by HTML. You can make your web pages more attractive by using it. To use it, you need to know some things. Whenever you define a class, a dot .classname {} is placed before the class before defining that class. And whatever you want to write, you write inside the curly braces. We can insert CSS in html in three ways.
- Inline CSS
- Internal CSS
- External CSS
JAVASCRIPT:- Javascript is an object-oriented program scripting langauges which is also referred as multi-paradigm, functional and event-driven langauge. it is a case senstive langauge.Designing of javascript is done by brendan eich but it is developed by netscape morzilla and ecma organizations. javascript has features like dynamic typing which make it better and safe programming langauge. it can be manipulated in a browser for doing changes in web pages or web applications.
We will use JavaScript internaly to create the calculator and we will use CSS to external. So that our code is not too complicated and we can understand easily. Let's see first HTML document
How to create a calculator using html, css javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>Calculator</title>
<!--link CSS file here-->
<link rel="stylesheet" href="eval.css">
</head>
<body>
<form name="example"><table border="5" class="table"><div class="color">
<tr>
<td><h4><center>Enter Expression</center></h4>
<center><input type="text" name="calculator" placeholder="Enter Expression Here...." size="20" class="text" ></center>
<center><h4 style="color:red;">Answer:</h4></center><br><center> <input type="text" size="20" name="Answer" placeholder="Your answer..." class="box"></center>
<center><input type="button" class="button" name="b1" value="Calculate" onclick="cal()"> <input type ="reset" name="b2" value="Reset" class="reset"></center><br>
</td></tr>
</div></table></form>
<!--java script start here-->
<script>
function cal(){
document.example.Answer.value=
eval(document.example.calculator.value)
}
</script>
</body>
</html>
Now we also see the CSS document and we have linked this CSS file to HTMLdocument.
Also Read:-- Introduction to C language.
*{
margin:0;
padding:0;
}
body{
height:50px;
width:50px;
background-color: antiquewhite;
}
<!--class start here-->
.reset{
height:30px;
width:40px;
border-radius: 35%;
justify-content: center;
color:red;
background-color:chartreuse;
border-color: blueviolet;
font-weight:bold;
}
.button{
height:30px;
width:60px;
border-radius: 35%;
justify-content: center;
margin-left:px;
color:red;
background-color:chartreuse;
border-color: blueviolet;
font-weight:bold;
}
.text{
height: 25px;
box-color: red;
}
.box{
height: 25px;
}
.table{
margin-left: 300px;
margin-top:50px;
position:fixed;
background-color: aqua;
border-color:blue;
}
Now you can try to copy this code and run it in your browser. First of all, make a file by copying the CSS code and keep the file name eval.css because the file of the same name is linked to the HTML document, you can change the name of the file if you want. But you have to rename the file in both places. This CSS code is made for mobile devices, if you run this code on your computer, then you have to change the height and width in CSS.
And then you should save the html document under any name and add .HTML extension with it so that this file can run in the browser, if you have any problem then you can comment.
If you like this post, then you must tell us by comment, and if you feel that there have been some mistakes in this post, then you can comment by comment box. If you think this post can be useful to someone else, then you must share it, you can send us your suggestions through our E-mail ID.
Your-queries:--
how to create a calculator using javascript and html.
how to create a calculator program in javascript.
how to make a calculator in javascript and html.
how to make a calculator in javascript using eval.
how to create a scientific calculator in javascript.
how to build a calculator javascript.
how to make a javascript calculator gui.
0 Comments
Hey , Comment Your Query or Suggestion