Topalian Calculation Suite by Christopher Topalian

Topalian
Calculation
Suite
by
Christopher Topalian
All Rights Reserved
Copyright 2000-2023
Dedicated
to
God the Father





<html>
<head>
<title> Topalian Calculation Suite </title>
<link rel = "stylesheet" href =

"css/style001.css">
<script src = "data/data001.js"></script>

<script>
function sortByCategoryAndType(whichArray,
whichDirection)
{
// ascending
if (whichDirection == "up")
{
whichArray.sort(function(a, b)
{
return
a.category.localeCompare(b.category) ||
a.type.localeCompare(b.type)
});
}
// descending
else if (whichDirection == "down")
{
whichArray.sort(function(b, a)
{
return
a.category.localeCompare(b.category) ||
a.type.localeCompare(b.type)
});
}
}
function createCalculator(whichItem,
whichAmount)
{
if (document.getElementById("mainDiv"))
{
document.getElementById("mainDiv").remove();
}
//----//
whichAmount =
calculationData[whichItem].amountOfTextBoxes;
//----//
let mainDiv = document.createElement("div");
mainDiv.className = "mainDivStyle";
mainDiv.id = "mainDiv";
document.body.append(mainDiv);
//----//
let titleOfCalculator =
document.createElement("div");
titleOfCalculator.className =
"titleOfCalculatorStyle";
titleOfCalculator.innerHTML = '<center>
'+calculationData[whichItem].name+' </center>';
titleOfCalculator.innerHTML += "<br>";
mainDiv.append(titleOfCalculator);
//----//
for (let x = 0; x < whichAmount; x++)

{
let textBox =
document.createElement("textarea");
textBox.id = x;
if (whichAmount == 1)
{
textBox.onkeyup = function()
{
let a =
document.getElementById(0).value;
document.getElementById("textBoxResult").valu
e = eval(calculationData[whichItem].expression);
};
}
{
{
let a =
let b =
};
}
{
{
let a =
let b =
let c =
};
}
mainDiv.append(textBox);
}
//----//
{
let titleTextBox =
titleTextBox.innerHTML =
calculationData[whichItem].textBoxOne;
mainDiv.insertBefore(titleTextBox,
document.getElementById(0));
}
{
let titleTextBox =
//----//
let titleTextBox2 =
titleTextBox2.innerHTML =
calculationData[whichItem].textBoxTwo;
mainDiv.insertBefore(titleTextBox2,
}
{
let titleTextBox =
//----//
let titleTextBox2 =
calculationData[whichItem].textBoxTwo;
//----//
let titleTextBox3 =
calculationData[whichItem].textBoxThree;
}
//----//
let textBoxResult =
document.createElement("textarea");
textBoxResult.id = "textBoxResult";
textBoxResult.placeholder = "Result";
window.onkeyup = function()
{
if
(document.getElementById("textBoxResult").val
ue == "NaN" ||
e == "Infinity")
{
e = "";
}
else if
(document.getElementById("textBoxResult").val
ue != "NaN" ||
e != "Infinity")
{
textResult.innerHTML = '
'+calculationData[whichItem].textBoxResult+' ';
}
}
mainDiv.append(textBoxResult);
//----//
let textResult =
textResult.innerHTML = '
'+calculationData[whichItem].textBoxResult+' ';
mainDiv.append(textResult);
//----//
if (document.getElementById("formulaText"))
{
document.getElementById("formulaText").remov
e();
}
let formulaText =
formulaText.className = "formulaTextStyle";
formulaText.id = "formulaText";
formulaText.innerHTML =
calculationData[whichItem].formula;
document.body.append(formulaText);
//----//
let expressionText =
expressionText.className =
"expressionTextStyle";
expressionText.innerHTML =
calculationData[whichItem].expression;
mainDiv.append(expressionText);
}
//----//
function createMenu()
{
if
(document.getElementById("menuMainDiv"))
{
document.getElementById("menuMainDiv").rem
ove();
}
let mainDiv = document.createElement("div");
mainDiv.className = "menuMainDivStyle";
mainDiv.id = "menuMainDiv";
document.body.append(mainDiv);
//----//
let minimizeButton =
document.createElement("button");
minimizeButton.className =
"menuButtonStyle";
minimizeButton.style.position = "absolute";
minimizeButton.style.left = 0 + "px";
minimizeButton.style.top = -22 + "px";
minimizeButton.innerHTML = "_";
minimizeButton.onclick = function()
{
// minimize the height of the div to show
only _ □
document.getElementById("menuSubDiv").style.
height = 0 + "px";
};
mainDiv.append(minimizeButton);
//----//
let maximizeButton =
maximizeButton.className =
"menuButtonStyle";
maximizeButton.style.position = "absolute";
maximizeButton.style.left = 30 + "px";
maximizeButton.style.top = -22 + "px";
maximizeButton.innerHTML = "□";
maximizeButton.onclick = function()
{
height = 300 + "px";
};
mainDiv.append(maximizeButton);
//----//
let subDiv = document.createElement("div");
subDiv.className = "menuSubDivStyle";
subDiv.id = "menuSubDiv";
subDiv.innerHTML = "<br>";
mainDiv.append(subDiv);
//----//
for (let x = 0; x < calculationData.length; x++)

{
let functionButton =
functionButton.className =
"menuButtonStyle";
functionButton.style.display = "flex";
functionButton.style.flexDirection = "row";
functionButton.innerHTML =
calculationData[x].name;
functionButton.id =
calculationData[x].name;
functionButton.onclick = function()
{
eval(""+calculationData[x].calculatorFunction+""
+ ";");
console.log(""+calculationData[x].calculatorFun
ction+"");
// make the unselected buttons the

original border color
for (let x = 0; x < calculationData.length;
x++)
{
document.getElementById(calculationData[x].na
me).style.borderColor = "rgb(100, 100, 100)";
}
// make the selected button appear

highlighted with an aqua border color
document.getElementById(calculationData[x].na
me).style.borderColor = "rgb(0, 255, 255)";
};
subDiv.append(functionButton);
height = 0 + "px";
}
}
function findIndexByName(whichArray,
whichName)
{
let index = whichArray.findIndex(function(a)
{
return a.name === whichName
});
return index;
}
function createTitleOfApplication()
{
let titleOfApplication =
titleOfApplication.className =
"titleOfApplicationStyle";
titleOfApplication.innerHTML = "<a href =
'https://github.com/christophertopalian' target =
'_blank'> Topalian Calculation Suite </a>";
document.body.append(titleOfApplication);
}
//----//
function whenLoaded()
{
sortByCategoryAndType(calculationData,
"up");
createMenu();
createCalculator(findIndexByName(calculationD
ata, "Addition"), 2);
createTitleOfApplication();
}
</script>
</head>
<body onload = "whenLoaded();">
</body>
</html>
/* Dedicated to God the Father */
/* All Rights Reserved Christopher Topalian

Copyright 2000-2023 */
/* https://github.com/ChristopherTopalian */
/* style001.css */
body
{
background-color: rgb(40, 40, 40);
font-family: arial;
font-size: 25px;
color: rgb(255, 255, 255);
}
textarea
{
width: 100%;
height: 40px;
padding-left: 10px;
border-radius: 4px;
font-size: 20px;
color: rgb(255, 255, 255);
line-height: 30px;
overflow: hidden;
resize: none;
}
br
{
margin-top: 3px;
margin-bottom: 3px;
display: block;
}
a
{
text-decoration: none;
}
a:link
{
color: rgb(255, 255, 255);
}
a:hover
{
color: rgb(0, 255, 255);
}
a:active
{
color: rgb(150, 200, 255);
}
a:visited
{
color: rgb(255, 255, 255);
}
.mainDivStyle
{
position: relative;
top: 10vh;
width: 25vw;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 12px;
border-style: solid;
border-width: 2px;
border-radius: 5px;
border-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.titleOfCalculatorStyle
{
font-size: 24px;
font-weight: bold;
}
.formulaTextStyle
{
position: absolute;
top: 4vh;
width: 99.5vw;
display: flex;
margin: auto;
font-size: 25px;
font-weight: bold;
}
.expressionTextStyle
{
position: absolute;
top: 60vh;
width: 70vw;
display: flex;
margin: auto;
font-size: 30px;
font-weight: bold;
}
.menuButtonStyle
{
padding: 9px;
margin: 1px;
border-style: solid;
border-width: 1px;
border-radius: 3px;
font-family: arial;
font-size: 14.5px;
font-weight: bold;
color: rgb(247, 247, 247);
text-align: center;
line-height: 0px;
}
.menuButtonStyle:hover
{
background: rgb(0, 0, 0);
}
.menuButtonStyle:active
{
position: relative;
top: 1px;
}
.menuMainDivStyle
{
position: fixed;
left: 0px;
top: 22px;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.4);
}
.menuSubDivStyle
{
min-width: 290px;
margin-left: auto;
margin-right: auto;
float: left;
overflow-y: auto;
resize: both;
}
.titleOfApplicationStyle
{
position: fixed;
right: 15px;
top: 5px;
font-size: 18px;
font-weight: bold;
}
// Dedicated to God the Father
// All Rights Reserved Christopher Topalian

Copyright 2000-2023
// https://github.com/ChristopherTopalian
// data001.js
let calculationData = [
{
name: "Addition",
formula: "Sum = a + b",
expression: "parseFloat(a) + parseFloat(b)",
calculatorFunction:
"createCalculator(findIndexByName(calculation
Data, 'Addition'));",
textBoxOne: "plus",
textBoxTwo: "equals",
textBoxResult: "Result",
amountOfTextBoxes: 2,
category: "arithmetic",
type: "simple"
},
{
name: "Addition of 3",
formula: "Sum = a + b + c",
expression: "parseFloat(a) + parseFloat(b) +
parseFloat(c)",
calculatorFunction:
Data, 'Addition of 3'));",
textBoxOne: "plus",
textBoxTwo: "plus",
textBoxThree: "equals",
type: "simple"
},
{
name: "Subtraction",
formula: "Difference = a - b",
expression: "a - b",
calculatorFunction:
Data, 'Subtraction'));",
textBoxOne: "minus",
type: "simple"
},
{
name: "Multiplication",
formula: "Product = a * b",
expression: "a * b",
calculatorFunction:
Data, 'Multiplication'));",
textBoxOne: "multiplied by",
type: "simple"
},
{
name: "Division",
formula: "Quotient = a / b",
expression: "a / b",
calculatorFunction:
Data, 'Division'));",
textBoxOne: "divided by",
type: "simple"
},
{
name: "Modulo",
formula: "Remainder = a % b",
expression: "a % b",
calculatorFunction:
Data, 'Modulo'));",
textBoxOne: "Dividend",
textBoxTwo: "Divisor",
textBoxResult: "Result Remainder",
type: "simple"
},
{
name: "Percent",
formula: "Percent = (a / b) * 100",
expression: "(a / b) * 100",
calculatorFunction:
Data, 'Percent'));",
textBoxOne: "is what % of",
textBoxTwo: "Total Value",
textBoxResult: "Result %",
category: "percent",
type: "simple"
},
{
name: "Rectangle Area",
formula: "Area = width * length",
expression: "a * b",
calculatorFunction:
Data, 'Rectangle Area'));",
textBoxOne: "Width",
textBoxTwo: "Length",
textBoxResult: "Result Area",
category: "geometry",
type: "rectangle"
},
{
name: "Square Area",
formula: "Area = a * a",
expression: "a * a",
calculatorFunction:
Data, 'Square Area'));",
textBoxOne: "Side",
type: "square"
},
{
name: "Circle Area from Radius",
formula: "Area = PI * radius^2",
expression: "Math.PI * Math.pow(a, 2)",
calculatorFunction:
Data, 'Circle Area from Radius'));",
textBoxOne: "Radius",
type: "circle"
},
{
name: "Circle Area from Diameter",
formula: "Area = PI * (diameter / 2)^2",
expression: "Math.PI * Math.pow((a / 2), 2)",
calculatorFunction:
Data, 'Circle Area from Diameter'));",
textBoxOne: "Diameter",
type: "circle"
},
{
name: "Circle Area from Circumference",
formula: "Area = (circumference^2) / (4 * PI)",
expression: "Math.pow(a, 2) / (4 * Math.PI)",
calculatorFunction:
Data, 'Circle Area from Circumference'));",
textBoxOne: "Circumference",
type: "circle"
},
{
name: "Circle Circumference from Diameter",
formula: "Circumference = PI * diameter",
expression: "Math.PI * a",
calculatorFunction:
Data, 'Circle Circumference from Diameter'));",
textBoxResult: "Result Circumference",
type: "circle"
},
{
name: "Circle Circumference from Radius",
formula: "Circumference = (2 * PI) * radius",
expression: "(2 * Math.PI) * a",
calculatorFunction:
Data, 'Circle Circumference from Radius'));",
type: "circle"
},
{
name: "Circle Circumference from Area",
formula: "Circumference = 2 * Square Root PI
* area",
expression: "2 * (Math.sqrt(Math.PI * a))",
calculatorFunction:
Data, 'Circle Circumference from Area'));",
textBoxOne: "Area",
type: "circle"
},
{
name: "Distance",
// distance = speed * time
formula: "Distance = (mph * minutes) / 60",
expression: "(a * b) / 60",
calculatorFunction:
Data, 'Distance'));",
textBoxOne: "Mph",
textBoxTwo: "Minutes",
textBoxResult: "Result Miles",
category: "speed time distance",
type: "distance"
},
{
name: "Speed",
// speed = distance / time
// feet to miles is feet * 0.000189394
// minutes to hours is minutes * 0.166667
formula: "Speed = (feet * 0.000189394) /
(minutes * 0.166667)",
expression: "(a * 0.000189394) / (b *
0.0166667)",
calculatorFunction:
Data, 'Speed'));",
textBoxOne: "Feet",
textBoxTwo: "Minutes",
textBoxResult: "Result Mph",
type: "speed"
},
{
name: "Time",
// time = distance / time
// feet to miles is feet * 000189394
// mph to mpm is mph * 0.0166667
formula: "Time = (feet * 0.000189394) / (b *
0.0166667)",
expression: "(a * 0.000189394) / (b *
0.0166667)",
calculatorFunction:
Data, 'Time'));",
textBoxOne: "Feet",
textBoxTwo: "MPH",
textBoxResult: "Result Minutes",
type: "time"
},
{
name: "Recatangle Perimeter",
formula: "Perimeter = (2 * a) + (2 * b);",
expression: "(2 * a) + (2 * b)",
calculatorFunction:
Data, 'Recatangle Perimeter'));",
textBoxOne: "Width",
textBoxTwo: "Length",
textBoxResult: "Result Perimeter",
type: "rectangle"
},
{
name: "Square Perimeter",
formula: "Perimeter = 4 * side",
expression: "4 * a",
calculatorFunction:
Data, 'Square Perimeter'));",
textBoxOne: "Side",
type: "square"
},
{
name: "Triangle Equilateral Perimeter",
formula: "Perimeter = 3 * side",
expression: "3 * a",
calculatorFunction:
Data, 'Triangle Equilateral Perimeter'));",
textBoxOne: "Side",
type: "triangle"
},
{
name: "Triangle Isosceles Perimeter",
formula: "Perimeter = (2 * a) + b",
expression: "(2 * parseFloat(a)) +
parseFloat(b)",
calculatorFunction:
Data, 'Triangle Isosceles Perimeter'));",
textBoxOne: "Leg",
textBoxTwo: "Base",
type: "triangle"
},
{
name: "Sphere Area from Radius",
formula: "Area = 4 * PI * radius^2",
expression: "4 * Math.PI * Math.pow(a, 2)",
calculatorFunction:
Data, 'Sphere Area from Radius'));",
type: "sphere"
},
{
name: "Sphere Radius from Diameter",
formula: "Radius = diameter / 2",
expression: "a / 2",
calculatorFunction:
Data, 'Sphere Radius from Diameter'));",
textBoxResult: "Result Radius",
type: "sphere"
},
{
name: "Sphere Volume from Radius",
formula: "Volume = (4 / 3 * Math.PI) *
Math.pow(radius, 3.0)",
expression: "(4 / 3 * Math.PI) * Math.pow(a,
3.0)",
calculatorFunction:
Data, 'Sphere Volume from Radius'));",
textBoxResult: "Result Volume",
type: "sphere"
},
{
name: "Celsius to Fahrenheit",
formula: "Fahrenheit = (celsius * 1.8) + 32",
expression: "(a * 1.8) + 32",
calculatorFunction:
Data, 'Celsius to Fahrenheit'));",
textBoxOne: "Celsius",
textBoxResult: "Result Fahrenheit",
category: "conversion",
type: "temperature"
},
{
name: "Fahrenheit to Celsius",
formula: "Celsius = 5 * (fahrenheit - 32) / 9;",
expression: "5 * (a - 32) / 9",
calculatorFunction:
Data, 'Fahrenheit to Celsius'));",
textBoxOne: "Fahrenheit",
textBoxResult: "Result Celsius",
type: "temperature"
},
{
name: "Decimal to Percent",
formula: "Percent = decimal * 100",
expression: "a * 100",
calculatorFunction:
Data, 'Decimal to Percent'));",
textBoxOne: "Decimal",
textBoxResult: "Result Percent",
type: "percent"
},
{
name: "Percent to Decimal",
formula: "Decimal = percent / 100",
expression: "a / 100",
calculatorFunction:
Data, 'Percent to Decimal'));",
textBoxOne: "Percent",
textBoxResult: "Result Decimal",
type: "percent"
},
{
name: "Mph to Kph",
formula: "Kph = mph * 1.60934",
expression: "a * 1.60934",
calculatorFunction:
Data, 'Mph to Kph'));",
textBoxOne: "Mph",
textBoxResult: "Result Kph",
type: "speed"
},
{
name: "Kph to Mph",
formula: "Mph = kph * 0.621371",
calculatorFunction:
Data, 'Kph to Mph'));",
textBoxOne: "Kph",
textBoxResult: "Result Mph",
type: "speed"
},
{
name: "Feet to Meter",
formula: "Meter = feet * 0.3048",
calculatorFunction:
Data, 'Feet to Meter'));",
textBoxOne: "Feet",
textBoxResult: "Result Meter",
type: "distance"
},
{
name: "Meter to Feet",
formula: "Feet = meters * 3.28084",
calculatorFunction:
Data, 'Meter to Feet'));",
textBoxOne: "Meter",
textBoxResult: "Result Feet",
type: "distance"
},
{
name: "Percent of Hour",
formula: "PercentOfHour = (minute * 100) /
60",
expression: "(a * 100) / 60",
calculatorFunction:
Data, 'Percent of Hour'));",
textBoxOne: "Minutes",
textBoxResult: "Result Percent of Hour",
category: "percent",
type: "time"
}
];
For More Tutorials:
CollegeOfScripting.weebly.com
CollegeOfScripting.wordpress.com
GitHub.com/ChristopherTopalian
Youtube.com/ScriptingCollege
Twitter.com/CollegeOfScript
Sites.google.com/view/
CollegeOfScripting
Dedicated to God the Father
This book is created by the
College of Scripting Music & Science.
Always remember, that each time you write a script with
a pencil and paper, it becomes imprinted so deeply in
memory that the material and methods are learned
extremely well.
When you Type the scripts, the same is true. The more
you type and write out the scripts by keyboard or pencil
and paper, the more you will learn programming!
Write and Type EVERY example that you find.

Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak It, See It, Dream It.
www.CollegeOfScripting.weebly.com

Topalian Calculation Suite by Christopher Topalian

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topalian Calculation Suite by Christopher Topalian

Uploaded by

Copyright:

Available Formats

Topalian

<!-- All Rights Reserved Christopher Topalian

<link rel = "stylesheet" href =

<script src = "data/data001.js"></script>

let mainDiv = document.createElement("div");

for (let x = 0; x < whichAmount; x++)

let mainDiv = document.createElement("div");

minimizeButton.style.top = -22 + "px";

maximizeButton.style.top = -22 + "px";

let subDiv = document.createElement("div");

for (let x = 0; x < calculationData.length; x++)

// make the unselected buttons the

// make the selected button appear

<body onload = "whenLoaded();">

/* All Rights Reserved Christopher Topalian

// All Rights Reserved Christopher Topalian

Write and Type EVERY example that you find.

You might also like