Calculator

gibney.org : Technology : Javascript : Tools : Calculator

(Entry Nr. 296, by user 1 | edit)

<! ~ styles ~ ------------------------------------------------------------------>

<style>

form
{
 margin: 0;
}

.calculator
{
 width: 100%;
 height: 400px;
 border-collapse: collapse;
 height: 80%;
 margin: auto;
 margin-bottom: 2em;
}

.calculator .brick
{
 padding: 0;
 border: 1px solid #000000;
 width: 50%;
 vertical-align: top;
}

.calculator #in
{
 width: 100%;
 height: 99%;
 font-size: 150%;
 padding: 1em;
 border: 0;
 white-space: pre;
}

.calculator #out 
{
 font-family: monospace;
 height: 99%;
 font-size: 150%;
 padding: 1em;
 border: 0;
}

.calculator #out td
{
 font-family: monospace;
 height: 100%;
 font-size: 150%;
}

.calculator #out .negative
{
 color: #ff0000;
}

.calculator hr
{
 border: 0;
 border-top: 1px solid #e0e0e0;
 margin: 0px;
 margin-bottom: 5px;
 margin-top: 5px;
}

.bold
{
 font-weight: bold;
}

</style>

<! ~ HTML ~ ------------------------------------------------------------------>

<form id=CalcForm>
<table class=calculator><tr>
 <td class=brick><textarea id=in name=in wrap="off"></textarea></td>
 <td class=brick><div id=out></div></td>
</tr></table>
</form>
<div style="text-align: center">
Examples: 
<a href=# onClick="setInbox('/*%20%0A%20%20%20Let%27s%20do%20a%20simple%20calculation.%0A*/%0A%0A1+2%0A'); return false;">[1]</a>
| 
<a href=# onClick="setInbox('/*%0A%20%20%20Let%27s%20assign%20names%20to%20numbers%3A%0A*/%0A%0Acontainers%20%20%20%20%20%20%20%20%20%20%20%20%3D%2025%0A%0Abottles%20per%20container%20%3D%20600%0A%0Abold%3A%0Abottles%20%3D%20containers%20*%0A%20%20%20%20%20%20%20%20%20%20bottles%20per%20container%0A%0Aweight%20per%20bottle%20%3D%201.75%0A%0Aweight%20of%20the%20ship%20%3D%201250300%0A%0Abold%3A%0Aship%20with%20cargo%20%3D%20weight%20of%20the%20ship%20+%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%20per%20bottle%20*%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bottles%20+%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%20kilo%22%0A'); return false;">[2]</a>
| 
<a href=# onClick="setInbox('/*%0A%20%20%20Mathematical%20functions%20can%20be%0A%20%20%20used%20with%20the%20Math%20object%3A%20%0A%20%20%20Math.function%28number%29%0A%0A%20%20%20Some%20examples%3A%0A*/%0A%0ASin%20%20%20%3D%20Math.sin%281%29%0A%0APower%20%3D%20Math.pow%282%2C3%29%0A%0APi%20%20%20%20%3D%20Math.PI%0A%0A'); return false;">[3]</a>
| 
<a href=# onClick="setInbox('/*%0A%20%20Let%27s%20play%20around%20with%20adventurous%0A%20%20regular%20expressions%3A%0A*/%0A%0AText%20%20%20%20%3D%20%22Something%20cool%20and%20icy%21%22%0A%0AReg%20%20%20%20%20%3D%20/%5E.*%28c.*l%29.*%28i.*y%29.*%24/%0A%0AMatches%20%3D%20Text.match%28Reg%29'); return false;">[4]</a>
| 
<a href=# onClick="setInbox('/*%0A%0A%20Let%27s%20calculate%20and%20draw%20a%0A%20Mandelbrot%20Set.%0A%0A%20Click%20on%20%22Click%20Here%22%20on%20the%20right%0A%20to%20start%20the%20calculation.%0A%0A*/%0A%0AMandy%3D%22%3Ccanvas%20id%3Dcanvas%20width%3D300%20height%3D300%20style%3D%27border%3A%201px%20solid%20%23ff0000%27%3E%3C/canvas%3E%22%3B%0A%0AYou%20%3D%22%3Ca%20href%3D%23%20onClick%3D%27TheCalculator.draw%28%29%27%3EClick%20Here%3C/a%3E%22%3B%0A%0Afunction%20iteration%28cx%2Ccy%29%0A%7B%0A%20var%20bq%20%3D%200%3B%20%0A%20var%20i%20%20%3D%200%3B%0A%20var%20x%20%20%3D%200%3B%20%0A%20var%20y%20%20%3D%200%3B%0A%20%0A%20while%20%28%20bq%20%3C%204%20%26%26%20i%20%3C%2025%20%29%0A%20%7B%0A%20%20%20%20var%20xt%20%3D%20x%20*%20x%20-%20y%20*%20y%20+%20cx%3B%0A%20%20%20%20var%20yt%20%3D%202%20*%20x%20*%20y%20+%20cy%3B%0A%20%20%20%20x%20%3D%20xt%3B%0A%20%20%20%20y%20%3D%20yt%3B%0A%20%20%20%20i++%3B%0A%20%20%20%20bq%20%3D%20x%20*%20x%20+%20y%20*%20y%3B%0A%20%7D%0A%20return%20i%3B%0A%7D%0A%0ATheCalculator.drawLine%20%3D%20function%28%29%0A%7B%0A%20for%20%28var%20y%3D1%3By%3C300%3By+%3D1%29%0A%20%7B%0A%20%20var%20i%20%3D%2010*iteration%20%28this.x/100-2.2%2Cy/100-1.5%29%3B%0A%20%20this.ctx.fillStyle%20%3D%20%22rgb%28%22+i+%22%2C%20%22+i+%22%2C%20%22+i+%22%29%22%3B%0A%20%20this.ctx.fillRect%20%28this.x%2Cy%2C1%2C1%29%3B%0A%20%7D%0A%20this.x++%3B%0A%20if%20%28this.x%3C300%29%0A%20%20setTimeout%28%22TheCalculator.drawLine%28%29%22%2C10%29%3B%0A%7D%0A%0ATheCalculator.draw%20%3D%20function%28%29%0A%7B%0A%20this.canvas%20%3D%20document.getElementById%28%22canvas%22%29%3B%0A%20this.ctx%20%3D%20this.canvas.getContext%28%222d%22%29%3B%0A%20this.ctx.fillStyle%20%3D%20%22rgb%280%2C%200%2C%20100%29%22%3B%0A%20this.x%3D1%3B%0A%20this.drawLine%28%29%3B%0A%7D%0A'); return false;">[5]</a>
| 
<a href=# onClick="setInbox('html%3A%0A%0A%3Cstyle%3E%0A%20td%20%7B%20border%3A%201px%20solid%20black%20%7D%3B%0A%3C/style%3E%0A%0A%3Ctable%3E%0A%20%3Ctr%3E%0A%20%20%3Ctd%20rowspan%3D2%3E%0A%20%20%20hello%0A%20%20%3C/td%3E%0A%20%20%3Ctd%3EI%20am%20a%20Cell%3C/td%3E%0A%20%20%3Ctd%20style%3D%22background-color%3A%20yellow%22%3Eyellow%3C/td%3E%0A%20%3C/tr%3E%0A%20%3Ctr%3E%0A%20%20%3Ctd%20style%3D%22background-color%3A%20lightgreen%22%3Egreen%3C/td%3E%0A%20%20%3Ctd%3EI%20am%20a%20Cell%3C/td%3E%0A%20%3C/tr%3E%0A%3C/table%3E%0A%0A%3Ahtml%0A%0Apretty%20cool%20%3D%20%22hu%3F%22'); return false;">[6]</a>
| 
<a href=# onClick="setInbox('if%28%21document.getElementById%28%22Data1%22%29%29%0A%7B%0A%20stop%28%22Enable%20data%20mode%20to%20use%20this%20example%22%29%3B%0A%7D%0A%0Avar%20d%3Ddocument.getElementById%28%22Data1%22%29.value%3B%0A%0Ad%3Dd.replace%28/lol/g%2C%22laughing%20out%20loud%22%29%3B%0Ad%3Dd.replace%28/imo/g%2C%22in%20my%20opinion%22%29%3B%0Ad%3Dd.replace%28/ianal/g%2C%22i%20am%20not%20a%20lawyer%22%29%3B%0Ad%3Dd.replace%28/%28%5B%5Ea-zA-Z%5D%29u%28%5B%5Ea-zA-Z%5D%29/g%2C%22%241you%242%22%29%3B%0A%0Adocument.getElementById%28%22Data2%22%29.value%3Dd%3B%0A'); return false;">[7]</a>
Tools: 
<a href=# onClick="showDataWindow(); return false;">[data]</a>
|
<a href=# onClick="chat(); return false;">[chat]</a>
|
<a href=# onClick="bookmark(); return false;">[bookmark]</a>
</div>

