aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-26 19:22:21 -0400
committerIbrahim Mkusa <ibrahimmkusa@gmail.com>2023-04-26 19:22:21 -0400
commit0d8830d0a55a2ee50ba9d78673896abb4d920952 (patch)
treed25c706b5f93bfd84f3b86cb6771fbb4de6b79e2
parenta105f0bd73ef8373e4487bfa0e19462121be3f61 (diff)
ex1.8
-rw-r--r--part1/unicafe/src/App.js27
1 files changed, 21 insertions, 6 deletions
diff --git a/part1/unicafe/src/App.js b/part1/unicafe/src/App.js
index 1b6f57e..4210f9c 100644
--- a/part1/unicafe/src/App.js
+++ b/part1/unicafe/src/App.js
@@ -14,6 +14,26 @@ const Display = (props) => {
)
}
+const Statistics = (props) => {
+ const good = props.good
+ const bad = props.bad
+ const neutral = props.neutral
+ const total = good + neutral + bad
+
+ const average = (good - bad) / 9.0
+ const positive_percent = (good/total) * 100
+ return (
+ <>
+ <Display text="good" count={good} />
+ <Display text="neutral" count={bad} />
+ <Display text="bad" count={bad} />
+ <Display text="all" count={total} />
+ <Display text="average" count={average} />
+ <Display text="positive(%)" count={positive_percent} />
+ </>
+ )
+}
+
const App = () => {
// save clicks of each button to its own state
const [good, setGood] = useState(0)
@@ -27,12 +47,7 @@ const App = () => {
<Button onclick={() => setNeutral(neutral + 1)} text="neutral" />
<Button onclick={() => setBad(bad + 1)} text="bad" />
<h2>statistics</h2>
- <Display text="good" count={good} />
- <Display text="neutral" count={neutral} />
- <Display text="bad" count={bad} />
- <Display text="all" count={good + neutral + bad} />
- <Display text="average" count={(good - bad) / 9.0} />
- <Display text="positive(%)" count={(good/(good + neutral + bad)) * 100} />
+ <Statistics good={good} neutral={neutral} bad={bad} />
</div>
)
}