Daily Archives: October 31, 2020

JavaScript || How To Get A Variable Name As A String Using Vanilla JavaScript

The following is a module with functions which demonstrates how to get the name of a variable as a string using vanilla JavaScript.


1. Simple Variable

The example below demonstrates the use of ‘Utils.nameOf‘ to get name of a simple variable.


2. Array

The example below demonstrates the use of ‘Utils.nameOf‘ to get the name of an array.


3. Function

The example below demonstrates the use of ‘Utils.nameOf‘ to get the name of a function.


4. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || Notice.js – Simple Notification Message With Success, Warning & Error Icons Using Vanilla JavaScript

The following is a module with functions that demonstrates how to display a simple notification message with success, warning & error icons.

Using vanilla JavaScript, the message fades in and is displayed to the page, and fades out after a delay (in milliseconds). It’s look and feel can also be adjusted via CSS.

Notice.js & CSS Source

Contents

1. Basic Usage
2. Notice HTML
3. Notice.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to show the notification message. The message fades away after a specified amount of time (in milliseconds).

Sample:

Sample


2. Notice HTML

If you wish to show the messages without using JavaScript, the following is an example of the HTML used to display the notices.

Sample:

Sample

Sample:

Sample

Sample:

Sample


3. Notice.js & CSS Source

The following is the Notice.js Namespace & CSS Source. Include this in your project to start using!

The following is Notice.css.


4. More Examples

Below are more examples demonstrating the use of ‘Notice.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.