diff --git a/challenges/week-2.md b/challenges/week-2.md index e69de29..ff59302 100644 --- a/challenges/week-2.md +++ b/challenges/week-2.md @@ -0,0 +1,55 @@ +# Week 2 challenge - Simple Counter App + +## Objective + +Create a counter app there you will show three button : Increase, Decrease, Reset and Show The count over the buttons. + +## Requirements + +- Create a `Counter` Component. +- Declare a state name of count and setCount. +- Make three buttons : Increase, Decrease, Reset and give them event handler by function like: function handleIncrement and handleDecrement and handleReset. +- If someone click on increase button the count will be increase and If someone click on decrease button the count will be decrease before going to 0 and If someone click on reset button the count will be 0 before going to 0. +- Display: `0` initially; + +## Submission + +- Branch: `week-2-solution` +- Submit PR to this repository +- Include your GitHub username in the PR title + +## Points + +- Challenge completed: 15 points +- PR merged: 10 points + +--- + +### Solution by @mahmudul-Hasan-2 + +```javascript +import React from "react"; + +function Greeting() { + const [count, setCount] = useState(0); + function handleIncrement () { + setCount(count + 1); + } + function handleDecrement () { + count > 0 && setCount(count - 1); + } + function handleReset () { + count > 0 setCount(0); + } + return ( +
+

{count}

+ + + +
+ ) +} + +export default Greeting; +``` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ffd2c93 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "reactsphere-community-challenges", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}