aynish/fullstack-open
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

exercise 1.10

Browse source
This commit is contained in:
Anish Lakhwara 2023-05-15 21:32:23 +10:00
parent d301767634
commit a62d2f712a
1 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
part1/src/App.js
View file

@ -1,9 +1,16 @@
import { useState } from 'react' import { useState } from 'react'
const Stats = ({ positive, neutral, negative }) => { const StatisticLine = ({ value, text }) => {
const total = positive - negative return (
const votes = positive + neutral + negative <tr>
if (votes == 0) { <td>{text}</td>
<td>{value}</td>
</tr>
)
}
const Stats = ({ positive, neutral, negative, total, votes }) => {
if (votes === 0) {
return ( return (
<> <>
<p> No Votes Cast Yet </p> <p> No Votes Cast Yet </p>
@ -13,12 +20,12 @@ const Stats = ({ positive, neutral, negative }) => {
return ( return (
<> <>
<h2> Results </h2> <h2> Results </h2>
<p> Positive: {positive} </p> <StatisticLine text="Positive" value={positive} />
<p> Neutral: {neutral} </p> <StatisticLine text="Neutral" value={neutral} />
<p> Negative: {negative} </p> <StatisticLine text="Negative" value={negative} />
<p> All: {votes} </p> <StatisticLine text="All" value={votes} />
<p> Average: {total / votes} </p> <StatisticLine text="Average" value={total / votes} />
<p> Positive: {positive / votes} </p> <StatisticLine text="Positive" value={positive / votes} />
</> </>
) )
} }
@ -35,6 +42,8 @@ const App = () => {
const [good, setGood] = useState(0) const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0) const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0) const [bad, setBad] = useState(0)
const total = good - bad
const votes = good + neutral + bad
const incPositive = () => { const incPositive = () => {
setGood(good + 1) setGood(good + 1)
@ -54,7 +63,7 @@ const App = () => {
<Button handler={incPositive} text="positive" /> <Button handler={incPositive} text="positive" />
<Button handler={incNeutral} text="neutral" /> <Button handler={incNeutral} text="neutral" />
<Button handler={incNegative} text="negative" /> <Button handler={incNegative} text="negative" />
<Stats positive={good} negative={bad} neutral={neutral} /> <Stats positive={good} negative={bad} neutral={neutral} total={total} votes={votes} />
</div> </div>
) )
} }