Javascript Projects-#1-ONLINE CALCULATOR (NO CSS,NO HTML)

Let everyone know that you\'re techy!!!

FacebookRedditEmail this page


so, i am declaring that i have covered all the necessary theory of javascript in those past tutorials.

now, it is our time to make some apps.

if there is still something basics remaining to learn, then we will learn it, on the way; whenever it comes while making apps.

try to visit to some tutorials, or good  resources to learn javascript.

but i can assure that, if only, you follow my tutorials, you will be good enough to follow the furthur projects tutorials.

many people, don’t even learn the basics of programming and directly learn to make applications. you are atleast, one step ahead of those.

i will recommend you to continue to making softwares in javascript, even if you feel like you don’t know javascript in advanced level IF, you are able to write a simple “Hello World” using function in javascript.

If you feel like you need some object oriented programming concepts, then you can visit my C++ tutorials, which are also free(i put ads there, and make money when you visit ads!!);

so, let’s start to make a javascript project of calculator.

i will first, put the full source code then explain it line by line.

 

paste this code in your notepad and save it as Calculator.html.

then, you will see the output of a calculator.

so, at first, we simply created a form.

i think i haven’t done a tutorial on form validation in javascript.

it’s because, i was going to do this project.

so, we will fully use the concept of form here.

we created a form named as “calculator”

then, we need input in that, from user. so, we created a input type=text (name=answer is not so important)

after that, we breaked through one line; i.e we changed one line as <br>

next, we created a input type as button and inside it we displayed a value called 1; which underclicking will give us 1.

i will try to make it more clearer through a picture.

so, that’s it.

the above figure represents the basic model of what we are going to build.

and as we can see we have already built the upper apart by

next, after we built the upper part, our task will be to make the keys.

so, for making the keys, we will also be using button which as said above, under clicking will show the value that performs operation.

inside value, we basically keep things that user sees.

while inside onclick, we keep things that the computer performs.

and finally, after doing the same thing for 3 rows, we can see that, we have written the last paragraph of code as-:

as you can see that, though the things were similar as above, we had to think some differently right here.

we displayed the  clear screen as “c” and as the user clicks it, we will operate an operation ” i.e empty operation, which will clear the screen.

and after that, we created a button for 0, which was given the value=0.

after that, as we can see that, we created a “Equals to” button” but the code inside onclick may confuse you.

what we did there was an operation of evaluation.

and to do the operation of evaluation, we used the eval function right there.

so, finally, we created a divide button like that way.

final output will be like

so, this is how to create a calculator program in javascript ONLY. i know that this code looks dirty. but i have tried to use only JS here. i hope the code was easy, understandeable and explained well.

we will not stop with 1 project.

our mission is to create at least 10 projects in javascript. so, we will continue to make more projects in it.

this calculator was made by using the help of “eval”. in the future, we may even try to make calculator without using that function.

so, bye bye for this week….we will come again after 1 week….

stay conscious!stay wild!

Share this and have a good day!

Facebook

Be the first to comment

Leave a Reply

Your email address will not be published.


*