From 78debe165cf6ba8cfb89c46a6dc4a424f3bb3ff2 Mon Sep 17 00:00:00 2001 From: Dipto Karmakar Date: Thu, 29 Aug 2019 15:23:00 +0600 Subject: [PATCH 1/3] Add netlify deploy option --- milestones/MILESTONE_1.md | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/milestones/MILESTONE_1.md b/milestones/MILESTONE_1.md index 9c8700b..1d12a9b 100644 --- a/milestones/MILESTONE_1.md +++ b/milestones/MILESTONE_1.md @@ -8,11 +8,18 @@ Every project has its beginning in setting up some basic structure and tooling. 1. Use `create-react-app` to initialize a new React app - Documentation: [https://github.com/facebook/create-react-app](https://github.com/facebook/create-react-app) 2. Delete any unnecessary file or asset -3. Run the application with `npm start` and make sure that everything works correctly. -4. Follow the instructions in `create-react-app-buildpack` to deploy the app to Heroku - - Initialize a git repo - - Create a Heroku app - - Commit and deploy to Heroku - - Make sure the Heroku app works correctly - - Push everything to Github - - Documentation: [https://github.com/mars/create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack) +3. Run the application with `npm start` or `yarn start` and make sure that everything works correctly. +4. Choose one of these methods to deploy your app. + + 1. Follow instructions in `create-react-app-buildpack` to deploy the app to Heroku + - Initialize a git repo + - Create a Heroku app + - Commit and deploy to Heroku + - Make sure the Heroku app works correctly + - Push everything to Github + - Documentation: [https://github.com/mars/create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack) + + 2. Follow these instructions for [netlify](https://www.netlify.com/) + - Connect Github account to your Netlify account + - Select the project to deploy + - Deploy project From e293256429381729136afb516ba873cf18ebbb2a Mon Sep 17 00:00:00 2001 From: Dipto Karmakar Date: Thu, 29 Aug 2019 15:50:52 +0600 Subject: [PATCH 2/3] Modify point 5 --- milestones/MILESTONE_2.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/milestones/MILESTONE_2.md b/milestones/MILESTONE_2.md index ed8e710..d3d52c9 100644 --- a/milestones/MILESTONE_2.md +++ b/milestones/MILESTONE_2.md @@ -24,11 +24,15 @@ displaying the outcome of the calculations, and a **ButtonPanel** component whic - It should accept a button name as a prop. - The button name prop should be a String. 5. Implement the **ButtonPanel** component - - It should render the calculator panel with all the buttons in the following groups: (use divs to divide buttons into groups) + - It should render the calculator panel with all the buttons.Do not repeat `Button` component. + + **Hint:** You can divided in the following groups: (use nested array to divide buttons into groups and then you can use `map` function) - Group 1: AC, +/-, %, + - Group 2: 7, 8, 9, X - Group 3: 4, 5, 6, - - Group 4: 1, 2, 3, + - Group 5: 0, ., = + Or you can also use a simple array and then `map` function without grouping. + If you fulfilled all requirements properly, you should see a pretty ugly page full of non-functional buttons. Don't worry, you will add some functionality in the next milestone! From 0c5c8470e0cc85aae0649a4460254dac67e362e0 Mon Sep 17 00:00:00 2001 From: Dipto Karmakar Date: Thu, 29 Aug 2019 16:33:23 +0600 Subject: [PATCH 3/3] Modify milestones --- milestones/MILESTONE_2.md | 6 +++--- milestones/MILESTONE_4.md | 2 ++ milestones/MILESTONE_5.md | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/milestones/MILESTONE_2.md b/milestones/MILESTONE_2.md index d3d52c9..9cece75 100644 --- a/milestones/MILESTONE_2.md +++ b/milestones/MILESTONE_2.md @@ -18,13 +18,13 @@ displaying the outcome of the calculations, and a **ButtonPanel** component whic - **REMEMBER!** JSX will not compile unless your render function returns a single element. Wrap the children components with a div tag and give it an appropriate ID. 3. Implement the **Display** component - It should accept the result of the calculation as an incoming prop. - - The result prop should be a String. + - The result prop should be a String. Please use prop-types for this validation. - The default value of the result prop should be 0. 4. Implement the **Button** component - It should accept a button name as a prop. - - The button name prop should be a String. + - The button name prop should be a String. Please use prop-types for this validation. 5. Implement the **ButtonPanel** component - - It should render the calculator panel with all the buttons.Do not repeat `Button` component. + - It should render the calculator panel with all the buttons. Do not repeat `Button` component. **Hint:** You can divided in the following groups: (use nested array to divide buttons into groups and then you can use `map` function) - Group 1: AC, +/-, %, + diff --git a/milestones/MILESTONE_4.md b/milestones/MILESTONE_4.md index f747352..9aad8cb 100644 --- a/milestones/MILESTONE_4.md +++ b/milestones/MILESTONE_4.md @@ -13,6 +13,8 @@ Let's put aside the React work for a moment. We will now focus on the heart of t - The `calculate` method should accept a calculator data object and a button name as arguments. - The calculator data object should contain three properties: `total`, `next` and `operation`. - This method should use the buttonName argument to mutate the calculator's data object and return its modified version. For instance if `buttonName == "+/-"`, it should multiply `total` and `next` by `-1` to make it negative or positive. + - Implement any number can not divided by zero calculation. It should return an error message which will display in the calculator. + 3. Implement the `operate.js` module - It should import the `big.js` module from the corresponding npm package. - It should implement one default function named `operate`. diff --git a/milestones/MILESTONE_5.md b/milestones/MILESTONE_5.md index 762b365..bd8cd2d 100644 --- a/milestones/MILESTONE_5.md +++ b/milestones/MILESTONE_5.md @@ -10,7 +10,7 @@ We are now very close to the final line. Your last task is to tie the calculatio properties: `total`, `next` and `operation`, just like in your `calculate.js` module. By default, they should all be set to `null`. - Implement the `handleClick` function which takes `buttonName` as an argument and changes the state based on the result of the `calculate` function. - - Pass the `total` or `next` value to **Display** to display the current result. + - Pass the `total` or `next` or `error` value to **Display** to display the current result. - Pass `handleClick` as a `clickHandler` property to **ButtonPanel** 2. **ButtonPanel** - Implement the `handleClick` function which takes `buttonName` as an argument and returns `clickHandler` from props.