Upload New File

Demo1/feedbackapp/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+
+
+const Header = (props) => {
+    return (
+        <div>
+            <h2>{props.text}</h2>
+        </div>
+    )
+}
+
+const Button = (props) => (
+    <button onClick={props.handleClick}>
+      {props.text}
+    </button>
+)
+
+const Statistic = (props) => {
+    return (
+        <div>
+            <table width="30%">
+                <tbody>
+                    <tr>
+                        <td>
+                            {props.text}
+                        </td>
+                        <td>
+                            {props.state}{props.text2}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    )
+}
+const Statistics = (props) => {
+    return (
+        <div>
+            <Statistic
+                text={"Hyvä:"}
+                state={props.state.good}
+            />
+                        
+            <Statistic
+                text={"Neutraali:"}
+                state={props.state.neutral}
+            />
+                        
+            <Statistic
+                text={"Huono:"}
+                state={props.state.bad}
+            />
+                        
+            <Statistic
+                text={"Keskiarvo:"}
+                state={(props.state.score/props.state.counter).toFixed(2)}
+            />
+                        
+            <Statistic
+                text={"Positiivisia: "}
+                state={((props.state.good/props.state.counter)*100).toFixed(2)}
+                text2={"%"}
+            />
+        </div>
+    )
+}
+
+class App extends React.Component {
+
+    constructor(){
+        super()
+        this.state = {
+            counter: 0,
+            good: 0,
+            neutral: 0,
+            bad: 0,
+            score: 0
+        }
+
+        this.kasvataYhdella = this.kasvataYhdella.bind(this)
+        this.kasvataBad = this.kasvataBad.bind(this)
+        this.kasvataGood = this.kasvataGood.bind(this)
+        this.kasvataNeutral = this.kasvataNeutral.bind(this)
+    }
+
+    kasvataYhdella(){
+        this.setState({counter: this.state.counter + 1})
+    }
+
+    kasvataGood(){
+        this.setState({good: this.state.good + 1})
+        this.setState({counter: this.state.counter + 1})
+        this.setState({score: this.state.score + 1})
+        this.render()
+    }
+
+    kasvataBad(){
+        this.setState({bad: this.state.bad + 1})
+        this.setState({counter: this.state.counter + 1})
+        this.setState({score: this.state.score - 1})
+        this.render()
+    }
+
+    kasvataNeutral(){
+        this.setState({neutral: this.state.neutral + 1})
+        this.setState({counter: this.state.counter + 1})
+        this.setState({score: this.state.score + 0})
+        this.render()
+    }
+
+
+    render(){
+
+        const helper = () => {
+            if(this.state.counter === 0){
+                return (
+                    <div>
+                        <h2>
+                            Statistiikkaa:
+                        </h2>
+                        <em>Yhtään palautetta ei ole annettu</em>
+                    </div>
+                )
+            }
+            else {
+                return (
+                    <div>
+                        <h2>
+                            Statistiikkaa:
+                        </h2>
+                        <Statistics
+                            state={this.state}
+                        />
+                    </div>
+                )
+            }
+        }
+
+        return (
+            <div>
+                <Header text={"Anna palautetta:"} />
+
+                <Button 
+                handleClick={this.kasvataGood}
+                text="Hyvä"
+                />
+                <Button 
+                handleClick={this.kasvataNeutral}
+                text="Neutraali"
+                />
+                <Button 
+                handleClick={this.kasvataBad}
+                text="Huono"
+                />
+                
+                <div>{helper()}</div>
+                
+            </div>
+            )
+    }
+    
+} 
+
+ReactDOM.render(
+    <App/>,
+    document.getElementById('root')
+)