Skip to content
Snippets Groups Projects
Commit f106a891 authored by Lassi Valtari's avatar Lassi Valtari
Browse files

Kaikki tehtavat suoritettu

parent bc82ee7a
Branches
Tags
No related merge requests found
import React from 'react'
import ReactDOM from 'react-dom'
/**
* Laskee palautteiden keskiarvon
* @param {number} good Hyviä palautteita
* @param {number} bad Huonoja palautteita
* @param {number} neutral Neutraaleja palautteita
* @returns Keskiarvon palautteista
* [Laskutapa:
* hyvä = 1, huono = -1, neutraali = 0]
*/
const average = (good, bad, neutral) => {
return ((good - bad) / (bad + good + neutral)).toPrecision(1)
}
/**
* Laskee hyvien palautteiden prosentti osuuden kaikista
* @param {number} good Hyviä palautteita
* @param {number} bad Huonoja palautteita
* @param {number} neutral Neutraaleja palautteita
* @returns string - prosentti osuus kaikista, %-merkki liitettynä
*/
const positivesPercent = (good, bad, neutral) => {
return ((good * 100) / (bad + good + neutral)).toPrecision(3) + "%";
}
/**
* Painike nappi
* @param props onClick: painettaessa kutsuttava funktio
* name: teksti napissa
*/
const Button = (props) => {
return <button onClick={props.onClick}>{props.name}</button>
}
/**
* Statistiikka osion muotoilu
* Laskee keskiarvon ja positiivisten palautteiden osuuden
* @param props good: hyvät palautteet
* bad: huonot palautteet
* neutral: neutraalit palautteet
*/
const Statistics = (props) => {
//Ellei palautetta ole annettu:
if (props.good + props.bad + props.neutral === 0) {
return (
<div>
{/* Otsikko */}
<h2>Statistiikka</h2>
<p>
Ei yhtään palautetta annettu.
</p>
</div>
);
}
//Jos yksikin palaute annettu:
else {
return (
<div>
{/* Otsikko */}
<h2>Statistiikka</h2>
<table>
<tbody>
{/* Jokainen palaute tulostettuna */}
<tr>
<td>Hyvä:</td><td>{props.good}</td>
</tr>
<tr>
<td>Neutraali:</td><td>{props.neutral}</td>
</tr>
<tr>
<td>Huono:</td><td>{props.bad}</td>
</tr>
{/* Palautteiden keskiarvo
* good => 1
* neutral => 0
* bad => -1 */}
<Statistic name="Keskiarvo"
func={average(props.good, props.bad, props.neutral)} />
<Statistic name="Positiivisia"
func={positivesPercent(props.good, props.bad, props.neutral)} />
</tbody>
</table>
</div>
);
}
}
/**
* Luo statiskiikkaa palautteista annetuilla ohjeilla
* @param props name: osion teksti,
* func: statistiikan laskeva funktio parametreineen
*/
const Statistic = (props) => {
return (
<tr>
<td>{props.name}:</td><td>{props.func}</td>
</tr>
);
}
class App extends React.Component {
//App Constructor
//Appin konstruktori
constructor() {
super();
this.state = {
//Keeps track of feedback
//Annettu palaute
good: 0,
neutral: 0,
bad: 0,
......@@ -22,11 +121,11 @@ class App extends React.Component {
*/
asetaArvo = (tyyppi) => () => {
this.setState({
good: tyyppi == "good" ?
good: tyyppi === "good" ?
this.state.good + 1 : this.state.good,
neutral: tyyppi == "neutral" ?
neutral: tyyppi === "neutral" ?
this.state.neutral + 1 : this.state.neutral,
bad: tyyppi == "bad" ?
bad: tyyppi === "bad" ?
this.state.bad + 1 : this.state.bad,
})
}
......@@ -34,32 +133,22 @@ class App extends React.Component {
render() {
return (
<div>
{/**Palautuksen anto-osio */}
{/* Palautuksen anto-osio */}
<div>
{/**Otsikko */}
{/* Otsikko */}
<h2>Anna palautetta</h2>
{/**Hyvä-nappi */}
<button onClick={this.asetaArvo("good")}>
Hyvä</button>
{/**Neutraali-nappi */}
<button onClick={this.asetaArvo("neutral")}>
Neutraali</button>
{/**Huono-nappi */}
<button onClick={this.asetaArvo("bad")}>
Huono</button>
{/* Hyvä-nappi */}
<Button name="Hyvä" onClick={this.asetaArvo("good")} />
{/* Neutraali-nappi */}
<Button name="Neutraali" onClick={this.asetaArvo("neutral")} />
{/* Huono-nappi */}
<Button name="Huono" onClick={this.asetaArvo("bad")} />
</div>
{/**Palautuksen tulostusosio */}
<div>
{/**Otsikko */}
<h2>Statistiikka</h2>
<p>
{/**Jokainen palaute tulostettuna */}
Hyvä: {this.state.good} <br />
Neutraali: {this.state.neutral} <br />
Huono: {this.state.bad}
</p>
</div>
{/* Palautuksen tulostusosio */}
<Statistics good={this.state.good}
bad={this.state.bad}
neutral={this.state.neutral} />
</div>
);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment