javascript-calculator/shape.js at master · fullstuck/javascript-calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
"use strict";

// Declare Variable
const phi = Math.PI;

//------------------------------------------------------------------
// Function

const squareArea = (side) => side * side;
const squarePerimeter = (side) => side * 4;
const rectangleArea = (length, width) => length * width;
const rectanglePerimeter = (length, width) => (length * 2) + (width * 2);
const circleArea = (phi, radius) => phi * (radius * radius);
const circleCircumference = (phi, radius) => 2 * phi * radius;
const cubeArea = (side) => 6 * (side * side);
const cubeVolume = (side) => side * side * side;
const cylinderArea = (phi, radius, height) => 2 * phi * radius * (height + radius);
const cylinderVolume = (phi, radius, height) => phi * (radius * radius) * height;

const hideTextbox = () => {
    $("#textbox2").removeAttr("style").hide();
    $("#label2").removeAttr("style").hide();
};

const showTextbox = () => {
    $("#textbox2").show();
    $("#label2").show();
};

//------------------------------------------------------------------
// Implement DOM

$("#combobox").on("change", function () {
    const value = $("#combobox").val();
    switch (value) {
        case "rectangle":
            showTextbox();
            $("#label1").html("Length");
            $("#perimeter").html("Calculate Perimeter");
            break;
        case "square":
            hideTextbox();
            $("#label1").html("Side");
            $("#perimeter").html("Calculate Perimeter");
            break;
        case "circle":
            hideTextbox();
            $("#label1").html("Radius");
            $("#perimeter").html("Calculate Perimeter");
            break;
        case "cube":
            hideTextbox();
            $("#label1").html("Side");
            $("#perimeter").html("Calculate Volume");
            break;
        case "cylinder":
            showTextbox();
            $("#label1").html("Radius");
            $("#label2").html("Height");
            $("#perimeter").html("Calculate Volume");
            break;
    }
});

$("#area").on("click", function () {
    const value = $("#combobox").val();
    if (value === "rectangle") {
        const length = $('#textbox1').val();
        const width = $('#textbox2').val();
        $('#answer').val(rectangleArea(length, width));
    } else if (value === "square") {
        const side = $('#textbox1').val();
        $('#answer').val(squareArea(side));
    } else if (value === "circle") {
        const radius = $('#textbox1').val();
        $('#answer').val(circleArea(phi, radius));
    } else if (value === "cube") {
        const side = $('#textbox1').val();
        $('#answer').val(cubeArea(side));
    } else if (value === "cylinder") {
        const radius = $('#textbox1').val();
        const height = $('#textbox2').val();
        $('#answer').val(cylinderArea(phi, radius, height));
    } else {
        alert("Choose the shape first!");
    }
});

$("#perimeter").on("click", function () {
    var value = $("#combobox").val();
    if (value === "rectangle") {
        const length = $('#textbox1').val();
        const width = $('#textbox2').val();
        $('#answer').val(rectanglePerimeter(length, width));
    } else if (value === "square") {
        const side = $('#textbox1').val();
        $('#answer').val(squarePerimeter(side));
    } else if (value === "circle") {
        const radius = $('#textbox1').val();
        $('#answer').val(circleCircumference(phi, radius));
    } else if (value === "cube") {
        const side = $('#textbox1').val();
        $('#answer').val(cubeVolume(side));
    } else if (value === "cylinder") {
        const radius = $('#textbox1').val();
        const height = $('#textbox2').val();
        $('#answer').val(cylinderVolume(phi, radius, height));
    } else {
        alert("Choose the shape first!")
    }
});