For an explanation of what an ISO date-time string is, see this previous article: JavaScript: How to create a formatted date time string Now let’s say we get today’s date and we want to also get dates for one week ago and one week in the future. We can get today’s date in the form … Continue reading JavaScript: How to add and subtract days from ISO date-time strings
Author: Chris Nielsen
jQuery: How to use jQuery to reset select menus and text fields
jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div. Example 1 – Resetting selected This … Continue reading jQuery: How to use jQuery to reset select menus and text fields
JavaScript: How to find the count of an element in an array using filter( )
Let’s say we have an array of numbers in JavaScript that looks like this: let array = [1, 2, 3, 5, 2, 8, 9, 2]; and we want to count the number of 2’s in the array. A quick and direct way to get the count of 2’s would be to do something like this: … Continue reading JavaScript: How to find the count of an element in an array using filter( )
JavaScript: How to create a formatted date time string
In JavaScript, to get today’s date and time, all we need to do is use a call to Date() For example: let today = new Date(); This gives us today’s date and the current time, in the form of a Date object that looks like this: ‘Date’ is the key (left), and the value is … Continue reading JavaScript: How to create a formatted date time string
jQuery: How to use jQuery in a project and confirm it is working
The fastest way to make jQuery available for a project is to use a CDN in the HEAD portion of the HTML. For example, here is a CDN for jQuery 3.3.1: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the … Continue reading jQuery: How to use jQuery in a project and confirm it is working
HTML & CSS: How to expand text on hover
In this article, I will show how to display short text on a web page that can expand to longer text on hover. The trick is to use two spans inside of a div. The first span contains the shorter text and the second span contains the longer text. For example: <div class=”expanded-text”> <p class=”text”> … Continue reading HTML & CSS: How to expand text on hover
HTML & CSS: How to stack Font Awesome icons
In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called “icons-stack”, which looks like: .icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } … Continue reading HTML & CSS: How to stack Font Awesome icons
Atom: How to run MySQL queries in Atom using a package called Data Atom
In this article, I will demonstrate how to run queries from within Atom using a package called ‘Data Atom’. Step 1: Install Data Atom package Warning: Before attempting to install any packages in Atom, make sure you disable any real-time virus or malware protection programs you have running, such as Malwarebytes. In the Atom Settings … Continue reading Atom: How to run MySQL queries in Atom using a package called Data Atom
Spacebars: How to handle an empty data container when iterating with #each
In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example: {{ #each dataContainer }} … HTML tags here … … HTML tags here … {{ /each }} An each block starts with #each and … Continue reading Spacebars: How to handle an empty data container when iterating with #each
HTML & CSS: How to create a progress bar with stacked divs
In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs