What's new

Added CJS support: you can use require()!

User Manual

This package lets you create web apps with Bootstrap and jQuery. Let's try!

Step 1. Import package and write "Hello World"

import * as nodend from "nodend"; // Import nodend

const app = nodend(); // Initialize application
app.struct( // Create DOM structure
    app.text("Hello World!") // Put text (<span>) in your HTML
)
console.log(app.html) // -> "<span>Hello World</span>"

Step 2. Use DOM templates

let divCard = app.div(
    app.header("Hello"),
    app.text("World!")
)
app.struct( // Create DOM structure
    app.header("DOM Templates"),
    divCard,
    divCard,
    divCard
)

Step 3. Use text templates and inline Node.js

app.struct( // Create DOM structure
    app.text("2 + 2 = " + (2 + 2)); // 2 + 2 = 4
)

// OR //

let secretTokens = {
    "user": "qwertyuiopasdfghjkl97531"
}
let username = "user";
app.struct( // Create DOM structure
    app.text("Your secret token: " + secretTokens[username]); // Your secret token: qwertyuiopasdfghjkl97531
)

Step 4. Tag-in-tag structure

app.struct( // Create DOM structure
    app.div(
        app.div(
            app.text(
                "This in two divs"
            )
        )
    ),
    app.div(
        app.div(
            app.text(
                "This in two divs too"
            )
        )
    )
)

Step 5. Tag's properties

app.struct( // Create DOM structure
    app.div(
        {style: "color: green"},
        "Green text",
    )
)

Step 6. Set app's CSS

app.setCSS(
    "span", {
        color: "red"
    },
    "div", {
        background_color: "gray",
        border_radius: "100%"
    }
)
app.struct( // Create DOM structure
    app.div(
        app.text("Grey div and red text!")
    )
)

All methods

const app = nodend() // initialize application

app.main(); // <main>
app.hyper(); // <a>
app.text(); // <span>
app.div(); // <div>
app.script(); // <script>
app.ulist(); // <ul>
app.olist(); // <ol>
app.interaction(); // <input>
app.header(); // <h1>
app.flexbox(); // <div> (display: flex, justify-content: space-around;)
app.br(); // <br>
app.img(); // <img>

P.S. Happy Holidays!!!