Final Changes

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
+    <color name="ic_launcher_background">#3DDC84</color>
 </resources>

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.3.2'
+        classpath 'com.android.tools.build:gradle:3.6.1'
         classpath 'com.google.gms:google-services:4.2.0'
 
         // NOTE: Do not place your application dependencies here; they belong

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Tue Jan 30 13:14:22 CST 2018
+#Thu Apr 02 02:29:49 IST 2020
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip

package.json

@@ -12,7 +12,9 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
+    "chart.js": "^2.9.3",
     "react": "^16.13.1",
+    "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",

src/App.css

@@ -35,4 +35,28 @@
 
 h1 {
   padding-left: 19px;
+  margin: 10px;
+}
+
+.bottomtitle {
+  font-size: 1rem;
+}
+
+#indtitle {
+  font-size: 26px;
+  font-weight: 500;
+  margin: 2px;
+}
+
+#numbers {
+  font-size: 45px;
+  font-weight: bold;
+  color: cornflowerblue;
+  margin: 2px;
+}
+
+#tot {
+  font-weight: 550;
+  color: cornflowerblue;
+  margin: 14px;
 }

src/App.js

@@ -24,6 +24,9 @@ class App extends React.Component {
     confirmed: 0,
     recovered: 0,
     deaths: 0,
+    inconfirmed: 0,
+    inrecovered: 0,
+    indeaths: 0,
     count: 0,
     loading: true,
     date: new Date()
@@ -32,6 +35,7 @@ class App extends React.Component {
   componentDidMount() {
     this.getData();
     this.country();
+    this.india();
     setTimeout(() => {
       this.setState({
         loading: false
@@ -57,6 +61,14 @@ class App extends React.Component {
       deaths: res.data.deaths.value
     });
   }
+  async india() {
+    const ind = await Axios.get("https://covid19.mathdro.id/api/countries/IN");
+    this.setState({
+      inconfirmed: ind.data.confirmed.value,
+      inrecovered: ind.data.recovered.value,
+      indeaths: ind.data.deaths.value
+    });
+  }
   render() {
     return (
       <IonApp mode="ios">
@@ -75,10 +87,10 @@ class App extends React.Component {
           </ion-text>
           <ion-text class="total">
             {this.state.loading ? (
-              <Stretch color="white" />
+              <Stretch color="white" size="30px" />
             ) : (
               <div class="ion-text-center">
-                Total Effected Countries : {this.state.count}
+                <h2 id="tot">Total Effected Countries : {this.state.count}</h2>
               </div>
             )}
           </ion-text>
@@ -100,10 +112,22 @@ class App extends React.Component {
               <ion-card-title>{this.state.deaths}</ion-card-title>
             </ion-card-header>
           </ion-card>
+          <Ion-text>
+            <div class="ion-text-center">
+              <h3 id="indtitle">Total Cases - India</h3>
+              <p id="numbers">{this.state.inconfirmed}</p>
+              <h3 id="indtitle">Recovered</h3>
+              <p id="numbers">{this.state.inrecovered}</p>
+              <h3 id="indtitle">Deaths</h3>
+              <p id="numbers">{this.state.indeaths}</p>
+            </div>
+          </Ion-text>
         </IonContent>
         <ion-footer class="ion-no-border" translucent="true">
           <ion-toolbar color="dark">
-            <ion-title>github.com/vasu2912</ion-title>
+            <ion-title className="bottomtitle">
+              <a href="https://github.com/vasu2912/">github.com/vasu2912</a>
+            </ion-title>
           </ion-toolbar>
         </ion-footer>
       </IonApp>