Geometry-Genius/index.html at main · MH-Rohan-JU/Geometry-Genius · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>

<body>
    <header>
        <h3 class="text-6xl m-10">Calculate Area of different shapes easily !</h3>
    </header>
    <main>
        <section class="container mx-auto grid lg:grid-cols-3">
            <!-- Triangle -->
            <div class="card">
                <div>
                    <img src="images/triangle.png" alt="Triangle" class="mx-auto h-64 mb-5">
                </div>
                <h2>Triangle</h2>
                <p>
                    Area (A) = 0.5 × b × h <br />
                    <span>b = <span id="inputBaseTriangle">4</span> cm h = <span id="inputHeightTriangle">6</span>
                        cm</span> <br>
                    <span>area = "<span id="areaResultTriangle">12</span>" cm <sup>2</sup></span>
                </p>

                <div class="form-group">
                    <label>Base (b)</label>
                    <input type="number" id="baseTriangle" placeholder="b cm">
                </div>

                <div class="form-group">
                    <label>Height (h)</label>
                    <input type="number" id="heightTriangle" placeholder="h cm">
                </div>

                <button class="calc-btn" onclick="areaCalculateTriangle()">Calculate</button>
            </div>
            <!-- Rectangle -->
            <div class="card">
                <div>
                    <img src="images/rectangle.png" alt="Triangle" class="mx-auto mb-5 h-64">
                </div>
                <h2>Rectangle</h2>
                <p>
                    Area (A) = b × h <br />
                    <span>b = <span id="inputBaseRectangle">4</span> cm h = <span id="inputHeightRectangle">6</span>
                        cm</span> <br>
                    <span>area = "<span id="areaResultRectangle">24</span>" cm <sup>2</sup></span>
                </p>

                <div class="form-group">
                    <label>Base (b)</label>
                    <input type="number" id="baseRectangle" placeholder="b cm">
                </div>

                <div class="form-group">
                    <label>Height (h)</label>
                    <input type="number" id="heightRectangle" placeholder="h cm">
                </div>

                <button class="calc-btn" onclick="areaCalculateRectangle()">Calculate</button>
            </div>
            <!-- Parallelogram -->
            <div class="card">
                <div>
                    <img src="images/parallelogram.png" alt="Triangle" class="mx-auto mb-5 h-64">
                </div>
                <h2>Parallelogram</h2>
                <p>
                    Area (A) = b × h <br />
                    <span>b = <span id="inputBaseParallelogram">4</span> cm h = <span
                            id="inputHeightParallelogram">6</span>
                        cm</span> <br>
                    <span>area = "<span id="areaResultParallelogram">24</span>" cm <sup>2</sup></span>
                </p>

                <div class="form-group">
                    <label>Base (b)</label>
                    <input type="number" id="baseParallelogram" placeholder="b cm">
                </div>

                <div class="form-group">
                    <label>Height (h)</label>
                    <input type="number" id="heightParallelogram" placeholder="h cm">
                </div>

                <button class="calc-btn" onclick="areaCalculateParallelogram()">Calculate</button>
            </div>
        </section>
        <!-- History Section -->
        <section class="container mx-auto m-10">
            <h2 class="text-6xl ">History</h2>
            <ul id="historyList" class="list-disc ml-5">
                <!-- History will be dynamically inserted here -->
            </ul>
        </section>

    </main>
    <footer></footer>

    <script src="index.js"></script>
</body>

</html>