Forecast view done

package.json

@@ -13,14 +13,16 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "axios": "^0.18.0",
-    "dotenv-webpack": "^1.7.0"
+    "dotenv-webpack": "^1.7.0",
+    "moment": "^2.24.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "html-webpack-plugin": "^4.0.0-beta.5",
+    "moment-locales-webpack-plugin": "^1.0.7",
     "node-sass": "^4.11.0",
     "npm": "^6.8.0",
     "sass-loader": "^7.1.0",

src/js/Models/Current.js

@@ -15,6 +15,9 @@ function getCurrentLocation(options) {
   });
 }
 
+const proxy = process.env.PROXY;
+const api = process.env.APIKEY;
+
 // Class for the current weather
 export default class Current {
   constructor() {
@@ -49,8 +52,6 @@ export default class Current {
 
   // Get weather for current location
   async getWeather() {
-    const proxy = process.env.PROXY;
-    const api = process.env.APIKEY;
     try {
       const res = await axios.get(
         `${proxy}api.openweathermap.org/data/2.5/weather?lat=${

src/js/Models/Forecast.js

@@ -1,13 +1,50 @@
+import axios from 'axios';
+import moment from 'moment';
+
 export default class Forecast {
-  constructor(id) {
-    this.id = id;
+  constructor(name, data) {
+    this.name = name;
+    this.data = data;
   }
 
-  getID() {
-    return this.id;
-  }
+  async getForecast() {
+    const proxy = process.env.PROXY;
+    const api = process.env.APIKEY;
+    let query;
+    if (this.data.length === 1) {
+      query = `${proxy}api.openweathermap.org/data/2.5/forecast?id=${
+        this.data[0]
+      }&units=metric&appid=${api}`;
+    } else {
+      query = `${proxy}api.openweathermap.org/data/2.5/forecast?lat=${
+        this.data[0]
+      }&lon=${this.data[1]}&units=metric&appid=${api}`;
+    }
+    try {
+      const res = await axios.get(`${proxy}${query}`);
 
-  static info() {
-    return 'This is a test';
+      // Get only 1 result for each day since API returns data each 3 hours for 5 days
+      // Not the most elegant way here
+      const weather = res.data.list.reduce((acc, el, i) => {
+        if ([0, 7, 15, 23, 31, 39].includes(i)) {
+          const data = {
+            date: moment
+              .unix(el.dt)
+              .utc()
+              .format('dddd, Do MMMM'),
+            temp: Math.round(el.main.temp),
+            temp_max: Math.round(el.main.temp_max),
+            temp_min: Math.round(el.main.temp_min),
+            name: el.weather[0].main,
+            icon: el.weather[0].icon,
+          };
+          acc.push(data);
+        }
+        return acc;
+      }, []);
+      this.weather = weather;
+    } catch (err) {
+      console.log(err);
+    }
   }
 }

src/js/Views/forecastView.js

@@ -0,0 +1,53 @@
+import { elements } from './base';
+
+// Render Initial view
+export const renderView = name => {
+  const markup = `
+    <div class="forecast open">
+        <button class="close-popup">
+          <svg class="close-popup--icon">
+            <use xlink:href="./img/symbol-defs.svg#icon-plus"></use>
+          </svg>
+        </button>
+        <div class="title">
+          <svg class="title__icon">
+            <use xlink:href="./img/symbol-defs.svg#icon-location"></use>
+          </svg>
+          <h1 class="title__text">
+            ${name}
+          </h1>
+        </div>
+        <div class="title__text--subtitle">Forecast for the next 5 days</div>
+        <div class="days">
+        </div>
+      </div>
+  `;
+  elements.container.innerHTML = markup;
+};
+
+// Render each result
+export const renderResult = (result, container) => {
+  const markup = `
+    <div class="cities__weather">
+      <div class="cities__weather__name">${result.date}</div>
+      <div class="cities__weather__details">
+        <img
+          src="./img/weather/iconfinder_weather-04_1530389.svg"
+          class="cities__weather__details--icon"
+        />
+        <div class="cities__weather__details__text">
+          <div class="cities__weather__details__text--phrase">
+            ${result.name}
+          </div>
+          <div class="cities__weather__details__text--minmax">
+            ${result.temp_min}ºC <span class="dot">•</span> ${result.temp_max}ºC
+          </div>
+        </div>
+        <div class="cities__weather__details__temp">
+          ${result.temp}ºC
+        </div>
+      </div>
+    </div>
+  `;
+  container.insertAdjacentHTML('beforeEnd', markup);
+};

src/js/Views/homeView.js

@@ -60,9 +60,9 @@ export const renderWeather = (result, container, place) => {
   }
 
   // If weather of other location
-  else if (place === 'other') {
+  if (place === 'other') {
     markup = `
-    <div class="cities__weather">
+    <div class="cities__weather" data-id="${result.id}">
       <div class="cities__weather__name">${result.name}, ${result.country}</div>
       <div class="cities__weather__details">
         <img

src/js/app.js

@@ -3,11 +3,13 @@ import Search from './Models/Search';
 import Saved from './Models/Saved';
 import Current from './Models/Current';
 import Others from './Models/Others';
+import Forecast from './Models/Forecast';
 
 // Views
 import * as base from './Views/base';
 import * as searchView from './Views/searchView';
 import * as homeView from './Views/homeView';
+import * as forecastView from './Views/forecastView';
 
 // CSS
 import '../css/main.scss';
@@ -39,6 +41,9 @@ const currentController = async () => {
     // Clear loader
     base.clearLoader(parent);
 
+    // Add data set
+    parent.setAttribute('data-id', state.current.coords);
+
     // Render weather
     homeView.renderWeather(state.current, parent, 'main');
   }
@@ -78,6 +83,28 @@ const otherController = () => {
   });
 };
 
+// - FORECAST CONTROLLER -
+const forescastController = async (name, data) => {
+  // if there is data, create a new forecast object
+  if (name && data) state.forecast = new Forecast(name, data);
+
+  // render initial view
+  forecastView.renderView(name);
+
+  // loader
+  const parent = document.querySelector('.days');
+  base.renderLoader(parent);
+
+  // get forecast from api
+  await state.forecast.getForecast();
+
+  // render each day
+  state.forecast.weather.forEach(el => forecastView.renderResult(el, parent));
+
+  // Clear loader
+  base.clearLoader(parent);
+};
+
 // - SEARCH CONTROLLER -
 async function searchController(e) {
   e.preventDefault();
@@ -149,6 +176,8 @@ base.elements.container.addEventListener('click', e => {
   const closeBtn = e.target.closest('.close-popup');
   const addCityBtn = e.target.closest('.add__city');
   const searchItem = e.target.closest('.search__results__single');
+  const cityCard = e.target.closest('.cities__weather');
+  const currentCard = e.target.closest('.main__weather');
 
   if (closeBtn) {
     // Render home
@@ -158,6 +187,20 @@ base.elements.container.addEventListener('click', e => {
     otherController();
   }
 
+  // If city card clicked
+  if (cityCard && cityCard.dataset.id) {
+    const id = [parseInt(cityCard.dataset.id, 10)];
+    const name = cityCard.querySelector('.cities__weather__name').textContent;
+    forescastController(name, id);
+  }
+
+  // If current card clicked
+  if (currentCard && currentCard.dataset.id) {
+    const coords = currentCard.dataset.id.split(',').map(JSON.parse);
+    const name = currentCard.querySelector('.main__weather__city').textContent;
+    if (coords.length === 2) forescastController(name, coords);
+  }
+
   if (addCityBtn) {
     // Clear UI
     base.clearUI();

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 module.exports = {
   entry: ['@babel/polyfill', './src/js/app.js'],
@@ -17,6 +18,7 @@ module.exports = {
       template: './src/index.html',
     }),
     new Dotenv(),
+    new MomentLocalesPlugin(),
   ],
   module: {
     rules: [