console.clear()
class Calculator extends React.Component {
constructor(props) {
super(props)
this.state = {
input: [],
tempInput: [],
output: ["0"],
hasComma: false,
operator: null,
negativeOperator: false
}
this.getButtonValue = this.getButtonValue.bind(this)
this.setOperator = this.setOperator.bind(this)
this.equate = this.equate.bind(this)
}
equate() {
const { input, output, operator, tempInput } = this.state
this.setState({
input: [eval(input.join("") + operator + tempInput.join("")).toString()],
tempInput: [],
operator: null,
output: [eval(input.join("") + operator + tempInput.join("")).toString()]
}, () => console.log("state", this.state))
}
// 3 + 5 * 6 - 2 / 4
clear() {
// Set state back to initial state
this.setState({
input: [],
tempInput: [],
output: ["0"],
hasComma: false,
operator: null,
negativeOperator: false
})
}
setOperator(event) {
const { tempInput, input, output, operator, negativeOperator } = this.state
if (!this.state.input.length && event.target.textContent == "-") {
// If input is empty, and operator is "-"
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent],
negativeOperator: true
}, () => console.log("state", this.state))
} else if (event.target.textContent === "-" && !operator && !negativeOperator) {
// If an operation is started, init a negative number
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent],
negativeOperator: true
}, () => console.log("state minush", this.state))
} else if (event.target.textContent !== "-") {
// If the operator is not minus, set the operator as usual
this.setState({
// set x value to *, else set the others as normal
operator: event.target.textContent === "x" ? "*" : event.target.textContent
}, () => console.log("state", this.state))
} else if (negativeOperator && event.target.textContent === "-") {
this.setState({
operator: event.target.textContent
}, () => console.log("state", this.state))
} else if (!negativeOperator && operator !== '-' && event.target.textContent === "-") {
this.setState({
operator: event.target.textContent
}, () => console.log("state", this.state))
}
}
// Max number of rounded decimals = 8?
// Max number of numbers when inputting = 15
getButtonValue(event) {
const { input, output, tempInput, hasComma, operator } = this.state
switch (event.target.textContent) {
case ".":
if (!this.state.input.length) {
// If input is empty, add zero before comma
this.setState({
input: ["0", event.target.textContent],
output: ["0", event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (this.state.input[0] === "0" && !hasComma && !operator) {
// If first number is zero, add comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (!hasComma && !operator) {
// If it's a whole number and doesn't have comma or operator, add comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (operator && !this.state.tempInput.length) {
// If an operation is selected, add zero before comma
this.setState({
tempInput: ["0", event.target.textContent],
output: ["0", event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (operator && parseInt(this.state.tempInput[0]) > 0) {
// If an operation is selected, add zero before comma
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (this.state.tempInput[0] === "0" && operator) {
// If an operation is selected, add zero before comma
this.setState({
tempInput: ["0", event.target.textContent],
output: ["0", event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
}
break
case "0":
if (!this.state.input.length && !hasComma) {
// If input is empty and there is no comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input[0] == "0" && this.state.input[1] == ".") {
// If input is "0.", continue adding numbers
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input.length && hasComma && !operator) {
// if there is some input and it's a decimal number
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input.length && hasComma && operator) {
// if there is some input and it's a decimal number and a selected operator
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent],
}, () => console.log("state", this.state))
} else if (parseInt(this.state.input[0]) > 0 && !hasComma) {
// if the input is a number, value is greater than 0, and is a whole number
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
}
break
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (this.state.input[0] == "0" && !hasComma) {
this.setState({
input: [event.target.textContent],
output: [event.target.textContent]
}, () => console.log("state", this.state))
} else if (operator) {
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent]
}, () => console.log("state", this.state))
} else {
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("statez", this.state))
}
break
default:
this.setState({
output: "ERROR"
})
break
}
}
render() {
const { output } = this.state
return (
<div className='container'>
<div id="display">
{ output }
</div>
<div className="control">
<div className="brand">
калькулятор
</div>
<label className="switch">
<input type="checkbox" />
<span className="slider"></span>
</label>
</div>
<div id="calculator">
<button id="clear" className="span-h red" onClick={() => this.clear()}>AC</button>
<button id="divide" onClick={this.setOperator} className="gray">/</button>
<button id="multiply" onClick={this.setOperator} className="gray">x</button>
<button id="seven" onClick={this.getButtonValue}>7</button>
<button id="eight" onClick={this.getButtonValue}>8</button>
<button id="nine" onClick={this.getButtonValue}>9</button>
<button id="subtract" onClick={this.setOperator} className="gray">-</button>
<button id="four" onClick={this.getButtonValue}>4</button>
<button id="five" onClick={this.getButtonValue}>5</button>
<button id="six" onClick={this.getButtonValue}>6</button>
<button id="add" onClick={this.setOperator} className="gray">+</button>
<button id="one" onClick={this.getButtonValue}>1</button>
<button id="two" onClick={this.getButtonValue}>2</button>
<button id="three" onClick={this.getButtonValue}>3</button>
<button id="equals" onClick={this.equate} className="span-v gray">=</button>
<button id="zero" onClick={this.getButtonValue} className="span-h">0</button>
<button id="decimal" onClick={this.getButtonValue} className="gray">.</button>
</div>
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('app')
)
/*
EXAMPLE: 3 + 5 x 6 - 2 / 4 =
Immediate Execution Logic: 11.5
Formula/Expression Logic: 32.5
*/
VanillaTilt.init(document.querySelector(".container"), {
glare: true,
"max-glare": 0.2
});
/*
3.23 + 33.2
input = ["3", "3"]
this.state = {
initialInput: [],
tempInput: [],
output: ["0"]
}
this.state = {
initialInput: ["2", ".", "3"],
tempInput: [],
output: initalInput, ...
}
ouput = ["3", "3"]
pressing = should update both initial and ouput to the same
clear temp input
*/
/*
class Calculator extends React.Component {
constructor(props) {
super(props)
this.state = {
input: [],
tempInput: [],
output: ["0"],
hasComma: false,
operator: null
}
this.getButtonValue = this.getButtonValue.bind(this)
this.setOperator = this.setOperator.bind(this)
this.equate = this.equate.bind(this)
}
equate() {
const { input, output, operator, tempInput } = this.state
this.setState({
input: [eval(input.join("") + operator + tempInput.join("")).toString()],
tempInput: [],
operator: null,
output: [eval(input.join("") + operator + tempInput.join("")).toString()]
}, () => console.log("state", this.state))
}
// 3 + 5 * 6 - 2 / 4
clear() {
// Set state back to initial state
this.setState({
input: [],
tempInput: [],
output: ["0"],
hasComma: false,
operator: null
})
}
setOperator(event) {
const { operator } = this.state
if ( operator ) {
// If there is an operator, run equation
this.equate()
}
this.setState({
// set x value to *, else set the others as normal
operator: event.target.textContent === "x" ? "*" : event.target.textContent
}, () => console.log("state", this.state))
}
// Max number of rounded decimals = 8?
// Max number of numbers when inputting = 15
getButtonValue(event) {
const { input, output, tempInput, hasComma, operator } = this.state
switch (event.target.textContent) {
case ".":
if (!this.state.input.length) {
// If input is empty, add zero before comma
this.setState({
input: ["0", event.target.textContent],
output: ["0", event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (this.state.input[0] === "0" && !hasComma && !operator) {
// If first number is zero, add comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (!hasComma && !operator) {
// If it's a whole number and doesn't have comma or operator, add comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (operator && !this.state.tempInput.length) {
// If an operation is selected, add zero before comma
this.setState({
tempInput: ["0", event.target.textContent],
output: ["0", event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
} else if (operator && parseInt(this.state.tempInput[0]) > 0) {
// If an operation is selected, add zero before comma
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent],
hasComma: true
}, () => console.log("state", this.state))
}
break
case "0":
if (!this.state.input.length && !hasComma) {
// If input is empty and there is no comma
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input[0] == "0" && this.state.input[1] == ".") {
// If input is "0.", continue adding numbers
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input.length && hasComma && !operator) {
// if there is some input and it's a decimal number
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
} else if (this.state.input.length && hasComma && operator) {
// if there is some input and it's a decimal number and a selected operator
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent],
}, () => console.log("state", this.state))
} else if (parseInt(this.state.input[0]) > 0 && !hasComma) {
// if the input is a number, value is greater than 0, and is a whole number
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("state", this.state))
}
break
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (this.state.input[0] == "0" && !hasComma) {
this.setState({
input: [event.target.textContent],
output: [event.target.textContent]
}, () => console.log("state", this.state))
} else if (operator) {
this.setState({
tempInput: [...tempInput, event.target.textContent],
output: [...tempInput, event.target.textContent]
}, () => console.log("state", this.state))
} else {
this.setState({
input: [...input, event.target.textContent],
output: [...input, event.target.textContent]
}, () => console.log("statez", this.state))
}
break
default:
this.setState({
output: "ERROR"
})
break
}
}
render() {
const { output } = this.state
return (
<div className='container'>
<div id="display">
{ output }
</div>
<div id="calculator" >
<button id="clear" className="span-h red" onClick={() => this.clear()}>AC</button>
<button id="divide" onClick={this.setOperator} className="gray">/</button>
<button id="multiply" onClick={this.setOperator} className="gray">x</button>
<button id="seven" onClick={this.getButtonValue}>7</button>
<button id="eight" onClick={this.getButtonValue}>8</button>
<button id="nine" onClick={this.getButtonValue}>9</button>
<button id="subtract" onClick={this.setOperator} className="gray">-</button>
<button id="four" onClick={this.getButtonValue}>4</button>
<button id="five" onClick={this.getButtonValue}>5</button>
<button id="six" onClick={this.getButtonValue}>6</button>
<button id="add" onClick={this.setOperator} className="gray">+</button>
<button id="one" onClick={this.getButtonValue}>1</button>
<button id="two" onClick={this.getButtonValue}>2</button>
<button id="three" onClick={this.getButtonValue}>3</button>
<button id="equals" onClick={this.equate} className="span-v gray">=</button>
<button id="zero" onClick={this.getButtonValue} className="span-h">0</button>
<button id="decimal" onClick={this.getButtonValue} className="gray">.</button>
</div>
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('app')
)
*/
!
