Skip to content

Improved the project by adding new features and fixes #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shashidharGayakawad wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improved the project by adding new features and fixes #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 111 additions & 54 deletions Calculator/cal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,121 @@
body{
background-image: url(c10.jpg);
background-repeat: no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
background-position: center;
background-size: cover;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e0e3eb; /* Light grey background */
/* Optional: Keep the background image if desired, but a clean look is better for "realistic" usually.
Let's use a subtle gradient or the original image if it was good, but I'll stick to a clean modern background. */
background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
}
button{
width: 200px;
height: 50px;
margin: 2px 2px;
background-color: blue;
color: #fff4a7;

.calculator {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5);
border-radius: 20px;
font-weight: bolder;
font-style: italic;
font-size: larger;
padding: 20px;
width: 350px;
}
#outside{
color: white;
border-radius: 5px;
margin: auto;
margin-top: 100px;
width: 1000px;
height: 600px;
padding: 5px;

.screen {
background: #000;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}
#heading{
margin: auto;
width: 412px;
font-size: xxx-large;

.operation-display {
color: rgba(255, 255, 255, 0.6);
font-size: 1.2rem;
min-height: 24px;
word-wrap: break-word;
word-break: break-all;
}
#btn{
margin: auto;
margin-top: 20px;
width: 815px;

.result-display {
color: #fff;
font-size: 2.5rem;
font-weight: 600;
word-wrap: break-word;
word-break: break-all;
}
.btn-inside{
width: 900px;

.buttons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
#val{
/* border: 2px solid red; */
height: 55px;
width: 783px;
margin-left: 100px;
color: white;
padding-left: 37px;
padding-top: 20px;
font-weight: bolder;

.btn {
border: none;
outline: none;
height: 60px;
width: 60px;
border-radius: 50%; /* Rounded buttons */
font-size: 1.2rem;
font-weight: 500;
cursor: pointer;
transition: 0.2s ease;
background: #333;
color: #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
-2px -2px 5px rgba(255, 255, 255, 0.1);
}
#res{
/* border: 2px solid red; */
height: 50px;
width: 783px;
margin-left: 100px;
color: white;
padding-left: 37px;
padding-top: 25px;
font-weight: bolder;
font-size: x-large;

.btn:active {
transform: scale(0.95);
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3),
inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* Number buttons */
.btn-number {
background: #333;
}

/* Operator buttons */
.btn-operator {
background: #ff9f0a; /* Orange like iOS */
color: #fff;
}

/* Clear/Delete buttons */
.btn-clear, .btn-delete {
background: #a5a5a5; /* Light grey like iOS */
color: #000;
}

/* Equal button */
.btn-equal {
background: #34c759; /* Green */
color: #fff;
grid-column: span 1; /* Keep it single for now to match grid */
}

.btn-zero {
grid-column: span 2;
width: 100%;
border-radius: 30px; /* Pill shape for zero */
text-align: left;
padding-left: 25px;
}


69 changes: 33 additions & 36 deletions Calculator/cal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -10,42 +15,34 @@
</head>

<body>
<div id="outside">
<h1 id="heading">🖩CALCULATOR🖩</h1>
<div>
<div>
<h1 id="val"> </h1>
</div>
<div>
<p id="res"></p>
</div>
<div id="btn">
<div class="btn-inside">
<button onclick="adder('1')">1</button>
<button onclick="adder('2')">2</button>
<button onclick="adder('3')">3</button>
<button onclick="adder('*')">*</button>
</div>
<div class="btn-inside">
<button onclick="adder('4')">4</button>
<button onclick="adder('5')">5</button>
<button onclick="adder('6')">6</button>
<button onclick="adder('+')">+</button>
</div>
<div class="btn-inside">
<button onclick="adder('7')">7</button>
<button onclick="adder('8')">8</button>
<button onclick="adder('9')">9</button>
<button onclick="adder('-')">-</button>
</div>
<div class="btn-inside">
<button onclick="clearer()">C</button>
<button onclick="adder('0')">0</button>
<button onclick="compute(1)">=</button>
<button onclick="adder('/')">/</button>
</div>
<button onclick="adder('.')">.</button>
</div>
<div class="calculator">
<div class="screen">
<div id="val" class="operation-display"></div>
<div id="res" class="result-display">0</div>
</div>
<div class="buttons-grid">
<button class="btn btn-clear" onclick="clearer()">AC</button>
<button class="btn btn-operator" onclick="adder('/')">÷</button>
<button class="btn btn-operator" onclick="adder('*')">×</button>
<button class="btn btn-delete" onclick="backspace()">⌫</button>

<button class="btn btn-number" onclick="adder('7')">7</button>
<button class="btn btn-number" onclick="adder('8')">8</button>
<button class="btn btn-number" onclick="adder('9')">9</button>
<button class="btn btn-operator" onclick="adder('-')">-</button>

<button class="btn btn-number" onclick="adder('4')">4</button>
<button class="btn btn-number" onclick="adder('5')">5</button>
<button class="btn btn-number" onclick="adder('6')">6</button>
<button class="btn btn-operator" onclick="adder('+')">+</button>

<button class="btn btn-number" onclick="adder('1')">1</button>
<button class="btn btn-number" onclick="adder('2')">2</button>
<button class="btn btn-number" onclick="adder('3')">3</button>
<button class="btn btn-equal" onclick="compute(1)">=</button>

<button class="btn btn-number btn-zero" onclick="adder('0')">0</button>
<button class="btn btn-number" onclick="adder('.')">.</button>
</div>
</div>
<script src="cal.js"></script>
Expand Down
66 changes: 33 additions & 33 deletions Calculator/cal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
let valEl = document.getElementById("val")
let resEl = document.getElementById("res")

let calculation = ""; // Internal string for eval

function updateDisplay() {
// Replace * with ×, / with ÷ for display
let displayString = calculation.replace(/\*/g, '×').replace(/\//g, '÷');
valEl.innerText = displayString;
}

function clearer(){
valEl.innerText = ""
resEl.innerText = ""
calculation = "";
valEl.innerText = "";
resEl.innerText = "0";
}

function backspace() {
calculation = calculation.slice(0, -1);
updateDisplay();
}

function adder(k){
valEl.innerText += k
if(k=='*' || k=='+' || k=='-' || k=='/'){
compute(0)
}
calculation += k;
updateDisplay();
}
function compute(is){
let temp = valEl.innerText, i
let t = temp[temp.length-1];
for(i=0;i<temp.length-1;i++){
if((temp[i]=='*' || temp[i]=='+' || temp[i]=='-' || temp[i]=='/') && i!=0){
break;
}
}
if(i!=temp.length-1){
let part1 = parseFloat(temp.substring(0,i));
let part2 = parseFloat(temp.substring(i+1));
let k5 = temp[i];
if(k5=='+'){
resEl.innerText = (part1)+(part2);
}else if(k5=='-'){
resEl.innerText = (part1)-(part2);
}else if(k5=='*'){
resEl.innerText = (part1)*(part2);
}else{
resEl.innerText = (part1)/(part2);

function compute(isFinal){
if(!calculation) return;
try {
let result = eval(calculation);
resEl.innerText = result;
if(isFinal) {
// Optional: reset calculation to result?
// calculation = result.toString();
// updateDisplay();
// But usually we want to see the history until we type again.
}
resEl.innerText = '= ' + resEl.innerText
if(!is){
valEl.innerText = resEl.innerText + t
if(valEl.innerText[0] == '='){
valEl.innerText = valEl.innerText.substring(1)
}
}
} catch (e) {
resEl.innerText = "Error";
}
}