Add background image to results

Author: javitocor

dist/index.html

@@ -17,7 +17,7 @@
         <div class="collapse navbar-collapse" id="navbarText">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link home" href="#">Home</a>
+              <a class="nav-link" id="home">Home</a>
             </li>
           </ul>
           <span class="navbar-text">
@@ -29,40 +29,40 @@
         <div class="text-center bg-dark p-3 w-75 mx-auto d-flex flex-column">
             <h1 class="text-white-50">Search by Location</h1>
             <h5>Write the location to get the weather</h5>
-            <form id="search" action="javascript:void(0);">
+            <form id="searching" action="javascript:void(0);">
               <input class="form-class w-50" type="text" id="search" placeholder="Input your search keyword" name="search">
               <br><br>
               <input type="submit" class="btn btn-warning" id="submit" value="Search!">
             </form>
         </div>
     </main>
-    <section id="section">
+    <section id="section" class="bg-dark p-4">
       <div class="card bg-dark text-white w-50 m-auto">
-        <div class="image"></div>
+        <div id="image"></div>
         <div class="card-img-overlay">
-          <h5 class="card-title title text-center text-warning"></h5>
+          <h5 class="card-title text-center text-warning" id="title"></h5>
           <div class="d-flex flex-row justify-content-around">
             <ul class="list-group list-unstyled">
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item temp"><i class="fas fa-thermometer-half text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-grouy-item feel"><i class="fas fa-meteor text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item desc"><i class="fas fa-cloud-sun-rain text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item pressure"><i class="fas fa-compress-arrows-alt text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item humidity"><i class="fas fa-percent text-warning my-2"></i></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="temp"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-grouy-item" id="feel"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="desc"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="pressure"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="humidity"></li>
             </ul>
             <ul class="list-group list-unstyled">
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item minTemp"><i class="fas fa-temperature-low text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item maxTemp"><i class="fas fa-temperature-high text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item wind"><i class="fas fa-wind text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item windDir"><i class="fas fa-compass text-warning my-2"></i></li>
-              <li style="background-color: 255,255,255,0.8;";class="list-group-item clouds"><i class="fas fa-cloud text-warning my-2"></i></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="minTemp"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="maxTemp"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="wind"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="windDir"></li>
+              <li style="background-color: 255,255,255,0.8;";class="list-group-item" id="clouds"></li>
             </ul>
           </div>
         </div>
       </div>
     </section>
     <footer class="footer bg-dark p-3">
         <div class="container">
-          <p class="text-muted">Powered By &copy; JaviCorp</p>
+          <p class="text-warning">Powered By &copy; JaviCorp</p>
         </div>
     </footer>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

dist/main.js

@@ -1,2 +1,16 @@
+import { dom } from './js/dom';
+import { events } from './js/events';
+import { helpers } from './js/helpers';
 import './style/style.css';
 
+let manip = dom();
+let event = events();
+let help = helpers();
+
+const submit = document.getElementById('submit');
+submit.addEventListener('click', event.getSearch);
+
+const home = document.getElementById('home');
+home.addEventListener('click', ()=>{ manip.show() });
+
+

src/images/drizzle.jpg

@@ -13,21 +13,52 @@ const dom = function () {
     }
 
     function fillCard(data) {
-        helpers.addInnerText('temp', data['main']['temp'] + ' Celsius');
-        helpers.addInnerText('feel', data['main']['feels_like'] + ' Celsius');
-        helpers.addInnerText('desc', data['weather']['main']);
-        helpers.addInnerText('pressure', data['main']['pressure'] + ' hPa');
-        helpers.addInnerText('humidity', data['main']['humidity'] + '%');
-        helpers.addInnerText('minTemp', data['main']['temp_min'] + ' Celsius');
-        helpers.addInnerText('maxTemp', data['main']['temp_max'] + ' Celsius');
-        helpers.addInnerText('wind', data['wind']['speed'] + ' meter/sec');
-        helpers.addInnerText('windDir', data['wind']['deg'] + ' degrees');
-        helpers.addInnerText('clouds', data['clouds']['all'] + '%');
+        helpers().addInnerText('title', data['name']);
+        helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> ' + data['main']['temp'] + ' Celsius');
+        helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> ' + data['main']['feels_like'] + ' Celsius');
+        helpers().addInnerText('desc', '<i class="fas fa-cloud-sun-rain text-warning my-2"></i> ' + data['weather'][0]['main']);
+        helpers().addInnerText('pressure', '<i class="fas fa-compress-arrows-alt text-warning my-2"></i> ' + data['main']['pressure'] + ' hPa');
+        helpers().addInnerText('humidity', '<i class="fas fa-percent text-warning my-2"></i> ' + data['main']['humidity'] + '%');
+        helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> ' + data['main']['temp_min'] + ' Celsius');
+        helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i>' + data['main']['temp_max'] + ' Celsius');
+        helpers().addInnerText('wind','<i class="fas fa-wind text-warning my-2"></i> ' + data['wind']['speed'] + ' meter/sec');
+        helpers().addInnerText('windDir','<i class="fas fa-compass text-warning my-2"></i> ' + data['wind']['deg'] + ' degrees');
+        helpers().addInnerText('clouds','<i class="fas fa-cloud text-warning my-2"></i> ' + data['clouds']['all'] + '%');
     }
 
