FCC JS Calculator
How do I make an fcc js calculator?
What is a fcc js calculator? How do you make a fcc js calculator? This script and codes were developed by Victoria on 02 December 2022, Friday.
FCC JS Calculator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC JS Calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="calc"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
FCC JS Calculator - Script Codes CSS Codes
body { background-color: sandybrown;
}
.buttons { width: 100%; display: flex; flex-flow: row wrap; justify-content: center;
}
.button { flex-basis: 40px; line-height: 40px; background-color: mediumturquoise; border: 2px solid cadetblue; border-radius: 10%; text-align: center; margin: 2px 2px; font-size: 20px; cursor: pointer;
}
.display { width: 90%; margin: 5px; height: 20px; text-align: right; font-size: 14px;
}
.calculator { margin: auto; width: 200px; border: 1px solid midnightblue; border-radius: 5%; padding: 10px; background-color: cornflowerblue;
}
FCC JS Calculator - Script Codes JS Codes
'use strict';
var isNum = function isNum(s) { return !isNaN(Number(s));
};
var EvalTools = { convertKeys: function convertKeys(keys) { var isNegativeNum = function isNegativeNum(s) { return isNum(s) && Number(s) < 0; }; var isDot = function isDot(s) { return s === '.'; }; var isMinus = function isMinus(s) { return s === '-'; }; var errors = []; var res = keys.reduce(function (acc, k, i) { if (!acc.length) return [k]; var prev = _.last(acc); if (isNum(k)) { if (isNum(prev)) { return acc.slice(0, acc.length - 1).concat([prev + k]); } else { if (isMinus(prev)) { var prevPrev = _.last(acc.slice(0, acc.length - 1)); if (isNum(prevPrev)) { return acc.concat([k]); } else { if (isNegativeNum(k)) { errors.push({ error: "can't have two successor minuses", index: i }); } return acc.slice(0, acc.length - 1).concat([prev + k]); } } else { return acc.concat([k]); } } } else if (isDot(k)) { if (isNum(prev)) { return acc.slice(0, acc.length - 1).concat([prev + k]); } else if (isDot(prev)) { errors.push({ error: "can't have two successive dots", index: i }); return acc.concat([k]); } else { errors.push({ error: "can't have successive dot and operator (.%, .+ etc)", index: i }); return acc.concat([k]); } } else { if (isNum(prev)) { return acc.concat([k]); } else { errors.push({ error: "can't have two 'operations' as successors, i.e. `--`, `+-`, `+.`", index: i }); return acc.concat([k]); } } }, []); return { errors: errors, keys: res }; }, intToPost: function intToPost(exp) { var priority = { '*': 1, '/': 1, '+': 2, '-': 2, '%': 2 }; var operatorsStack = []; var postfix = []; exp.forEach(function (value) { if (isNum(value)) { postfix.push(value); } else { if (operatorsStack.length === 0 || priority[value] <= priority[_.last(operatorsStack)]) { operatorsStack.push(value); } else { postfix = postfix.concat(_.reverse(operatorsStack)); operatorsStack = [value]; } } }); return postfix.concat(_.reverse(operatorsStack)); }, evaluate: function evaluate(exp) { // [2, 3, +] [2, 3, ] var operators = { '*': function _(a, b) { return a * b; }, '/': function _(a, b) { return a / b; }, '+': function _(a, b) { return a + b; }, '-': function _(a, b) { return a - b; }, '%': function _(a, b) { return a * b / 100; } }; var stack = []; exp.forEach(function (value) { if (isNum(value)) { stack.push(Number(value)); } else { var a = stack[stack.length - 2]; var b = stack[stack.length - 1]; stack = stack.slice(0, stack.length - 2); stack.push(operators[value](a, b)); } }); return stack[0]; }
};
var validate = function validate(exp, nextValue) { if (isNum(nextValue)) { return exp.concat([nextValue]); } else { var convertExp = EvalTools.convertKeys(exp.concat([nextValue, 1])); if (convertExp.errors.length > 0) { console.warn(convertExp.errors); return exp; } else { return exp.concat([nextValue]); } }
};
var Calculator = React.createClass({ displayName: 'Calculator', getInitialState: function getInitialState() { return { expression: [], lastAnswer: 0, answer: undefined }; }, cleanAll: function cleanAll() { this.setState({ expression: [], answer: undefined }); }, cleanLast: function cleanLast() { this.setState({ expression: this.state.expression.slice(0, this.state.expression.length - 1) }); }, addAction: function addAction(b) { var _this = this; var _state = this.state; var expression = _state.expression; var lastAnswer = _state.lastAnswer; expression.length === 0 ? this.setState({ answer: undefined }, function () { _this.setState({ expression: expression.concat(isNum(b) ? [b] : isNum(lastAnswer) ? [lastAnswer.toString(), b] : [b]) }); }) : this.setState({ expression: validate(expression, b) }); }, lastAnswer: function lastAnswer() { this.setState({ expression: this.state.expression.concat([this.state.lastAnswer.toString()]) }); }, calculate: function calculate() { var _this2 = this; var convertedExpression = EvalTools.convertKeys(this.state.expression); // todo errors check console.warn(convertedExpression.errors); var postfix = EvalTools.intToPost(convertedExpression.keys); this.setState({ expression: [], answer: EvalTools.evaluate(postfix) }, function () { return _this2.setState({ lastAnswer: _this2.state.answer }); }); }, render: function render() { var buttons = [{ name: 'AC', function: this.cleanAll }, { name: 'CE', function: this.cleanLast }, { name: '%', function: this.addAction }, { name: '/', function: this.addAction }, { name: '7', function: this.addAction }, { name: '8', function: this.addAction }, { name: '9', function: this.addAction }, { name: '*', function: this.addAction }, { name: '4', function: this.addAction }, { name: '5', function: this.addAction }, { name: '6', function: this.addAction }, { name: '-', function: this.addAction }, { name: '1', function: this.addAction }, { name: '2', function: this.addAction }, { name: '3', function: this.addAction }, { name: '+', function: this.addAction }, { name: '.', function: this.addAction }, { name: '0', function: this.addAction }, { name: 'Ans', function: this.lastAnswer }, { name: '=', function: this.calculate }]; return React.createElement( 'div', { className: 'calculator' }, React.createElement('input', { className: 'display', value: this.state.answer || this.state.expression.join(''), type: 'text', readOnly: true }), React.createElement( 'div', { className: 'buttons' }, buttons.map(function (button) { return React.createElement( 'div', { key: button.name, className: 'button', onClick: function onClick() { return button.function(button.name); } }, button.name ); }) ) ); }
});
React.render(React.createElement(Calculator, null), document.getElementById('calc'));
Developer | Victoria |
Username | Enieste |
Uploaded | December 02, 2022 |
Rating | 3 |
Size | 4,996 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
FCC Game of Life | 4,303 Kb |
FCC Recipe Box | 7,585 Kb |
FCC Reacted Markdown | 2,685 Kb |
FCC Pomodoro | 3,618 Kb |
React konva | 4,721 Kb |
FCC Local Weather | 2,076 Kb |
FCC Tic Tac Toe | 5,602 Kb |
React TODO | 3,320 Kb |
FCC Wiki viewer | 2,309 Kb |
Profile | 3,970 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Calculator | Rzencoder | 4,572 Kb |
RSW | JordanC | 3,726 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!