elements, each of which acts as a container for a single book's data. The total number of .book elements that will be rendered should be equal to the number of search results. For each book that is displayed containing the class .book, all fields available in the props.books object (author, title, pages, etc) should be displayed.
42 | A series of
elements. These elements are used to filter the search results and present them in the same order as props.books. The inputs must preserve the following class names:
43 |
44 |
45 |
46 |
47 |
48 | Expected behavior
49 | This demo illustrates the expected behavior of the component.
50 |
51 | The props the same as the example props which the Web Preview is populated with by default. You can view and change these in your workspace in ./src/App.jsx.
52 |
53 | bs.gif
54 |
55 | Current behavior
56 | Currently, changing values in the input boxes doesn't filter books as expected. Your task is to fix the code to correctly filter books and make the test suite pass.
57 |
58 | Rubric
59 | You'll be evaluated on how efficiently you're able to debug the code and pass the provided tests. All relevant tests have been provided, so you needn't worry about hidden edge cases.
60 |
61 | Resources
62 | Feel free to consult documentation or external internet resources for JS and React.
--------------------------------------------------------------------------------
/1/src/Calculator.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Calculator extends React.Component {
4 | constructor() {
5 | super();
6 | this.state = {
7 | result: "",
8 | };
9 | }
10 |
11 | onClick = (button) => {
12 | if (button === "=") {
13 | this.calculate();
14 | } else if (button === "C") {
15 | this.reset();
16 | } else if(button === "+" || button === "-" || button === "*" || button === "/") {
17 | if(this.state.result === ""){
18 | this.setState({
19 | result: "",
20 | });
21 | }
22 | var length = this.state.result.length;
23 | var temp = this.state.result;
24 | if(this.state.result.charAt(length-1)!=="+" || this.state.result.charAt(length-1)!=="/" || this.state.result.charAt(length-1)!=="*" || this.state.result.charAt(length-1)!=="-"){
25 | this.setState({
26 | result: this.state.result + button,
27 | });
28 | }
29 | if(this.state.result.charAt(length-1)==="+" || this.state.result.charAt(length-1)==="/" || this.state.result.charAt(length-1)==="*" || this.state.result.charAt(length-1)==="-"){
30 | temp = temp.slice(0,-1);
31 | temp+=button;
32 | this.setState({
33 | result:temp,
34 | })
35 | }
36 | } else {
37 | this.setState({
38 | result: this.state.result + button,
39 | });
40 | }
41 | };
42 |
43 | calculate = () => {
44 | try {
45 | const newResult = eval(this.state.result);
46 | this.setState({result: newResult});
47 | } catch (e) {
48 | this.setState({data: 'error'})
49 | }
50 | }
51 |
52 | reset = () => {
53 | this.setState({
54 | result: "",
55 | });
56 | };
57 |
58 | backspace = () => {
59 | this.setState({
60 | result: this.state.result.slice(0, -1),
61 | });
62 | };
63 |
64 | render() {
65 | return (
66 |
67 |
68 |
69 | {this.state.result}
70 |
71 |
72 |
this.onClick(e.target.name)} class="digit-1">
73 | 1
74 |
75 |
this.onClick(e.target.name)} class="digit-2">
76 | 2
77 |
78 |
this.onClick(e.target.name)} class="digit-3">
79 | 3
80 |
81 |
this.onClick(e.target.name)} class="op-add">
82 | +
83 |
84 |
85 |
86 |
this.onClick(e.target.name)} class="digit-4">
87 | 4
88 |
89 |
this.onClick(e.target.name)} class="digit-5">
90 | 5
91 |
92 |
this.onClick(e.target.name)} class="digit-6">
93 | 6
94 |
95 |
this.onClick(e.target.name)} class="op-sub">
96 | -
97 |
98 |
99 |
100 |
this.onClick(e.target.name)} class="digit-7">
101 | 7
102 |
103 |
this.onClick(e.target.name)} class="digit-8">
104 | 8
105 |
106 |
this.onClick(e.target.name)} class="digit-9">
107 | 9
108 |
109 |
this.onClick(e.target.name)} class="op-mul">
110 | x
111 |
112 |
113 |
114 |
this.onClick(e.target.name)} class="clear">
115 | C
116 |
117 |
this.onClick(e.target.name)} class="digit-0">
118 | 0
119 |
120 |
this.onClick(e.target.name)} class="eq">
121 | =
122 |
123 |
this.onClick(e.target.name)} class="op-div">
124 | ÷
125 |
126 |
127 |
128 | );
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/1/Task.txt:
--------------------------------------------------------------------------------
1 | React: Calculator
2 | Calculators are always handy to have in the browser! In this challenge, you'll make a calculator application with basic functionality. The capabilities will be limited in two important ways:
3 |
4 | All division operations will be floored, eliminating decimals and floats.
5 | The calculator will respond to button presses to constrain the input to remain valid, as described below.
6 | Buttons on the calculator
7 | The calculator will feature a traditional, button-based interface and with no bells or whistles (no parenthesis, decimals, or special functions). There will be 16 buttons on the calculator:
8 |
9 | A set of numerical buttons permitting entry of digits 0-9.
10 | A set of four operation buttons corresponding to addition +, subtraction -, multiplication * and floor integer division /.
11 | An equals = button, which evaluates the expression shown on the display.
12 | A clear c button, which resets the calculator to a blank state.
13 | Rendering your calculator
14 | Layout, CSS and use of child components is up to you. The deliverables which the testing suite requires are specific classes which should be attached to buttons and the output element. Here is the comprehensive list of these elements and classes which the Calculator component must render for the testing suite to function:
15 |
16 |
contains a depiction of the current state of the calculator. It can only render characters corresponding those available on the below buttons.
17 | , ... (one for each digit from 0-9) enable the user to enter numbers.
18 | , , and enable the user to enter a mathematical operator (addition, subtraction, multiplication and division, respectively).
19 | enables the user to compute the result of an expression.
20 | enables the user to reset the state of the calculator.
21 | Permitted operations
22 | The operation of the calculator must adhere to a set of specifications described in this section.
23 |
24 | The display portion of the calculator should respond to button presses according to the following rules:
25 |
26 | The display starts out showing the empty string. This is the state which the calculator returns to upon the user clicking c (clear) or a computation attempting division by zero.
27 | When the display is empty, the only buttons that will work are the digit buttons and the - subtraction button (which acts as a negative sign in this context). Any other button will have no effect.
28 | When the last entered data is a digit, any button will work.
29 | If a digit is the last data entered and another digit is pressed, the new digit will be appended to the display.
30 | If a digit is the last data entered and an operator button is pressed, the operator will be appended to the display.
31 | Pressing = should only compute the result of the expression if the last entered character is a digit.
32 | When the last entered character is an operator, it's permissible to follow it with any button except =. New digits should be appended and new operators will be handled as follows:
33 | If the trailing operator is + or -, all operator presses will replace the old trailing operator with the new operator. For example, if the display shows 5- and the / button was pressed, the display should show 5/.
34 | If the trailing operator is * or /, all operator presses will replace the old trailing operator with the new operator with the exception of -, which will be appended to the display, making it possible to create legal display states such as 6/-.
35 | Once the display enters a state with two consecutive operators such as 6/-, any further operator presses can be ignored entirely until a digit is pressed.
36 | No leading zeroes are allowed in any circumstance (the single digit 0 is not considered to have leading zeroes, but 00 or 08 are illegal numbers). When a button is pushed that would create a leading zero, replace the zero with the new number. For example, if the display shows 5+0 and 8 is pressed, the display should show 5+8.
37 | If any number is divided by zero, the calculator should reset to the blank origin state as if c had been pressed.
38 | If a computation has been performed (i.e. the = button has just been pushed and the display contains a single number), clicking an operator button will extend the result as the first operand of a new expression, but pressing a digit will begin a new expression as if the display state had been clear.
39 | Illegal display states include:
40 |
41 | * or +67+8 (leading operator other than -)
42 | --3, 5+-3, 5-+3, 5/+6 or 67*/8 (two consecutive operators that don't include either a * or / followed by -).
43 | 7*06 or 06*7 (leading zero)
44 | Legal display states include (with results after pressing =):
45 |
46 | -8-9 => -17
47 | -8-9*-6 => 46 (order of operations is respected)
48 | -0*-0 => 0
49 | 0*-0 => 0
50 | 6/0 => (reset to empty string origin state due to division by zero)
51 | 6/-0 => (reset to empty string origin state due to division by zero)
52 | Here are examples of legal states, but are incomplete expressions, so pressing = has no effect:
53 |
54 | -
55 | -5
56 | 5*
57 | 5-
58 | Additional notes
59 | Since the calculator uses floor division for all operations (including intermediate operations), results will differ from division on a normal calculator or as produced by eval. You must implement your own miniature expression parser according to the specification for full credit in this challenge.
60 |
61 | You may assume only small numbers are input; there's no need to worry about integer over- or under-flow in input, output or at any stage of the computation.
62 |
63 | Comprehensive tests will be provided to you. Feel free to make changes to the test suite as you see fit--these changes will be ignored for the final submission.
64 |
65 | CSS and UX are important, but secondary to logical functionality. Although there is no predetermined single solution or set of requirements for style, please take some time to present an interface that shows a fundamental grasp of the domain.
66 |
67 | Demo
68 | This demo exercises the application requirements described above.
69 |
70 | calc.gif
71 |
72 | Remember, style is up to you--there's no need to copy the design shown here.
73 |
74 | Rubric
75 | You'll be evaluated primarily on passing test cases and secondarily on code cleanliness and maintainability.
76 |
77 | Resources
78 | Feel free to consult documentation as needed. Here are a few suggestions to start with:
79 |
80 | Wolfram is useful for determining how floor division should be evaluted. For example, one test case is -12/5=3 which you can try here on Wolfram.
81 | React docs
82 | MDN
--------------------------------------------------------------------------------
/3/BookSearch.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Enzyme, { mount, shallow } from "enzyme";
3 | import Adapter from "enzyme-adapter-react-16";
4 | Enzyme.configure({ adapter: new Adapter() });
5 | import sinon from "sinon";
6 | import { readFileSync } from "fs";
7 | import BookSearch from "../src/BookSearch";
8 |
9 | describe("BookSearch", () => {
10 | const books = JSON.parse(readFileSync("./sample_data/books.json"));
11 | let wrapper;
12 |
13 | beforeEach(() => {
14 | wrapper = mount(