Skip to content

Instantly share code, notes, and snippets.

@dominikkaegi

dominikkaegi/Calculator Challenge.md

Last active February 17, 2020 15:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dominikkaegi/098e8f1f6e7b5a4f71fe0f1c6f541abd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dominikkaegi/098e8f1f6e7b5a4f71fe0f1c6f541abd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Calculator Challenge.md

🎒Calculator Challenge:

Background:

Creating reusable components that we can use in different parts of our application can give us a big benefit to keep our functionality and styling consistent within our application and can increase the speed of development. Therefore it is important to understand how we can create components and modify them with props.

Your mission:

Build a calculator from scratch like this: https://vs7w3.csb.app/. The goal of this challenge is to build reusable components, passing date down up and through components and to handle events. Focus on the functionality not on the styles when building your calculator. It does not have to look the same.

Rebuild the user interface of the calculator and create a reusable button component. Add the input functionality. If a user presses one of the three buttons with a number or the "." in it, then update the number on the screen.

Add the functionality of clear "C", delete "DEL" and percentage "%". When pressing "C" the calculator is cleared and reset to its initial state. When pressing "DEL" the last number which has been input is removed from the input. When pressing "%", then one percent of the current number in the display should be returned (e.g. divide by 100).

Add the logic for the operations of addition, subtraction, multiplication, and division. It can take a little time to get around how the whole thing should work. To understand the logic behind a calculator it can be of benefit to google for the state machine of a calculator (keyword: pending operation).

The way of grading:

You need to use a reusable component that can be modified within a project. It must be possible to enter numbers and the functionality of clear, delete and percentage. Further it must be possible to chain the different operations (e.g. 4 + 4 + 4 =). It does not have to look the same or event pretty to get a good mark. The goal is to understand how to use react to build a component, not how to write beautiful CSS.

Restrictions:

Use React Components and the useState hook to complete this challenge. Do not use any other hooks provided other than the useSate hook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment