JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">

  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-warning"><i class="fa fa-spinner fa-spin fa-fw"></i> İzmir Verilerini Getir</button>
    </div>
  </div>

  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label for="sicaklik">Sıcaklık</label>
        <input type="text" name="sicaklik" id="sicaklik" class="form-control" />
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <label for="ruzgar">Rüzgar</label>
        <input type="text" name="ruzgar" id="ruzgar" class="form-control" />
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <label for="falan">Falan</label>
        <input type="text" name="falan" id="falan" class="form-control" />
      </div>
    </div>




  </div>

  <div class="row">
    <div class="col-md-12">
      <textarea name="ten_days" rows="11" id="ten_days" class="form-control"></textarea>
    </div>

  </div>


</div>








<!--input type="text" data-stil /><br/><br/>
<input type="text" data-alert /><br/><br/>
<input type="text" /><br/><br/>
<input type="text" /><br/><br/-->

CSS

body {
  margin: 30px;
}

.tur1 {
  border: 3px solid red;
}

JavaScript

var urlm = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202347290%20and%20u%3D'c'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";

$.ajax({
  url: urlm,
  success: function(data) {
    //handleData(data);
    //alert(data.query.results.channel.item.condition.temp);

    $('#sicaklik').val(data.query.results.channel.item.condition.temp + "'C " + havametni(data.query.results.channel.item.condition.text));

    var veriler = data.query.results.channel.item.forecast;

    var doldur = "";
    for (i in veriler) {

      doldur += veriler[i].date + " " + veriler[i].high + "/" + veriler[i].low + " - " + havametni(veriler[i].text) + "\n";
    }
    $('#ten_days').val(doldur);
  }
});





function havametni(getir) {
  var al = getir;
  return getir.toString().replace('Partly Cloudy', 'Parçalı Bulutlu').replace('Scattered Showers', 'Sağanak Yağışlı').replace('Mostly Cloudy', 'Çok Bulutlu').replace('Scattered Thunderstorms', 'Aralıklı Sağanak').replace('Rain', 'Yağmurlu').replace('Sunny', 'Güneşli')
}