Added Template tag

This commit is contained in:
nishantshenoy 2022-10-01 21:19:31 +05:30
parent c062388fce
commit a25576df68
3 changed files with 215 additions and 91 deletions

View File

@ -1,94 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML5 Feature Tips</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="./favicons/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="./favicons/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="./favicons/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="./favicons/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="./favicons/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="./favicons/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="./favicons/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="./favicons/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./favicons/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="./favicons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="./favicons/ms-icon-144x144.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>HTML5 Feature Tips</title>
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
<a
href="https://github.com/atapas/html-tips-tricks"
target = "_blank"
rel="tag noopener noreferrer">
<img
width="149"
height="149"
src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1">
</a>
<div class="demo">
<h1>HTML5 Feature Tips</h1>
<img src="html5.png" alt="HTML5" style="height: 100px;width: 100px;">
<ul class="list">
<li>
<a href='./details/index.html'>
Details Tag</a> - Specify details that the user can open and close on demand
</li>
<li>
<a href='./inputs/index.html'>
Inputs</a> - Various useful tips
</li>
<li>
<a href='./content-editable/index.html'>
Content Editable</a> - Make the content Editable
</li>
<li>
<a href='./mark/index.html'>
Mark Content</a> - Highlight things
</li>
<li>
<a href='./data-attribute/index.html'>
Custom Data</a> - Data with elements
</li>
<li>
<a href='./output/index.html'>
Output Tag</a> - To perform a calculation and show the result
</li>
<li>
<a href='./datalist/index.html'>
Datalist Tag</a> - Allows you to search and add elements
</li>
<li>
<a href='./range/index.html'>
Range(Slider)</a> - Do you need a range slider?
</li>
<li>
<a href='./map/index.html'>
Map</a> - Image map with coordinates
</li>
<li>
<a href='./meter/index.html'>
Meter and Progress</a> - Display a gauge
</li>
<li>
<a href='./dialog/index.html'>
Dialog</a> - Display a Modal Dialog
</li>
</ul>
</div>
</body>
</html>
<body>
<a
href="https://github.com/atapas/html-tips-tricks"
target="_blank"
rel="tag noopener noreferrer"
>
<img
width="149"
height="149"
src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
class="attachment-full size-full"
alt="Fork me on GitHub"
data-recalc-dims="1"
/>
</a>
<div class="demo">
<h1>HTML5 Feature Tips</h1>
<img
src="html5.png"
alt="HTML5"
style="height: 100px; width: 100px"
/>
<ul class="list">
<li>
<a href="./details/index.html"> Details Tag</a> - Specify
details that the user can open and close on demand
</li>
<li>
<a href="./inputs/index.html"> Inputs</a> - Various useful
tips
</li>
<li>
<a href="./content-editable/index.html">
Content Editable</a
>
- Make the content Editable
</li>
<li>
<a href="./mark/index.html"> Mark Content</a> - Highlight
things
</li>
<li>
<a href="./data-attribute/index.html"> Custom Data</a> -
Data with elements
</li>
<li>
<a href="./output/index.html"> Output Tag</a> - To perform a
calculation and show the result
</li>
<li>
<a href="./datalist/index.html"> Datalist Tag</a> - Allows
you to search and add elements
</li>
<li>
<a href="./range/index.html"> Range(Slider)</a> - Do you
need a range slider?
</li>
<li>
<a href="./map/index.html"> Map</a> - Image map with
coordinates
</li>
<li>
<a href="./meter/index.html"> Meter and Progress</a> -
Display a gauge
</li>
<li>
<a href="./dialog/index.html"> Dialog</a> - Display a Modal
Dialog
</li>
<li>
<a href="./template/index.html"> Template</a> - Contains
content that the user can't see. You need to use JavaScript
to render it later.
</li>
</ul>
</div>
</body>
</html>

BIN
template/hacktoberfest.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

51
template/index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML Tips and Tricks - Template Tag</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
media="screen"
href="../main.css"
/>
</head>
<body>
<div class="demo">
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
<h1>Template Tag</h1>
<!-- Trigger/Open The Modal -->
<button id="showTemplate" onClick="showContent()">
Show Template
</button>
<template>
<p style="text-align: center">
Hacktoberfest is finally here!!!
</p>
<img
src="hacktoberfest.png"
alt="Hacktoberfest"
width="1920"
height="1000"
/>
</template>
</div>
<script>
const showContent = () => {
let temp = document.getElementsByTagName('template')[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
};
</script>
</body>
</html>