+    function imageSwitch(data) {
+        const code = data['weather'][0]['id'];
+        switch (true) {
+            case code >= 200 && code <= 232:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/lighting.jpg')";
+                break;
+            case code >= 300 && code <= 321:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/drizzle.jpg')";
+                break;
+            case code >= 500 && code <= 531:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/rain.jpg')";
+                break;
+            case code >= 600 && code <= 622:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/snow.jpg')";
+                break;
+            case code >= 701 && code <= 781:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/mist.jpg')";
+                break;
+            case code >= 801 && code <= 804:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/rainclouds.jpg')";
+                break;
+            case code==800:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/shiningsun.jpg')";
+                break;
+            default:
+                document.getElementById('image').style.backgroundImage = "url('../src/images/bluesky.jpg')";
+                break;
+        }
+    };
+
 
 
-    return { show, fillCard, }
+    return { show, fillCard, imageSwitch, }
 };
 
 export { dom }

src/images/mist.jpg

@@ -1,7 +1,7 @@
 import {dom} from './dom';
 
 const events = function () {
-    const submit = document.getElementById('submit');
+    
     async function getSearch() {
         try {
             const value = (document.getElementById('search').value).toLowerCase();
@@ -15,13 +15,12 @@ const events = function () {
         } catch (error) {
             console.error('Error:', error);
         }
-    };
-    submit.addEventListener('click', getSearch);
-
+    };  
 
     function showFlow(data) {
-        dom.fillCard(data);
-        dom.show()
+        dom().fillCard(data);
+        dom().imageSwitch(data);
+        dom().show()
     };
 
     return { getSearch, showFlow, }

src/index.js

@@ -1,90 +1,17 @@
 const helpers = function helpers() {
-
-    const addInnerText = function addInnerText(className, text) {
-        const element = document.getElementsByClassName(className);
-        element.innerHTML = text;
+    const createElement = function createElement(tag, className) {
+        const element = document.createElement(tag);
+        element.className = className;
         return element;
-    };
-  
-    const whichCardBg = function whichCardBg(weather) {
-      let classNames;
-      switch (weather) {
-        case 'high':
-          classNames = {
-            cardCN: 'card border-danger mb-3',
-            bodyCN: 'card-body text-danger',
-            footerCN: 'card-footer bg-transparent border-danger',
-            headerCN: 'card-header text-danger border-danger border-bottom',
-            iconEditCN: 'far fa-edit text-danger mr-3',
-            iconTrashCN: 'far fa-trash-alt text-danger',
-          };
-          break;
-        case 'medium':
-          classNames = {
-            cardCN: 'card border-primary mb-3',
-            bodyCN: 'card-body text-primary',
-            footerCN: 'card-footer bg-transparent border-primary',
-            headerCN: 'card-header text-primary border-primary border-bottom',
-            iconEditCN: 'far fa-edit text-primary mr-3',
-            iconTrashCN: 'far fa-trash-alt text-primary',
-          };
-          break;
-        default:
-          classNames = {
-            cardCN: 'card border-success mb-3',
-            bodyCN: 'card-body text-success',
-            footerCN: 'card-footer bg-transparent border-success',
-            headerCN: 'card-header text-success border-success border-bottom',
-            iconEditCN: 'far fa-edit text-success mr-3',
-            iconTrashCN: 'far fa-trash-alt text-success',
-          };
-      }
-      return classNames;
-    };
-  
-    // eslint-disable-next-line no-unused-vars
-    const createCard = function createCard(todo, todoId) {
-      const {
-        cardCN,
-        bodyCN,
-        footerCN,
-        headerCN,
-        iconEditCN,
-        iconTrashCN,
-      } = whichCardBg(todo.priority);
-      const col = createElement('div', 'col-4');
-      const card = createElement('div', cardCN);
-      card.style = 'max-width: 18rem;';
-      const cardHeader = createElementWithInnerText('div', headerCN, todo.title);
-  
-      const cardBody = createElement('div', bodyCN);
-      const h5 = createElementWithInnerText('h5', 'card-title', todo.description);
-      const everything = `${todo.notes} ${todo.dueDate} ${todo.priority}`;
-      const cardText = createElementWithInnerText('p', 'card-text', everything);
-  
-      const cardFooter = createElement('footer', footerCN);
-      const editIcon = createElement('i', iconEditCN);
-      const trashIcon = createElement('i', iconTrashCN);
-  
-      cardFooter.appendChild(editIcon);
-      cardFooter.appendChild(trashIcon);
-      card.appendChild(cardHeader);
-      todoList.appendChild(col);
-      cardBody.appendChild(h5);
-      cardBody.appendChild(cardText);
-      card.appendChild(cardBody);
-      card.appendChild(cardFooter);
-      col.appendChild(card);
-  
-      return {
-        col,
-        trashIcon,
-        editIcon,
       };
+    
+    const addInnerText = function addInnerText(className, text) {
+        const element = document.getElementById(className);
+        return element.innerHTML = text;        
     };
 
     return {
-      addInnerText,
+      addInnerText, createElement,
     };
   };
 

src/js/dom.js

@@ -3,17 +3,18 @@
     background-image: url("../images/summer.jpg");
     background-size: cover;
     background-position-y: 100%;
-    height: 100vh;
+    height: 80vh;
 }
 
-.image {
+#image {
     background-image: url("../images/sunset.jpg");
     background-size: cover;
     background-position-y: 100%;
     height: 75vh;
 }
 
 #section {
-    display: block;
+    display: none;
+    height: 80vh;
 }