ProfAndreaPollini/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="page-container">
        <div class="pure-g">
            <div class="pure-u-1-3">
                <div id="h-list"></div>
            </div>
            <div class="pure-u-2-3">
                <div id="details"></div>
                <div id="mapid"></div>
            </div>
        </div>

    </div>
    <script src="main.js"></script>
</body>

</html>

## main.js
console.log("OK");

let earthquakes = [];
let lastUpdate = undefined;
var mymap = L.map("mapid").setView([51.505, -0.09], 8);
const mapTag = document.getElementById("mapid");
mapTag.style.display = "none";
L.tileLayer(
  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 13,
    id: "mapbox.streets",
    accessToken:
      "<YOUR TOKEN>"
  }
).addTo(mymap);

let HList = document.getElementById("h-list");

function getEarthquakeDetails(earthquake) {
  const { mag, place, alert, tsunami } = earthquake.properties;
  const alertDetails = alert || "NO ALERT";
  const alertTsunami = tsunami || "NO TSUNAMI ALERT";
  const details = `<h3>${place}</h3> <p>ALERT = ${alertDetails}</p>
    <p>TSUNAMI = ${alertTsunami}</p>`;
  const longitude = earthquake.geometry.coordinates[0];
  const latitude = earthquake.geometry.coordinates[1];
  const depth = earthquake.geometry.coordinates[2];

  mymap.flyTo([latitude, longitude]);
  console.log(earthquake);
  return details;
}

fetch(
  "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson"
)
  .then(response => response.json())
  .then(body => {
    const { features, metadata } = body;

    console.log(features);
    let codesAlreadySeen = earthquakes.map(e => e.id);
    console.log(codesAlreadySeen);
    lastUpdate = Date(metadata.generated);
    features.forEach(feature => {
      if (!codesAlreadySeen.includes(feature.id)) {
        earthquakes.push(feature);
        let h = document.createElement("div");
        console.log(feature);
        h.setAttribute("h-id", feature.id);
        const { mag, place } = feature.properties;

        let magClass = "";
        if (mag <= 1) {
          magClass = "mag-1";
        } else {
          magClass = "mag-" + Math.trunc(mag);
        }
        h.setAttribute("class", magClass);
        h.innerHTML = "<h3>" + place + "</h3><p>mag = " + mag + "</p>";
        h.onmouseenter = event => {
          console.log(event.target.getAttribute("h-id"));
          document.getElementById("details").innerHTML = getEarthquakeDetails(
            feature
          );
          mapTag.style.display = "block";
        };
        h.onmouseleave = event => {
          document.getElementById("details").innerHTML = "";
          mapTag.style.display = "none";
          //mymap.setMinZoom(1);
          //mymap.setMaxZoom(11);
          //mymap.fitWorld();
          // mymap.setMinZoom(13);
        };

        HList.prepend(h);
      }
    });
    console.log(earthquakes);
  });

## style.css
.page-container {
    margin: 20px;
}

#mapid {
    height: 680px;
}

.mag-1 {
    background-color: rgb(165, 214, 167)
}

.mag-2 {
    background-color: rgb(102, 187, 106)
}

.mag-3 {
    background-color: rgb(56, 142, 60)
}

.mag-4 {
    background-color: rgb(255, 235, 59)
}

.mag-5 {
    background-color: rgb(255, 193, 7)
}

.mag-6 {
    background-color: rgb(251, 140, 0)
}

.mag-7 {
    background-color: rgb(255, 112, 67)
}

.mag-8 {
    background-color: rgb(211, 47, 47)
}

.mag-9 {
    background-color: rgb(198, 40, 40)
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
	<!-- Make sure you put this AFTER Leaflet's CSS -->
	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div class="page-container">
	<div class="pure-g">
	<div class="pure-u-1-3">
	<div id="h-list"></div>
	</div>
	<div class="pure-u-2-3">
	<div id="details"></div>
	<div id="mapid"></div>
	</div>
	</div>

	</div>
	<script src="main.js"></script>
	</body>

	</html>
	console.log("OK");

	let earthquakes = [];
	let lastUpdate = undefined;
	var mymap = L.map("mapid").setView([51.505, -0.09], 8);
	const mapTag = document.getElementById("mapid");
	mapTag.style.display = "none";
	L.tileLayer(
	"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
	{
	attribution:
	'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 13,
	id: "mapbox.streets",
	accessToken:
	"<YOUR TOKEN>"
	}
	).addTo(mymap);

	let HList = document.getElementById("h-list");

	function getEarthquakeDetails(earthquake) {
	const { mag, place, alert, tsunami } = earthquake.properties;
	const alertDetails = alert \|\| "NO ALERT";
	const alertTsunami = tsunami \|\| "NO TSUNAMI ALERT";
	const details = `<h3>${place}</h3> <p>ALERT = ${alertDetails}</p>
	<p>TSUNAMI = ${alertTsunami}</p>`;
	const longitude = earthquake.geometry.coordinates[0];
	const latitude = earthquake.geometry.coordinates[1];
	const depth = earthquake.geometry.coordinates[2];

	mymap.flyTo([latitude, longitude]);
	console.log(earthquake);
	return details;
	}

	fetch(
	"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson"
	)
	.then(response => response.json())
	.then(body => {
	const { features, metadata } = body;

	console.log(features);
	let codesAlreadySeen = earthquakes.map(e => e.id);
	console.log(codesAlreadySeen);
	lastUpdate = Date(metadata.generated);
	features.forEach(feature => {
	if (!codesAlreadySeen.includes(feature.id)) {
	earthquakes.push(feature);
	let h = document.createElement("div");
	console.log(feature);
	h.setAttribute("h-id", feature.id);
	const { mag, place } = feature.properties;

	let magClass = "";
	if (mag <= 1) {
	magClass = "mag-1";
	} else {
	magClass = "mag-" + Math.trunc(mag);
	}
	h.setAttribute("class", magClass);
	h.innerHTML = "<h3>" + place + "</h3><p>mag = " + mag + "</p>";
	h.onmouseenter = event => {
	console.log(event.target.getAttribute("h-id"));
	document.getElementById("details").innerHTML = getEarthquakeDetails(
	feature
	);
	mapTag.style.display = "block";
	};
	h.onmouseleave = event => {
	document.getElementById("details").innerHTML = "";
	mapTag.style.display = "none";
	//mymap.setMinZoom(1);
	//mymap.setMaxZoom(11);
	//mymap.fitWorld();
	// mymap.setMinZoom(13);
	};

	HList.prepend(h);
	}
	});
	console.log(earthquakes);
	});
	.page-container {
	margin: 20px;
	}

	#mapid {
	height: 680px;
	}

	.mag-1 {
	background-color: rgb(165, 214, 167)
	}

	.mag-2 {
	background-color: rgb(102, 187, 106)
	}

	.mag-3 {
	background-color: rgb(56, 142, 60)
	}

	.mag-4 {
	background-color: rgb(255, 235, 59)
	}

	.mag-5 {
	background-color: rgb(255, 193, 7)
	}

	.mag-6 {
	background-color: rgb(251, 140, 0)
	}

	.mag-7 {
	background-color: rgb(255, 112, 67)
	}

	.mag-8 {
	background-color: rgb(211, 47, 47)
	}

	.mag-9 {
	background-color: rgb(198, 40, 40)
	}