@haneulab/javascript-library-static NPM

@haneulab/JavaScript-Library-Static

A simple JavaScript library to enhance development environment for static web projects.

version 1.1.1

Installation

Install this package via npm i @haneulab/javascript-library-static --save
Install third-party dependency browserify via npm install -g browserify

API Methods

Our API provides methods in three categories.

Creator
- Give you the ability to create a desired element with specific attributes and stylings in your mind through script.
Appender
- Give you the similar ability as parent.appendChild(child), except that you will have an additional ability to append a list of child elements at each callback, which is useful when appending a list of <li> items into <ul> as an example.
Defaultor
- Give you the preset style of pre-determinted elements. These elements include <header>, <nav>, <main>, and <footer>. The preset style includes fixed [number]vh,[number]vw, min-height & max-height, and min-width & max-width

Each of provided methods and their descriptions are shown in the table below.

Cateogory	Method Title	Description	a	b	c
creator	`app.newElment(a,b,c)`	Create new aributrary element	wanted element ex) `"p"`	Attribute Object	Style Object
creator	`app.newDiv(a,b)`	Create new `<div></div>` element	Attribute Object	Style Object	-
creator	`app.newSection(a,b)`	Create new `<section></section>` element	Attribute Object	Style Object	-
creator	`app.newUl(a,b)`	Create new `<ul></ul>` element	Attribute Object	Style Object	-
creator	`app.newLi(a,b)`	Create new `<li></li>` element	Attribute Object	Style Object	-
creator	`app.newP(a,b,c)`	Create new `<p></p>` element	Attribute Object	Style Object	Text Content
creator	`app.newA(a,b,c)`	Create new `<a></a>` element	Attribute Object	Style Object	Text Content
creator	`app.newCode(a,b,c)`	Create new `<code></code>` element	Attribute Object	Style Object	Text Content
appender	`app.appender(a,b)`	Append `b` element to `a` element	Parent	Child	-

Usage

create app.js file via touch app.js
create index.html file via touch index.html and write basic <html>, <head>, and <body> syntax.
In your app.js, do the following :
- requiring package via const app = require("@haneulab/javascript-library-static");
- write your program
- browserify app.js into app.bundle.js via browserify app.js > app.bundle.js
Now in your root, you should have the following files check
- index.html
- app.js
- app.bundle.js
If All files are there, include the following script tag into your index.html
```
<script src="./app.bundle.js" defer></script>
```
If Missing `app.bundle.js, please make sure you have browserify installed in your machine.

Program example

the following code is in your app.js file.

// require the project to use its methods
const App = require("@hl/javascript-library-static");
//

// creating elements & appending child to parent
// takes two argument (attribute-object, styling-object)
// * create parent div
const parentDiv = app.newDiv({
    "class":"parent",
    "id":"main-container"
}, {
    "backgroundColor": "#222", // dark-themed div
    "width": "max-content", // max-content width
    "margin": "0 auto" // centered to the screen
});
//
// * create child paragraph
const childParagraph = app.newP({
    "class":"child",
    "id":"main-paragraph"
}, {
    "color":"whitesmoke", // text color to be whitish
    "text-align":"start", // text alignment to the start of an element
});
childParagraph.textContent = "Welcome, everyone!" // adding text content to the paragraph
//
// appending elements
// takes two argument (parent, child)
// * append paragraph to div
app.appender(parentDiv, childParagraph);
app.appender(document.querySelector("body"), parentDiv);

Now run in command browserify app.js > app.bundle.js

Then include the script tag with app.bundle.js <script src="./app.bundle.js></script>

Should work now!

@everything-registry/sub-chunk-384 @zalastax/nolb-_han

3 years ago

3 years ago

3 years ago

3 years ago