Tinkr

BETA

learn-ez.js

A beginner-friendly JavaScript library that makes common operations easier

Educational Philosophy: learn-ez.js simplifies JavaScript's syntax and common gotchas, but students still write their own algorithms and logic. We're removing the language barriers, not the problem-solving challenges. Students still need to think through loops, conditions, and data structures - they just won't struggle with .json() or arr[arr.length-1] anymore.

<script src="https://tinkr.tech/learn-ez.js"></script>
Download Library

Key Features

🚀 Simple Fetch

No more response.json() or error handling boilerplate

// GET request
const data = await ez.get("/api/users");

// POST request  
const result = await ez.post("/api/users", {
name: "Alice"
});

🎯 Easy DOM

Simplified element selection and manipulation

// Select elements
const btn = ez.select("#myButton");
const items = ez.selectAll(".item");

// Add event listener
ez.on("click", btn, () => {
console.log("Clicked!");
});

📊 Array Helpers

Python-like array operations

// Array utilities
const last = ez.last(myArray);
const nums = ez.range(10); 
const total = ez.sum([1, 2, 3]);
const unique = ez.unique([1, 1, 2]);
const shuffled = ez.shuffle(array);

Quick Start

Add this script tag to your HTML file, and the ez object will be available globally! 
<!DOCTYPE html>
      <html>
      <head>
        <title>My Page</title>
        <script src="/learn-ez.js"></script>
      </head>
      <body>
        <button id="myButton">Click me!</button>
        
        <script>
          ez.on("click", "#myButton", async () => {
            const data = await ez.get("/api/data");
            console.log(data);
          });
        </script>
      </body>
      </html>

API Reference

DOM Methods

Method Description Example
ez.select(selector) Get single element ez.select("#header")
ez.selectAll(selector) Get all matching elements as array ez.selectAll(".item")
ez.on(event, element, fn) Add event listener ez.on("click", btn, handleClick)
ez.create(tag, props) Create element with properties ez.create("div", {class: "box", text: "Hi"})
ez.show(element) Show hidden element ez.show("#modal")
ez.hide(element) Hide element ez.hide("#modal")

HTTP Methods

Method Description Example
ez.get(url) GET request, returns JSON await ez.get("/api/users")
ez.post(url, data) POST request with JSON body await ez.post("/api/users", {name: "Bob"})

Array Methods

Method Description Example
ez.first(array) Get first element ez.first([1, 2, 3]) → 1
ez.last(array) Get last element ez.last([1, 2, 3]) → 3
ez.range(n) Create array from 0 to n-1 ez.range(5) → [0,1,2,3,4]
ez.sum(array) Sum all numbers ez.sum([1, 2, 3]) → 6
ez.unique(array) Remove duplicates ez.unique([1, 1, 2]) → [1, 2]
ez.shuffle(array) Randomize array order ez.shuffle([1, 2, 3]) → [2, 1, 3]

Storage Methods

Method Description Example
ez.getLocal(key) Get from localStorage (auto-parsed) ez.getLocal("user")
ez.setLocal(key, value) Save to localStorage (auto-stringified) ez.setLocal("user", {name: "Alice"})

Utility Methods

Method Description Example
ez.sleep(ms) Wait for milliseconds await ez.sleep(1000)
ez.random(min, max) Random integer between min and max ez.random(1, 10)
ez.randomFrom(array) Pick random element ez.randomFrom(["a", "b", "c"])
ez.isArray(value) Check if value is array ez.isArray([1, 2]) → true
ez.isObject(value) Check if value is object ez.isObject({a: 1}) → true
ez.assert(condition, msg) Test assertion ez.assert(x > 0, "x must be positive")

Better Error Messages

learn-ez.js provides helpful error messages instead of cryptic JavaScript errors:

❌ Standard JavaScript Error:
Cannot read property "style" of null
✅ learn-ez.js Error:
No element found with selector ".my-class". 
          Check your HTML and make sure the element exists!

Complete Example

<!DOCTYPE html>
      <html>
      <head>
        <title>Todo App</title>
        <script src="/learn-ez.js"></script>
      </head>
      <body>
        <h1>My Todo List</h1>
        <input id="todoInput" type="text" placeholder="Add a todo">
        <button id="addBtn">Add</button>
        <ul id="todoList"></ul>
      
        <script>
          // Load saved todos
          let todos = ez.getLocal("todos") || [];
          
          function renderTodos() {
            const list = ez.select("#todoList");
            list.innerHTML = "";
            
            todos.forEach((todo, i) => {
              const li = ez.create("li", {
                text: todo,
                style: {cursor: "pointer"}
              });
              ez.on("click", li, () => removeTodo(i));
              list.appendChild(li);
            });
          }
          
          function addTodo() {
            const input = ez.select("#todoInput");
            if (input.value) {
              todos.push(input.value);
              ez.setLocal("todos", todos);
              input.value = "";
              renderTodos();
            }
          }
          
          function removeTodo(index) {
            todos.splice(index, 1);
            ez.setLocal("todos", todos);
            renderTodos();
          }
          
          // Set up events
          ez.on("click", "#addBtn", addTodo);
          ez.on("keyup", "#todoInput", (e) => {
            if (e.key === "Enter") addTodo();
          });
          
          // Initial render
          renderTodos();
        </script>
      </body>
      </html>