Model Level View

Author: vivek ravichandran

.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

public/index.html

@@ -28,7 +28,7 @@
     <!-- 
       BitCoin Live Status
     -->
-    <div id="root" class="grid"></div>
+    <!-- <div id="root" class="grid"></div> -->
     <div id="bitcoin" class="grid"></div>
     <!--
       This HTML file is a template.

src/App.css

@@ -22,22 +22,7 @@
   font-size: large;
 }
 
-.head{
-  font-size: 30px;
-  font-weight: bold;
-}
-.table{
-  padding:3px;
-  border: 3px solid #fff;
-  margin: 10px;
-}
-td{
-  padding: 8px;
-}
-th{
-  padding: 10px;
-  border:2px solid #fff;
-}
+
 
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }

src/bitcoin/BitCoin.css

@@ -0,0 +1,17 @@
+
+.head{
+    font-size: 30px;
+    font-weight: bold;
+  }
+  .table{
+    padding:3px;
+    border: 3px solid #fff;
+    margin: 10px;
+  }
+  td{
+    padding: 8px;
+  }
+  th{
+    padding: 10px;
+    border:2px solid #fff;
+  }

src/bitcoin/BitCoin.js

@@ -3,28 +3,76 @@ import './BitCoin.css';
 
 class BitCoin extends Component {
 
+
   constructor(){
     super();
     this.state = {
-      'bitcoin':null
+      result:[]
     };
   }
 
   componentDidMount=()=>{
-    // fetch('https://api.coindesk.com/v1/bpi/currentprice.json').then(customers=>{
-    //   console.log('Vivek'); 
-    //   console.log(customers.json()); 
-    //  // this.setState({'bitcoin':customers});
-    // });
+    fetch('https://api.coindesk.com/v1/bpi/currentprice.json').then(customers=>{     
+      return customers.json();
+    }).then(data=>{        
+        this.setState({
+          'updated_isodate':data.time.updatedISO,
+          'disclaimer':data.disclaimer,
+          'chartName':data.chartName,
+          'usd_symbol':data.bpi.USD.code,
+          'usd_desc':data.bpi.USD.description,
+          'usd_rate':data.bpi.USD.rate_float,
+          'eur_symbol':data.bpi.EUR.code,
+          'eur_desc':data.bpi.EUR.description,
+          'eur_rate':data.bpi.EUR.rate_float,
+          'gbp_symbol':data.bpi.GBP.code,
+          'gbp_desc':data.bpi.GBP.description,
+          'gbp_rate':data.bpi.GBP.rate_float,
+        });      
+        console.log("Vivek Java : "+JSON.stringify(data));
+    },error=>{
+        console.log("Vivek Error : "+JSON.stringify(error));
+    });
   }
 
   render() {
     return (
       <div className="bitcoin">
-        VIvek
+          <label className='head' >{this.state.chartName}</label><br/><hr/><br/>
+          <label className='note' ><strong>Disclaimer  :</strong>  {this.state.disclaimer}</label><br/><br/>
+          <center>
+          <table border='1' className='table'>
+            <thead>
+              <tr>
+                <th className='table-head'>Symbol</th>
+                <th className='table-head'>Description</th>
+                <th className='table-head'>Rate</th>
+              </tr>              
+            </thead>
+            <tbody>
+              <tr>
+                <td>{this.state.usd_symbol}</td>
+                <td>{this.state.usd_desc}</td>
+                <td>{this.state.usd_rate}</td>
+              </tr>
+              <tr>
+                <td>{this.state.eur_symbol}</td>
+                <td>{this.state.eur_desc}</td>
+                <td>{this.state.eur_rate}</td>
+              </tr>
+              <tr>
+                <td>{this.state.gbp_symbol}</td>
+                <td>{this.state.gbp_desc}</td>
+                <td>{this.state.gbp_rate}</td>
+              </tr>
+            </tbody>
+          </table>
+          </center>
+          
       </div>
     );
   }
 }
 
+
 export default BitCoin;

src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-//import BitCoin from './bitcoin/BitCoin';
+//import App from './App';
+import BitCoin from './bitcoin/BitCoin';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-//ReactDOM.render(<BitCoin />, document.getElementById('bitcoin'));
+//ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<BitCoin />, document.getElementById('bitcoin'));
 registerServiceWorker();