Merge pull request #14 from iAmAnsari/ilm

Adding a Score window compliting the project as a app.

React_files/src/App.css

@@ -30,6 +30,7 @@ body, html {
   padding:0px;
   font-family: 'Titillium Web', sans-serif;
   text-align:center;
+  background-color: lightblue;
 }
 
 section {
@@ -128,5 +129,4 @@ section {
 .trash:hover span {
   transform: rotate(-45deg);
   transition: transform 250ms;
-}
-
+}

React_files/src/App.js

@@ -1,12 +1,30 @@
 import React, { Component } from 'react';
 import './App.css';
 import Card from './Card.js';
-import ResultBox from './resultBox.js'
+import ResultBox from './ResultBox.js'
+
 
 class App extends Component {
+
+  constructor(){
+    super();
+    this.state={
+           waste: '',
+           weight: '',
+        };
+  }
+
+  onWasteChange= (event) => {
+    this.setState({waste: event.target.value});
+  }
+
+  onWeightChange= (event) => {
+    this.setState({weight: event.target.value});
+  }
+
   render() {
     return (
-      <div className="App">
+      <div className='App'>
         <header className="App-header">
           <section>
              <span className="trash">
@@ -16,8 +34,8 @@ class App extends Component {
           </section>
           <h1 className="f1 App-title">Welcome to Recycling Tracker</h1>
         </header>
-         <Card/>
-         <ResultBox />
+         <Card onWaste={this.onWasteChange} onWeight={this.onWeightChange} />
+         <ResultBox waste={this.state.waste} weight={this.state.weight} />
       </div>
     );
   }

React_files/src/Card.js

@@ -1,12 +1,11 @@
 import React from 'react';
 
-const Card= ({waste,measure,Result})=> {
+const Card= ({onWaste, onWeight})=> {
 	return(
 		<div className='tc bg-light-green dib br3 pa3 ma2 bw2 shadow-5'>
 		   <h1 className='f2 i green'>Dumb Your Trash Here</h1>
-		   <input className='pa3 ba b--green bg-lightest-blue w-50' type='search' placeholder='Name of the Waste' />
-		   <input className='pa3 ba b--green bg-lightest-blue w-50' type='search' placeholder='Weight in kg' />
-           <input className='pa3 ma3 ba b--green bg-lightest-blue grow' type="submit" value="Submit" onClick={ResultBox} />
+		   <input className='pa3 ba b--green bg-lightest-blue w-50' type='text' placeholder='Name of the Waste' onChange={onWaste} />
+		   <input className='pa3 ba b--green bg-lightest-blue w-50' type='number' placeholder='Weight in kg' onChange={onWeight} />
 		</div>
 		);
 }

React_files/src/Score.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const Score = ({waste, weight}) => {
+          if((waste.length)+weight>=100){
+          	return (
+          		<div>
+          		  <h1>Congrats</h1>
+          		  <h1>You are a Recycling King</h1>
+          		</div>
+          		);
+          }
+          else if((waste.length)+weight>=50 && (waste.length)+weight<100){
+          	return(
+          		<div>
+          		  <h1>Congrats</h1>
+          		  <h1>You are a good Recycler</h1>
+          		</div>
+          		);
+          }
+          else if((waste.length)+weight<50 && (waste.length)+weight>0){
+          	return(
+          		<div>
+          		  <h1>Congrats</h1>
+          		  <h1>You did good but do better next time.</h1>
+          		</div>
+          		);
+          }
+          else if((waste.length)+weight==0){
+               return(
+                    <div>
+                      <h1>Fill the form to know your status</h1>
+                    </div>
+                    );
+          }
+          else{
+               return(
+                    <div>
+                      <h1>ERROR: Fill the correct information</h1>
+                    </div>
+                    );
+          }
+
+	}
+
+export default Score;

React_files/src/resultBox.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import Score from './Score.js'
+
+const ResultBox= ({waste, weight}) => {
 
-const ResultBox= ({waste,measure}) => {
 	return(
-		<div>
-           <h1>{waste}</h1>
-           <h1>{measure}</h1>
+		<div className='result tc bg-light-green dib br3 pa3 ma2 bw2 shadow-5 '>
+		   <h1 className='f2 i green'>RESULT</h1>
+           <div><Score waste={waste} weight={weight} /></div>
 		</div>
 		);
 }