Loud-it(Vanilla JS)

Initialization

Script Tag

The simplest way around this is simply adding a script tag in your html <head> tag

Like this:

<script src="https://cdn.jsdelivr.net/gh/EmekaOrji/loud-it@1.0.4/assets/library/plain/loud-it.js"></script>
<!-- for the minified version -->
<script src="https://cdn.jsdelivr.net/gh/EmekaOrji/loud-it@1.0.4/assets/library/plain/loud-it.min.js"></script>

Or if you have downloaded it locally

<script src="./path/to/folder/loud-it.js"></script>
<!-- for the minified version -->
<script src="./path/to/folder/loud-it.min.js"></script>

Import Declaration

Import the module version in your js

Like this:

import LoudIt from "https://cdn.jsdelivr.net/gh/EmekaOrji/loud-it@1.0.4/assets/library/module/loud-it.module.js"

Or if you have downloaded it locally

import LoudIt from './path/to/folder/loud-it.module.js';
Like in the script tag, there is also the minified version of this

Clone the repo

Clone this repo from github and start building your project inside it

git clone https://github.com/EmekaOrji/loud-it.git

then

cd loud-it

Now, you can go on working on your project

Properties (Click row to expand)

Important

Property Type Default Value
message

Specifies the message to be alerted.

 String

{typeof message} returns 'string', also allows HTML wrapped in a string e.g "<div id='bitBum'>".

 '😐Barry Allen later Died'

😐Oopsy! You get this value if no message is specified.

Optional

Property Type Default Value
element

The parent element of the notification.

 String

Conventional querySelector params, e.g '#container .content'.

 'body'

Default parent is the <body>.
duration

The amount of time the notification lasts on screen.

 Number

{typeof duration} returns 'number'.

 3000(ms)

Time in milliseconds. The higher the value the longer it the notification.
speed

This is the speed of the entrance or exit of the notification.

 Number

{typeof speed} returns 'number'.

 500(ms)

Time in milliseconds. The lower the value the faster the speed.
delay

Specifies how long before the notification pops in.

 Number

{typeof delay} returns 'number'.

 0(ms)

Time in milliseconds. The higher the value the longer the delay.
position

Specifies the landing position of the notification on the horizontal-axis.

 String

{typeof position} returns 'string'.

 'right'

Other values are 'left' and 'center'.
mouseEffects

Specifies whether the notification element should be clickable, selectable, and focusable, using the user-select and pointer-events property.

 Boolean

{typeof mouseEffects} returns 'boolean'.

 false

true means clickable, false means not clickable.
Use CSS Properties
width

Specifies the width of the notification.

 String

{typeof width} returns 'string'.

 'min(500px, 80vw)'

All valid CSS width value. Note that you don't need to set this, because the notification was built to resize smartly based on content.
height

Specifies the height of the notification.

 String

{typeof height} returns 'string'.

 'auto'

All valid CSS height value. Note that you don't need to set this, because the notification was built to resize smartly based on content.
background

Sets background-color CSS property of the notification element.

 String

{typeof background} returns 'string'.

 '#003663'

rgb(), hex, hsl, gradients, images, and other CSS based colors are valid. Other values are 'success', 'error', 'warning' and 'info'.
opacity

Sets the opacity CSS property.

 Number/String

{typeof opacity} return value could be 'number' or 'string'.

 0.6

Value could be in percentage, but wrapped with a string like this '87%'.
color

Color of the text as in native CSS.

 String

{typeof color} returns 'string'.

 '#FFFFFF'

All valid CSS color values as in 'background' above.
fontSize

Sets the size of the text.

 String

{typeof fontSize} returns 'string'.

 'min(1.5em, 6vw)'

Valid values are the usual CSS font-size values in valid measurements: px, em, ch, %, and CSS functions calc().
fontWeight

Sets the boldness or lightness of the text.

 Number/String

{typeof fontWeight} return value could be 'number' or 'string'.

 700

Valid values are 100, 200, 300,..., 900 or 'light', 'bolder'.
top

Specifies how far from the top the notification drops.

 String

{typeof top} returns 'string'.

 '8vh'

Valid values are CSS measurement values. e.g 10px, 20%, 43em.
left

Specifies how far from the left the notification flushes.

 String

{typeof left} returns 'string'.

 'auto'

'auto' by default, so it has no effect until specified otherwise. Other valid values are the same as in 'top' above.
right

Specifies how far from the right the notification flushes.

 String

{typeof right} returns 'string'.

 '1em'

By default the notification appears '1em' away from the right. Other valid values are the same as in 'top' above.
borderRadius

Sets the roundness of the corners of the notification.

 String

{typeof borderRadius} returns 'string'.

 '0.6em'

Valid values same as in 'fontSize'.
padding

Sets the padding CSS property of the notification.

 String

{typeof padding} returns 'string'.

 '1em'

Valid values same as in 'fontSize'.
zIndex

Defines the position of the notification along the Z-axis.

 Number

{typeof zIndex} returns 'number'.

 2147483647

This is largest zIndex value, so by default the notification appears ontop of every other element in its container element including an already existing notification. Of course you can change this.

Order of Specificity

The position, right, and left property in that order are in increasing order of importance. So the left > right > position. '>' = 'is more important'
For example,

LoudIt('Pretty Dumplin', {
  right: '10%',
  position: 'center',
});

With the code above, the notification would be displayed 10% to the right of its container and not at the center because right has more importance than position.

Predefined Class

For further styling, you could make use of the predefined class .loud-box to target the notification element.

Flexibility

Having a predefined class, makes it more easy to tailor-design your notification to satisfaction. 🙄Simply, what I mean is you can style it whichever way you want! See a codepen demo here

How it works

Syntax: LoudIt(message, { options });

The function LoudIt() creates a <div> element (call it the LoudBox), sets the innerHTML to the message property, applies the necessary styling as predefined or as set in caller, then appends it to the DOM inside the predefined parent <body> or specified element value (when it was called).


The LoudBox is positioned with the position: fixed; or position: absolute; depending on the element property value. This is done by setting the position of the parent element to be position: relative; while it is view, but no worries, it is smart enough to return it to its previous state once the notification is complete.

Upcoming Features

slideFrom:

Should specify the entry direction of the notification.

Values: top, right, bottom, left.

slideTo:

Should specify the exit direction of the notification.

Values: top, right, bottom, left.

accentColor

Loud-it on Twitter