0.0.1 • Published 2 years ago
nodend-electron v0.0.1
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(); // initializing 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!!!
0.0.1
2 years ago