// Created by Mrityunjay alert("This is the new version of one of my code '2D Claculator'.\n\n Whats new:-\n \n ● New figures added. \n ● SVG elements are added for every figure. \n\n This is my first ever code in which I use SVG elements, so if you like it please give a upvote and share your views in comment section below.") window.onload = function() { document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='none'; document.getElementById('k1').style.display='none'; document.getElementById('l1').style.display='none'; document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } //this function is use for dynamic dropdown function populate(s1,s2){ var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if(s1.value == "Circle"){ var optionArray = ["|","area|Area","circumference|Circumference"]; } else if (s1.value == ""){ var optionArray = ["|"] } else { var optionArray = ["|","area|Area","perimeter|Perimeter"]; } for (var option in optionArray){ var pair = optionArray[option].split ("|"); var newOption = document.createElement ("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } } //this fumction is used for showing up the formulas in the paragraph id=x function formula(){ var s1 = document.getElementById('slct1'); var s2 = document.getElementById('slct2'); if(s1.value == "Parallelogram" && s2.value == "area"){ x.innerHTML="Area = b×h"; y.innerHTML="b (Base)"; z.innerHTML="h (Height)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Parallelogram" && s2.value == "perimeter"){ x.innerHTML="Perimeter = 2(a+b)"; y.innerHTML="b (Base)"; z.innerHTML="a (Side)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Rectangle" && s2.value == "area"){ x.innerHTML="Area = l×w"; y.innerHTML="l (Length)"; z.innerHTML="w (Width)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Rectangle" && s2.value == "perimeter"){ x.innerHTML="Perimeter = 2(l+w)"; y.innerHTML="l (Length)"; z.innerHTML="w (Width)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Rhombus" && s2.value == "area"){ x.innerHTML="Area = (p×q)/2"; y.innerHTML="p (Diagonal)"; z.innerHTML="q (Digonal)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Rhombus" && s2.value == "perimeter"){ x.innerHTML="Perimeter = 4a"; y.innerHTML="a (Side)"; z.innerHTML=""; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Square" && s2.value == "area"){ x.innerHTML="Area = a²"; y.innerHTML="a (Side)"; z.innerHTML=""; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Square" && s2.value == "perimeter"){ x.innerHTML="Perimeter = 4a"; y.innerHTML="a (Side)"; z.innerHTML=""; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Circle" && s2.value == "area"){ x.innerHTML="Area = πr²"; y.innerHTML="r (Radius)"; z.innerHTML=""; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if (s1.value == "Circle" && s2.value == "circumference"){ x.innerHTML="Circumference = 2πr"; y.innerHTML="r (Radius)"; z.innerHTML=""; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if(s1.value == "Triangle" && s2.value == "area"){ x.innerHTML ="Area = (b×h)/2" y.innerHTML ="b (base)"; z.innerHTML ="h (height)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } else if(s1.value == "Triangle" && s2.value == "perimeter"){ x.innerHTML ="Perimeter = a+b+c"; y.innerHTML ="a (side1)"; z.innerHTML ="b (side2)"; k.innerHTML ="c (side3)"; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('k1').style.display='block'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; }else if(s1.value=="Trapezium" && s2.value=="area"){ x.innerHTML ="Area = [h×(a+b)]/2" y.innerHTML ="a (side1)"; z.innerHTML ="b (side2)"; k.innerHTML ="h (height)"; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('k1').style.display='block'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; }else if(s1.value=="Trapezium" && s2.value=="perimeter"){ x.innerHTML ="Perimeter = a+b+c+d" y.innerHTML ="a (side1)"; z.innerHTML ="b (side2)"; k.innerHTML ="c (side3)"; l.innerHTML ="d (side4)"; document.getElementById('k1').style.display='block'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('l1').style.display='block'; }else if(s1.value=="Kite" && s2.value=="area"){ x.innerHTML="Area = (p×q)/2"; y.innerHTML="p (Diagonal)"; z.innerHTML="q (Digonal)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; }else if(s1.value=="Kite" && s2.value=="perimeter"){ x.innerHTML="Perimeter = 2(l+w)"; y.innerHTML="l (Length)"; z.innerHTML="w (Width)"; k.innerHTML =""; l.innerHTML =""; document.getElementById('l1').style.display='none'; document.getElementById('z1').style.display='block'; document.getElementById('y1').style.display='block'; document.getElementById('k1').style.display='none'; } //This if statement is used for svg element if(s1.value=="Parallelogram" && s2.value=="area"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='block'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Parallelogram" && s2.value=="perimeter"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='block'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Rectangle"){ document.getElementById('rect').style.display='block'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Rhombus" && s2.value=="area"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='block'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Rhombus" && s2.value=="perimeter"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='block'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Square"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='block'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Triangle" && s2.value=="area"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='block'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Triangle" && s2.value=="perimeter"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='block'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Trapezium" && s2.value=="area"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='block'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Trapezium" && s2.value=="perimeter"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='block'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Kite" && s2.value=="area"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='block'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Kite" && s2.value=="perimeter"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='block'; document.getElementById('circle').style.display='none'; } else if(s1.value=="Circle"){ document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='block'; } } //this function is used for claculating the result function result(){ var s1 = document.getElementById('slct1'); var s2 = document.getElementById('slct2'); var y = y1.value; var z = z1.value; var k = k1.value; var l = l1.value; if (s1.value == "Parallelogram" && s2.value == "area") { var a = y*z; x.innerHTML="Area = "+ a +" sq.unit" } else if(s1.value == "Parallelogram" && s2.value == "perimeter") { var a = parseFloat(y)+parseFloat(z); var b = 2*a; x.innerHTML="Perimeter = "+b+" unit"; } else if (s1.value == "Rectangle" && s2.value == "area"){ var a = y*z x.innerHTML="Area = "+ a+" sq.unit"; } else if (s1.value == "Rectangle" && s2.value == "perimeter"){ var a = parseFloat(y)+parseFloat(z); var b = 2*a; x.innerHTML="Perimeter = "+b+" unit"; } else if (s1.value == "Rhombus" && s2.value == "area"){ var a = y*z; var b = a/2 x.innerHTML="Area = "+ b+" sq.unit"; } else if (s1.value == "Rhombus" && s2.value == "perimeter"){ var a = 4*y; x.innerHTML="Perimeter = "+a+" unit"; } else if (s1.value == "Square" && s2.value == "area"){ var a = y*y; x.innerHTML="Area = "+ a+" sq.unit"; } else if (s1.value == "Square" && s2.value == "perimeter"){ var a = 4*y; x.innerHTML="Perimeter = "+a+" unit"; } else if (s1.value == "Circle" && s2.value == "area"){ var a = 3.14 *y*y; x.innerHTML= "Area = "+a+" sq.unit"; } else if (s1.value == "Circle" && s2.value == "circumference"){ var a = 2*3.14 *y; x.innerHTML="Circumfrence = "+a+" unit"; }else if (s1.value == "Triangle" && s2.value == "area"){ var a = y*z var b = a/2 x.innerHTML="Area = "+ b+" sq.unit"; }else if(s1.value == "Triangle" && s2.value == "perimeter"){ var a = parseFloat(y)+parseFloat(z)+parseFloat(k); x.innerHTML = "Perimeter = "+a+" unit"; }else if(s1.value=="Trapezium" && s2.value=="area"){ var a = parseFloat(y)+parseFloat(z); var b = k*a; var c = b/2; x.innerHTML="Area = "+ c+" sq.unit"; }else if(s1.value=="Trapezium" && s2.value=="perimeter"){ var a = parseFloat(y)+parseFloat(z)+parseFloat(k)+parseFloat(l) x.innerHTML ="Perimeter = "+a+" unit" }else if(s1.value=="Kite" && s2.value=="area"){ var a = y*z; var b = a/2 x.innerHTML="Area = "+ b+" sq.unit"; }else if (s1.value =="Kite" && s2.value=="perimeter"){ var a = parseFloat(y)+parseFloat(z); var b = 2*a; x.innerHTML="Perimeter = "+b+" unit"; } } function rese(){ document.getElementById('z1').style.display='none'; document.getElementById('y1').style.display='none'; document.getElementById('k1').style.display='none'; document.getElementById('l1').style.display='none'; document.getElementById('rect').style.display='none'; document.getElementById('gramh').style.display='none'; document.getElementById('grama').style.display='none'; document.getElementById('rhomd').style.display='none'; document.getElementById('rhoms').style.display='none'; document.getElementById('squa').style.display='none'; document.getElementById('trih').style.display='none'; document.getElementById('tris').style.display='none'; document.getElementById('traph').style.display='none'; document.getElementById('traps').style.display='none'; document.getElementById('kited').style.display='none'; document.getElementById('kites').style.display='none'; document.getElementById('circle').style.display='none'; x.innerHTML = ""; y.innerHTML =""; z.innerHTML =""; k.innerHTML =""; l.innerHTML ="" slct1.value=""; slct2.value=""; }

2D Claculator (Version 2.1)