How to Create Web Component

As of 2023, the support for web components, alternatively referred to as custom elements, across browsers is exceptionally robust. Now is an opportune moment to embark on the journey of crafting your personalized elements for the web.

Web components, synonymous with custom elements, represent novel HTML elements that you can personally construct. These elements encapsulate a combination of markup, style, and interactive features.

Within the confines of this article, you'll delve into the fundamentals of web components and embark on the creation of a straightforward web component designed to display the current date.

Example

// mycomponent.js class CurrentDate extends HTMLElement { // The browser calls this method when the element is // added to the DOM. connectedCallback() { // Create a Date object representing the current date. const now = new Date(); // Format the date to a human-friendly string, and set the // formatted date as the text content of this element. this.textContent = now.toLocaleDateString(); } } // Register the CurrentDate component using the tag name <current-date>. customElements.define('current-date', CurrentDate); // index.html <h2>Today's Date: <current-date></current-date></h2>

Extract data from HTML table in an array using jQuery.

Individuals encounter challenges working with data in HTML when attempting to integrate it into their code. The following presents a straightforward method for extracting data from an HTML table and storing it in an array.

  // following lines will return header text in array from thead section let tableHeaderValues = $("#mytable thead th").map(function() { return this.innerText; }).get() console.log(tableHeaderValues); // following lines will return in tbody, as an array object let tableBodyValues = $("#mytable tbody tr").map(function() { return [$("td",this).map(function() { return this.innerText; }).get()]; }).get(); console.log(tableBodyValues);

HTML Tags, which does not require CSS or JS

(1) The <details> tag is used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands and displays the content within. The <summary> tag is used in conjunction with <details> to specify the details of a visible heading. 

 Here is an example:- <details> <summary>Loram Ipsum</summary> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </details>

Output

Loram Ipsumis simply dummied

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

---

(2) Tag <picture>
The <picture> tag gives you flexibility in specifying image resources. This tag is used in responsive designs. As it allows you to use multiple images of different sizes to nicely fill the browser viewport, so you don’t need to use one image that is scaled up or down based on the viewport width.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.

Here is an example

<p>Resize the browser window to load different images.</p> <picture> <source media="(min-width:650px)" srcset="https://images.freeimages.com/images/large-previews/106/photographer-1464286.jpg"> <source media="(min-width:465px)" srcset="https://images.freeimages.com/images/large-previews/fd2/photographer-1436459.jpg"> <img src="https://images.freeimages.com/images/large-previews/579/my-camera-1-1435207.jpg" alt="Flowers" style="width:auto;"> </picture>

Output:

Resize the browser window to load different images.

---

(3) Tag <template>
The <template> tag is a container to hold some HTML content hidden from the user. This hidden content can be displayed by Javascript.

Here is an example

<h1>The template Element</h1> <p>Click the button below to display the hidden content from the template element.</p> <button onclick="showContent()">Show hidden content</button> <template> <h2>Image</h2> <img src="https://images.freeimages.com/images/large-previews/106/photographer-1464286.jpg" width="214" height="204"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>

The template Element

Click the button below to display the hidden content from the template element.

Export HTML table to Excel

Code that will export html table to excel

//<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel"> var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })()

capitalize , lowercase, uppercase to HTML input Text

I have found number of JavaScript to convert text to upper while keypress. But the way we can use CSS is the best... capitalize , lowercase, uppercase

Css :
input.upper { text-transform: uppercase; } input.lower { text-transform: lowercase; } input.capital { text-transform: capitalize; }

Input Field Example.

UPPER CASE :
lower case :
Capital Case :