Skip to content
Snippets Groups Projects
Commit a794c62b authored by Roy Grönroos's avatar Roy Grönroos
Browse files

Exercise 1.8

parent ee198900
No related branches found
No related tags found
No related merge requests found
......@@ -10,8 +10,7 @@ class App extends React.Component {
bad: 0
}
}
render() {
const increment = (grade) => {
increment = (grade) => {
switch (grade) {
case "good":
return () => {this.setState({ good: this.state.good + 1 })}
......@@ -21,7 +20,7 @@ class App extends React.Component {
return () => {this.setState({ bad: this.state.bad + 1 })}
}
}
const mean = () => {
mean = () => {
if (this.state.good === 0 && this.state.neutral === 0 && this.state.bad === 0) {
return 0
} else {
......@@ -30,32 +29,46 @@ class App extends React.Component {
)
}
}
const positivePercentage = () => {
positivePercentage = () => {
if (this.state.good === 0) {
return 0
} else {
return this.state.good / (this.state.good + this.state.neutral + this.state.bad)
}
}
render() {
return (
<div>
<h2>anna palautetta</h2>
<button onClick={increment("good")}>Hyvä</button>
<button onClick={increment("neutral")}>Neutraali</button>
<button onClick={increment("bad")}>Huono</button>
<Button name={"Hyvä"} increment={this.increment("good")} />
<Button name={"Neutraali"} increment={this.increment("neutral")} />
<Button name={"Huono"} increment={this.increment("bad")} />
<h2>statistiikka</h2>
<p>Hyvä: {this.state.good}</p>
<p>Neutraali: {this.state.neutral}</p>
<p>Huono: {this.state.bad}</p>
<p>Keskiarvo: {mean()} </p>
<p>Positiivisia: {positivePercentage()}%</p>
<Statistics state={this.state} mean={this.mean} percentage={this.positivePercentage}/>
</div>
)
}
}
const Button = ({name, increment}) => (
<button onClick={increment}>{name}</button>
)
const Statistic = ({name, statistic}) => (
<p>{name}: {statistic}</p>
)
const Statistics = ({state, mean, percentage}) => (
<div>
<Statistic name={"Hyvä"} statistic={state.good} />
<Statistic name={"Neutraali"} statistic={state.neutral} />
<Statistic name={"Huono"} statistic={state.bad} />
<Statistic name={"Keskiarvo"} statistic={mean()} />
<Statistic name={"Positiivisia"} statistic={percentage()} />
</div>
)
ReactDOM.render(
<React.StrictMode>
<App />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment