diff --git a/index.html b/index.html index 6f1cfede..908e5de5 100644 --- a/index.html +++ b/index.html @@ -383,6 +383,7 @@ speech recognition speech synthesis SVG + <template> <track> with <video> <track> with <audio> <track> to synchronise video playback with Google Maps & Street View display diff --git a/template/css/main.css b/template/css/main.css new file mode 100644 index 00000000..b9c3f84b --- /dev/null +++ b/template/css/main.css @@ -0,0 +1,28 @@ +/* Styles for HTML Template Example */ +#itemList { + list-style-type: none; + padding: 0; +} + +#itemList li { + background-color: #f0f0f0; + margin-bottom: 5px; + padding: 10px; +} + +header, footer { + border-bottom: 1px solid #eee; + margin-bottom: 20px; + padding-bottom: 10px; + text-align: center; +} + +footer { + border-top: 1px solid #eee; + margin-top: 20px; + padding-top: 10px; +} + +h1 { + font-size: 24px; +} \ No newline at end of file diff --git a/template/index.html b/template/index.html new file mode 100644 index 00000000..9c8229f9 --- /dev/null +++ b/template/index.html @@ -0,0 +1,38 @@ + + + + + + HTML Template Element + + + + + + + +
+
+

simpl.info HTML.Template.Element

+
+ +
+

This example demonstrates how to use the HTML <template> element.

+ + + + + + +
+ + + +
+ + + diff --git a/template/js/main.js b/template/js/main.js new file mode 100644 index 00000000..4e7f5e0c --- /dev/null +++ b/template/js/main.js @@ -0,0 +1,11 @@ +document.addEventListener('DOMContentLoaded', () => { + const addButton = document.getElementById('add'); + const itemList = document.getElementById('itemList'); + const itemTemplate = document.getElementById('itemTemplate').content; + + addButton.addEventListener('click', () => { + const newItem = itemTemplate.cloneNode(true); + itemList.appendChild(newItem); + }); + }); + \ No newline at end of file