CodeAtNow.com is a website that offers a free and comprehensive source code for a calculator application developed using React.js.
This calculator is designed to provide a user-friendly interface for performing mathematical calculations efficiently.
The source code is available for download, allowing developers to explore and modify the application as per their requirements.
Additionally, CodeAtNow.com also provides a Telegram channel where users can join to stay updated with the latest resources and tutorials related to React.js and other programming technologies.
Follow Us On Telegram Telegram link
HTML
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodeAtNow | Simple calculator - Reactjs</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div id="app"></div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script><script src="./script.js"></script> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css?family=Lato');
body {
background: #11131e;
font-family: 'Lato', sans-serif;
display: grid;
}
p {
height: 21px;
/* width: auto; */
margin: 0;
}
button {
border: none;
background: none;
color: dimgrey;
font-size: 25px;
outline: none;
cursor: pointer;
}
.calculator {
width: 220px;
height: 430px;
background: #434348;
border-radius: 25px;
position: absolute;
margin: auto;
top: 50%;
margin-top: -215px;
left: 50%;
margin-left: -110px;
}
.calculator:after {
position: absolute;
background: #fff;
width: 200px;
height: 410px;
content: "";
top: 0;
z-index: 1;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -205px;
border-radius: 25px;
}
.calcpanel {
width: 100px;
height: 30px;
background: #434348;
z-index: 2;
position: relative;
border-radius: 0px 0px 15px 15px;
left: 50%;
margin-left: -50px;
}
.line {
width: 40px;
height: 2px;
background: grey;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -1px;
border-radius: 25%;
}
._buttons {
z-index: 9;
position: absolute;
bottom: 0;
}
._head p:nth-child(1) {
font-size: 20px;
margin-right: 4px;
}
._head {
z-index: 9;
width: 64%;
position: relative;
color: grey;
text-align: right;
top: 45px;
font-size: 30px;
margin: auto;
}
.Equal {
position: absolute;
bottom: 25px;
right: 30px;
}
.Equal button {
background: rgb(242, 126, 63);
color: #fff;
/* width: 30px; */
border-radius: 8px;
width: 40px;
font-size: 20px;
height: 40px;
}
._numbers {
display: flex;
justify-content: space-between;
/* grid-template-rows: 10px 30px; */
width: 80%;
/* background-color: red; */
/* font-size: 80px; */
flex-flow: row wrap;
margin: auto;
}
._numbers button {
width: 30%;
height: 53px;
transition: all .2s ease-in-out;
}
._numbers button:hover {
color: rgb(242, 126, 63);
}
._operators {
display: flex;
width: 75%;
margin: auto;
justify-content: space-around;
/* background: red; */
/* color: #fff; */
}
._operators button {
color: #fff;
width: 30px;
/* background-color: red; */
color: rgb(242, 126, 63);
font-size: 30px;
height: 30px;
}
._ACCE {
width: 65%;
/* margin: auto; */
/* text-align: center; */
position: absolute;
top: -25px;
left: 35px;
border-top: 1px solid #f27e3f;
}
._ACCE button {
font-size: 30px;
width: 30px;
color: rgb(242, 126, 63);
font-size: 15px;
height: 30px;
}
JS
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const buttonCyphers = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const operationCyphers = [
'-', '+', '/', '*'];
class App extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
{
calcMemory: "",
calcInput: "",
answer: "",
error: "" });_defineProperty(this, "handleAC",
() => {
this.setState({
calcInput: "",
calcMemory: "",
answer: "" });
});_defineProperty(this, "handleCE",
() => {
this.setState({
calcInput: "" });
});_defineProperty(this, "handleNumberClick",
value => {
const shouldShowError = this.state.calcInput.length >= 8 || this.state.calcMemory.length >= 12;
switch (true) {
case shouldShowError === true:
this.setState({
calcInput: "Error",
calcMemory: "Error" });
case this.state.answer !== "":
this.setState({
answer: "",
calcInput: value,
calcMemory: value });
return;
case operationCyphers.includes(this.state.calcInput):
this.setState({
calcInput: value,
calcMemory: this.state.calcMemory + value });
break;
case buttonCyphers.includes(value):
this.setState({
calcInput: `${this.state.calcInput}${value}`,
calcMemory: `${this.state.calcMemory}${value}` });}
});_defineProperty(this, "handleOperator",
operator => {
const calcm = this.state.calcInput[this.state.calcInput.length - 1];
if (this.state.calcMemory.length == 1 && (operator == "+" || operator === "*" || operator === "/")) {
return;
}
if (calcm === "+" || calcm === "-" || calcm === "*" || calcm === "/") {
return;
}
switch (true) {
case this.state.calcMemory.charAt(0) == "=":
this.state.calcMemory = this.state.calcMemory.substr(2);
this.setState({
answer: "",
calcInput: operator,
calcMemory: this.state.calcMemory + operator });
break;
case operationCyphers.includes(operator):
this.setState({
calcInput: operator,
calcMemory: this.state.calcMemory + operator });}
});_defineProperty(this, "handleEqual",
equal => {
const answer = eval(this.state.calcMemory);
this.state.answer = answer;
this.setState({
calcMemory: "= " + Math.round(answer),
calcInput: "" });
});}
renderButtons() {
return buttonCyphers.map((item, index) => /*#__PURE__*/
React.createElement("button", { key: index, onClick: () => this.handleNumberClick(item) }, item));
}
render() {
return /*#__PURE__*/(
React.createElement("div", { className: "calculator" }, /*#__PURE__*/
React.createElement("div", { className: "calcpanel" }, /*#__PURE__*/
React.createElement("span", { className: "line" }), /*#__PURE__*/
React.createElement("span", { className: "camera" })), /*#__PURE__*/
React.createElement("div", { className: "_head" }, /*#__PURE__*/
React.createElement("p", null, this.state.calcMemory ? this.state.calcMemory : ''), /*#__PURE__*/
React.createElement("p", null, this.state.calcInput ? this.state.calcInput : '')), /*#__PURE__*/
React.createElement("br", null), /*#__PURE__*/
React.createElement("div", { className: "_buttons" }, /*#__PURE__*/
React.createElement("div", { className: "_operators" }, /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleOperator('+') }, "+"), /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleOperator('-') }, "-"), /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleOperator('*') }, "\xD7"), /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleOperator('/') }, "\xF7")), /*#__PURE__*/
React.createElement("div", { className: "_ACCE" }, /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleAC() }, "AC"), /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleCE() }, "CE")), /*#__PURE__*/
React.createElement("div", { className: "_numbers" },
this.renderButtons()), /*#__PURE__*/
React.createElement("br", null), /*#__PURE__*/
React.createElement("div", { className: "Equal" }, /*#__PURE__*/
React.createElement("button", { onClick: () => this.handleEqual('=') }, "=")))));
}}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
