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
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']}">  `;
|
||
|
|
h1.appendChild(link);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|