<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test File</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="recentsearch()">
<!-- start wrapper -->
<div class="wrapper">
<!-- start search_bx -->
<div class="search_bx">
<input id="typesearch" type="text" placeholder="Type Location" />
<div class="clear"></div>
<select id="recentsearch"><option value="RecentSearch">Recent Search</option></select>
<div class="clear"></div>
</div>
<!-- end search_bx -->
<!-- start weatherinfo -->
<div class="weatherinfo" id="weatherinfo">
</div>
<!-- end weatherinfo -->
</div>
<!-- end wrapper -->
<!-- start country data template -->
<script id="templateOne" type='text/ractive'>
<datatable>
<tr>
<th class="city-param-name">country Name</th>
<th class="city-param">{{sys.country}}</th>
</tr>
<tr>
<td class="city-param-name">City Name</td>
<td class="city-param">{{name}}</td>
</tr>
<tr>
<td class="city-param-name">temp</td>
<td class="city-param">{{main.temp+' ºC'}}</td>
</tr>
<tr>
<td class="city-param-name">clouds</td>
<td class="city-param">{{clouds.all+' %'}}</td>
</tr>
<tr>
<td class="city-param-name">humidity</td>
<td class="city-param">{{main.humidity+' %'}}</td>
</tr>
<tr>
<td class="city-param-name">pressure</td>
<td class="city-param">{{main.pressure+' kPa'}}</td>
</tr>
<tr>
<td class="city-param-name">wind direction</td>
<td class="city-param">{{wind.deg+' °'}}</td>
</tr>
<tr>
<td class="city-param-name">wind speed</td>
<td class="city-param">{{wind.speed+' m/s'}}</td>
</tr>
</datatable>
</script>
<!-- end country data template -->
<!-- start datatable template -->
<script id="datatable" type='text/ractive'>
<table id="table">
<tbody>
{{>content}}
</tbody>
</table>
</script>
<!-- end datatable template -->
<!-- start javascript files -->
<script type="text/javascript" src="js/ractive.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- end javascript files -->
</body>
</html>
*{margin:0; padding:0; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
body {background:#f2f2f2; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333;}
.wrapper {width:500px; margin:50px auto; }
/* search part */
.search_bx input, .search_bx select {width:100%; border-radius:3px; border:solid 1px #cacaca; height:40px; padding:10px; font-size:16px; margin-bottom:20px;color: #505050;}
.search_bx input:focus, .search_bx select:focus {box-shadow:0 0 10px rgba(3, 169, 244, .7); outline:0; border-color: rgb(3, 169, 244)}
.search_bx select:disabled {color:#A9A9B1; cursor:not-allowed;}
/* table */
table {width:100%; border: 1px solid #ddd;border-spacing:0; text-transform:capitalize;}
table th, table td {padding:10px; vertical-align:text-bottom; text-align:left; }
table td{ border-top: 1px solid #ddd;}
table th { text-transform:uppercase;}
table tr, table th {background:#eee;}
table tr:nth-child(2n){background:#fff;}
// Read Json file Function
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
// uniques value Function
function uniques(arr) {
var a = [];
for (var i=0, l=arr.length; i<l; i++)
if (a.indexOf(arr[i]) === -1 && arr[i] !== '')
a.push(arr[i]);
return a;
}
// search location Function
document.getElementById('typesearch').onchange = function() {
var val = document.getElementById('typesearch').value.replace(/^\s+|\s+$/gm,'');
if ((val == '') || (val == null) ){
alert('Please Inset Location...');
} else {
var old = localStorage.getItem("locationvalue");
if(old == null){
val = localStorage.setItem("locationvalue", (val));
} else {
val = localStorage.setItem("locationvalue", (val+' '+old));
}
val = localStorage.getItem("locationvalue").replace(/^\s+|\s+$/gm,'').split(' ');
var final = uniques(val);
recentsearch();
fetchdata(final);
}
};
// Recent Search location Function
document.getElementById('recentsearch').onchange = function() {
document.getElementById('typesearch').value = ' ';
var val = document.getElementById('recentsearch').value;
if (!val === 'RecentSearch'){
fetchdata(val);
}
};
// Data Binding Function
function fetchdata(data) {
var weather = 'http://api.openweathermap.org/data/2.5/weather?q='+data+'&appid=231524dde47ccaa641f047573816f201';
readTextFile(weather, function(data){
var data = JSON.parse(data);
Ractive.components['datatable'] = Ractive.extend({
template: '#datatable'
})
var ractive = new Ractive({
el: 'weatherinfo',
template: '#templateOne',
data: data,
lazy: 500
});
});
}
// Recent Search location Storage Function
function recentsearch(){
var val = localStorage.getItem("locationvalue").replace(/^\s+|\s+$/gm,'').split(' ');
var final = uniques(val);
var opt = '<option value="RecentSearch">Recent Search</option>';
for (var i=0;i<final.length;i++){
opt = opt + "<option value="+final[i]+">"+final[i]+"</option>";
}
document.getElementById('recentsearch').innerHTML=opt;
}
