created refresh button to enter new zip-code

build/asset-manifest.json

@@ -1,14 +1,14 @@
 {
   "files": {
     "main.css": "/static/css/main.fb65178e.chunk.css",
-    "main.js": "/static/js/main.fefdf518.chunk.js",
-    "main.js.map": "/static/js/main.fefdf518.chunk.js.map",
+    "main.js": "/static/js/main.76f9c7ed.chunk.js",
+    "main.js.map": "/static/js/main.76f9c7ed.chunk.js.map",
     "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
     "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
-    "static/js/2.933a911d.chunk.js": "/static/js/2.933a911d.chunk.js",
-    "static/js/2.933a911d.chunk.js.map": "/static/js/2.933a911d.chunk.js.map",
+    "static/js/2.2c82dd06.chunk.js": "/static/js/2.2c82dd06.chunk.js",
+    "static/js/2.2c82dd06.chunk.js.map": "/static/js/2.2c82dd06.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.49934c0dea14ef06012ec0b15911026b.js": "/precache-manifest.49934c0dea14ef06012ec0b15911026b.js",
+    "precache-manifest.082d8c62a6fe62612de7aef28c9c3a63.js": "/precache-manifest.082d8c62a6fe62612de7aef28c9c3a63.js",
     "service-worker.js": "/service-worker.js",
     "static/css/main.fb65178e.chunk.css.map": "/static/css/main.fb65178e.chunk.css.map",
     "static/media/cloudy.png": "/static/media/cloudy.88d14389.png",

package.json

@@ -34,6 +34,7 @@
     ]
   },
   "devDependencies": {
-    "prettier": "1.18.2"
+    "prettier": "1.18.2",
+    "ws": "3.3.2"
   }
 }

src/components/Weather.js

@@ -7,6 +7,17 @@ import snow from "./images/snow.png";
 import fog from "./images/fog.png";
 import storms from "./images/storms.png";
 import sunny from "./images/sunny.png";
+import refresh from "./images/refresh.png";
+
+const Refresh = styled.div`
+  background-image: url(${refresh});
+  height :50px;
+  width:50px;
+  align-items:center;
+  margin-left:500px;
+  margin-top:0px;
+  background-repeat:no-repeat;
+  `;
 
 const WeatherContainer = styled.div`
   height: 100%;
@@ -19,19 +30,17 @@ const Today = styled.div`
 `;
 
 const InlineDate = styled.div`
-  * {
-    display: inline;
-  }
-
-  p {
-    font-size: 14px;
-    color: #848484;
-  }
-
-  h2 {
-    display: block;
-    font-size: 20px;
-  }
+* {
+  display: inline;
+}
+p {
+  font-size: 14px;
+  color: #848484;
+}
+h2 {
+  display: block;
+  font-size: 20px;
+}
 `;
 
 const TodayDescribe = styled.div`
@@ -44,7 +53,7 @@ const TodayDescribe = styled.div`
     font-size: 130px;
     flex: 130px;
     margin: 0;
-    padding-left: 60px;
+    padding-left: 50px;
   }
   div {
     flex: 300px;
@@ -152,6 +161,7 @@ const RainImage = styled.div`
   margin-top: 20px;
 `;
 
+
 const StormImage = styled.div`
   background-image: url(${storms});
   height: 60px;
@@ -184,30 +194,46 @@ const SunnyImage = styled.div`
   height: 60px;
   width: 60px;
   background-size: 100%;
-  margin-left: 20px;
+  margin-right: 20px;
   margin-top: 20px;
 `;
 
+function RefreshFunction(){
+  window.location.reload(false)
+}
+
+
 class Weather extends React.Component {
   render() {
     const date = new Date();
     return (
       <div>
         {this.props.zip1 && (
           <WeatherContainer>
-            <Today>
+
+           <Today>
+
+
               <InlineDate>
+
                 <p>
                   <Moment format="MMMM do[, ] YYYY">{date}</Moment>
+
                 </p>
+
                 <h2> {this.props.city}</h2>
+
               </InlineDate>
+
+              <Refresh onClick = {RefreshFunction}></Refresh> 
               <TodayDescribe>
-                <h1>
+
+                <h1>  
                   {/* {this.props.temperatureNow} */}
                   {JSON.stringify(this.props.temperatureNow).slice(0, 2)}&#176;
                 </h1>
                 <div>
+
                   <h2>{this.props.conditionsToday}</h2>
                   <p>
                     The high today will be {this.props.temperatureNowHigh}° with