diff --git a/src/index.js b/src/index.js
index 3e7b3f62f5fca57a6c1f172e16362b72bbf7009a..505abf9790d12cd2c49c1f531c36606e2cc46e61 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,111 @@
 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>
         );
     }