Exercise

Before starting the exercises, pull the latest tests from the parent repository

$ git pull parent master
$ npm install
$ cd week10
$ npm install

Tasks

The week10 directory contains the tooling for a React application, which expects the main component to be at week10/src/calculator.jsx.

Task 1

In the React application add the necessary code to

  • Show a first-level heading with the text “Calculator”

Task 2

In the React application add the necessary code to

  • Show two number inputs named “a” and “b”
  • Show a select dropdown with the five calculator operations +, -, *, /, %

Task 3

In the React application add the necessary code to

  • Show a button
  • When the user clicks on the button, an element with the id “result” must be added to show the result.
  • The “result” element must only be shown when the user has run a calculation

Task 4

In the React application add the necessary code to

  • Add together the two values a and b when the user selects the “+” operator and clicks on the button
  • Show the full calculation in the element with the id “result”

Task 5

In the React application add the necessary code to

  • Subtract the value b from the value a when the user selects the “-” operator and clicks on the button
  • Show the full calculation in the element with the id “result”

Task 6

In the React application add the necessary code to

  • Multiply the two values a and b when the user selects the “*” operator and clicks on the button
  • Show the full calculation in the element with the id “result”

Task 7

In the React application add the necessary code to

  • Divide the value a by the value b when the user selects the “/” operator and clicks on the button
  • Show the full calculation in the element with the id “result”

Task 8

In the React application add the necessary code to

  • Calculate the modulo of dividing a by b when the user selects the “%” operator and clicks on the button
  • Show the full calculation in the element with the id “result”

Task 9

In the React application add the necessary code to

  • Show a history of past calculations in an element with the id “history”
  • The “history” element must not be visible before the user has started a calculation
  • Each entry in the history must be a link element <a> and the text content must be the same format as used in the “result” element

Task 10

In the React application add the necessary code to

  • Re-run a calculation from the history when the user clicks on an entry in the “history” element

Submitting

To submit follow these steps:

  1. Push all your changes into your repository by running

    $ git add week10
$ git commit -m "PUT YOUR OWN MESSAGE HERE"
$ git push

  2. Create a new text file called repository.txt and into that add the clone URL of your repository.

  3. Submit this file via the student submission platform (“React I”).