Video Finish

Author: WebDevSimplified

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vanilla-javascript-weather-app",
+  "name": "current-project",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -8,12 +8,12 @@
   },
   "author": "",
   "license": "ISC",
-  "devDependencies": {
-    "dotenv": "^7.0.0",
-    "nodemon": "^1.19.0"
-  },
   "dependencies": {
     "axios": "^0.18.0",
     "express": "^4.16.4"
+  },
+  "devDependencies": {
+    "dotenv": "^8.0.0",
+    "nodemon": "^1.19.0"
   }
 }

public/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link href="styles.css" rel="stylesheet">
-  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRveAtErAaLq0wMxwbSgv0CmUmunK9soE&libraries=places"></script>
+  <script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBatKITzDL-ekQHjOMUhzonxTBlN1GqMHA&libraries=places"></script>
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script>
   <script defer src="script.js"></script>
   <title>Weather App</title>
@@ -28,7 +28,7 @@
           <div class="value" data-wind>TBD</div>
         </div>
         <div class="detail bordered">
-          <div class="title">Temperature</div>
+            <div class="title">Temperature</div>
           <div class="value" data-temperature>TBD</div>
         </div>
         <div class="detail">
@@ -37,10 +37,10 @@
         </div>
       </div>
       <div class="city-search-container">
-        <input type="text" class="city-search" placeholder="Enter Location" data-city-search>
+        <input type="text" class="city-search" data-city-search placeholder="Enter Location">
       </div>
     </div>
   </div>
-  <a href="https://darksky.net/poweredby" class="darksky-logo">Powered By Dark Sky</div>
+  <a href="https://darksky.net/poweredby" class="darksky-logo">Powered By Dark Sky</a>
 </body>
 </html>

public/script.js

@@ -26,7 +26,6 @@ const statusElement = document.querySelector('[data-status]')
 const temperatureElement = document.querySelector('[data-temperature]')
 const precipitationElement = document.querySelector('[data-precipitation]')
 const windElement = document.querySelector('[data-wind]')
-
 icon.set('icon', 'clear-day')
 icon.play()
 

public/styles.css

@@ -31,19 +31,20 @@ body {
   height: 120px;
   display: flex;
   justify-content: center;
-  align-content: flex-end;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
+  align-items: flex-end;
+  border-top-left-radius: 5px; 
+  border-top-right-radius: 5px; 
 }
 
+
 .icon-container {
-  background-color: white;
-  border-radius: 50%;
   position: relative;
-  top: 50px;
+  top: 70px;
   padding: 20px;
+  background-color: white;
   width: 140px;
   height: 140px;
+  border-radius: 50%;
 }
 
 .general-information {

server.js

@@ -11,8 +11,9 @@ app.use(express.json())
 app.use(express.static('public'))
 
 app.post('/weather', (req, res) => {
+  const url = `https://api.darksky.net/forecast/${DARKSKY_API_KEY}/${req.body.latitude},${req.body.longitude}?units=auto`
   axios({
-    url: `https://api.darksky.net/forecast/${DARKSKY_API_KEY}/${req.body.latitude},${req.body.longitude}?units=auto`,
+    url: url,
     responseType: 'json'
   }).then(data => res.json(data.data.currently))
 })