const url = 'http://api.wikimapia.org/?key=example&function=place.getnearest&format=json';
const btn = document.querySelector('.btn');
const output = document.querySelector('.output');
const inputVal = document.querySelector('.val');
const inputVal2 = document.createElement('input');
inputVal2.setAttribute('type','text');
inputVal2.value = '2.29451'; //lon
document.body.prepend(inputVal2);
const h1 = document.querySelector('h1');
document.body.prepend(h1);
inputVal.value = '48.858252'; //lat
btn.textContent = 'Search Map Lon Lat';
btn.addEventListener('click',(e)=>{
let lon = inputVal2.value;
let lat = inputVal.value;
let tempURL = `${url}&lat=${lat}&lon=${lon}`;
console.log(tempURL);
fetch(tempURL).then((res)=>res.json())
.then((data)=>{
console.log(data);
output.innerHTML = '';
//JSON.stringify(data);
maker(data.places);
})
.catch((err)=>{
console.log(err);
})
})
function maker(data){
data.forEach(el => {
console.log(el);
const div = document.createElement('div');
div.classList.add('box');
div.innerHTML = `<div>Title ${el.title}<br>${el.urlhtml}</div>`;
output.append(div);
});
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript JSON</title>
<style>
.box{
border: 1px solid black;
border-radius: 25px;
padding:20px;
margin:10px auto;
width:80%;
}
.box:hover{
opacity: 0.8;
}
</style>
</head>
<body>
<h1>JSON</h1>
<input type="text" class="val">
<button class="btn">Click</button>
<div class="output"></div>
<script src="app3.js"></script>
</body>
</html>