2024-09-06 14:22:47 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const app = document.getElementById('app');
|
2024-09-06 14:34:17 +02:00
|
|
|
const pocketStuff = ['Hat', 'Pencil', 'Dinosaur', 'Showercap', 'Piece of tape'];
|
2024-09-06 14:22:47 +02:00
|
|
|
|
|
|
|
|
view();
|
|
|
|
|
function view() {
|
|
|
|
|
let html = '';
|
|
|
|
|
html += /*HTML*/ `
|
|
|
|
|
<button onclick="seeWhatsInPocket()">
|
|
|
|
|
See what is in the pockets!
|
|
|
|
|
</button>
|
|
|
|
|
`;
|
|
|
|
|
app.innerHTML = html;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// controller
|
|
|
|
|
function seeWhatsInPocket(){
|
2024-09-06 14:34:17 +02:00
|
|
|
for (i = 0; i < pocketStuff.length; i++){
|
2024-09-06 14:22:47 +02:00
|
|
|
console.log(i);
|
|
|
|
|
app.innerHTML += /*HTML*/ `
|
|
|
|
|
<li>${pocketStuff[i]}</li>
|
|
|
|
|
`;
|
2024-09-06 14:34:17 +02:00
|
|
|
};
|
2024-09-06 14:22:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
