Tips & Tutorials – Javascript

Create HTML List From Javascript Array/Object – Simple Examples

Welcome to a tutorial on how to create an HTML list from a Javascript array or object. Need to display an array of data nicely? To create an HTML list from an array in Javascript: Create the HTML list var ol = document.createElement(“ol”); Loop through the array and append list items for (let i of …

Create HTML List From Javascript Array/Object – Simple Examples Read More »

How To Remove Table Rows & Cells In Javascript – Simple Examples

Welcome to a quick tutorial on how to remove HTML table rows and cells in Javascript. Need to dynamically update a table? Remove table rows and cells in Javascript? To remove table rows and cells in Javascript: Get the table itself – var table = document.getElementById(“TABLE-ID”); The rows can be removed using the deleteRow() function …

How To Remove Table Rows & Cells In Javascript – Simple Examples Read More »

3 Ways To Add Comma To Numbers In Javascript – Thousands Separator

Welcome to a short tutorial on how to add commas to numbers in Javascript. So you have a project that needs to display some “nice-looking numbers”? The easy ways to add commas to numbers in Javascript are: Use the toLocaleString() function var num = 1234567.89; var commas = num.toLocaleString(“en-US”); Convert the number to a string, …

3 Ways To Add Comma To Numbers In Javascript – Thousands Separator Read More »

5 Ways To Change Override CSS With Javascript – Simple Examples

Welcome to a quick tutorial on how to change or override CSS with Javascript. Want to dynamically update or change some styles on a web page? The common ways to change or override CSS in Javascript are: document.getElementById(“ID”).style.PROPERTY = “VALUE”; document.getElementById(“ID”).style.cssText = “PROPERTY: VALUE”; document.getElementById(“ID”).setAttribute(“style”, “PROPERTY: VALUE”); document.getElementById(“ID”).className = “CLASS”; document.documentElement.style.setProperty(“–VAR”, “VALUE”); That covers the …

5 Ways To Change Override CSS With Javascript – Simple Examples Read More »

How to Create Lists From JSON Data in Javascript – Simple Examples

Welcome to a quick tutorial on how to create HTML lists from JSON data in Javascript. Want to dynamically generate a list from JSON data? To create an HTML list from JSON data: Parse the JSON data into an array first (assuming it is a flat array) – var data = JSON.parse(DATA); Loop through the …

How to Create Lists From JSON Data in Javascript – Simple Examples Read More »

Add & Remove List Items In Javascript (Simple Examples)

Welcome to a quick tutorial on how to add and remove list items in Javascript. Need to dynamically update an HTML list in Javascript? To add a list item in Javascript: <ul id=”myList”></ul> var li = document.createElement(“li”); li.innerHTML = “Item”; document.getElementById(“myList”).appendChild(li); To remove a list item in Javascript: var myList = document.getElementById(“myList”); var items = …

Add & Remove List Items In Javascript (Simple Examples) Read More »

2 Easy Ways To Submit HTML Form Without Refreshing Page

Welcome to a quick tutorial and examples on how to submit an HTML form without refreshing the page. So you have an HTML form that needs to stay on the same page after submission? The common ways to submit an HTML form without reloading the page are: Submit the form using AJAX. var data = …

2 Easy Ways To Submit HTML Form Without Refreshing Page Read More »

Push Notifications With NodeJS (Step-By-Step Example)

Welcome to a tutorial and example of how to send push notifications with NodeJS. It is no secret by now that browsers are capable of handling push notifications. But just how is it done? It is by all means not a walk in the park, but here’s a quick overview. There are 3 main components …

Push Notifications With NodeJS (Step-By-Step Example) Read More »

Simple Javascript Billing System (Step-By-Step Guide)

Welcome to a tutorial on how to create a simple Javascript billing system (or bill generator). Yes, I did a quick search, and the top results are pretty much assignments done by students – They are pretty cool, but let this code ninja show you a couple more tricks. Read on! ⓘ I have included …

Simple Javascript Billing System (Step-By-Step Guide) Read More »