<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .responsive { max-width: 100%; height: auto; } </style> <title id=myTitle></title> </head> <body> <h1 align=center id=myTitle2></h1> <div id=year></div><div id=theme></div> <img src="cover.jpg" class="responsive" width="600" height="400"> <script type="text/javascript"> fetch('info.json') .then(function (response) { return response.json(); }) .then(function (data) { appendData(data); }) .catch(function (err) { console.log('error: ' + err); }); function appendData(data) { document.getElementById("myTitle").innerHTML = data.name + " - " + data.set_num document.getElementById("myTitle2").innerHTML = data.name + " - " + data.set_num document.getElementById("year").innerHTML = "Year: " + data.year document.getElementById("theme").innerHTML = "Theme ID: " + data.theme_id } </script> </body> </html>