Aurea-Li/index.html

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Seven Wonders</title>

    <script
  src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
  </head>
  <body>

    <h1> Seven Wonders of the World </h1>

    <section class='status-message'></section>

    <section>
      <ul>
      </ul>
    </section>

  </body>
</html>

## index.js

const sevenWonders = [
  "Great Pyramid of Giza",
  "Hanging Gardens of Babylon",
  "Colossus of Rhodes",
  "Pharos of Alexandria",
  "Statue of Zeus at Olympia",
  "Temple of Artemis",
  "Mausoleum at Halicarnassus"
];

const reportStatus = (message) => {
  $('.status-message').html(message);
};

const getCoordinates = (location) => {


  const address = location.split(' ').join('+');
  const URL = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&bounds=27.057438, 14.611095|40.948759, 49.189896&key=AIzaSyATN28EAkT5djmWAw6dREBAV4vgt2c0vDw`;


  axios.get(URL)
    .then((response) => {
      const l = $('ul');
      const coordinates = response.data.results[0].geometry.location;
      l.append(`<li> ${location} : ${coordinates.lat}, ${coordinates.lng}</li>`);
    })
    .catch((error) => {
      console.log(error);
    });

};


$(document).ready(() => {

  reportStatus('Loading coordinates ...');

  sevenWonders.forEach( (wonder) => {
    getCoordinates(wonder);
  });

  reportStatus('Successfully loaded seven wonders coordinates!');

});
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Seven Wonders</title>

	<script
	src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
	</head>
	<body>

	<h1> Seven Wonders of the World </h1>

	<section class='status-message'></section>

	<section>
	<ul>
	</ul>
	</section>

	</body>
	</html>

	const sevenWonders = [
	"Great Pyramid of Giza",
	"Hanging Gardens of Babylon",
	"Colossus of Rhodes",
	"Pharos of Alexandria",
	"Statue of Zeus at Olympia",
	"Temple of Artemis",
	"Mausoleum at Halicarnassus"
	];

	const reportStatus = (message) => {
	$('.status-message').html(message);
	};

	const getCoordinates = (location) => {


	const address = location.split(' ').join('+');
	const URL = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&bounds=27.057438, 14.611095\|40.948759, 49.189896&key=AIzaSyATN28EAkT5djmWAw6dREBAV4vgt2c0vDw`;


	axios.get(URL)
	.then((response) => {
	const l = $('ul');
	const coordinates = response.data.results[0].geometry.location;
	l.append(`<li> ${location} : ${coordinates.lat}, ${coordinates.lng}</li>`);
	})
	.catch((error) => {
	console.log(error);
	});

	};


	$(document).ready(() => {

	reportStatus('Loading coordinates ...');

	sevenWonders.forEach( (wonder) => {
	getCoordinates(wonder);
	});

	reportStatus('Successfully loaded seven wonders coordinates!');

	});