Projet demo

Widget demo

by Nizar AYED

HTML

<body onload="search()">
    <div class="container" style="text-align: center">
        <label for="city">Ville</label><br>
        <input type="text" id="city" name="city" value="Dakar">
        <button onclick="search()">Search</button>
        <div id="temperature">--°C</div>
    </div>
</body>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 70px 0;
}

.container {
    text-align: left;
    margin: auto;
    width: 400px;
    height: 400px;
    border-radius: 20px;
    padding: 20px;
    background-image: url("weather.jpg");
    background-size: 120%;
    background-repeat: no-repeat;
    color: black;
}

#temperature {
    font-size: 32px;
    padding: 20px;
}

JavaScript

/* eslint-disable no-unused-vars */
/* eslint-disable camelcase */
var api_key = '3c084bd74c2f77f02d6d6c30c2018bf0';
var base_url = 'https://api.openweathermap.org/data/2.5/';
var request = 'weather?';
var units = 'metric';

function search () {
  var city = document.getElementById('city').value;
  //var city = 'Dakar';
  var url = base_url + request +
                'q=' + city +
                '&units=' + units +
                '&appid=' + api_key;
  
  console.log(url);
  fetch(url)
  .then( result => result.json() )
  .then( data => get_temp(data) );
}

function get_temp (data) {
	//console.log(data);
  console.log(data.main.temp);
  document.getElementById('temperature').innerHTML = data.main.temp + '&deg;C'
}