Skip to content

Commit aaf97b7

Browse files
authored
Merge pull request #189 from TeerthTejani26/simple-html-template-element
Add new HTML Template Element example with header and footer
2 parents 68ac5a8 + 47768a9 commit aaf97b7

File tree

4 files changed

+78
-0
lines changed

4 files changed

+78
-0
lines changed

index.html

+1
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,7 @@
383383
<a href="stt" title="Web Speech API: speech to text">speech recognition</a>
384384
<a href="tts" title="Web Speech API: text to speech">speech synthesis</a>
385385
<a href="svg" title="SVG example">SVG</a>
386+
<a href="template" title="HTML Template Element">&lt;template&gt;</a>
386387
<a href="track" title="Track element">&lt;track&gt; with &lt;video&gt;</a>
387388
<a href="track/audio" title="Track element for audio">&lt;track&gt; with &lt;audio&gt;</a>
388389
<a href="track/map" title="Track element with synchronised metadata">&lt;track&gt; to synchronise video playback with Google Maps &amp; Street View display</a>

template/css/main.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* Styles for HTML Template Example */
2+
#itemList {
3+
list-style-type: none;
4+
padding: 0;
5+
}
6+
7+
#itemList li {
8+
background-color: #f0f0f0;
9+
margin-bottom: 5px;
10+
padding: 10px;
11+
}
12+
13+
header, footer {
14+
border-bottom: 1px solid #eee;
15+
margin-bottom: 20px;
16+
padding-bottom: 10px;
17+
text-align: center;
18+
}
19+
20+
footer {
21+
border-top: 1px solid #eee;
22+
margin-top: 20px;
23+
padding-top: 10px;
24+
}
25+
26+
h1 {
27+
font-size: 24px;
28+
}

template/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<title>HTML Template Element</title>
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="../css/main.css">
10+
<script src="js/main.js" defer></script>
11+
</head>
12+
13+
<body>
14+
<div id="container">
15+
<header>
16+
<h1><a href="https://simpl.info">simpl.info </a>HTML.Template.Element</h1>
17+
</header>
18+
19+
<main>
20+
<p>This example demonstrates how to use the HTML <code>&lt;template&gt;</code> element.</p>
21+
22+
<button id="add">Add Item</button>
23+
24+
<ul id="itemList"></ul>
25+
26+
<template id="itemTemplate">
27+
<li>Item</li>
28+
</template>
29+
</main>
30+
31+
<footer>
32+
<a href="https://github.com/samdutton/simpl/blob/master/template/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
33+
</footer>
34+
35+
</div>
36+
</body>
37+
38+
</html>

template/js/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const addButton = document.getElementById('add');
3+
const itemList = document.getElementById('itemList');
4+
const itemTemplate = document.getElementById('itemTemplate').content;
5+
6+
addButton.addEventListener('click', () => {
7+
const newItem = itemTemplate.cloneNode(true);
8+
itemList.appendChild(newItem);
9+
});
10+
});
11+

0 commit comments

Comments
 (0)