Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anirban780
Anirban780 authored May 26, 2024
1 parent 921e158 commit 3cca358
Show file tree
Hide file tree
Showing 4 changed files with 324 additions and 0 deletions.
Binary file added img1.avif
View file
Binary file not shown.
77 changes: 77 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scientific Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="main-navbar">
<h2>Scientific Calculator</h2>
</nav>
<br>

<div class="Calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button class="button" id="b2" onclick="clear_display()">C</button>
<button class="button" id="b3" onclick="delete_last()">DEL</button>
<button class="button special" onclick="append_to_display('(')">(</button>

<button class="button special" onclick="append_to_display(')')">)</button>
<button class="button special" onclick="convert_to_fraction()">FRAC</button>
<button class="button special" onclick="append_to_display1('-')">-/+</button>

<button class="button special" onclick="append_to_display('√')">√</button>
<button class="button special" onclick="append_to_display('**2')">x²</button>
<button class="button special" onclick="append_to_display('**3')">x³</button>

<button class="button special" onclick="append_to_display('%')">mod</button>
<button class="button special" onclick="append_to_display('^')">x^y</button>
<button class="button special" onclick="applyFunction('abs')">|x|</button>

<button class="button special" onclick="append_to_display('log(')">log</button>
<button class="button special" onclick="append_to_display('ln(')">ln</button>
<button class="button" onclick="append_to_display('7')">7</button>

<button class="button" onclick="append_to_display('8')">8</button>
<button class="button" onclick="append_to_display('9')">9</button>
<button class="button special" id="o1" onclick="append_to_display('/')">/</button>


<button class="button special" onclick="append_to_display('sin(')">sin</button>
<button class="button special" onclick="append_to_display('cos(')">cos</button>
<button class="button" onclick="append_to_display('4')">4</button>

<button class="button" onclick="append_to_display('5')">5</button>
<button class="button" onclick="append_to_display('6')">6</button>
<button class="button special" id="o2" onclick="append_to_display('*')">*</button>

<button class="button special" onclick="append_to_display('tan(')">tan</button>
<button class="button special" onclick="append_to_Display('Math.PI')">π</button>
<button class="button" onclick="append_to_display('1')">1</button>

<button class="button" onclick="append_to_display('2')">2</button>
<button class="button" onclick="append_to_display('3')">3</button>
<button class="button special" id="o3" onclick="append_to_display('-')">-</button>

<button class="button special" onclick="applyFunction('ceil')">⌈x⌉</button>
<button class="button special" onclick="applyFunction('floor')">⌊x⌋</button>
<button class="button" onclick="append_to_display('0')">0</button>

<button class="button special" id="o4" onclick="append_to_display('.')">.</button>
<button class="button special" id="b1" onclick="calculate_result()">=</button>
<button class="button special" id="o5" onclick="append_to_display('+')">+</button>

</div>

</div>
<br>
<footer class="footer">
<h2>EasyCalc: Your Simple and Convenient Calculator Solution</h2>
<h4>Created by [email protected]</h4>
</footer>
<script src="script.js"></script>
</body>
</html>
153 changes: 153 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
function append_to_display(value){
document.getElementById('display').value+= value;
}

function append_to_display1(value){
document.getElementById('display').value= value + document.getElementById('display').value;
}

function clear_display(){
document.getElementById('display').value= '';
}

function delete_last(){
let display= document.getElementById('display').value;
document.getElementById('display').value= display.substring(0, display.length -1);
}

function calculate_result(){
let display= document.getElementById('display').value;
let dis= display.substring(0,4);
let dis2= display.substring(0,3);

try{
if(display.includes('sin'))
display = display.replace('sin', 'Math.sin');

else if(display.includes('cos'))
display = display.replace('cos', 'Math.cos');

else if(display.includes('tan'))
display = display.replace('tan', 'Math.tan');

else if(display.includes('log'))
display = display.replace('log', 'Math.log10');

else if(display.includes('ln'))
display = display.replace('ln', 'Math.log');

else if(display.includes('^'))
display = display.replace('^', '**');

else if(display.includes('√'))
display= display.replace('√', 'Math.sqrt');

document.getElementById('display').value= eval(display);
}
catch(e){
document.getElementById('display').value= 'Error!';
}

// Re-attach the event listener
attachKeyboardInputListener();
}