<! ~ Javascript ~ ------------------------------------------------------------------>

function stop(Text)
{
 __out__=Text;
 throw new Error();
}

function setInbox(content)
{
 var Inbox = document.getElementById("in")
 Inbox.value=unescape(content);
 TheCalculator.inout.call(window.TheCalculator);
}

function showDataWindow()
{
 Data=document.getElementById("Data");
 if (Data) return;
 var out = document.getElementById("out")
 out.style.display="none"
 Data=document.createElement('textarea');
 Data.id="Data2"
 out.parentNode.insertBefore(Data,out.nextSibling);
 Data.style.border="0";
 Data.style.borderTop="1px solid #808080";
 Data.style.width="100%";
 Data.style.padding="1em";
 Data.style.height="50%";
 Data.onkeyup=function () {TheCalculator.inout.call(window.TheCalculator)};

Data=document.createElement('textarea');
 Data.id="Data1"
 out.parentNode.insertBefore(Data,out.nextSibling);
 Data.style.border="0";
 Data.style.width="100%";
 Data.style.padding="1em";
 Data.style.height="50%";
 Data.onkeyup=function () {TheCalculator.inout.call(window.TheCalculator)};
}

TheCalculator = new function() 
{
 // this is the constructor, but there is nothing to do.
};

TheCalculator.collectCrap = function()
{
 this.crap={};
 calctestorderidthrownintoglobal_forward   ="123";
 calctestorderidthrownintoglobal_backward="123";
 for (var member in window)
 {
  this.crap[member]=true;
  if (!this.objectorder)
  {
   if (member=="calctestorderidthrownintoglobal_forward") this.objectorder="forward";
   if (member=="calctestorderidthrownintoglobal_backward") this.objectorder="backward";
  }
 }
 this.crap['member']                = true;
 this.crap['addEventListener'] = true;
 this.crap['location']                 = true;
 this.crap['getInterface']          = true;
};

TheCalculator.trapCrap = function()
{
 if (typeof this.crap == "undefined") this.collectCrap();
 else for (var member in window) if(!this.crap[member]) delete(window[member]); 
}

// ----------------------------------------------------------------------------

TheCalculator.processOutput = function (value)
{
 Oout=document.getElementById("out");
 var simpleanswer=value;
 if (simpleanswer=="0") simpleanswer="0";
 var longanswer="";

if (simpleanswer<0) simpleanswer="<span class=negative>"+simpleanswer+"</span>";

for (member in window)
 {
  if (!this.crap[member])
  {
   var v=window[member];

var line = "should never be displayed";

if (typeof(v)=="object")
   {
     r="";
     for (vm in v)
     {
      r+=vm+" = "+v[vm]+"\<br>";
     }
     line="<table><tr><td style='vertical-align: top'>"+member.replace(/_/g," ")+": </td><td>"+r+"</td></tr></table><hr>";
   }
   else
   {
     // isFloat=/^(((\+|\-)?\d+(\.\d*)?)|((\+|\-)?(\d*\.)?\d+))$/
     // if (isFloat.test(v)) v=Math.round(v*100)/100;
    if (v<0) v="<span class=negative>"+v+"</span>";
    if (member=="invisible") line=v+"<hr>";
    else line=member.replace(/_/g," ")+" = "+v+"<hr>";
   }

if (this.MemberClassNames[member]=="bold") line="<b>"+line+"</b>";
   if (this.objectorder=="forward") longanswer=longanswer+line;
   else longanswer=line+longanswer;
  }
 }

var Answer = simpleanswer;
 if (longanswer) Answer=longanswer;
 
 if (Answer) Oout.innerHTML = Answer;
 
 if (typeof(__out__)!=="undefined")
 {
  if (__out__) Oout.innerHTML = __out__;
 }

}

