I am new to Javascript and HTML. I have written code for a calculator, so review my code and points out pros and cons in it.
(function ($) { var shiftflag = 0; var fontreducer = 0; $.fn.close = function () { $("#dragging").remove(); }; $.fn.calc = function () { this.remove(); $("body").append('<div><FORM NAME="calc"><TABLE BORDER=none><TR><TD><INPUT TYPE="text" NAME="input" Size="16" autofocus><br><INPUT TYPE="button" NAME="one" VALUE="1" ><INPUT TYPE="button" NAME="two" VALUE="2" ><INPUT TYPE="button" NAME="three" VALUE="3"><INPUT TYPE="button" NAME="plus" VALUE="+" ><br><INPUT TYPE="button" NAME="four" VALUE="4" ><INPUT TYPE="button" NAME="five" VALUE="5"><INPUT TYPE="button" NAME="six" VALUE="6" ><INPUT TYPE="button" NAME="minus" VALUE="-"><br><INPUT TYPE="button" NAME="seven" VALUE="7"><INPUT TYPE="button" NAME="eight" VALUE="8"><INPUT TYPE="button" NAME="nine" VALUE="9"><INPUT TYPE="button" NAME="times" VALUE="*"><br><INPUT TYPE="button" NAME="clear" VALUE="c"><INPUT TYPE="button" NAME="zero" VALUE="0"><INPUT TYPE="button" NAME="DoIt" VALUE="="><INPUT TYPE="button" NAME="div" VALUE="/"><br></TD></TR></TABLE></FORM></div>'); $("#dragging").draggable(); var finding = (document).getElementById("inputarea"); finding.setAttribute('autocomplete', 'off'); { currentfontsize = parseFloat($("#inputarea").css('font-size')); $(".calcinput").click(function () { var res = $(this).val(); var flag = 0; if (res === 'c') { flag = 1; calc.input.value = "0"; } if (res === '=') { var c = eval(calc.input.value); var text = document.getElementById("inputarea"); text.value = c; } else { if (calc.input.value == 0) { calc.input.value = res; } else calc.input.value += res; } if (flag === 1) { calc.input.value = '0'; } currentfontsize = parseFloat($("#inputarea").css('font-size')); funcc(); }); $("#calfields").keydown(function (e) { var b = e.keyCode; currentfontsize = parseFloat($("#inputarea").css('font-size')); if (b === 13 || b === 187) { e.preventDefault(); var c = eval(calc.input.value); var text = document.getElementById("inputarea"); text.value = c; } else { document.getElementById("inputarea").style.fontSize = 34; } if (b === 16) { shiftflag = 1; } if (b === 187 && shiftflag === 1) { calc.input.value += '+'; e.preventDefault(); shiftflag = 0; } else if (((b > 64 && b < 91) || (b === 192) || (b > 218 && b < 222))) { e.preventDefault(); } funcc(); });//This function is to reduce the font size if there is any overflow in the text box area function funcc() { console.log(($('#inputarea')[0].scrollWidth > $('#inputarea').innerWidth())); console.log(currentfontsize); if (($('#inputarea')[0].scrollWidth > $('#inputarea').innerWidth())) { if (fontreducer === 0 || currentfontsize === 34) { currentfontsize = currentfontsize - 5; fontreducer = 1; } else if (fontreducer == 1 && currentfontsize > 13) { currentfontsize = currentfontsize - 2; } else if (currentfontsize < 13) currentfontsize = currentfontsize + 0; $("#inputarea").css({ 'font-size': currentfontsize }); } return; }; }; }}(window.jQuery));function manipulate_and_display(arr, operator) { var loop; var str = ""; if (arr[0] === undefined) { calc.input.value = ""; } else { for (loop = 0; loop < arr.length - 1; loop++) { str = "" + str + "" + arr[loop] + "" + operator + ""; } str = str + "" + arr[arr.length - 1]; calc.input.value = eval(str); }}table { cell-padding border: 0px; cell-spacing border: 0px; border-color: darkgrey; color: 2px solid green;}.calcinput { height: 50px; font-size: 22px; width: 50px; color: black; padding: 2px; background-color: rgb(229, 236, 197); border-radius: 0px;}#ruler { visibility: hidden; white-space: nowrap;}#inputarea { text-align: left; bottom: 20px; height: 40px; font-size: 34px; width: 200px; border-radius: 10px; overflow: scroll;}#dragging { border: 2px solid green; width: 210px; height: 267px;}#rocorners2 { margin-top: 20px;}#calfields { border: 1px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><html><head> <script src="jquery.js"></script> <link href="calc.css" rel="stylesheet"> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="calc.js"></script></head><body> <h3>Calculator</h3> <input type=button Name="display" value="Calculator"> <input type=button name="Close" value="close Calc"> <span></span></body><script> $(document).ready(function () { $("#initialise").click(function () { var arr = new Array(); arr = [1, 2, 3, 4, 5]; $("#initialise").calc();// If we pass the array with values it can do the specified operation by the operator you have passed and display it in the text box of calculator. manipulate_and_display(arr, '*'); }); $("#closing_the_calc").click(function () { $("#closing_the_calc").close(); }); });</script></html>
1 Answer1
HTML
script elements are not allowed before thehtml or after thebody element (neither are any other elements for the matter) . Depending on how the scripts are written, they belong all inside thehead element, or preferably at the end of (but inside) thebody element.
All script should be in external files. So either out the "document ready" code also intocalc.js, or put it (together with the functionmanipulate_and_display) into a separate file.
JavaScript
manipulate_and_display
What exactly is the point ofmanipulate_and_display? It's name doesn't expain what it does and it doesn't seem to have anything to do with the calculator directly.
The variablecalc in it isn't defined anywhere I can find, but It works, so currently I'm assuming it's an implicit variable created by giving the calculator form the name "calc". Don't do that. Using implicit variables created from element IDs and names an out-of-date way to access them. Always get element references using DOM methods such asgetElementById() (or store them when creating elements and reuse the references).
You unnecessarily use empty strings when concatinating. This:
str = "" + str + "" + arr[loop] + "" + operator + "";could just as well be:
str = str + arr[loop] + operator;Plugin
The whole point of (jQuery) plugins is, that you can reuse the elements and used them in different pages, possibly even multiple times in the same web page. However you by doing things such as hardcoding IDs and having variables such asshiftflag in a higher scope so it can only exist once.
Speaking ofshiftflag: Don't use0/1 to represent booleans.
Defining a (separate) plugin with a generic name such asclose will overwrite (or be overwritten by) any other plugin that happens to have the same name.
In plugins you should allways assume that the jQuery object references multiple elements. You should either make sure it only contains one element, or better write your plugin so that it supports multiple elements by usingjQuery.each().
Generally check out jQuery's tutorial for basic plugin development:https://learn.jquery.com/plugins/basic-plugin-creation/
(There is much more, but I don't have the time right now. Maybe I can come back later.)
You mustlog in to answer this question.
Explore related questions
See similar questions with these tags.