function convert_to_fraction(){
let val= document.getElementById('display').value;

if(val.includes('.'))
{
let decimal_part= val.split('.')[1];
let decimal_places= decimal_part.length;

let new_val= parseFloat(val).toFixed(4);
decimal_places= Math.min(4, decimal_places);

let num= new_val.replace('.', '');
let deno= Math.pow(10, decimal_places);

let gcd= function(a,b){
return b===0 ? a: gcd(b, a % b);
}

let divisor= gcd(num, deno);
num/= divisor;
deno/= divisor;

if(deno === 1)
document.getElementById('display').value= num;
else
document.getElementById('display').value= num+'/'+deno;
}
else
alert("ERROR! No fractional part");
}

function applyFunction(func){
let display= document.getElementById('display').value;
let result;

switch(func)
{
case 'ceil':
result= Math.ceil(parseFloat(display));
break;

case 'floor':
result= Math.floor(parseFloat(display));
break;

case 'abs':
result= Math.abs(parseFloat(display));
break;

case 'sin(':
result= Math.sin(parseFloat(display));
break;

default:
result= NaN;
break;
}

document.getElementById('display').value= result;
}

// Function to attach keyboard input listener
function attachKeyboardInputListener() {
document.addEventListener('keydown', handleKeyDown);
}

// Keyboard input functionality
function handleKeyDown(event) {
const display = document.getElementById('display');
const key = event.key;

if (event.target === document.body) {
if (key >= '0' && key <= '9') {
append_to_display(key);
} else if (key === '.') {
append_to_display(key);
} else if (key === '+' || key === '-' || key === '*' || key === '/' || key === '^') {
append_to_display(key);
} else if (key === 'Enter') {
event.preventDefault(); // Prevent the form from being submitted if inside a form
calculate_result();
} else if (key === 'Backspace') {
delete_last();
} else if (key === 'Escape') {
clear_display();
}
}
}

// Attach the initial event listener
attachKeyboardInputListener();

// Webpage buttons functionality
document.querySelectorAll('.calc-button').forEach(button => {
button.addEventListener('click', () => {
append_to_display(button.textContent.trim());
});
});

94 changes: 94 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
body{
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.885);
background-image: url(img1.avif);
margin: 0;
}

.main-navbar {
background-color: rgba(14, 198, 158, 0.8);
height: 70px;
padding-left: 10px;
text-align: left;
overflow: hidden;
color: white;
width: 100%;
font-size: 18px;
}

.Calculator{
display: flex;
justify-content: center;
flex-direction: column;
border: 2px solid rgba(0, 0, 0, 0.8);
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.7);
}

.display{
height: 80px;
text-align: right;
padding: 10px;
font-size: 2.5em;
border: 2px solid rgba(255, 255, 255, 0.849);
margin-bottom: 10px;
}

.buttons{
display: grid;
grid-template-columns: repeat(6, 10fr);
gap: 12px;
}

.button{
padding: 20px;
font-size: 1.2em;
cursor: pointer;
background: #eee;
border: none;
border-radius: 5px;
box-shadow: 0 2px #ddd;
}

.button:active{
box-shadow: none;
position: relative;
top: 2px;
}

.button.special{
background: #dfe6e9;
}

#b1, #b2, #b3{
background: rgb(251, 165, 7);
}

#o1, #o2, #o3, #o4, #o5, #b1{
font-size: 30px;
}

.button:hover{
background-color: rgb(117, 209, 245);
}

#b1:hover, #b2:hover, #b3:hover{
background-color: rgb(251, 89, 30);
}

.footer{
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
overflow: hidden;
}

0 comments on commit 3cca358

Please sign in to comment.