Scriptelper

A lightweight, beginner-friendly JavaScript library for DOM manipulation, Local Storage, and Fetch requests.

Scriptelper

A lightweight, beginner-friendly JavaScript library for DOM manipulation, Local Storage, and Fetch requests.

Scriptelper simplifies common JavaScript tasks with a clean, chainable API and beginner-friendly error messages.

Why Scriptelper?

Working directly with the DOM can become repetitive:

document.querySelector("#title").textContent = "Hello World";

With Scriptelper:

$.find("#title").text("Hello World");

Scriptelper focuses on:

• Simplicity
• Readability
• Chainable APIs
• Helpful error messages
• Lightweight design
• Beginner-friendly learning

Features

• DOM Selection
• Text Manipulation
• HTML Manipulation
• Event Handling
• CSS Class Helpers
• Show / Hide Elements
• Element Creation
• Attribute Helpers
• Form Value Helpers
• Local Storage Helpers
• Fetch API Helpers
• Chainable Methods

Installation

NPM

npm install scriptelper

CDN

<script src="https://unpkg.com/scriptelper"></script>

Global Instance

window.$ = new Scriptelper();

DOM Selection

find()

Returns the first matching element.

Syntax

$.find(selector);

Examples

$.find("#title");
$.find(".card");
$.find("button");

findAll()

Returns all matching elements.

Syntax

$.findAll(selector);

Example

const cards = $.findAll(".card");

cards.forEach(card => {
    card.addClass("active");
});

Element Methods

All methods below are available on elements returned by find(), findAll(), and create().

text()

Sets text content.

$.find("#title").text("Welcome");

html()

Sets HTML content.

$.find("#box").html("<b>Hello World</b>");

addClass()

Adds a CSS class.

$.find("#box").addClass("active");

removeClass()

Removes a CSS class.

$.find("#box").removeClass("active");

toggleClass()

Adds a class if it doesn't exist and removes it if it does.

$.find("#box").toggleClass("active");

replaceClass()

Replaces one class with another.

$.find("#box").replaceClass("inactive", "active");

toggle()

Shows or hides an element.

$.find("#menu").toggle();

value()

Set a value:

$.find("#name").value("Samad");

Get a value:

const name = $.find("#name").value();

attr()

Set an attribute:

$.find("#box").attr("data-id", "123");

Get an attribute:

const id = $.find("#box").attr("data-id");

on()

Adds an event listener.

$.find("#btn").on("click", () => {
    console.log("Button clicked");
});

off()

Remove all handlers:

$.find("#btn").off("click");

Remove a specific handler:

function handleClick() {
    console.log("Clicked");
}

$.find("#btn").off("click", handleClick);

appendTo()

Appends an element to a parent.

const div = $.create("div");

div.appendTo("#container");

remove()

Removes the selected element from the DOM.

$.find("#oldBox").remove();

Creating Elements

create()

Creates a new HTML element.

const div = $.create("div");

Create and append directly:

$.create("p", "#container");

Example:

$.create("p")
    .text("Hello Scriptelper")
    .appendTo("#container");

Local Storage

store()

Stores data in Local Storage.

$.store("user", {
    name: "Samad",
    age: 20
});

load()

Retrieves data from Local Storage.

const user = $.load("user");

removeItem()

Removes stored data.

$.removeItem("user");

clear()

Clears all Local Storage data.

$.clear();

Fetch Helpers

getData()

Fetches data from an API.

const users = await $.getData(
    "https://jsonplaceholder.typicode.com/users"
);

postData()

Sends data using a POST request.

await $.postData(
    "https://jsonplaceholder.typicode.com/users",
    {
        name: "Samad"
    }
);

Method Chaining

$.find("#title")
    .text("Welcome")
    .addClass("active")
    .attr("data-loaded", "true");

Example Project

HTML

<h1 id="title">Hello</h1>

<button id="btn">
    Change Text
</button>

JavaScript

$.find("#btn").on("click", () => {
    $.find("#title")
        .text("Welcome to Scriptelper!")
        .addClass("active");
});

Error Handling

Example messages:

Element not found.
Please check that the selector exists in your HTML.

Please provide a valid class name.

Please provide a URL.
Example: $.getData("https://api.example.com")

Roadmap

• css()
• show()
• hide()
• append()
• prepend()
• before()
• after()
• parent()
• children()
• animation helpers
• utility functions

Version

v1.0.0

Contributing

Contributions, bug reports, feature requests, and pull requests are welcome.

License

MIT License

About

Scriptelper is an open-source project focused on making JavaScript easier for beginners.

Built and maintained by Scriptelper Labs.

Making JavaScript easier, one line at a time.