diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000000000000000000000000000000000000..b719b9504044310e0a47da04243e6d5c703c0606 --- /dev/null +++ b/src/App.js @@ -0,0 +1,82 @@ +import { useState } from 'react' + +const App = () => { + const header1 = "give feedback" + const header2 = "statistics" + + const [good, setGood] = useState(0) + const [neutral, setNeutral] = useState(0) + const [bad, setBad] = useState(0) + + const handleGoodClick = () => { + setGood(good + 1) + } + + const handleNeutralClick = () => { + setNeutral(neutral + 1) + } + + const handleBadClick = () => { + setBad(bad + 1) + } + + return ( + <div> + <Header1 header={header1} /> + + <Button handleClick={handleGoodClick} text="good" /> + <Button handleClick={handleNeutralClick} text="neutral" /> + <Button handleClick={handleBadClick} text="bad" /> + + <Header2 header={header2} /> + <Statistics good={good} neutral={neutral} bad={bad} /> + </div> + ) +} + +const Header1 = (props) => { + return ( + <> + <h1>{props.header}</h1> + </> + ) +} + +const Header2 = (props) => { + return ( + <> + <h1>{props.header}</h1> + </> + ) +} + +const Button = ({ handleClick, text }) => { + return ( + <button onClick={handleClick}> + {text} + </button> + ) +} + +const Statistics = ({ good, neutral, bad }) => { + const all = bad + neutral + good + const goodMinusBad = good - bad + + const averageGoodMinusBad = goodMinusBad / all + const averageGood = good / all + + return ( + <> + <p> + good {good} <br/> + neutral {neutral} <br/> + bad {bad} <br/> + all {bad + neutral + good} <br/> + average {averageGoodMinusBad} <br/> + positive {averageGood} % + </p> + </> + ) +} + +export default App;