Merge pull request #26 from GSG-G8/25-Refactor-Dom

Refactor the dom function

public/404.html

@@ -13,7 +13,7 @@
   <main class="main">
     <section class="error">
       <p class="error__desc">404. <span class="error__msg">Page not found</span></p>
-      <img class="error__image" src="./img/error.png" alt="error">
+      <img class="error__image" src="/images/404.svg" alt="error" />
     </section>
   </main>
 

public/css/style.css

@@ -0,0 +1,4 @@
+* {
+    margin: 0;
+    padding: 0
+}

public/index.html

@@ -16,6 +16,9 @@ <h1>
             <h2>
                 Our App aims to help people to explore locations using huge database and allows people to post data to the database in order to help other people
             </h2>
+            <div class="map__container">
+
+            </div>
         </header>
         <section class="section">
                 <input type="text" name="location" id="searchInput" value="" placeholder="location">

public/script/dom.js

@@ -1,47 +1,53 @@
 const viewDetails = document.querySelector('#viewDetails');
 const searchInput = document.querySelector('#searchInput');
+const mapContainer = document.querySelector('.map__container');
+const header = document.querySelector('.header');
 
-// Extra coordinates for testing (41.40338, 2.17403)
-let mapSrc = '31.5129811,34.4464425';
-const src = `https://www.google.com/maps/embed/v1/place?q=${mapSrc.split(',')[0]}%2C%20${mapSrc.split(',')[1]}&key=AIzaSyDDOHAK66Eu_kt42uNaSrmXoWZv8r3d_X8`;
 
-const iframe = document.createElement('iframe');
-iframe.setAttribute('width', `${window.innerWidth}`);
-iframe.setAttribute('height', '300px');
-iframe.setAttribute('frameborder', '0');
-iframe.setAttribute('style', 'border:0');
-iframe.setAttribute('allowfullscreen', '');
-iframe.setAttribute('src', `${src}`);
-
-document.querySelector('.header').appendChild(iframe);
+const deleteNodeChilds = (node) => {
+  while (node.firstChild) node.removeChild(node.firstChild);
+};
 
+// Extra coordinates for testing (41.40338,2.17403)
+
+let mapSrc = '31.5129811,34.4464425'; // Here the default coordinates are Gaza Sky Geeks coordinates
+
+const createIframe = () => {
+  deleteNodeChilds(mapContainer);
+  const src = `https://www.google.com/maps/embed/v1/place?q=${mapSrc.split(',')[0]}%2C%20${mapSrc.split(',')[1]}&key=AIzaSyDDOHAK66Eu_kt42uNaSrmXoWZv8r3d_X8`;
+  const iframe = document.createElement('iframe');
+  iframe.setAttribute('width', `${window.innerWidth}`);
+  iframe.setAttribute('height', '300px');
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('style', 'border:0');
+  iframe.setAttribute('allowfullscreen', '');
+  iframe.setAttribute('src', `${src}`);
+  mapContainer.appendChild(iframe);
+};
+(createIframe());
 
 const renderTheData = (location) => {
-  console.log(location);
-  const section = document.querySelector('.results__container');
+  const resultsContainer = document.querySelector('.results__container');
   const div = document.createElement('div');
-  const resultsName = document.createElement('h3');
-  resultsName.textContent = `Name: ${location[0].name}`;
-  div.appendChild(resultsName);
-
-  const resultCategory = document.createElement('h3');
-  resultCategory.textContent = `Category: ${location[0].category}`;
-  div.appendChild(resultCategory);
-
-  const resultDescription = document.createElement('h3');
-  resultDescription.textContent = `Description: ${location[0].description}`;
-  div.appendChild(resultDescription);
-
-  const resultCoordinates = document.createElement('h3');
-  resultCoordinates.textContent = `Coordinates: ${location[0].coordinates}`;
-  div.appendChild(resultCoordinates);
-
-  section.appendChild(div);
+  deleteNodeChilds(resultsContainer);
+  const createElements = (description, param2) => {
+    const resultsName = document.createElement('h4');
+    resultsName.textContent = `${description}: ${location[0][param2]}`;
+    div.appendChild(resultsName);
+  };
+
+  createElements('Name', 'name');
+  createElements('Category', 'category');
+  createElements('Description', 'description');
+  createElements('Coordinates', 'coordinates');
+
+  resultsContainer.appendChild(div);
 };
 
 viewDetails.addEventListener('click', () => {
   fetch(`/locations?location=${searchInput.value}`).then((res) => res.json()).then((result) => {
     mapSrc = result[0].coordinates;
     renderTheData(result);
+    createIframe();
   });
 });

server/app.js

@@ -1,3 +1,4 @@
+require('dotenv').config();
 const express = require('express');
 const path = require('path');
 const router = require('./controllers');