Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Thursday, April 19, 2018

Simple JavaScript code to design calculator

For creating a basic calculator in JavaScript, we use table structure, input type button, and JavaScript functions.


  • Input type button use is to take input from the user.
  • The table structure use is to create calculator structure.
  • Functions to evaluate the data.



Three simple functions to process all data

Script

1. element()
Which is used to read values from each button

function element(val){
document.getElementById('result').value+=val;
}


2. solve()
This function performs all arithmetic operations like(+,-,/,*)

function solve(){
var value1= document.getElementById('result').value;
let res = eval(value1);
document.getElementById('result').value=res;
}


3. clearElement()
Which is used to clear input value in the calculator 

function element(val){
document.getElementById('result').value+=val;
}

HTML


<body>
<div id='wrap'>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result" readonly></td>
<td><input type="button" value="C"  onClick="clearElement()"></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="element('1')"></td>
<td><input type="button" value="2" onClick="element('2')"></td>
<td><input type="button" value="3" onClick="element('3')"></td>
<td><input type="button" value="+" onClick="element('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="element('4')"></td>
<td><input type="button" value="5" onClick="element('5')"></td>
<td><input type="button" value="6" onClick="element('6')"></td>
<td><input type="button" value="-" onClick="element('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="element('7')"></td>
<td><input type="button" value="8" onClick="element('8')"></td>
<td><input type="button" value="9" onClick="element('9')"></td>
<td><input type="button" value="/" onClick="element('/')"></td>
</tr>
<tr>
<td><input type="button" value="*" onClick="element('*')"></td>
<td><input type="button" value="0" onClick="element('0')"></td>
<td><input type="button" value="." onClick="element('.')"></td>
<td><input type="button" value="=" onClick="solve()"></td>
</tr>
</table>
</div>
</body>

CSS


<style type="text/css">
body,html{
matgin:0px;
}
input[type="button"]{
border:none;
width:100%;
outline: none;
}
#wrap
{
margin:10%;
}
</style>



26 comments:

  1. Now it's very easy to designed calculator because code is available in this blog and if you want to learn seo and digital marketing then visit Seo Expert In Lahore

    ReplyDelete
  2. Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but instead of that, this is magnificent blog. A great read. I'll definitely be back.corporate gifts chennai

    ReplyDelete
  3. Тhis ԁеsіgn is ѕtelleг!
    Үou definіtely know hоw tο κеeρ а
    readеr entertaіnеd. Bеtween your wit аnd youг vidеoѕ, I
    wаs almost moved to start mу own blog (ωell,
    almost...HаHа!) Еxcellеnt jοb.
    ӏ гeаlly lοved ωhаt you hаd
    tο say, and more than that, how уou prеsentеd іt.
    Τoo сοol!Мy web-ѕiteSEO Services lahore

    ReplyDelete
  4. Thanks, The article was precise and up to the point on how a website can get more visits. I would want to refer this article to others too!
    Best SEO Services lahore

    ReplyDelete
  5. Nice...Its highly informative post. I really enjoyed reading. Thanks
    SEO Expert in Pakistan

    ReplyDelete
  6. You can definitely see your expertise in the work you write. The sector hopes for even more passionate writers like you who aren't afraid to mention how they believe. At all times go after your heart. online marketing course singapore

    ReplyDelete

  7. Wondering if you should go in and buy website traffic to help improve your website sales? Like chiropractic search engine optimization
    It doesn't matter whether you have a B2B website or are just looking to engage in more audience, we are sure you would want more visitors.

    An increased number of visitors will mean that you will be able to get more sales, and have better ROI - whether it is through sales or advertisements. A Good Web Traffic Can Help You. Buy website traffic and help your audience to read your content.

    You can definitely see your expertise in the work you write. The sector hopes for even more passionate writers like you who aren't afraid to mention how they believe.

    I certainly getting a charge out of each and every piece of it. It is an extraordinary site and pleasant offer. I need to much obliged. Great job! You all do an awesome blog, and have some extraordinary substance. Keep doing awesome!

    ReplyDelete
  8. Thanks for Sharing nice article keep up the good work & also we research SEO Company in Pakistan

    ReplyDelete
  9. Attractive component of content. I simply stumbled upon your wepost and in accession capital to assert that I acquire in fact loved account your post posts. Anyway I will be subscribing in your augment or even I success you get right of entry to consistently fast. Private Jet cost
    My brother recommended I may like this post. He was totally right. This put up truly made my day. You can not consider simply how much time I had spent for this information! Thank you!

    ReplyDelete
  10. awesome post full of information really interesting thanks for sharing
    SEO Company In Pakistan

    ReplyDelete
  11. Wow! I am very happy to read this. Actually Fantastic. I am also an expert in this topic so I can understand your hard work. Appreciate your sharing this best article. Digital marketing agency Noida

    ReplyDelete
  12. You can definitely see your expertise in the work you write. The world hopes for even more passionate writers like you who are not afraid to say how they believe. Always follow your heart. budget liveaboard

    ReplyDelete
  13. I like the valuable information you provide in your articles. I will bookmark your blog and check again here regularly. I'm quite certain I will learn many new stuff right here! Good luck for the next! responsive web development Singapore

    ReplyDelete
  14. Hey, you used to write fantastic, but the last several posts have been kinda boring… I miss your tremendous writings. Past few posts are just a little out of track! come on!best web hosting singapore

    ReplyDelete
  15. Thanks , I've just been looking for information approximately this subject for a while and yours is the best I've found out till now. However, what in regards to the conclusion? Are you certain concerning the source?
    singapore e commerce development

    ReplyDelete
  16. I like the helpful information you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I’ll learn a lot of new stuff right here! Best of luck for the next! pest control prices

    ReplyDelete
  17. I am continuously searching online for ideas that can aid me. Thank you! web design singapore price

    ReplyDelete
  18. I really appreciate this post. I’ve been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thanks again best private jets

    ReplyDelete
  19. Wow! This could be one particular of the most useful posts We've ever arrive across on this subject. Basically Excellent. I am also a specialist in this topic therefore I can understand your effort. wayanad resorts

    ReplyDelete
  20. Excellent blog here! Also your website loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol
    inbound marketing

    ReplyDelete
  21. Heya i am for the first time here. I found this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you helped me.
    client retention

    ReplyDelete

More Posts

FOLLOW