Skip to content

Commit fc4475e

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1769 from abhyuday1212/mybranch
Front-End-Project : Calculator
2 parents 9401bad + 5fda695 commit fc4475e

8 files changed

Lines changed: 1274 additions & 195 deletions

File tree

‎Projects/Calculator/README.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
# SCI-FI CALC
3+
4+
Sci-Fi Calc is a revolutionary scientific calculator that builds upon the standard calculator and takes it to the next level. This project aims to enhance the functionality of a basic calculator by incorporating advanced features like Inverse Trigonometric functions and Logarithmic functions. All the additional functions are conveniently accessible from the buttons section, making complex calculations a breeze.
5+
6+
7+
# New Features
8+
- Added Inverse Trigonometric functions: sin-1, cos-1, tan-1
9+
- Added Trigonometric functions: sin, cos, tan
10+
- Added Reciprocal Trigonometric functions: sec, cosec, cot
11+
- Added Exponential functions: x^y, x², ²√
12+
- Added Logarithmic functions: ln, log
13+
- Added Factorial function: x!
14+
- Added Parentheses support: (, )
15+
- Added Constants: e (Euler's number), 10^x (10 raised to the power x)
16+
- Added nth root function: y√x
17+
- Added Inverse function: 1/x
18+
- Many other additional functions to enhance the user's experience.
19+
20+
# Pre-requisites
21+
- Sci-Fi Calc should be opened in desktop site for mobiles to be used fluently.
22+
- For desktop page the site is made at 100% page view,so for a good experience make your default page size to 100% .
23+
24+
# Usage
25+
Sci-Fi Calc brings advanced mathematical functions to your fingertips, converting a standard calculator into a powerful scientific calculator. To make the most out of this enhanced tool, follow these usage guidelines:
26+
- All the values in " " {double quotes} are button so kindly press them according to assigned sequence
27+
28+
## Trigonometric Functions
29+
- For using trigonometric functions like sin, cos, tan, cot, sec, and cosec, first enter the desired value, and then press the corresponding function button to obtain the result.
30+
- Syntax : "Input Value" -> "Press the Trigo Function"
31+
32+
33+
## Inverse Trigonometric Functions
34+
- To calculate the inverse trigonometric functions (sin-1, cos-1, tan-1), input the value and then press the respective function button.
35+
- Syntax : "Input Value" -> "Press Inverse Trigo Function"
36+
37+
38+
## Exponential Function (x^y)
39+
- To perform the exponentiation operation (x^y), start by entering the base value (x). Then, press the function button "x^y" and provide the exponent value (y) followed by equal { = } button or {Ans} button to compute the result.
40+
- Syntax : "Input Value(1)" -> Press "x^y" -> "Input Value(2)" -> Press "=" or "Ans"
41+
42+
43+
## Special Functions - I
44+
- For the following functions (√x, 1/x, x!), input a number as the value of 'x', and then press the corresponding function to obtain the calculated result.
45+
- Syntax : "Input Value" -> "Press the above mentioned function"
46+
47+
48+
## Special Functions - II
49+
- For the following functions ( x^2, x^3 ), input a number as the value of 'x', and then press the corresponding function followed by equal { = } button or {Ans} button to obtain the calculated result.
50+
- Syntax : "Input Value" -> "Press the above mentioned function" -> Press "=" or "Ans"
51+
52+
53+
## logarithmic function
54+
- For the following functions ( ln, log), input a number than press the function
55+
- Syntax : "Input Value" -> "Press the above mentioned function"
56+
57+
58+
## Brackets Support
59+
- Sci-Fi Calc adheres to the BODMAS rule, allowing you to use parentheses for complex expressions and calculations.
60+
- Syntax : (2+3)*5=25
61+
62+
63+
## Power of 10 (10^x)
64+
- To calculate the value of 10 raised to the power of 'x', first enter the value of 'x', then press the "10^x" function button to get the result.
65+
- Syntax : "Input Value" -> "Press the above mentioned function"
66+
67+
68+
## Nth Root Function (y√x)
69+
- For the nth root function, first enter the value of 'y' (root), then press the "y√x" function button, and finally, provide the value of 'x' followed by equal { = } button or {Ans} button to compute the result.
70+
- Syntax : "Input Value(1)" -> Press "y√x" -> "Input Value(2)" -> Press "=" or "Ans"
71+
72+
73+
## Percentage Function
74+
- For the percentage function, first enter the value than enter percentage button than enter the other value and press equal to.
75+
- Its Like what percent of 2 contribute to total of a given number
76+
Ex- 2 % 8 = 25
77+
- Syntax : "Input Value(1)" -> Press "%" -> "Input Value(2)" -> Press "=" or "Ans"
78+
79+
# Demo
80+
- Demo Video
81+
https://github-production-user-asset-6210df.s3.amazonaws.com/115206840/255553683-15e265b2-ca25-4cc3-b485-38e9fe68c1a4.mp4
82+
83+
84+
# Screenshots
85+
![Final](https://user-images.githubusercontent.com/115206840/255554445-b80c1c40-7acd-45a3-b24e-10e1e0130519.png)
86+
87+
![Before](https://user-images.githubusercontent.com/115206840/253905921-7e839104-4dc0-48c9-9352-4c02bc5bc3ca.jpg)
88+
89+
90+
# Installation
91+
Clone the Github repository.
92+
! https://github.com/TusharKesarwani/Front-End-Projects.git
93+
94+
95+
# 🚀 About Me
96+
Hey folks! 👋 I'm Abhyuday Pratap Singh, a passionate technologist driven by the art of creating immersive and visually captivating web experiences.
97+
98+
99+
# 🔗 Contact Me
100+
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://linktr.ee/abhyuday12)
101+
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/abhyuday12/)

‎Projects/Calculator/img/Calculator.png‎

-1.28 MB
Binary file not shown.

‎Projects/Calculator/img/bg.jpg‎

3.19 MB
Loading

‎Projects/Calculator/img/icon.png‎

-280 KB
Binary file not shown.

‎Projects/Calculator/img/inew.png‎

225 KB
Loading

‎Projects/Calculator/index.html‎

Lines changed: 158 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,242 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>Calculator</title>
89
<link rel="stylesheet" href="style.css">
9-
<link rel="shortcut icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7qLE6v7zgvlwN9SlFr1STuhyFG-jAdl4ubA&usqp=CAU" type="image/x-icon">
10+
<link rel="shortcut icon"
11+
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7qLE6v7zgvlwN9SlFr1STuhyFG-jAdl4ubA&usqp=CAU"
12+
type="image/x-icon">
1013
</head>
14+
1115
<body>
12-
<section>
13-
<header>
16+
<div class="desktop-message">
17+
Please switch to the Mobile (with 382 px or more) or desktop version for a better experience.
18+
</div>
19+
20+
<section class="main">
21+
<header class="top">
1422
<nav>
15-
<img src="./img/icon.png" alt="This is logo" class="img_logo">
23+
<img src="img/inew.png" alt="This is logo" class="img_logo">
1624
<span class="header_title">
1725
Calculator
1826
</span>
1927
</nav>
2028
</header>
2129
<div class="container">
2230
<div id="topside"></div>
23-
<div id="screen">
24-
<div id="input"></div>
25-
<div id="result"></div>
31+
<p id=area></p>
32+
<p id=Answer>0</p>
33+
<div input id="screen">
34+
<div input id="input"></div>
35+
<div input id="result"></div>
2636
<div id="memory"></div>
2737
</div>
2838
<table>
29-
<tbody>
39+
<tbody id="calc">
40+
3041
<tr>
3142
<td class="main-buttons">
32-
<button type="button" class="light">mc</button>
43+
<button onclick="solve('sin')" class="light">sin</button>
3344
</td>
45+
3446
<td class="main-buttons">
35-
<button type="button" class="light">m+</button>
47+
<button onclick="solve('cos')" class="light">cos</button>
3648
</td>
49+
3750
<td class="main-buttons">
38-
<button type="button" class="light">m-</button>
51+
<button onclick="solve('tan')" class="light">tan</button>
3952
</td>
53+
54+
4055
<td class="main-buttons">
41-
<button type="button" class="light">mr</button>
56+
<button onclick="solve('sin-1')" class="m" id="inverse">sin-1</button>
4257
</td>
58+
59+
<td class="main-buttons">
60+
<button onclick="solve('cos-1')" class="m" id="inverse">cos-1</button>
61+
</td>
62+
63+
<td class="main-buttons">
64+
<button onclick="solve('tan-1')" class="m" id="inverse">tan-1</button>
65+
</td>
66+
67+
<td class="main-buttons">
68+
<button onclick="solve('p')" class="twodig">%</button>
69+
</td>
70+
4371
</tr>
72+
4473
<tr>
4574
<td class="main-buttons">
46-
<button type="button" class="light">C</button>
75+
<button onclick="solve('sec')" class="gery">sec</button>
76+
</td>
77+
78+
<td class="main-buttons">
79+
<button onclick="solve('cosec')" class="gery">cosec</button>
80+
</td>
81+
82+
<td class="main-buttons">
83+
<button onclick="solve('cot')" class="gery">cot</button>
4784
</td>
85+
4886
<td class="main-buttons">
49-
<button type="button" class="light">/</button>
87+
<button onclick="ac()" id="clear" class="ac">C</button>
5088
</td>
89+
5190
<td class="main-buttons">
52-
<button type="button" class="light">x</button>
91+
<button onclick="divmul('mult')" class="twodig">*</button>
5392
</td>
93+
5494
<td class="main-buttons">
55-
<button type="button" class="light">⌫</button>
95+
<button onclick=" divmul('div')" class="twodig">/</button>
5696
</td>
97+
98+
<td class="main-buttons">
99+
<button onclick="del()" class="ac">⌫</button>
100+
</td>
101+
57102
</tr>
103+
58104
<tr>
59105
<td class="main-buttons">
60-
<button type="button" class="white">7</button>
106+
<button onclick="power(inputValue)" class="light">x^y</button>
107+
61108
</td>
109+
62110
<td class="main-buttons">
63-
<button type="button" class="white">8</button>
111+
<button onclick="power(inputValue)" class="light">x²</button>
64112
</td>
113+
65114
<td class="main-buttons">
66-
<button type="button" class="white">9</button>
115+
<button onclick="squareRoot()" onclick="power(inputValue)" class="light">x³</button>
67116
</td>
117+
68118
<td class="main-buttons">
69-
<button type="button" class="light">-</button>
119+
<button onclick="input('7')" class="white">7</button>
70120
</td>
121+
122+
<td class="main-buttons">
123+
<button onclick="input('8')" class="white">8</button>
124+
</td>
125+
126+
<td class="main-buttons">
127+
<button onclick="input('9')" class="white">9</button>
128+
</td>
129+
130+
<td class="main-buttons">
131+
<button onclick="input('-')" class="twodig">-</button>
132+
</td>
133+
71134
</tr>
135+
72136
<tr>
73137
<td class="main-buttons">
74-
<button type="button" class="white">4</button>
138+
<button onclick="naturalLog()" class="gery">ln</button>
139+
</td>
140+
141+
<td class="main-buttons">
142+
<button onclick="log()" class="gery">log</button>
143+
</td>
144+
145+
<td class="main-buttons">
146+
<button onclick="factorial()" class="gery">x!</button>
147+
</td>
148+
149+
<td class="main-buttons">
150+
<button onclick="input('4')" class="white">4</button>
75151
</td>
152+
76153
<td class="main-buttons">
77-
<button type="button" class="white">5</button>
154+
<button onclick="input('5')" class="white">5</button>
78155
</td>
156+
79157
<td class="main-buttons">
80-
<button type="button" class="white">6</button>
158+
<button onclick="input('6')" class="white">6</button>
81159
</td>
160+
82161
<td class="main-buttons">
83-
<button type="button" class="light">+</button>
162+
<button onclick="input('+')" class="twodig">+</button>
84163
</td>
164+
85165
</tr>
86-
<tr>
166+
167+
<tr class="tr5">
168+
<td class="main-buttons">
169+
<button onclick="input('(')" class="light">(</button>
170+
</td>
171+
172+
<td class="main-buttons">
173+
<button onclick="input(')')" class="light">)</button>
174+
</td>
175+
87176
<td class="main-buttons">
88-
<button type="button" class="white">1</button>
177+
<button onclick="squareRoot()" class="light">²√</button>
89178
</td>
179+
180+
90181
<td class="main-buttons">
91-
<button type="button" class="white">2</button>
182+
<button class="white" onclick="input('1')">1</button>
92183
</td>
184+
93185
<td class="main-buttons">
94-
<button type="button" class="white">3</button>
186+
<button class="white" onclick="input('2')">2</button>
95187
</td>
188+
189+
<td class="main-buttons">
190+
<button onclick="input('3')" class="white">3</button>
191+
</td>
192+
96193
<td class="main-buttons" rowspan="2">
97-
<button type="button" class="light" id="equals">=</button>
194+
<button onclick="equal()" id="equal">=</button>
195+
98196
</td>
99197
</tr>
100-
<tr>
198+
199+
200+
<tr class="tr6">
201+
202+
<td class="main-buttons">
203+
<button id="btn-power" class="gery">10^x</button>
204+
205+
</td>
206+
207+
<td class="main-buttons">
208+
<button id="degree-button" class="gery" onclick="toggleMode()">y√x</button>
209+
</td>
210+
211+
<td class="main-buttons">
212+
213+
<button class="gery">1/x</button>
214+
215+
</td>
216+
101217
<td class="main-buttons">
102-
<button type="button" class="white">%</button>
218+
<button onclick="ans()" class="twodig">Ans</button>
103219
</td>
220+
104221
<td class="main-buttons">
105-
<button type="button" class="white">0</button>
222+
<button onclick="input('0')" class="white">0</button>
106223
</td>
224+
107225
<td class="main-buttons">
108-
<button type="button" class="white">.</button>
226+
<button onclick="input('.')" class="twodig">.</button>
109227
</td>
228+
110229
</tr>
230+
231+
111232
</tbody>
233+
112234
</table>
113235
</div>
114236
</section>
115-
237+
238+
116239
<script src="js/script.js"></script>
117240
</body>
241+
118242
</html>

0 commit comments

Comments
 (0)