wer.js

Wer.js is developed special for Boat List

Generating html strings

How to generate html strings with wer.js?

Let's first require the package

var wer = require('wer.js');

Let's create a new html code!

var wer = require('wer.js');

var html = new wer.html()

Now we can render it using render function!

var wer = require('wer.js');

var html = new wer.html()

var rendered = html.render()

Now we can console log it!

But, you will se an error because you didn't added code to wer.html();

Let's do a html code. Our first html code will have a p with the content: Hello World!, with a content in it!

Let's do it!

var wer = require('wer.js');

var html = new wer.html({
    p: {
        value: 'Hello World!'
    }
})

var rendered = html.render()

Now we can console log rendered and we will see a html code!

You can use it with Experss!

var wer = require('wer.js')

var express = require('express')
var app = express()

var html = new wer.html({
    p: {
        value: 'Hello World!'
    }
})

var rendered = html.render()

app.get('/', (req, res) => {
    res.send(rendered)
})

app.listen(9090)

We will see in localhost:9090: Hello World!!

Classes and IDs

Here I will show you how to use classes and IDs in wer! We know, of course, an element is just an object, Here is an example :

p: {
    value: 'Hello World!'
}

We can add more, like:

p: {
    value: 'Hello World!'
},
p: {
    value: 'Hello World!'
}

:P

We can add a proprety to a element named: class

Class is a string, We can use class like this: class: 'button'

Or, if we want more classes: class: 'button title' we can add more classes with space beetwen. :P

This is an example of an element using 1 class

p: {
    value: 'Hello World!',
    class: 'title'
}

We can add more, like that:

p: {
    value: 'Hello World!',
    class: 'title rainbow'
}

We can add of course IDs using the id proprety: id: 'here id'

Exemple of an element with the id lol:

p: {
    value: 'Hello World!',
    id: 'lol'
}

Awesome right?

Ye, we can of course do thing like: <p> <p> P IN P! </p> </p>

How we do that?

p: {
    value: new wer.html({
        ...More element here
    }).render(),
    id: 'lol'
}

Enjoy!