Skip to content

Commit 80a529b

Browse files
Aman0509Aman0509
committed
add <template> tag implementation
1 parent 1d2c8f8 commit 80a529b

File tree

3 files changed

+67
-2
lines changed

3 files changed

+67
-2
lines changed

‎Advanced-DOM-APIs/README.md‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
| [Getting Element Box Dimension](#getting-element-box-dimension) |
77
| [Working with Element Sizes and Positions](#working-with-element-sizes-and-positions) |
88
| [Handling Scrolling](#handling-scrolling) |
9+
| [Working with `<template>` tag](#working-with-template-tag) |
910

1011
Below topics will be covered and for its practical application, [Planner Project](project_planner/) will be used as reference where concept of classes and functions are demonstrated:
1112

@@ -139,4 +140,59 @@ There are several scrolling methods available in the Document Object Model (DOM)
139140

140141
5. [`window.innerHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight) - This property returns the height of the browser window's viewport in pixels. It can be used to determine how much of the document is currently visible on the screen.
141142

142-
These are some of the most commonly used scrolling methods in the DOM, but there are other methods available as well, depending on the specific use case.
143+
These are some of the most commonly used scrolling methods in the DOM, but there are other methods available as well, depending on the specific use case.
144+
145+
## Working with [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) tag
146+
147+
The `<template>` tag is an HTML5 tag that allows developers to declare content that can be reused in different parts of the document without being displayed on the page. It can be used to create a template of HTML content that can be cloned and inserted into the DOM using JavaScript.
148+
149+
Here's an example of how to use the `<template>` tag:
150+
151+
```HTML
152+
<!-- Declare a template for a list item -->
153+
<template id="list-item-template">
154+
<li class="list-item">
155+
<span class="item-name"></span>
156+
<span class="item-price"></span>
157+
</li>
158+
</template>
159+
160+
<!-- Create a list and insert some items using the template -->
161+
<ul id="shopping-list"></ul>
162+
163+
<script>
164+
// Get a reference to the template
165+
const template = document.querySelector('#list-item-template');
166+
167+
// Clone the template and update its content
168+
const item1 = template.content.cloneNode(true);
169+
item1.querySelector('.item-name').textContent = 'Apples';
170+
item1.querySelector('.item-price').textContent = '$2.99';
171+
172+
// Append the item to the shopping list
173+
const shoppingList = document.querySelector('#shopping-list');
174+
shoppingList.appendChild(item1);
175+
176+
// Clone the template again for another item
177+
const item2 = template.content.cloneNode(true);
178+
item2.querySelector('.item-name').textContent = 'Oranges';
179+
item2.querySelector('.item-price').textContent = '$3.99';
180+
181+
// Append the second item to the shopping list
182+
shoppingList.appendChild(item2);
183+
</script>
184+
```
185+
186+
In this example, we first declare a template for a list item using the `<template>` tag. The template contains HTML markup for a list item with two spans for the item name and price.
187+
188+
We then use JavaScript to get a reference to the template using its ID, and clone the template to create a new list item. We update the content of the cloned item by setting the text content of the name and price spans.
189+
190+
Finally, we append the cloned item to a shopping list by selecting the list element using its ID and calling the appendChild() method to add the item to the end of the list. We repeat this process to add a second item to the list.
191+
192+
Using the `<template>` tag allows us to create reusable templates for HTML content that can be cloned and inserted into the DOM as needed. This can be useful for creating dynamic content or for separating content from presentation.
193+
194+
Readings:
195+
196+
- [HTML template Tag](https://www.geeksforgeeks.org/html-template-tag/)
197+
198+
- [Document: importNode() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode)

‎Advanced-DOM-APIs/project_planner/assets/scripts/app.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ class Tooltip extends Component {
5151
create() {
5252
const toolTipElement = document.createElement('div');
5353
toolTipElement.className = 'card';
54-
toolTipElement.textContent = this.toolTipText;
54+
// toolTipElement.textContent = this.toolTipText;
55+
const tootTipTemplate = document.getElementById('tooltip');
56+
const tootTipBody = document.importNode(tootTipTemplate.content, true);
57+
tootTipBody.querySelector('p').textContent = this.toolTipText;
58+
toolTipElement.append(tootTipBody);
59+
5560
const hostElementLeft = this.hostElement.offsetLeft;
5661
const hostElementTop = this.hostElement.offsetTop;
5762
const hostElementHeight = this.hostElement.offsetHeight;

‎Advanced-DOM-APIs/project_planner/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
</head>
1111
<body>
1212
<!-- Consider this page renders after some action and response was sent by backend and we will now practice what we've learnt -->
13+
<template id="tooltip">
14+
<h2>More Info</h2>
15+
<p><p>
16+
</template>
1317
<header id="main-header">
1418
<h1>Project Planner</h1>
1519
</header>

0 commit comments

Comments
 (0)