// ----------------------------------------------------------------------------

TheCalculator.setClassName = function(LineNr,ClassName)
{
 var Line=this.CodeLines[LineNr];
 if (!Line && LineNr<this.CodeLines.length-1) 
 {
  LineNr++;
  Line=this.CodeLines[LineNr];
 }
 if (!Line) return;
 var member=Line.replace(/^\s*([a-zäöü ]*[a-zäöü0-9]).*/i,"$1");
 member=member.replace(this.Splaces,"$1_");
 this.MemberClassNames[member]=ClassName;
}

TheCalculator.createHtml = function(LineNr)
{
 // this.CodeLines[LineNr]="";
 invisible="";
 // LineNr++;
 var Line=this.CodeLines[LineNr];
 while (LineNr<this.CodeLines.length && Line!=":html")
 {
  this.CodeLines[LineNr]="";
  LineNr++;
  Line=this.CodeLines[LineNr];
  if (Line!=":html") invisible+=Line;
 }
 if (Line==":html") this.CodeLines[LineNr]="";
 return "";
}

// ----------------------------------------------------------------------------

TheCalculator.parseCodeLine = function(LineNr)
{
 var Line=this.CodeLines[LineNr];
 
 if (Line=="fett:" || Line=="bold:") return this.setClassName(LineNr+1,"bold");

if (Line=="html:") return this.createHtml(LineNr);

if (Line=="show errors:") show_errors=true;
 if (Line==":show errors") show_errors=false;

// Dont touch lines that looks like code:
 if (Line.match(/[(;]/)) return Line;

// spaces to underscores is easy if there are no tueddelchen:
 if (!Line.match(/"/)) return Line.replace(this.Splaces,"$1_");

// otherwise we need to parse the line:
 var TextMode=1;

var o=""
 var parts=Line.split("\"");

o+=parts[0].replace(this.Splaces,"$1_");

for (var i=1;i<parts.length;i++)
 {
  var part=parts[i];
  o+="\"";
  if (TextMode) o+=part;
  else o+=part.replace(this.Splaces,"$1_");
  TextMode^=1
 }

return o;
}

// ----------------------------------------------------------------------------

TheCalculator.parseCode = function(Code)
{
 var r ="";
 this.CodeLines=Code.split("\n");
 for (var LineNr=0;LineNr<this.CodeLines.length;LineNr++) r+=this.parseCodeLine(LineNr)+"\n";
 return r;
}

// ----------------------------------------------------------------------------

TheCalculator.inout = function ()
{
 // Spaces to Slashes:
 this.Splaces = /([a-zäöü0-9]) (?=[a-zäöü0-9])/gi;
 this.MemberClassNames = new Array();

Oin =document.getElementById("in");
 Oout=document.getElementById("out");
 
 if (!Oin.value)
 {
  Oout.innerHTML="";
  return;
 }

show_errors=false;
 this.trapCrap();
 var value="";
 this.Code=this.parseCode(Oin.value);
 var error=false;

try
 {
  value=eval(this.Code);
 }
 catch (e)
 {
  if (show_errors) __out__=e;
  error=true;
 }

if (error) Oout.style.color="#a0a0a0";
 else       Oout.style.color="#000000";

if (typeof value == "undefined" ) value="";
 
 this.processOutput(value);
}

Oin =document.getElementById("in");
Oin.onkeyup=function () {TheCalculator.inout.call(window.TheCalculator)};
ge_persistentFormdata_Restore();
TheCalculator.inout.call(window.TheCalculator);
Oin.focus();

// Bookmarking ---------------------------------------------------------------------------------------------------------

function bookmark()
{
 document.cookie = "bookmarknow=1; expires=; path=/";
 ge_persistentFormdata_MakePersistent();
 alert ("The current url now contains your calculation. Just bookmark it as any other page.");
}

</script>

Create a new entry at this position