Skip to content

Commit 0bd35c3

Browse files
ken1000minus7ken1000minus7
authored
Merge pull request #77 from isaiahthedev/add-calculator-activity
Add calculator activity
2 parents fd22f9c + 92ce808 commit 0bd35c3

File tree

3 files changed

+303
-0
lines changed

3 files changed

+303
-0
lines changed

‎src/data/content.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import meme from "../assets/activities/meme.jpg"
1212
import numberblocs from "../assets/numberblocks.png"
1313
import wordleicon from "../assets/games/Wordle/wordlejpg.png"
1414
import flagger from "../assets/games/flag guess/flagger.png"
15+
import Calculator from "../pages/activities/Calculator"
1516

1617
export const activities = [
1718
{
@@ -48,6 +49,13 @@ export const activities = [
4849
icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
4950
urlTerm: "random-jokes",
5051
element: <RandomJoke />
52+
},
53+
{
54+
title: "Calculator",
55+
description: "A Simple Calculator",
56+
icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
57+
urlTerm: "calculator",
58+
element: <Calculator />
5159
}
5260
];
5361

‎src/pages/activities/Calculator.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import React from 'react';
2+
import "../../styles/pages/activities/calculator.css";
3+
4+
class Calculator extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
screenValue1: 0,
9+
}
10+
this.screenUpdate = this.screenUpdate.bind(this)
11+
}
12+
screenUpdate(a) {
13+
let r = '';
14+
let arr = [];
15+
let op = [];
16+
let temp = this.state.screenValue1.toString();
17+
if(a === "=") {
18+
console.log(temp)
19+
for (let j = 0; j < temp.length; j++) {
20+
if(temp[j] !== '/' && temp[j] !== 'x' && temp[j] !== '-' && temp[j] !== '+') {
21+
r = `${r}${temp[j]}`
22+
}
23+
else {
24+
op.push(temp[j])
25+
arr.push(r)
26+
r = ''
27+
}
28+
}
29+
console.log(arr)
30+
arr.push(r)
31+
if(arr[0] === '' && op[0] === '-') {
32+
arr[1]=`${op[0]}${arr[1]}`
33+
op.shift();
34+
arr.shift();
35+
}
36+
if(arr[0] === '') {
37+
arr[0] = 0
38+
}
39+
console.log(arr)
40+
r = '';
41+
for(let x1 = 0; x1 < arr.length; x1++) {
42+
arr[x1] = parseFloat(arr[x1])
43+
}
44+
console.log(arr)
45+
console.log(op)
46+
for(let x3 = 0; x3 < arr.length; x3++) {
47+
if(isNaN(arr[x3])) {
48+
arr[x3+1] = -arr[x3+1]
49+
arr.splice(x3, 1)
50+
op.splice(x3, 1)
51+
}
52+
}
53+
if(op.length === 0){
54+
return
55+
}
56+
for(let b = 0; b < op.length; b++) {
57+
if(op[b] === '/') {r = arr[0] / arr[1]; arr.shift(); arr[0] = r}
58+
if(op[b] === 'x') {r = arr[0] * arr[1]; arr.shift(); arr[0] = r}
59+
if(op[b] === '-') {r = arr[0] - arr[1]; arr.shift(); arr[0] = r}
60+
if(op[b] === '+') {r = arr[0] + arr[1]; arr.shift(); arr[0] = r}
61+
console.log(r)
62+
}
63+
console.log(r)
64+
if(this.state.screenValue1[0] === 0) {
65+
console.log('doin something funny')
66+
}
67+
r = r.toString()
68+
while(r.length > 15) {
69+
r = r.slice(0,-1)
70+
}
71+
this.setState ({
72+
screenValue1: r
73+
})
74+
return
75+
}
76+
if(a === 'clear') {
77+
this.setState ({
78+
screenValue1: 0
79+
})
80+
return
81+
}
82+
if(this.state.screenValue1.length === 15 || this.state.screenValue1 === 'Digit Limit Met!') {
83+
this.setState (state =>({
84+
screenValue1: 'Digit Limit Met!'
85+
}))
86+
return
87+
}
88+
if(a === '/' || a === 'x' || a === '-' || a === '+') {
89+
let x = this.state.screenValue1[this.state.screenValue1.length-1];
90+
if((a === '-' && x === '/') || (a === '-' && x === 'x') || (a === '-' && x === '+')) {
91+
x = this.state.screenValue1;
92+
this.setState ({
93+
screenValue1: `${x}${a}`
94+
})
95+
return;
96+
}
97+
if(x === '/' || x === 'x' || x === '-' || x === '+') {
98+
x = this.state.screenValue1;
99+
while(x[x.length-1] === '/' || x[x.length-1] === 'x' || x[x.length-1] === '-' || x[x.length-1] === '+') {
100+
x = x.slice(0,-1);
101+
}
102+
this.setState ({
103+
screenValue1: x
104+
})
105+
}
106+
}
107+
if(a === 0 && this.state.screenValue1 === 0) {
108+
this.setState ({
109+
screenValue1: 0
110+
})
111+
}
112+
else {
113+
if(this.state.screenValue1 === 0 && a !== '.') {
114+
this.setState ({
115+
screenValue1: a
116+
})
117+
return
118+
}
119+
if(a === '.' && temp.includes(".") === false) {
120+
this.setState (state =>({
121+
screenValue1: `${state.screenValue1}${a}`
122+
}))
123+
return
124+
}
125+
else if(a === '.') {
126+
let index = temp.length
127+
for(let h = index; h > 0; h--) {
128+
switch(temp[h]) {
129+
case '.': return;
130+
case '/': this.setState (state =>({
131+
screenValue1: `${state.screenValue1}${a}`
132+
}));
133+
return;
134+
case 'x': this.setState (state =>({
135+
screenValue1: `${state.screenValue1}${a}`
136+
}));
137+
return;
138+
case '-': this.setState (state =>({
139+
screenValue1: `${state.screenValue1}${a}`
140+
}));
141+
return;
142+
case '+': this.setState (state =>({
143+
screenValue1: `${state.screenValue1}${a}`
144+
}));
145+
return;
146+
default: return;
147+
}
148+
}
149+
return
150+
}
151+
if(a !== '.'){
152+
this.setState (state =>({
153+
screenValue1: `${state.screenValue1}${a}`
154+
}))
155+
}
156+
}
157+
}
158+
render() {
159+
return (
160+
<div id="calc-root">
161+
<div id="calc-background">
162+
{/*<img src="https://i.postimg.cc/9fJ8nJtr/Calculator.png"/>*/}
163+
<div id="calc-screen">
164+
<p id="display">{this.state.screenValue1}</p>
165+
</div>
166+
<div id="calc-buttons">
167+
<div onClick={() => this.screenUpdate('clear')} className="calc-btn lg-buttons grey-buttons" id="clear"><p>AC</p></div>
168+
<div onClick={() => this.screenUpdate('/')} className="calc-btn sm-buttons grey-buttons margin-left" id="divide"><p>/</p></div>
169+
<div onClick={() => this.screenUpdate('x')} className="calc-btn sm-buttons orange-buttons margin-left" id="multiply"><p>x</p></div>
170+
<div onClick={() => this.screenUpdate(7)} className="calc-btn sm-buttons grey-buttons margin-top" id="seven"><p>7</p></div>
171+
<div onClick={() => this.screenUpdate(8)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="eight"><p>8</p></div>
172+
<div onClick={() => this.screenUpdate(9)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="nine"><p>9</p></div>
173+
<div onClick={() => this.screenUpdate('-')} className="calc-btn sm-buttons orange-buttons margin-left margin-top" id="subtract"><p>-</p></div>
174+
<div onClick={() => this.screenUpdate(4)} className="calc-btn sm-buttons grey-buttons margin-top" id="four"><p>4</p></div>
175+
<div onClick={() => this.screenUpdate(5)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="five"><p>5</p></div>
176+
<div onClick={() => this.screenUpdate(6)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="six"><p>6</p></div>
177+
<div onClick={() => this.screenUpdate('+')} className="calc-btn sm-buttons orange-buttons margin-left margin-top" id="add"><p>+</p></div>
178+
<div onClick={() => this.screenUpdate(1)} className="calc-btn sm-buttons grey-buttons margin-top" id="one"><p>1</p></div>
179+
<div onClick={() => this.screenUpdate(2)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="two"><p>2</p></div>
180+
<div onClick={() => this.screenUpdate(3)} className="calc-btn sm-buttons grey-buttons margin-left margin-top" id="three"><p>3</p></div>
181+
<div onClick={() => this.screenUpdate('=')} className="calc-btn lg-button-vert orange-buttons margin-left margin-top" id="equals"><p>=</p></div>
182+
<div onClick={() => this.screenUpdate(0)} className="calc-btn lg-buttons grey-buttons" id="zero"><p>0</p></div>
183+
<div onClick={() => this.screenUpdate('.')} className="calc-btn sm-buttons grey-buttons margin-left" id="decimal"><p>.</p></div>
184+
</div>
185+
</div>
186+
</div>
187+
)
188+
}
189+
}
190+
191+
export default Calculator;

‎src/styles/pages/activities/calculator.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
#calc-root {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
padding-top: 100px;
6+
}
7+
#calc-background {
8+
height: 450px;
9+
width: 300px;
10+
border-radius: 15px;
11+
background-color: black;
12+
display: flex;
13+
flex-wrap: wrap;
14+
}
15+
#calc-screen {
16+
position: relative;
17+
margin: 0 auto;
18+
margin-top: 15px;
19+
height: 70px;
20+
width: 270px;
21+
border-radius: 15px;
22+
background-color: #2b3025;
23+
}
24+
#display {
25+
color: white;
26+
font-family: arial;
27+
position: absolute;
28+
top: 35px;
29+
right: 10px;
30+
font-size: 30px;
31+
z-index: 1;
32+
}
33+
#calc-buttons {
34+
position: relative;
35+
height: 340px;
36+
width: 270px;
37+
margin: 0 auto;
38+
display: flex;
39+
flex-wrap: wrap;
40+
align-content: flex-start;
41+
}
42+
.lg-buttons {
43+
height: 60px;
44+
width: 130px;
45+
border-radius: 50px;
46+
display: flex;
47+
}
48+
.lg-button-vert {
49+
height: 130px;
50+
width: 60px;
51+
border-radius: 50px;
52+
display: flex;
53+
}
54+
.sm-buttons {
55+
height: 60px;
56+
width: 60px;
57+
border-radius: 50%;
58+
display: flex;
59+
}
60+
.grey-buttons {
61+
background-color: #c6c6c6;
62+
}
63+
.orange-buttons {
64+
background-color: #ed9700;
65+
}
66+
.margin-left {
67+
margin-left: 10px;
68+
}
69+
.margin-top {
70+
margin-top: 10px;
71+
}
72+
#zero {
73+
position: absolute;
74+
top: 280px;
75+
}
76+
#decimal {
77+
position: absolute;
78+
top: 280px;
79+
left: 130px;
80+
}
81+
.calc-btn.lg-buttons p{
82+
font-family: arial;
83+
font-weight: bold;
84+
font-size: 25px;
85+
margin: auto;
86+
}
87+
.calc-btn.sm-buttons p{
88+
font-family: arial;
89+
font-weight: bold;
90+
font-size: 25px;
91+
margin: auto;
92+
}
93+
.calc-btn.lg-button-vert p{
94+
font-family: arial;
95+
font-weight: bold;
96+
font-size: 25px;
97+
margin: auto;
98+
}
99+
p {
100+
user-select: none;
101+
}
102+
.calc-btn:hover {
103+
border: 3px solid white;
104+
}

0 commit comments

Comments
 (0)