Skip to content

Commit

Permalink
Merge pull request #4 from Tiago-Lelinski-Marin/add-events
Browse files Browse the repository at this point in the history 
Add calculation functionality to calculator

Improve styles
  • Loading branch information
@tiagomarin
tiagomarin committed Aug 18, 2022
2 parents b1f6d7a + d3d8910 commit 06fe265
Show file tree
Hide file tree
Showing 10 changed files with 334 additions and 58 deletions.
32 changes: 26 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"big.js": "^6.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
Expand Down
2 changes: 0 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Math Magician</title>
</head>

Expand Down
112 changes: 85 additions & 27 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,52 +41,110 @@ p {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20vh;
padding-top: 15vh;
margin: auto;
width: 70%;
}

.calculator-body {
border: 1px solid #7f7f7f80;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.1rem 0.3rem;
background-color: rgb(135, 135, 135);
border-radius: 18px;
max-width: 50rem;
}

.calc-title {
margin-bottom: 2rem;
align-self: center;
}

.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 50%;
width: 100%;
max-width: 50rem;
gap: 0.5rem;
padding: 1.7rem;
background-color: rgb(212, 212, 212);
border-radius: 16px;
-webkit-box-shadow: 0 0 5px 2px #3d3d3d inset;
-moz-box-shadow: 0 0 5px 2px #3d3d3d inset;
box-shadow: 0 0 12px 8px #3d3d3d8a inset;
transform: translate(10px, 5px);
}

.display {
grid-column: span 4;
padding: 1rem;
background-color: rgb(91, 91, 91);
text-align: right;
border-radius: 12px;
color: whitesmoke;
font-weight: bold;
font-size: 1.6rem;
line-height: 2rem;
box-shadow: 0 0 8px 4px rgb(71, 71, 71) inset;
}

.calculator :nth-child(18) {
grid-column: span 2;
}

.calculator :nth-child(5),
.calculator :nth-child(9),
.calculator :nth-child(13),
.calculator :nth-child(17),
.calculator :nth-child(20) {
background-color: orange;
/* other buttons */
.btn {
background: rgb(190, 190, 190);
border-radius: 12px;
cursor: pointer;
outline-offset: 4px;
box-shadow: 0 0 8px 4px rgb(212, 212, 212);
}

.calculator :nth-child(5):hover,
.calculator :nth-child(9):hover,
.calculator :nth-child(13):hover,
.calculator :nth-child(17):hover,
.calculator :nth-child(20):hover {
background-color: rgb(255, 195, 85);
.btn-front {
width: 100%;
display: block;
padding: 12px 0;
border: none;
border-radius: 12px;
font-size: 1.25rem;
background: rgb(220, 220, 220);
transform: translate(3px, 5px);
box-shadow: 0 0 8px 4px rgb(190, 190, 190) inset;
}

.input {
grid-column: span 4;
padding: 1rem;
background-color: rgb(180, 180, 180);
text-align: right;
.btn-front:hover {
background: rgb(230, 230, 230);
}

.btn {
padding: 1rem;
border: 1px solid rgb(170, 170, 170);
.btn:active .btn-front {
transform: translate(0);
}

.btn:hover {
background-color: aliceblue;
/* buttons on the right */
.calculator :nth-child(5),
.calculator :nth-child(9),
.calculator :nth-child(13),
.calculator :nth-child(17),
.calculator :nth-child(20) {
background-color: rgb(226, 147, 0);
}

.input:hover {
background-color: rgb(202, 202, 202);
.calculator :nth-child(5) .btn-front,
.calculator :nth-child(9) .btn-front,
.calculator :nth-child(13) .btn-front,
.calculator :nth-child(17) .btn-front,
.calculator :nth-child(20) .btn-front {
background-color: rgb(255, 182, 48);
box-shadow: 0 0 8px 4px rgb(226, 147, 0) inset;
}

.calculator :nth-child(5) .btn-front:hover,
.calculator :nth-child(9) .btn-front:hover,
.calculator :nth-child(13) .btn-front:hover,
.calculator :nth-child(17) .btn-front:hover,
.calculator :nth-child(20) .btn-front:hover {
background-color: rgb(255, 195, 85);
}
Binary file removed src/assets/Icon.jpg
View file
Binary file not shown.
0 src/assets/icon2.webp → src/assets/icon.webp
View file
File renamed without changes.
79 changes: 56 additions & 23 deletions src/components/Calculator.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,69 @@
import React from 'react';
import calculate from '../logic/calculate';

class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
total: 0,
next: null,
operation: null,
};
}

onClickHandler = (e) => {
const result = calculate(this.state, e.target.innerText);
this.setState(result);
};

render() {
const { total, next, operation } = this.state;

const display = () => {
if (!total && !next && operation) {
return `${total} ${operation}`;
}
if (total && next && operation) {
return `${total} ${operation} ${next}`;
}
if (total && operation) {
return `${total} ${operation}`;
}
if (next) {
return next;
}
if (total) {
return total;
}
return 0;
};

return (
<div id="calculator-placeholder" className="calculator-placeholder">
<h1>Tito&apos; Calculator</h1>
<div id="calculator" className="calculator">
<input type="text" name="input" className="btn input" id="input" />
<input type="button" className="btn" value="AC" />
<input type="button" className="btn" value="+/-" />
<input type="button" className="btn" value="%" />
<input type="button" className="btn operator" value="÷" />
<input type="button" className="btn" value="7" />
<input type="button" className="btn" value="8" />
<input type="button" className="btn" value="9" />
<input type="button" className="btn operator" value="x" />
<input type="button" className="btn" value="4" />
<input type="button" className="btn" value="5" />
<input type="button" className="btn" value="6" />
<input type="button" className="btn operator" value="-" />
<input type="button" className="btn" value="1" />
<input type="button" className="btn" value="2" />
<input type="button" className="btn" value="3" />
<input type="button" className="btn operator" value="+" />
<input type="button" className="btn" value="0" />
<input type="button" className="btn" value="." />
<input type="button" className="btn operator" value="=" />
<h2 className="calc-title">Tito&apos; Calculator</h2>
<div className="calculator-body">
<div id="calculator" className="calculator">
<div name="display" className="display" id="display">{display()}</div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">AC</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">+/-</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">%</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">÷</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">7</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">8</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">9</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">x</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">4</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">5</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">6</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">-</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">1</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">2</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">3</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">+</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">0</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">.</button></div>
<div className="btn"><button type="button" onClick={this.onClickHandler} className="btn-front">=</button></div>
</div>
</div>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgba(21, 154, 210, 0.661);
box-shadow: 0 0 12px 8px #3d3d3d8a inset;
height: 100vh;
}

code {
Expand Down

0 comments on commit 06fe265

Please sign in to comment.