Weather info app with JavaScript ES6

Today i will create a small weather app that will fetch weather data from api using es6 Iam using MVC approach in this small application.If you see the js files there are four main files one is Index.js which is our controller and second one is searchView.js which is our model and third one is search.js which is our View.
Demo
1) Index.js is a controller where our Model and View logic combines
2) searchView.js is wheres is our all view related stuff goes.
3) search.js is where our all logic goes.
4) common.js where all commin elements or function goes.

Index.js
import { updatedWeather } from './views/SearchView';
import { Weather } from './models/Search';
import { clearLoader,elements } from './views/common';
const weather = new Weather('Kolkata');
elements.getCity.addEventListener('change',(e)=>{
    const newCity = elements.getCity.value;
    //console.log(newCity)
    weather.changeLocation(newCity);
   clearLoader()
    pageLoad();
     
    
})
document.addEventListener('DOMContentLoaded',pageLoad)
function pageLoad(){
    weather.getResults()
    .then(result=>{
        //console.log(result)    
       updatedWeather(result);
       
    })
    .catch(error =>{
        console.log(error)    
    })
}



searchView.js
import { elements } from './common';
export const updatedWeather = (weather) =>{
    elements.cityName.textContent =  `City ${weather.data.location.name}`;
    elements.country.textContent = `Country ${weather.data.location.country}`;
    elements.temp_c.textContent = `Celsius ${weather.data.current.temp_c}`;
    elements.temp_f.textContent = `Fahrenheit  ${weather.data.current.temp_f}`;
    elements.humidity.textContent = `humidity ${weather.data.current.humidity}`;
}
export const clearResults = () =>{
    elements.country.innerHTML = '';
    elements.cityName.innerHTML = '';
    elements.temp_c.innerHTML = '';
    elements.temp_f.innerHTML = '';
    elements.humidity.innerHTML = '';
}
search.js
import axios from 'axios';
import { elements,renderLoader,clearLoader } from '../views/common';
import { clearResults } from '../views/SearchView';
export class Weather {
    constructor(city){
        this.city = city;
    }
    async getResults(){
        const proxy = 'https://cors-anywhere.herokuapp.com/';
        const key = 'd3602b83023946ebbc5110626180906';
        try{
            clearResults();
            renderLoader(elements.details)
            const result = await axios(`${proxy}http://api.apixu.com/v1/current.json?key=${key}&q=${this.city}`);
          clearLoader()
         return result;
         
        }
        catch(error){
            alert(error);
        }
    };
    changeLocation(city){
        
        this.city = city;
    }
}
common.js
export const elements = {
    cityName:document.getElementById('city'),
    country:document.getElementById('country'),
    temp_c:document.getElementById('temp_c'),
    temp_f:document.getElementById('temp_f'),
    humidity:document.getElementById('humidity'),
    getCity:document.getElementById('getCity'),
    details:document.getElementById('details')
};
export const elementString = {
    loader:'loader'
}
export const renderLoader = parent =>{
    const loader = `
        <div class="${elementString.loader}">
           <div></div><div></div>
        </div>
    `;
    parent.insertAdjacentHTML('afterbegin', loader);
}
export const clearLoader = ()=>{
    const loader = document.querySelector(`.${elementString.loader}`);
    if(loader){
        
        loader.parentElement.removeChild(loader);
    }
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
  <title>WeatherJS</title>
  <style>
  .loader {
  display: inline-block;
 
  
     position: absolute;
    z-index: 9;
    left: 40%;
    top: 40%;
}
.loader div {
  position: absolute;
  border: 4px solid #cef;
  opacity: 1;
  border-radius: 50%;
  animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes loader {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}
</style>
</head>
<body>
  <div class="container" id="test">
    <div class="row">
      <div class="col-md-6 mx-auto text-center bg-primary mt-5 p-5 rounded">
         <select id="getCity" class="form-control">
            <option value="Kolkata">Kolkata</option>
  <option value="London">London</option>
  <option value="Chicago">Chicago</option>
  <option value="Chennai">Chennai</option>
  <option value="Delhi">Delhi</option>
</select>
       
        <ul id="details" class="list-group mt-3">
        
          <li class="list-group-item" id="country"></li>
           <li class="list-group-item" id="city"></li>
          <li class="list-group-item" id="temp_c"></li>
          <li class="list-group-item" id="temp_f"></li>
          <li class="list-group-item" id="humidity"></li>
        </ul>
        <hr>
       
      </div>
    </div>
  </div>

 
  

</body>
</html>

One thought on “Weather info app with JavaScript ES6

Leave a Reply

Your email address will not be published. Required fields are marked *