You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

54 lines
1.6 KiB
HTML

3 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>a cat and a pen</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 id="content">
</h1>
<p>
</p>
<!-- <script src="script.js"></script> -->
<script>
function shuffleArray(arr) {
arr.sort(() => Math.random() - 0.5);
}
var db = [
{"link": "subpages/catlion.html", "obj1": "crop/cat.jpg", "obj2": "crop/lion.jpg"},
{"link": "subpages/pencat.html", "obj1": "crop/pen.jpg", "obj2": "crop/cat2.jpg"},
{"link": "subpages/chamallowsock.html", "obj1": "crop/chamallow.jpg", "obj2": "crop/sock.jpg"},
{"link": "subpages/teacupbouquet.html", "obj1": "crop/teacup.jpg", "obj2": "crop/bouquet.jpg"},
{"link": "subpages/rabbitsofa.html", "obj1": "crop/rabbit.jpg", "obj2": "crop/sofa.jpg"},
{"link": "subpages/grannythief.html", "obj1": "crop/granny.jpg", "obj2": "crop/thief.jpg"},
];
// randomly shuffle the db list
shuffleArray(db);
// db = load_json("db.json"); ...
// turn the data into page elements...
var h1 = document.getElementById("content");
// turn the list of data into links and images in the page...
for (var i=0; i<db.length; i++) {
var item = db[i]; // item is the particular {}
console.log("item", item);
var link = document.createElement("a");
link.classList.add("pages");
link.href = item['link'];
link.innerHTML = `a <img src="${item['obj1']}"> and a <img src="${item['obj2']}"> &nbsp`;
h1.appendChild(link);
}
</script>
</body>
</html>